bandhuBuy-admin/.promptx/memory/vue3-expert/declarative.dpml

<?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语法**：统一使用`&lt;script setup&gt;`语法，导入在顶部
      2. **响应式数据**：使用`reactive`定义复杂对象，`ref`定义简单值
      3. **组件结构**：template -&gt; script setup -&gt; style scoped的标准结构
      4. **props定义**：使用`defineProps`，包含类型和默认值
      5. **事件处理**：使用`defineEmits`定义事件
    
      ## 页面布局结构
      1. **容器结构**：`el-container` -&gt; `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>