触客宝 Pro - Vue 3 版本
基于 Vite + Vue 3 + Tailwind CSS 构建的现代化工作台应用。
技术栈
- Vue 3 - 渐进式 JavaScript 框架
- Vite - 下一代前端构建工具
- Tailwind CSS - 实用优先的 CSS 框架
- ESLint - 代码质量检查
- Prettier - 代码格式化
项目结构
TouchVueThree/
├── src/
│ ├── assets/ # 静态资源
│ │ └── style.css # 全局样式（Tailwind 指令）
│ ├── components/ # 公共组件
│ │ ├── Sidebar.vue # 全局左侧导航栏
│ │ └── AICreditPill.vue # AI算力展示胶囊
│ ├── views/ # 页面视图
│ │ ├── Chat/ # 聊天模块
│ │ ├── Accounts.vue # 账号管理
│ │ └── Analytics.vue # 数据看板
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── public/ # 公共静态资源
├── index.html # HTML 入口
└── vite.config.js # Vite 配置
开发指南
安装依赖
npm install
# 或
pnpm install
# 或
yarn install
启动开发服务器
npm run dev
# 或
pnpm dev
# 或
yarn dev
开发服务器将在 http://localhost:5173 启动。
构建生产版本
npm run build
# 或
pnpm build
# 或
yarn build
构建产物将输出到 dist/ 目录。
预览生产构建
npm run preview
# 或
pnpm preview
# 或
yarn preview
代码检查
# ESLint 检查并自动修复
npm run lint
# Prettier 格式化代码
npm run format
环境变量
复制 .env.example 为 .env 并根据需要配置环境变量。
cp .env.example .env
功能模块
1. 聊天模块 (Chat)
- ChatList - 消息列表
- ChatWindow - 聊天窗口
- ChatDetail - CRM 资料详情
2. 账号管理 (Accounts)
- 微信账号管理
- 账号状态监控
3. 数据看板 (Analytics)
- 业务数据统计
- 可视化图表展示
开发规范
- 使用 Vue 3 Composition API
- 组件采用
<script setup>语法 - 样式使用 Tailwind CSS 工具类
- 代码提交前运行 lint 和 format
许可证
MIT