🚀 项目亮点
基于 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封装
🎯 开发文档
🔗 关键链接
| 📚 前端文档 | 开发指南/项目说明 | 快速了解项目 |
🧰 核心功能
- 使用 Vue3.5+ 各种新特性的支持，让开发更有效率
- 采用 Vite6.3+ 作为项目开发、打包工具
- 使用 Pinia3.0+ 作为全局状态管理库，轻量、优雅、易用，集成 Pinia 持久化插件
- 使用 TypeScript5.8+ 增强项目的代码规范和可读性
- 使用 Unocss 预设样式，更快书写简单的样式
- 弃用 Axios (不支持流式请求) 改用 Hook-Fetch (支持流模式，插件化封装，写法极度优雅) 进行全局的请求封装
- 使用 VueRouter 配置动态路由权限拦截、路由懒加载
- 使用 KeepAlive 对页面进行缓存
- 封装了一些好用的组件和Hooks，增强用户交互体验
- 使用 ESLint9+、Stylelint16+ 代码校验规范、同时统一保存格式化代码
- 使用 husky、lint-staged、commitlint、cz-git 规范提交信息
📦 安装与运行
# 安装依赖（推荐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
dotnet run
🧸 即将推出 （含 接口联调）
- 会话管理
- 发送消息
- 登录注册
- md 渲染
- 编辑输入框
- 文件上传
- 其他...
深色主题样式编写指南
- 在 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; } }
- 常用深色主题颜色值 ┌─────────────────────────┬───────────────────┐ │ 用途 │ 颜色值 │ ├─────────────────────────┼───────────────────┤ │ 主背景 │ #111827 │ ├─────────────────────────┼───────────────────┤ │ 次级背景（卡片、弹窗） │ #1f2937 │ ├─────────────────────────┼───────────────────┤ │ 三级背景（hover、表头） │ #374151 │ ├─────────────────────────┼───────────────────┤ │ 主文字 │ #f3f4f6 / #f9fafb │ ├─────────────────────────┼───────────────────┤ │ 次级文字 │ #e5e7eb │ ├─────────────────────────┼───────────────────┤ │ 三级文字 │ #9ca3af │ ├─────────────────────────┼───────────────────┤ │ 边框浅色 │ #374151 │ ├─────────────────────────┼───────────────────┤ │ 边框深色 │ #4b5563 │ ├─────────────────────────┼───────────────────┤ │ 主色调 │ #60a5fa │ └─────────────────────────┴───────────────────┘
- 覆盖 Tailwind 工具类
[data-theme="dark"] { .bg-white { background-color: #374151 !important; }
.text-gray-700 {
color: #e5e7eb !important;
}
}
- 覆盖 Element Plus 组件
[data-theme="dark"] { .el-card { background-color: #1f2937 !important; border-color: #374151 !important; } }
- 使用 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; } }
- 组件内动态颜色（JS 方式）
如果需要在 JS 中动态获取颜色：
<script setup> import { useColorMode } from '@vueuse/core'; const mode = useColorMode(); const bgColor = computed(() => mode.value === 'dark' ? '#1f2937' : '#ffffff'); </script>