declarative.dpml 4.4 KB

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