feat: 优化功能

CLAUDE.md

@@ -44,6 +44,81 @@ Keep this managed block so 'openspec update' can refresh the instructions.
 - Pinia 3.0.3 状态管理
 - TailwindCSS 4.1.14 样式
 
+### 代码规范
+
+#### Vue.js 最佳实践
+
+##### 代码规划
+- 代码简洁易于人类阅读
+
+##### 组件结构
+- 优先使用组合式 API 而非选项式 API
+- 保持组件小巧且功能专注
+- 采用恰当的 TypeScript 集成方案
+- 实现规范的 props 验证
+- 使用标准的 emit 声明
+- 保持模板逻辑简洁
+- 优先使用template 语法，而不是函数组件
+- 优先使用函数或者hook，而不是类
+
+##### 组合式 API
+- 正确使用 ref 与 reactive
+- state模块化 
+
+```js
+const uiState = ref({ dialogVisible:false, tableLoading:false})
+const open = ()=>{
+   uiState.value.dialogVisible = true
+}
+```
+
+- 合理实现生命周期钩子
+- 通过组合式函数封装可复用逻辑
+- 保持 setup 函数整洁
+- 规范使用计算属性
+- 合理实现侦听器
+
+##### 状态管理
+- 使用 Pinia 进行状态管理
+- 保持仓库模块化
+- 采用合理的状态组织方式
+- 规范实现操作逻辑
+- 正确使用获取器
+- 妥善处理异步状态
+
+##### 性能优化
+- 实现组件懒加载
+- 配置恰当的缓存策略
+- 高效使用计算属性
+- 避免不必要的侦听器
+- 区分使用 v-show 与 v-if
+- 实现科学的 key 管理
+
+##### 路由管理
+- 规范使用 Vue Router
+- 实现完整的导航守卫
+- 合理配置路由元字段
+- 正确处理路由参数
+- 实现路由懒加载
+- 使用标准的导航方法
+
+##### 表单处理
+- 正确使用 v-model
+- 实现完善的验证机制
+- 规范处理表单提交
+- 展示合理的加载状态
+- 配置完整的错误处理
+- 实现表单重置功能
+
+##### TypeScript 集成
+- 使用规范的组件类型定义
+- 实现完整的 props 类型声明
+- 规范 emit 类型声明
+- 处理类型推断
+- 使用标准的组合函数类型
+- 实现完整的仓库类型定义
+
+
 ## 代码简化
 - 只保留核心分支，移除重复校验 / 冗余注释”，例：“生成 Java 订单支付接口逻辑，仅包含参数非空校验、支付状态判断 2 个核心分支，无需异常场景的冗余兜底代码
 - 用三目运算符简化 if-else 冗余，避免单分支重复判断；变量仅定义必要的，移除未被调用的临时变量