feat(components): 设计细节优化 (表格圆角/按钮尺寸统一/扁平阴影) W17.2.2

src/components/DataTable/DataTable.vue

@@ -188,16 +188,37 @@ function onLimitChange(l: number) { emit('limit-change', l) }
 <style scoped lang="scss">
 .rr-data-table {
   width: 100%;
+  background: var(--rr-bg-card, #FFFFFF);
+  border: 1px solid var(--rr-border-color, #E2E8F0);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
   // 行 hover 高亮
   :deep(.el-table__row) {
-    transition: background 0.1s;
+    transition: background 0.15s;
   }
   :deep(.el-table__row:hover > td.el-table__cell) {
     background-color: var(--rr-row-hover, #F8FAFC) !important;
   }
-  // 隐藏全局边线(模板的 table-card 在外层,这里走全局)
-  &.borderless :deep(.el-table__inner-wrapper) {
-    border-radius: 0;
+  // 表格本体圆角配合容器
+  :deep(.el-table) {
+    border-radius: 10px 10px 0 0;
+    overflow: hidden;
+  }
+  :deep(.el-table__inner-wrapper) {
+    border-radius: 10px 10px 0 0;
+  }
+  // 去掉 el-table 默认的 border
+  :deep(.el-table--border) {
+    border: none;
+  }
+  :deep(.el-table::before), :deep(.el-table::after) {
+    display: none;
+  }
+  // borderless 模式:整体无边框
+  &.borderless {
+    border: none;
+    box-shadow: none;
   }
 }
 .rr-empty {
@@ -213,13 +234,22 @@ function onLimitChange(l: number) { emit('limit-change', l) }
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 16px;
+  padding: 14px 20px;
   font-size: 12.5px;
   color: var(--ink-3, #94A3B8);
   background: var(--rr-bg-card, #FFFFFF);
-  border: 1px solid var(--rr-border-color, #E2E8F0);
-  border-top: none;
-  border-radius: 0 0 8px 8px;
+  border-top: 1px solid var(--rr-border-color, #F1F5F9);
   &__info { color: var(--ink-3, #94A3B8); }
+  :deep(.el-pagination) {
+    --el-pagination-bg-color: transparent;
+  }
+  :deep(.el-pager li) {
+    border-radius: 6px;
+    margin: 0 2px;
+  }
+  :deep(.el-pagination .btn-prev),
+  :deep(.el-pagination .btn-next) {
+    border-radius: 6px;
+  }
 }
 </style>

src/components/ListTabs/ListTabs.vue

@@ -53,7 +53,7 @@ function onClick(key: string) {
   border-bottom: 1px solid var(--border, #E2E8F0);
 }
 .rr-list-tab {
-  padding: 9px 16px;
+  padding: 10px 18px;
   font-size: 13px;
   color: var(--ink-3, #64748B);
   cursor: pointer;
@@ -65,6 +65,7 @@ function onClick(key: string) {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  margin-bottom: -1px;
 
   &:hover { color: var(--ink, #0F172A); }
 

src/components/PageHeader/PageHeader.vue

@@ -58,8 +58,19 @@ withDefaults(defineProps<Props>(), {
 }
 .rr-page-actions {
   display: flex;
-  gap: 8px;
+  gap: 10px;
   flex-shrink: 0;
   align-items: center;
+  :deep(.el-button) {
+    padding: 9px 18px;
+    font-weight: 500;
+    border-radius: var(--radius, 6px);
+  }
+  :deep(.el-button--primary) {
+    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
+  }
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
 }
 </style>

src/components/SearchBar/SearchBar.vue

@@ -161,20 +161,36 @@ const activeChips = computed(() => {
         </div>
       </div>
       <div class="rr-search-bar__actions">
-        <el-button type="primary" size="small" @click="onSearch">查询</el-button>
-        <el-button v-if="showReset" size="small" @click="onReset">重置</el-button>
+        <el-button type="primary" @click="onSearch">查询</el-button>
+        <el-button v-if="showReset" @click="onReset">重置</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+
+  // 统一 input/select 高度
+  :deep(.el-input__wrapper),
+  :deep(.el-select__wrapper) {
+    border-radius: var(--radius, 6px);
+    box-shadow: 0 0 0 1px var(--rr-border-color, #E2E8F0) inset;
+    transition: box-shadow 0.15s;
+  }
+  :deep(.el-input__wrapper:hover),
+  :deep(.el-select__wrapper:hover) {
+    box-shadow: 0 0 0 1px var(--rr-text-secondary, #94A3B8) inset;
+  }
+  :deep(.el-input__wrapper.is-focus),
+  :deep(.el-select__wrapper.is-focused) {
+    box-shadow: 0 0 0 2px var(--brand, #2563EB) inset;
+  }
 .rr-search-bar {
-  margin-bottom: 14px;
+  margin-bottom: 16px;
   &__row {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 12px;
     flex-wrap: wrap;
   }
   &__field {
@@ -213,6 +229,11 @@ const activeChips = computed(() => {
     display: inline-flex;
     gap: 8px;
     margin-left: auto;
+    :deep(.el-button) {
+      padding: 8px 16px;
+      font-weight: 500;
+      border-radius: var(--radius, 6px);
+    }
   }
 }
 </style>

src/modules/user/UserListView.vue

@@ -7,6 +7,7 @@
 import { onMounted, ref, reactive, computed } from 'vue'
 import { httpGet, httpPost } from '@/utils/request'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { Plus } from '@element-plus/icons-vue'
 import DataTable from '@/components/DataTable/DataTable.vue'
 import PageHeader from '@/components/PageHeader/PageHeader.vue'
 import SearchBar from '@/components/SearchBar/SearchBar.vue'
@@ -196,7 +197,10 @@ onMounted(load)
   <div class="rr-page">
     <PageHeader title="用户列表" :sub="`管理前台注册用户，共 ${total} 个账号`">
       <el-button @click="ElMessageBox.alert('导出功能待 W17 完善', '提示', { type: 'info' })">导出</el-button>
-      <el-button type="primary" @click="ElMessageBox.alert('新增用户功能待 W17 完善', '提示', { type: 'info' })">+ 新增用户</el-button>
+      <el-button type="primary" @click="ElMessageBox.alert('新增用户功能待 W17 完善', '提示', { type: 'info' })">
+        <el-icon style="margin-right: 4px; vertical-align: -2px;"><Plus /></el-icon>
+        新建用户
+      </el-button>
     </PageHeader>
 
     <ListTabs v-model="activeTab" :items="tabItems" @change="onTabChange" />

src/theme/tokens.scss

@@ -13,8 +13,8 @@
 :root {
   // ===== 圆角(沿用 v1.3) =====
   --radius-sm: 6px;
-  --radius: 8px;
-  --radius-lg: 12px;
+  --radius: 6px;
+  --radius-lg: 10px;
   --radius-xl: 16px;
   --radius-pill: 9999px;