From 4022cf56c8304438dc1c20493ebaf0afb2ea96e3 Mon Sep 17 00:00:00 2001 From: Timi Date: Tue, 6 Jan 2026 11:22:24 +0800 Subject: [PATCH] split frontend detail --- .gitignore | 1 + FrontendCommon.md | 13 ++++++++++ Frontend_electron_vite.md | 54 --------------------------------------- Frontend_vite_lib.md | 25 ++++++++++++++++++ Frontend_wechat_mp.md | 42 ------------------------------ WebCommon.md | 15 +++++++++++ WebStylesheet.md | 7 +++++ WebTDesign.md | 10 ++++++++ WebVue.md | 5 ++++ 9 files changed, 76 insertions(+), 96 deletions(-) create mode 100644 .gitignore create mode 100644 FrontendCommon.md create mode 100644 Frontend_vite_lib.md create mode 100644 WebCommon.md create mode 100644 WebStylesheet.md create mode 100644 WebTDesign.md create mode 100644 WebVue.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e7a54bc --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/result.md \ No newline at end of file diff --git a/FrontendCommon.md b/FrontendCommon.md new file mode 100644 index 0000000..b2f0ca7 --- /dev/null +++ b/FrontendCommon.md @@ -0,0 +1,13 @@ +# 用户体验 + +桌面程序优先设计, 需要适应全尺寸屏幕，即使屏幕很小或很大也不影响程序使用 + +导航 + +- 主要在电脑桌面程序使用，页面、路由需要清晰明确 +- 这是个桌面程序，无需考虑路由异步加载，请直接全量加载 +- 如果有用，请使用清晰的页面标题和类似面包屑的提示 + +反馈 + +- 始终显示加载、空和错误状态 \ No newline at end of file diff --git a/Frontend_electron_vite.md b/Frontend_electron_vite.md index c5dc01e..00f78f8 100644 --- a/Frontend_electron_vite.md +++ b/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 调用, 通过存储进行缓存或协调 diff --git a/Frontend_vite_lib.md b/Frontend_vite_lib.md new file mode 100644 index 0000000..9964e12 --- /dev/null +++ b/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 # 导出类型 +``` diff --git a/Frontend_wechat_mp.md b/Frontend_wechat_mp.md index 98b8e4a..6432bfc 100644 --- a/Frontend_wechat_mp.md +++ b/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 调用, 通过存储进行缓存或协调 diff --git a/WebCommon.md b/WebCommon.md new file mode 100644 index 0000000..cea3e2c --- /dev/null +++ b/WebCommon.md @@ -0,0 +1,15 @@ +## 前端通用约束 + +- 务必阅读并实施本项目的 ESLint 规范，你的代码应当符合这些规范 +- 数值比较应该使用小于，即使常量在前变量在后 +- 仅使用上述工具。除非堆栈无法合理地解决外部依赖关系，否则不要引入外部依赖关系 +- 在编写自定义实现之前，首选所选工具中的官方 API +- 该项目目前没有测试, 除非明确要求，否则不要添加测试 +- 尽可能定义 Typescript 类型和进行 JSDoc 注释 +- 路由、Pinia、组件命名规则应符合官方建议 +- 需要适配深色模式 +- 所有文字、评论和文档均为中文 +- 不在没有充分理由的情况下添加外部库 +- 不用繁重的计算阻塞主线程, 卸载或推迟 +- 重复 API 调用必要时通过存储进行缓存或协调 + diff --git a/WebStylesheet.md b/WebStylesheet.md new file mode 100644 index 0000000..4b8fd20 --- /dev/null +++ b/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 的类命名应该简短，子级命名无需父级前缀 \ No newline at end of file diff --git a/WebTDesign.md b/WebTDesign.md new file mode 100644 index 0000000..a8d3e99 --- /dev/null +++ b/WebTDesign.md @@ -0,0 +1,10 @@ +## Web TDesign 框架约束 + +- 使用 TDesign 组件库构建界面 +- 在编写自定义 UI 组件之前优先使用 TDesign UI 组件 +- TDesign UI组件用于常见 UI（导航栏、卡片、选项卡、下拉菜单、模态、表单）。不要重新实现 TDesign 已经提供的功能 +- 保持类字符串可读且有序：布局 → 间距 → 排版 → 颜色 → 状态 → 反应性变体 +- 所有颜色都应该统一在一个文件中定义。**如果没有必要，不要使用自定义颜色** +- 样式应该写在 Vue 组建的 style 中，**不要在原生 html 标签使用 style 属性** +- 尽量使用 TDesign 原生图标，即使你无法搜索到你想要的图标，**禁止使用原生 SVG** +- 使用 TDesign 弹窗、提示等反馈 diff --git a/WebVue.md b/WebVue.md new file mode 100644 index 0000000..2fbaed9 --- /dev/null +++ b/WebVue.md @@ -0,0 +1,5 @@ +## 前端 Vue 约束 + +- Vue 模板中如果要使用变量则应该使用 v-text 而不是插值符号以避免渲染延时，如果只是纯文本不要使用 v-text +- Vue Composition API 的代码应该按功能模块分组，相同的变量、函数等在一个片段，公共的在脚本头部，不同模块之间变量、函数不穿插 +- 保持组件小而集中, 提取逻辑的可组合项 \ No newline at end of file