87 lines
3.5 KiB
Markdown
87 lines
3.5 KiB
Markdown
## 系统上下文
|
||
|
||
这是一个 Electron 框架的桌面程序，它的主要功能为 *
|
||
|
||
## 技术栈和限制
|
||
|
||
- 运行时：Electron
|
||
- 语言：Typescript
|
||
- 框架: Vue 3 (Composition API, 使用 setup 语法糖)
|
||
- 辅助开发：unplugin-auto-import, unplugin-vue-components
|
||
- 样式：Less, TDesign
|
||
- 状态：Pinia v3
|
||
- 路由：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 而不是插值符号以避免渲染延时
|
||
- Vue Composition API 的代码应该按功能模块分组，相同的变量、函数等在一个片段，公共的在脚本头部，不同模块之间变量、函数不穿插
|
||
- 仅使用上述工具。除非堆栈无法合理地解决外部依赖关系，否则不要引入外部依赖关系
|
||
- 在编写自定义实现之前，首选所选工具中的官方 API
|
||
- 该项目目前没有测试, 除非明确要求，否则不要添加测试
|
||
- 所有文字、评论和文档均为中文
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
src/
|
||
main/ # electron 进程代码
|
||
renderer/ # Vue3 + Vite + TDesign 前端渲染代码
|
||
api/ # 与后端对接的 HTTP 通信，使用 axios
|
||
assets/ # 静态资源文件
|
||
components/ # 通用组件
|
||
layout/ # 界面布局组件
|
||
router/ # 页面路由
|
||
type/ # Typescript 类型
|
||
store/ # Pinia 储存
|
||
views/ # 路由页面
|
||
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 调用, 通过存储进行缓存或协调
|