10 KiB
10 KiB
TouchVueThree 项目目录结构说明
PC 端微信客服系统 - Vue3 + TypeScript + Element Plus
📁 目录结构
TouchVueThree/
├── public/ # 静态资源（不会被编译）
│ ├── favicon.ico
│ └── assets/ # 图片、表情包等静态资源
│
├── src/
│ ├── api/ # API 接口层
│ │ ├── request.ts # Axios 封装（拦截器、错误处理）
│ │ ├── interceptors.ts # 请求/响应拦截器
│ │ └── modules/ # 按业务模块划分的接口
│ │ ├── user.ts # 用户相关接口
│ │ ├── wechat.ts # 微信相关接口
│ │ ├── ai.ts # AI 相关接口
│ │ └── common.ts # 通用接口（文件上传等）
│ │
│ ├── assets/ # 资源文件
│ │ ├── images/ # 图片资源
│ │ ├── icons/ # 图标资源
│ │ └── styles/ # 样式文件
│ │ ├── variables.scss # 全局变量（颜色、字体）
│ │ ├── mixins.scss # SCSS 混入
│ │ ├── reset.scss # 样式重置
│ │ └── global.scss # 全局样式
│ │
│ ├── components/ # 公共组件
│ │ ├── common/ # 通用组件（与业务无关）
│ │ │ ├── Button/ # 自定义按钮
│ │ │ ├── Dialog/ # 自定义对话框
│ │ │ ├── Loading/ # 加载组件
│ │ │ ├── Empty/ # 空状态
│ │ │ └── ErrorBoundary/ # 错误边界
│ │ │
│ │ └── business/ # 业务组件（微信客服相关）
│ │ ├── ChatWindow/ # 聊天窗口
│ │ ├── ContactList/ # 联系人列表
│ │ ├── SessionList/ # 会话列表
│ │ ├── CustomerList/ # 客服账号列表
│ │ ├── ProfileCard/ # 客户画像卡片
│ │ ├── EmojiPicker/ # 表情选择器
│ │ ├── FileUpload/ # 文件上传
│ │ └── QuickReply/ # 快捷回复
│ │
│ ├── composables/ # 组合式函数（Composition API）
│ │ ├── core/ # 核心功能
│ │ │ ├── useAuth.ts # 认证登录
│ │ │ ├── useWebSocket.ts # WebSocket 管理
│ │ │ ├── useEventBus.ts # 事件总线
│ │ │ └── useRequest.ts # 请求封装
│ │ │
│ │ └── business/ # 业务功能
│ │ ├── useMessages.ts # 消息管理
│ │ ├── useContacts.ts # 联系人管理
│ │ ├── useSessions.ts # 会话管理
│ │ ├── useAi.ts # AI 功能
│ │ └── useUpload.ts # 文件上传
│ │
│ ├── directives/ # 自定义指令
│ │ ├── vLoading.ts # 加载指令
│ │ ├── vLazyLoad.ts # 懒加载指令
│ │ └── vPermission.ts # 权限指令
│ │
│ ├── layouts/ # 页面布局
│ │ ├── DefaultLayout.vue # 默认布局
│ │ └── ChatLayout.vue # 聊天布局（三栏）
│ │
│ ├── router/ # 路由配置
│ │ ├── index.ts # 路由主文件
│ │ ├── guards.ts # 路由守卫（权限控制）
│ │ └── routes.ts # 路由配置
│ │
│ ├── stores/ # Pinia 状态管理
│ │ ├── index.ts # Store 统一出口
│ │ └── modules/ # Store 模块
│ │ ├── user.ts # 用户状态
│ │ ├── app.ts # 应用全局状态
│ │ ├── websocket.ts # WebSocket 状态
│ │ └── wechat/ # 微信模块
│ │ ├── contacts.ts # 联系人
│ │ ├── messages.ts # 消息
│ │ ├── sessions.ts # 会话
│ │ └── ai.ts # AI
│ │
│ ├── types/ # TypeScript 类型定义
│ │ ├── global.d.ts # 全局类型
│ │ ├── api.d.ts # API 类型
│ │ ├── user.ts # 用户类型
│ │ ├── wechat.ts # 微信类型
│ │ └── websocket.ts # WebSocket 类型
│ │
│ ├── utils/ # 工具函数
│ │ ├── common.ts # 通用工具
│ │ ├── date.ts # 日期处理
│ │ ├── format.ts # 格式化
│ │ ├── validator.ts # 验证
│ │ ├── storage.ts # 本地存储
│ │ ├── event-bus.ts # 事件总线
│ │ └── sentry/ # 错误监控
│ │ └── index.ts
│ │
│ ├── views/ # 页面组件
│ │ ├── Login/ # 登录页
│ │ │ └── index.vue
│ │ │
│ │ ├── Chat/ # 聊天主页（核心功能）
│ │ │ ├── index.vue
│ │ │ └── components/ # 聊天页专用组件
│ │ │ ├── Sidebar.vue # 左侧边栏
│ │ │ ├── Main.vue # 中间聊天区
│ │ │ └── Panel.vue # 右侧面板
│ │ │
│ │ ├── Dashboard/ # 数据看板
│ │ │ └── index.vue
│ │ │
│ │ ├── Settings/ # 系统设置
│ │ │ └── index.vue
│ │ │
│ │ ├── PowerCenter/ # 能力中心
│ │ │ ├── CustomerManagement/ # 客户管理
│ │ │ ├── ContentManagement/ # 内容管理
│ │ │ ├── DataStatistics/ # 数据统计
│ │ │ └── AiTraining/ # AI 训练
│ │ │
│ │ └── 404/ # 404 页面
│ │ └── index.vue
│ │
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
│
├── .env.development # 开发环境变量
├── .env.production # 生产环境变量
├── .eslintrc.cjs # ESLint 配置
├── .prettierrc # Prettier 配置
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 配置
└── package.json # 项目配置
🎯 命名规范
文件命名
-
组件文件：PascalCase（大驼峰）
ChatWindow.vue,MessageList.vue
-
工具文件：camelCase（小驼峰）
common.ts,useAuth.ts
-
类型文件：camelCase 或 kebab-case
user.ts,api.d.ts
目录命名
- kebab-case（短横线）或 camelCase
components/business,composables/core
组件命名规则
// ✅ 推荐
<script setup lang="ts" name="ChatWindow">
// 组件逻辑
</script>
// ❌ 避免
<script setup lang="ts">
// 没有 name 属性
</script>
🔧 开发规范
1. Composables 使用规范
// composables/core/useAuth.ts
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores'
export function useAuth() {
const userStore = useUserStore()
const isLoggedIn = computed(() => userStore.isLoggedIn)
const login = async (credentials) => {
// 登录逻辑
}
return {
isLoggedIn,
login
}
}
2. Store 使用规范
// stores/modules/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useUserStore = defineStore('user', () => {
// State
const user = ref(null)
const token = ref('')
// Getters
const isLoggedIn = computed(() => !!token.value)
// Actions
const setUser = (userData) => {
user.value = userData
}
return { user, token, isLoggedIn, setUser }
}, {
persist: {
key: 'user-store',
paths: ['user', 'token']
}
})
3. API 调用规范
// api/modules/user.ts
import request from '../request'
export const loginApi = (data: LoginParams) => {
return request('/auth/login', data, 'POST')
}
export const getUserInfoApi = () => {
return request('/user/info', {}, 'GET')
}
4. 组件引入规范
<script setup lang="ts">
// 1. Vue API
import { ref, computed, onMounted } from 'vue'
// 2. 第三方库
import { ElMessage } from 'element-plus'
// 3. Store
import { useUserStore } from '@/stores'
// 4. Composables
import { useAuth } from '@/composables/core/useAuth'
// 5. 类型
import type { User } from '@/types/user'
// 6. 组件
import ChatWindow from '@/components/business/ChatWindow/index.vue'
</script>
📝 注释规范
/**
* 用户登录
* @param credentials 登录凭证
* @returns Promise<UserInfo>
*/
export async function login(credentials: LoginParams): Promise<UserInfo> {
// 实现逻辑
}
🚀 启动命令
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 类型检查
pnpm type-check
# 代码检查
pnpm lint
# 格式化代码
pnpm format
# 构建生产版本
pnpm build
# 预览生产版本
pnpm preview
# 打包分析
pnpm analyze
📌 下一步计划
- ✅ 目录结构已创建
- ✅ package.json 已优化
- ⏳ 安装依赖：
pnpm install - ⏳ 创建基础配置文件
- ⏳ 开发核心功能
更新时间: 2026-01-12 版本: 2.0.0 技术栈: Vue 3.4 + TypeScript 5.4 + Element Plus 2.5 + Pinia 2.1