123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <?xml version="1.0" encoding="UTF-8"?>
- <memory>
- <item id="mem_1754615851941_h8woju97x" time="2025/08/08 09:17">
- <content>
- 用户采用了其他项目的管理中台来构建新系统,需要解决部分接口在新系统不存在的问题。我为用户创建了完整的本地数据模拟系统,包括:1. admin.js核心模拟文件,包含init和loginConfig两个主要接口的模拟数据;2. 支持异步请求模拟、环境切换、日志记录等功能;3. 提供了使用示例、集成示例和详细文档;4. 支持浏览器控制台调试工具。用户使用Vue3+Element Plus+ESLint+Prettier技术栈。
- </content>
- <tags>#工具使用</tags>
- </item>
- <item id="mem_1754615860856_y2ywytuib" time="2025/08/08 09:17">
- <content>
- 用户要求移除登录页面所有关于微信扫码登录和验证码相关的代码,只保留账号密码登录和逻辑。我成功完成了这个任务:1. 移除了模板中的验证码输入框、微信登录按钮、扫码登录区域;2. 移除了脚本中的wechatApi导入、验证码字段、相关验证规则和所有验证码/微信相关函数;3. 移除了样式中的验证码、扫码登录相关样式;4. 保留了纯净的账号密码登录、记住我、记住用户、密码显示隐藏等核心功能。最终实现了简洁高效的登录页面。
- </content>
- <tags>#最佳实践</tags>
- </item>
- <item id="mem_1754615869494_hnkdteqwg" time="2025/08/08 09:17">
- <content>
- 列表页面标准样式规范:基于 src/app/shop/admin/goods/goods/index.vue 的样式风格,包括:1. 使用 sa-search-simple 组件进行搜索;2. Tab 使用 sa-tabs 类名;3. 标题区域使用 sa-title sa-flex sa-row-between 布局;4. 表格使用 sa-table-wrap 和 sa-table 类名;5. 按钮使用 sa-button-refresh 类名;6. 整体容器使用 panel-block 类名;7. 间距和排版保持一致的 CSS 变量使用;8. 表格内容样式使用统一的字体大小和颜色变量。
- </content>
- <tags>#其他</tags>
- </item>
- <item id="mem_1754616251353_20hnnupq0" time="2025/08/08 09:24">
- <content>
- 项目代码风格分析总结:
-
- ## Vue3组件编写风格
- 1. **script setup语法**:统一使用`<script setup>`语法,导入在顶部
- 2. **响应式数据**:使用`reactive`定义复杂对象,`ref`定义简单值
- 3. **组件结构**:template -> script setup -> style scoped的标准结构
- 4. **props定义**:使用`defineProps`,包含类型和默认值
- 5. **事件处理**:使用`defineEmits`定义事件
-
- ## 页面布局结构
- 1. **容器结构**:`el-container` -> `el-header` + `el-main` + `sa-view-bar`
- 2. **搜索区域**:使用`sa-search-simple`组件,配置`searchFields`对象
- 3. **标题区域**:`sa-title sa-flex sa-row-between`布局,左侧标题右侧操作按钮
- 4. **表格区域**:`sa-table-wrap` + `sa-table`类名,配合`v-loading`
- 5. **分页区域**:`sa-view-bar`中使用`sa-pagination`组件
-
- ## CSS样式规范
- 1. **类名前缀**:sa-开头的自定义类名(sa-title、sa-flex、sa-table等)
- 2. **布局类**:sa-flex、sa-row-between、sa-p-0等工具类
- 3. **容器类**:panel-block作为主容器,支持--top、--bottom修饰符
- 4. **间距类**:sa-m-r-12、sa-m-l-8等margin/padding工具类
- 5. **CSS变量**:使用--sa-开头的CSS变量定义主题色彩
-
- ## 数据处理模式
- 1. **API调用**:使用CRUD工具类,统一的request封装
- 2. **分页处理**:usePagination hook,pageData对象管理分页状态
- 3. **表格数据**:reactive定义table对象,包含data、selected等属性
- 4. **加载状态**:ref定义loading状态,配合v-loading指令
-
- ## 表单处理风格
- 1. **表单结构**:reactive定义form对象,包含model和rules
- 2. **验证规则**:统一的rules对象,支持required、pattern等验证
- 3. **表单引用**:使用formRef获取表单实例
- 4. **提交处理**:先验证再提交,统一的错误处理
-
- ## 组件交互模式
- 1. **弹窗组件**:useModal hook统一管理弹窗
- 2. **确认操作**:ElMessageBox.confirm统一确认框
- 3. **消息提示**:ElMessage统一消息提示
- 4. **批量操作**:sa-batch-handle组件处理批量操作
- </content>
- <tags>#最佳实践 #工具使用</tags>
- </item>
- </memory>
|