Yi.Admin/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封装

## 🎯 开发文档


## 🔗 关键链接


| 📚 前端文档 | 开发指南/项目说明              | [快速了解项目](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>