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>
  <item id="mem_1755138100036_7ynkrvdao" time="2025/08/14 10:21">
    <content>
      项目已引入UnoCSS原子化CSS框架，后续开发中有样式需求时，优先使用UnoCSS的原子化类名而不是自定义CSS。UnoCSS配置文件为uno.config.js，支持Preset Uno和Transformer Directives。开发时应该：1. 优先使用UnoCSS原子化类名（如 flex, items-center, justify-between, p-4, m-2等）；2. 减少自定义CSS的编写；3. 保持与现有sa-前缀组件的兼容性；4. 利用UnoCSS的响应式、状态变体等高级特性。
    </content>
    <tags>#其他</tags>
  </item>
  <item id="mem_1756274781913_yjtc2v5mn" time="2025/08/27 14:06">
    <content>
      用户明确要求：在开发过程中，除非用户明确要求创建测试文档或测试文件，否则不要主动创建任何测试相关的文件。专注于业务功能的实现，测试文件的创建需要用户明确指示。
    </content>
    <tags>#其他</tags>
  </item>
  <item id="mem_1756276312350_spzec5ck3" time="2025/08/27 14:31">
    <content>
      订单列表tab切换重复请求问题的解决方案：1. 移除URL同步机制，使用纯本地状态管理；2. 简化handleTabChange逻辑，直接更新状态并调用getData；3. 优化状态参数处理，全部状态时使用null不传递status参数；4. 移除watch监听和复杂的初始化逻辑。这种方式避免了URL变化和tab切换同时触发请求的问题。
    </content>
    <tags>#其他</tags>
  </item>
  <item id="mem_1756283767277_6971lbbb0" time="2025/08/27 16:36">
    <content>
      语言包重复对象定义问题：当JSON语言包中存在重复的对象键时，后面的定义会覆盖前面的定义，导致翻译丢失。解决方案是合并重复的对象，确保所有翻译键都在同一个对象中。这是Vue i18n项目中常见的配置问题。
    </content>
    <tags>#其他</tags>
  </item>
  <item id="mem_1756283798220_wxz06drnu" time="2025/08/27 16:36">
    <content>
      项目开发环境支持热更新(HMR)，一般情况下修改代码、样式、语言包等文件后不需要重启开发服务器，Vite会自动检测文件变化并进行热更新。只有在修改配置文件(如vite.config.js、package.json等)或遇到特殊情况时才需要重启服务器。开发时应该依赖热更新功能提高开发效率。
    </content>
    <tags>#其他</tags>
  </item>
  <item id="mem_1756285264035_ks4xu9edk" time="2025/08/27 17:01">
    <content>
      全局硬编码消息国际化替换：将项目中所有硬编码的ElMessage提示（如&#x27;保存成功&#x27;、&#x27;删除成功&#x27;等）替换为国际化函数调用t(&#x27;message.saveSuccess&#x27;)。这包括：1. 识别所有硬编码中文提示；2. 在语言包中添加对应翻译；3. 使用t()函数替换硬编码字符串；4. 确保中英文翻译完整。这是Vue i18n项目国际化的重要步骤。
    </content>
    <tags>#流程管理</tags>
  </item>
  <item id="mem_1756434598347_xxik8uj02" time="2025/08/29 10:29">
    <content>
      用户明确要求：在开发过程中，除非用户明确要求创建测试文档或测试文件，否则不要主动创建任何测试相关的文件。专注于业务功能的实现，测试文件的创建需要用户明确指示。
    </content>
    <tags>#其他</tags>
  </item>
  <item id="mem_1756434656301_45o0lw7c9" time="2025/08/29 10:30">
    <content>
      bandhuBuy-admin项目代码书写习惯：
      ## 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变量定义主题色彩
      6. **UnoCSS优先**：新样式优先使用UnoCSS原子化类名
    
      ## 数据处理模式
      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组件处理批量操作
    
      ## 国际化处理规范
      1. **搜索字段**：必须使用computed定义searchFields，确保语言切换响应
      2. **键名格式**：modules.xxx格式组织，如modules.user、modules.order
      3. **函数调用**：使用t(&#x27;modules.xxx.xxx&#x27;)格式调用翻译
      4. **标签vs值**：注意区分Label（如groupStatusLabel）和值对象（如groupStatus）
    
      ## 代码组织规范
      1. **导入顺序**：Vue相关 -&gt; 第三方库 -&gt; 项目内部组件 -&gt; utils工具
      2. **变量声明**：const优先，let其次，避免var
      3. **函数定义**：使用箭头函数或function关键字，保持一致
      4. **注释规范**：重要业务逻辑添加中文注释说明
    </content>
    <tags>#最佳实践 #工具使用</tags>
  </item>
  <item id="mem_1757062424111_9cpquad3p" time="2025/09/05 16:53">
    <content>
      用户明确要求：在开发过程中，除非用户明确要求创建测试文档或测试文件，否则不要主动创建任何测试相关的文件。专注于业务功能的实现，测试文件的创建需要用户明确指示。
    </content>
    <tags>#其他</tags>
  </item>
  <item id="mem_1757062974435_gzkby2akc" time="2025/09/05 17:02">
    <content>
      数据报表图表提示框功能优化完成：
      1. 将chartTipsBox组件集成到reportChart组件内部，实现了统一管理
      2. 为chartTipsBox组件添加了完整的拖拽功能，支持自由移动
      3. 优化了组件复用性，现在不同页面只需引入reportChart即可获得完整功能
      4. 保持了原有的图表点击事件向后兼容性
      5. 拖拽功能包括：鼠标抓取、边界限制、位置重置等完整体验
    
      技术实现要点：
      - 使用Vue3的ref、watch、onUnmounted等API
      - 实现了完整的鼠标事件处理（mousedown、mousemove、mouseup）
      - 添加了边界检测防止拖拽超出视窗
      - 使用CSS transform和position实现平滑拖拽效果
    </content>
    <tags>#其他</tags>
  </item>
</memory>