Yi.Framework/Yi.Ai.Vue3/README.md

🚀 项目亮点

基于 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 渲染
• 编辑输入框
• 文件上传
• 其他...

深色主题样式编写指南

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>