157 lines
5.5 KiB
Markdown
157 lines
5.5 KiB
Markdown
|
||
|
||
|
||
|
||
## 🚀 项目亮点
|
||
|
||
基于 **Vue3.5** + **Element-Plus-X** + **hook-fetch** + **TypeScript** + **Eslint9** 开发的企业级AI应用模板，快速构建仿豆包/通义的全栈AI项目。
|
||
|
||
## 💡 核心优势
|
||
- 最新技术栈：Vue3.5+/Vite6/Pinia3/TypeScript5
|
||
- 流式交互：Hook-Fetch支持Server-Sent Events，插件化写法优雅的一批
|
||
- 企业级规范：ESLint/Stylelint/husky/commitlint全链路校验
|
||
- 全栈项目：集成 后端服务，快速开发
|
||
- 开箱即用：内置动态路由、状态管理、组件库封装、hooks封装
|
||
|
||
## 🎯 开发文档
|
||
|
||
|
||
## 🔗 关键链接
|
||
|
||
|
||
| 📚 前端文档 | 开发指南/项目说明 | [快速了解项目](https://chat-docs.element-plus-x.com) |
|
||
|
||
## 🧰 核心功能
|
||
|
||
- 使用 Vue3.5+ 各种新特性的支持，让开发更有效率
|
||
- 采用 Vite6.3+ 作为项目开发、打包工具
|
||
- 使用 Pinia3.0+ 作为全局状态管理库，轻量、优雅、易用，集成 Pinia 持久化插件
|
||
- 使用 TypeScript5.8+ 增强项目的代码规范和可读性
|
||
- 使用 Unocss 预设样式，更快书写简单的样式
|
||
- 弃用 Axios (不支持流式请求) 改用 Hook-Fetch (支持流模式，插件化封装，写法极度优雅) 进行全局的请求封装
|
||
- 使用 VueRouter 配置动态路由权限拦截、路由懒加载
|
||
- 使用 KeepAlive 对页面进行缓存
|
||
- 封装了一些好用的组件和Hooks，增强用户交互体验
|
||
- 使用 ESLint9+、Stylelint16+ 代码校验规范、同时统一保存格式化代码
|
||
- 使用 husky、lint-staged、commitlint、cz-git 规范提交信息
|
||
|
||
## 📦 安装与运行
|
||
|
||
```bash
|
||
|
||
# 安装依赖（推荐pnpm 避免幻影依赖）
|
||
pnpm install
|
||
|
||
# 开发模式
|
||
pnpm run dev
|
||
|
||
# 生产构建
|
||
pnpm build
|
||
|
||
# 代码校验
|
||
pnpm lint # ESLint检测
|
||
pnpm lint:stylelint # 样式格式化
|
||
pnpm cz # 规范提交（自动执行lint）
|
||
```
|
||
|
||
|
||
### 服务端启动
|
||
目录：E:\devDemo\Yi\Yi.Abp.Net8\src\Yi.Abp.Web
|
||
```bash
|
||
dotnet run
|
||
```
|
||
|
||
## 🧸 即将推出 （含 接口联调）
|
||
- [x] 会话管理
|
||
- [x] 发送消息
|
||
- [x] 登录注册
|
||
- [ ] md 渲染
|
||
- [ ] 编辑输入框
|
||
- [ ] 文件上传
|
||
- [ ] 其他...
|
||
|
||
深色主题样式编写指南
|
||
|
||
1. 在 src/styles/dark-theme.scss 中添加样式
|
||
|
||
所有深色主题样式都使用 [data-theme="dark"] 选择器包裹：
|
||
|
||
/* ========== 组件名称深色样式 ========== */
|
||
[data-theme="dark"] {
|
||
.your-component-class {
|
||
background-color: #1f2937 !important;
|
||
color: #e5e7eb !important;
|
||
border-color: #374151 !important;
|
||
}
|
||
}
|
||
|
||
2. 常用深色主题颜色值
|
||
┌─────────────────────────┬───────────────────┐
|
||
│ 用途 │ 颜色值 │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 主背景 │ #111827 │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 次级背景（卡片、弹窗） │ #1f2937 │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 三级背景（hover、表头） │ #374151 │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 主文字 │ #f3f4f6 / #f9fafb │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 次级文字 │ #e5e7eb │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 三级文字 │ #9ca3af │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 边框浅色 │ #374151 │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 边框深色 │ #4b5563 │
|
||
├─────────────────────────┼───────────────────┤
|
||
│ 主色调 │ #60a5fa │
|
||
└─────────────────────────┴───────────────────┘
|
||
3. 覆盖 Tailwind 工具类
|
||
|
||
[data-theme="dark"] {
|
||
.bg-white {
|
||
background-color: #374151 !important;
|
||
}
|
||
|
||
.text-gray-700 {
|
||
color: #e5e7eb !important;
|
||
}
|
||
}
|
||
|
||
4. 覆盖 Element Plus 组件
|
||
|
||
[data-theme="dark"] {
|
||
.el-card {
|
||
background-color: #1f2937 !important;
|
||
border-color: #374151 !important;
|
||
}
|
||
}
|
||
|
||
5. 使用 CSS 变量（推荐）
|
||
|
||
在 src/styles/var.scss 的 [data-theme="dark"] 块中定义变量，然后在组件中使用：
|
||
|
||
// var.scss
|
||
[data-theme="dark"] {
|
||
--my-component-bg: #1f2937;
|
||
}
|
||
|
||
// dark-theme.scss
|
||
[data-theme="dark"] {
|
||
.my-component {
|
||
background-color: var(--my-component-bg) !important;
|
||
}
|
||
}
|
||
|
||
6. 组件内动态颜色（JS 方式）
|
||
|
||
如果需要在 JS 中动态获取颜色：
|
||
|
||
<script setup>
|
||
import { useColorMode } from '@vueuse/core';
|
||
|
||
const mode = useColorMode();
|
||
const bgColor = computed(() => mode.value === 'dark' ? '#1f2937' : '#ffffff');
|
||
</script>
|