From 83e099a687f3b39ab8ec9b70c6f3c80ca2b367b2 Mon Sep 17 00:00:00 2001
From: Leo <98382335+gaoziman@users.noreply.github.com>
Date: Wed, 9 Jul 2025 10:17:57 +0800
Subject: [PATCH] =?UTF-8?q?docs(=E8=A7=84=E8=8C=83):=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80=E8=A7=84?=
 =?UTF-8?q?=E8=8C=83=E5=92=8CUI=E5=BC=80=E5=8F=91=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增按钮样式统一规范章节，明确表格列表页面按钮样式要求
- 完善图标使用规范，增加按钮样式说明
- 优化页面开发规范，统一按钮和主题色彩要求
- 强调禁止使用圆角按钮(round属性)，确保界面一致性
- 添加正确和错误示例，提供完整的实现参考
---
 CLAUDE.md | 151 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 146 insertions(+), 5 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 7ca8111..481593a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -289,7 +289,7 @@ coiMsgBox('确定要删除吗？', '删除确认').then(() => {
   <!-- 在组件插槽中使用 -->
   <CoiEmpty>
     <template #action>
-      <NButton type="primary" round>
+      <NButton type="primary">
         <template #icon>
           <NIcon>
             <icon-park-outline:plus />
@@ -340,12 +340,17 @@ coiMsgBox('确定要删除吗？', '删除确认').then(() => {
 - ✅ 空状态组件的操作按钮
 - ✅ 表单提交和取消按钮
 
-**2. 图标尺寸规范**
+**2. 按钮样式规范**
+- ✅ 表格列表页面的操作按钮：使用标准方形按钮，不使用圆角（`round`）属性
+- ✅ 按钮格式：图标 + 文字的组合形式
+- ✅ 参考用户管理页面的按钮样式标准
+
+**3. 图标尺寸规范**
 - 默认按钮：无需指定尺寸
 - 大按钮：可根据需要调整
 - 小按钮：保持图标清晰可见
 
-**3. 图标样式要求**
+**4. 图标样式要求**
 ```html
 <template #icon>
   <NIcon>
@@ -361,6 +366,7 @@ coiMsgBox('确定要删除吗？', '删除确认').then(() => {
 - ❌ 在JavaScript中动态处理图标组件
 - ❌ 使用其他图标库（除非特殊需求）
 - ❌ 图标与功能语义不匹配
+- ❌ 在表格列表页面使用圆角按钮（`round` 属性）
 
 ### 示例：完整的页面按钮实现
 ```vue
@@ -948,8 +954,15 @@ async function handleSubmit() {
 />
 ```
 
+### 按钮样式规范
+2. **按钮样式一致性**：
+   - ✅ 表格列表页面的操作按钮必须使用标准方形按钮样式
+   - ✅ 按钮格式：图标 + 文字的组合形式
+   - ✅ 严禁使用圆角按钮（`round` 属性）
+   - ✅ 参考用户管理页面的按钮样式标准
+
 ### 动态主题色彩规范
-2. **主题色彩一致性**：
+3. **主题色彩一致性**：
    - ✅ 所有标签、按钮、状态指示器必须使用系统动态主题色彩
    - ✅ 使用 CSS 变量而非硬编码颜色值
    - ✅ 遵循项目的主题色彩体系，确保在主题切换时保持一致性
@@ -1042,12 +1055,13 @@ var(--info-color)             /* 信息色 */
 - ❌ 忽略主题切换时的色彩适配
 - ❌ 使用与系统主题不一致的自定义颜色方案
 - ❌ 在标签、按钮等组件上使用固定颜色样式
+- ❌ 在表格列表页面使用圆角按钮（`round` 属性）
 
 ### 示例：完整的表格页面实现
 ```vue
 <template>
   <div class="page-container">
-    <!-- 操作区域 -->
+    <!-- 操作区域 - 使用标准方形按钮，不使用圆角 -->
     <div class="action-bar">
       <NButton type="primary" @click="handleAdd">
         <template #icon>
@@ -1055,6 +1069,20 @@ var(--info-color)             /* 信息色 */
         </template>
         新增
       </NButton>
+
+      <NButton type="error" @click="handleDelete">
+        <template #icon>
+          <NIcon><icon-park-outline:delete /></NIcon>
+        </template>
+        删除
+      </NButton>
+
+      <NButton @click="handleExport">
+        <template #icon>
+          <NIcon><icon-park-outline:download /></NIcon>
+        </template>
+        导出
+      </NButton>
     </div>
 
     <!-- 数据表格 - 表头不加粗，使用默认样式 -->
@@ -1293,6 +1321,119 @@ import { coiMsgError, coiMsgSuccess, coiMsgWarning } from '@/utils/coi'
 
 **遵循此规范确保所有表单页面具有一致的用户体验和错误处理机制！**
 
+## 🎯 按钮样式统一规范（强制要求）
+
+**所有新创建的表格列表页面必须严格遵循标准按钮样式规范，确保界面的一致性和专业性**
+
+### 按钮样式核心要求
+
+1. **标准方形按钮**：
+   - ✅ 所有表格列表页面的操作按钮必须使用标准方形样式
+   - ✅ 严禁使用圆角按钮（`round` 属性）
+   - ✅ 参考用户管理页面的按钮样式标准
+
+2. **图标 + 文字组合**：
+   - ✅ 按钮必须采用图标 + 文字的组合形式
+   - ✅ 图标位于文字左侧，提升用户体验
+   - ✅ 使用语义化的图标选择
+
+### 正确的按钮实现示例
+
+```vue
+<template>
+  <div class="page-actions">
+    <!-- ✅ 正确：标准方形按钮 + 图标 + 文字 -->
+    <NButton type="primary" @click="handleAdd">
+      <template #icon>
+        <NIcon><icon-park-outline:plus /></NIcon>
+      </template>
+      新增
+    </NButton>
+
+    <NButton type="error" @click="handleDelete">
+      <template #icon>
+        <NIcon><icon-park-outline:delete /></NIcon>
+      </template>
+      删除
+    </NButton>
+
+    <NButton @click="handleExport">
+      <template #icon>
+        <NIcon><icon-park-outline:download /></NIcon>
+      </template>
+      导出
+    </NButton>
+
+    <NButton type="primary" @click="handleSearch">
+      <template #icon>
+        <NIcon><icon-park-outline:search /></NIcon>
+      </template>
+      搜索
+    </NButton>
+
+    <NButton @click="handleReset">
+      <template #icon>
+        <NIcon><icon-park-outline:refresh /></NIcon>
+      </template>
+      重置
+    </NButton>
+  </div>
+</template>
+```
+
+### 错误示例（严格禁止）
+
+```vue
+<template>
+  <div class="page-actions">
+    <!-- ❌ 错误：使用圆角按钮 -->
+    <NButton type="primary" round @click="handleAdd">
+      <template #icon>
+        <NIcon><icon-park-outline:plus /></NIcon>
+      </template>
+      新增
+    </NButton>
+
+    <!-- ❌ 错误：只有文字没有图标 -->
+    <NButton type="primary" @click="handleAdd">
+      新增
+    </NButton>
+
+    <!-- ❌ 错误：只有图标没有文字 -->
+    <NButton type="primary" @click="handleAdd">
+      <template #icon>
+        <NIcon><icon-park-outline:plus /></NIcon>
+      </template>
+    </NButton>
+  </div>
+</template>
+```
+
+### 参考标准页面
+
+- ✅ 用户管理页面：`src/views/system/user/index.vue`
+- ✅ 角色管理页面：`src/views/system/role/index.vue`
+- ✅ 菜单管理页面：`src/views/system/menu/index.vue`
+
+### 强制要求检查清单
+
+开发新的表格列表页面时，必须确保：
+- [ ] 所有操作按钮都使用标准方形样式（不使用 `round` 属性）
+- [ ] 所有按钮都采用图标 + 文字的组合形式
+- [ ] 按钮样式与现有页面保持一致
+- [ ] 图标选择符合语义化要求
+- [ ] 按钮类型和颜色符合项目主题规范
+
+### 严格禁止行为
+
+- ❌ 使用圆角按钮（`round` 属性）
+- ❌ 按钮只有图标没有文字
+- ❌ 按钮只有文字没有图标
+- ❌ 使用与项目标准不一致的按钮样式
+- ❌ 忽略参考页面的样式标准
+
+**遵循此规范确保所有表格列表页面具有统一的按钮样式和用户体验！**
+
 ## 文档资源
 
 项目包含完整的文档系统：