系统上下文

这是一个 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 的属性应该按照属性名长度由短到长排序以便维护
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 调用, 通过存储进行缓存或协调

3.4 KiB Raw Blame History Unescape Escape

系统上下文

技术栈和限制

硬性规定

项目结构

用户体验

使用 TDesign 进行构建界面

做和不做

3.4 KiB

Raw Blame History