diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7241ea9..d1c0d93 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -41,5 +41,6 @@
"typescript.suggest.autoImports": true,
"editor.tabSize": 2,
"editor.insertSpaces": true,
- "editor.detectIndentation": false
+ "editor.detectIndentation": false,
+ "git.ignoreLimitWarning": true
}
diff --git a/TouchVueThree/.eslintrc.cjs b/TouchVueThree/.eslintrc.cjs
index e28b59e..c46465a 100644
--- a/TouchVueThree/.eslintrc.cjs
+++ b/TouchVueThree/.eslintrc.cjs
@@ -1,24 +1,28 @@
-/* eslint-env node */
-require('eslint-plugin-vue')
-
module.exports = {
root: true,
- extends: [
- 'eslint:recommended',
- 'plugin:vue/vue3-recommended',
- ],
- parserOptions: {
- ecmaVersion: 'latest',
- sourceType: 'module',
- },
env: {
browser: true,
es2021: true,
node: true,
},
+ extends: [
+ 'eslint:recommended',
+ 'plugin:vue/vue3-recommended',
+ 'plugin:@typescript-eslint/recommended',
+ // './.eslintrc-auto-import.json', // 自动导入的全局变量（安装依赖后自动生成）
+ ],
+ parser: 'vue-eslint-parser',
+ parserOptions: {
+ ecmaVersion: 'latest',
+ parser: '@typescript-eslint/parser',
+ sourceType: 'module',
+ },
+ plugins: ['vue', '@typescript-eslint'],
rules: {
'vue/multi-word-component-names': 'off',
- 'vue/no-unused-vars': 'warn',
- 'no-unused-vars': 'warn',
+ '@typescript-eslint/no-explicit-any': 'warn',
+ '@typescript-eslint/no-unused-vars': 'warn',
+ 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+ 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
}
diff --git a/TouchVueThree/PROJECT_STRUCTURE.md b/TouchVueThree/PROJECT_STRUCTURE.md
new file mode 100644
index 0000000..3cd5600
--- /dev/null
+++ b/TouchVueThree/PROJECT_STRUCTURE.md
@@ -0,0 +1,323 @@
+# 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`
+
+### 组件命名规则
+
+```typescript
+// ✅ 推荐
+
+
+// ❌ 避免
+
+```
+
+## 🔧 开发规范
+
+### 1. Composables 使用规范
+
+```typescript
+// 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 使用规范
+
+```typescript
+// 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 调用规范
+
+```typescript
+// 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. 组件引入规范
+
+```vue
+
+```
+
+## 📝 注释规范
+
+```typescript
+/**
+ * 用户登录
+ * @param credentials 登录凭证
+ * @returns Promise
+ */
+export async function login(credentials: LoginParams): Promise {
+ // 实现逻辑
+}
+```
+
+## 🚀 启动命令
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 类型检查
+pnpm type-check
+
+# 代码检查
+pnpm lint
+
+# 格式化代码
+pnpm format
+
+# 构建生产版本
+pnpm build
+
+# 预览生产版本
+pnpm preview
+
+# 打包分析
+pnpm analyze
+```
+
+## 📌 下一步计划
+
+1. ✅ 目录结构已创建
+2. ✅ package.json 已优化
+3. ⏳ 安装依赖：`pnpm install`
+4. ⏳ 创建基础配置文件
+5. ⏳ 开发核心功能
+
+---
+
+**更新时间**: 2026-01-12
+**版本**: 2.0.0
+**技术栈**: Vue 3.4 + TypeScript 5.4 + Element Plus 2.5 + Pinia 2.1
diff --git a/TouchVueThree/index.html b/TouchVueThree/index.html
index 2e687e6..fd3eab0 100644
--- a/TouchVueThree/index.html
+++ b/TouchVueThree/index.html
@@ -20,6 +20,6 @@
-
+