split frontend detail

.gitignore

@@ -0,0 +1 @@
+/result.md

Common.md

@@ -35,6 +35,7 @@ NodeJS, NSIS, axios, pinia, Less, 微信小程序等现代程序知识
 - **表达风格**：直接、犀利、零废话。如果代码是垃圾，你会告诉用户为什么它是垃圾
 - **语言风格**：代码或注释遇到中文和英文紧挨着时，必须有一个空格隔断以便阅读
 - **Git 提交**：提交 Git 代码的消息必须使用英语，且符合 Git 规范
+- **文本编码**：非常重要，你应该**永远**用 UTF-8 编码输出代码，包括注释
 - **技术优先**：批评总是针对技术问题，而不是个人问题。但你不会为了“友好”而模糊技术判断
 
 ### 思考前提 — Linus 的三个问题

FrontendCommon.md

@@ -0,0 +1,13 @@
+# 用户体验
+
+桌面程序优先设计, 需要适应全尺寸屏幕，即使屏幕很小或很大也不影响程序使用
+
+导航
+
+- 主要在电脑桌面程序使用，页面、路由需要清晰明确
+- 这是个桌面程序，无需考虑路由异步加载，请直接全量加载
+- 如果有用，请使用清晰的页面标题和类似面包屑的提示
+
+反馈
+
+- 始终显示加载、空和错误状态

Frontend_electron_vite.md

@@ -13,22 +13,6 @@
 - 路由：Vue Router v4
 - 通信：Axios
 
-## 硬性规定
-
-- 务必阅读并实施本项目的 ESLint 规范，你的代码应当符合这些规范
-- 数值比较应该使用小于，即使常量在前变量在后
-- CSS、LESS 的属性应当尽量缩写，如使用 background 而不是 background-color
-- CSS、LESS 的单位优先使用 rem，除非 % 或 vw vh 等比例单位
-- CSS、LESS 的属性应该按照属性名长度由短到长排序以便维护
-- CSS、LESS 的数值小于 1 时不需要 0，如 .5 而不是 0.5，最多 4 位小数
-- LESS 的类命名应该简短，子级命名无需父级前缀
-- Vue 模板中如果要使用变量则应该使用 v-text 而不是插值符号以避免渲染延时，如果只是纯文本不要使用 v-text
-- Vue Composition API 的代码应该按功能模块分组，相同的变量、函数等在一个片段，公共的在脚本头部，不同模块之间变量、函数不穿插
-- 仅使用上述工具。除非堆栈无法合理地解决外部依赖关系，否则不要引入外部依赖关系
-- 在编写自定义实现之前，首选所选工具中的官方 API
-- 该项目目前没有测试, 除非明确要求，否则不要添加测试
-- 所有文字、评论和文档均为中文
-
 ## 项目结构
 
 ```
@@ -46,41 +30,3 @@ src/
     Root.vue
     main.ts
 ```
-
-# 用户体验
-
-桌面程序优先设计, 需要适应全尺寸屏幕，即使屏幕很小或很大也不影响程序使用
-
-导航
-
-- 主要在电脑桌面程序使用，页面、路由需要清晰明确
-- 这是个桌面程序，无需考虑路由异步加载，请直接全量加载
-- 如果有用，请使用清晰的页面标题和类似面包屑的提示
-
-反馈
-
-- 始终显示加载、空和错误状态
-- 使用 TDesign 弹窗、提示等反馈
-
-## 使用 TDesign 进行构建界面
-
-- TDesign UI组件用于常见 UI（导航栏、卡片、选项卡、下拉菜单、模态、表单）。不要重新实现 TDesign 已经提供的功能
-- 保持类字符串可读且有序：布局 → 间距 → 排版 → 颜色 → 状态 → 反应性变体
-- 所有颜色都应该在 `src/renderer/assets/style.css` 中定义。**如果没有必要，不要使用自定义颜色**
-- 样式应该写在 Vue 组建的 style 中，**不要在原生 html 标签使用 style 属性**
-- 尽量使用 TDesign 原生图标，即使你无法搜索到你想要的图标，**禁止使用原生 SVG**
-
-## 做和不做
-
-做
-
-- 在编写自定义 UI 组件之前优先使用 TDesign UI 组件
-- 保持组件小而集中, 提取逻辑的可组合项
-- 尽可能定义 Typescript 类型和进行 JSDoc 注释
-- 路由、Pinia、组件命名规则应符合官方建议
-
-不做
-
-- 在没有充分理由的情况下添加外部库
-- 用繁重的计算阻塞主线程, 卸载或推迟
-- 不必要地重复 API 调用, 通过存储进行缓存或协调

Frontend_vite_lib.md

@@ -0,0 +1,25 @@
+## 系统上下文
+
+这是一个 Vue + Vite + Typescript 框架的依赖库，它的主要功能为 *
+
+## 技术栈和限制
+
+- 语言：Typescript
+- 框架: Vue 3 (Composition API, 使用 setup 语法糖)
+- 辅助开发：unplugin-auto-import, unplugin-vue-components
+- 样式：Less
+- 通信：Axios
+
+## 项目结构
+
+```
+src/
+  api/        # 与后端对接的 HTTP 通信，使用 axios
+  assets/     # 静态资源文件
+  components/ # 通用组件
+  types/      # Typescript 类型
+  store/      # 全局储存
+  utils/      # 通用工具
+  index.ts    # 导出属性
+  types.ts    # 导出类型
+```

Frontend_wechat_mp.md

@@ -9,19 +9,6 @@
 - 框架: 微信小程序自有框架，可使用 NPM
 - 样式：Less, TDesign
 
-## 硬性规定
-
-- 数值比较应该使用小于，即使常量在前变量在后
-- CSS、LESS 的属性应当尽量缩写，如使用 background 而不是 background-color
-- CSS、LESS 的单位优先使用 rpx，除非 % 或 vw vh 等比例单位
-- CSS、LESS 的属性应该按照属性名长度由短到长排序以便维护
-- CSS、LESS 的数值小于 1 时不需要 0，如 .5 而不是 0.5，最多 4 位小数
-- LESS 的类命名应该简短，子级命名无需父级前缀
-- 仅使用上述工具。除非堆栈无法合理地解决外部依赖关系，否则不要引入外部依赖关系
-- 在编写自定义实现之前，首选所选工具中的官方 API
-- 该项目目前没有测试, 除非明确要求，否则不要添加和进行测试
-- 所有文字、评论和文档均为中文
-
 ## 项目结构
 
 ```
@@ -38,32 +25,3 @@ miniprogram/                  # 微信小程序代码
 	tdesign.wxss              # TDesign 样式文件
 typings/                      # 微信小程序类型定义
 ```
-
-# 用户体验
-
-- 需要适配夜间模式
-- 始终显示加载、空和错误状态
-- 使用 TDesign 弹窗、提示等反馈
-
-## 使用 TDesign 进行构建界面
-
-- TDesign UI 组件用于常见 UI（导航栏、卡片、选项卡、下拉菜单、模态、表单）。不要重新实现 TDesign 已经提供的功能
-- 保持类字符串可读且有序：布局 → 间距 → 排版 → 颜色 → 状态 → 反应性变体
-- 尽量使用 TDesign 原生图标，即使你无法搜索到你想要的图标，**禁止使用原生 SVG**
-
-## 做和不做
-
-做
-
-- 请使用 LESS 而非微信原生 WXSS
-- 样式应该写在组件的 index.less 中，**不要在原生 wxml 标签使用 style 属性**
-- 在编写自定义 UI 组件之前优先使用 TDesign UI 组件
-- 保持组件小而集中, 提取逻辑的可组合项
-- 尽可能定义 Typescript 类型和进行 JSDoc 注释
-
-不做
-
-- 使用原生 HTML 标签
-- 在没有充分理由的情况下添加外部库
-- 用繁重的计算阻塞主线程, 卸载或推迟
-- 不必要地重复 API 调用, 通过存储进行缓存或协调

WebCommon.md

@@ -0,0 +1,15 @@
+## 前端通用约束
+
+- 务必阅读并实施本项目的 ESLint 规范，你的代码应当符合这些规范
+- 数值比较应该使用小于，即使常量在前变量在后
+- 仅使用上述工具。除非堆栈无法合理地解决外部依赖关系，否则不要引入外部依赖关系
+- 在编写自定义实现之前，首选所选工具中的官方 API
+- 该项目目前没有测试, 除非明确要求，否则不要添加测试
+- 尽可能定义 Typescript 类型和进行 JSDoc 注释
+- 路由、Pinia、组件命名规则应符合官方建议
+- 需要适配深色模式
+- 所有文字、评论和文档均为中文
+- 不在没有充分理由的情况下添加外部库
+- 不用繁重的计算阻塞主线程, 卸载或推迟
+- 重复 API 调用必要时通过存储进行缓存或协调
+

WebStylesheet.md

@@ -0,0 +1,7 @@
+## 前端样式约束
+
+- CSS、LESS 的属性应当尽量缩写，如使用 background 而不是 background-color
+- CSS、LESS 的单位优先使用 rem，除非 % 或 vw vh 等比例单位
+- CSS、LESS 的属性应该按照属性名长度由短到长排序以便维护
+- CSS、LESS 的数值小于 1 时不需要 0，如 .5 而不是 0.5，最多 4 位小数
+- LESS 的类命名应该简短，子级命名无需父级前缀

WebTDesign.md

@@ -0,0 +1,10 @@
+## Web TDesign 框架约束
+
+- 使用 TDesign 组件库构建界面
+- 在编写自定义 UI 组件之前优先使用 TDesign UI 组件
+- TDesign UI组件用于常见 UI（导航栏、卡片、选项卡、下拉菜单、模态、表单）。不要重新实现 TDesign 已经提供的功能
+- 保持类字符串可读且有序：布局 → 间距 → 排版 → 颜色 → 状态 → 反应性变体
+- 所有颜色都应该统一在一个文件中定义。**如果没有必要，不要使用自定义颜色**
+- 样式应该写在 Vue 组建的 style 中，**不要在原生 html 标签使用 style 属性**
+- 尽量使用 TDesign 原生图标，即使你无法搜索到你想要的图标，**禁止使用原生 SVG**
+- 使用 TDesign 弹窗、提示等反馈

WebVue.md

@@ -0,0 +1,5 @@
+## 前端 Vue 约束
+
+- Vue 模板中如果要使用变量则应该使用 v-text 而不是插值符号以避免渲染延时，如果只是纯文本不要使用 v-text
+- Vue Composition API 的代码应该按功能模块分组，相同的变量、函数等在一个片段，公共的在脚本头部，不同模块之间变量、函数不穿插
+- 保持组件小而集中, 提取逻辑的可组合项