From 861f6203cc0ebcdd7087434c9d8bafccf4360812 Mon Sep 17 00:00:00 2001
From: Charles7c <charles7c@126.com>
Date: Sun, 12 May 2024 19:27:27 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E5=8F=8A=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E7=BA=B5=E5=90=91=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GiTable/index.vue         |  18 ++
 src/styles/global.scss                   |  55 ++++++-
 src/views/monitor/log/index.vue          |  25 +--
 src/views/monitor/online/index.vue       |  79 +++++----
 src/views/system/config/index.vue        |   2 +-
 src/views/system/dept/index.vue          | 135 ++++++++-------
 src/views/system/dict/index.vue          |  91 +++++-----
 src/views/system/file/main/FileAside.vue |   6 +
 src/views/system/menu/index.vue          | 157 +++++++++---------
 src/views/system/notice/index.vue        | 101 ++++++------
 src/views/system/role/index.vue          | 105 ++++++------
 src/views/system/storage/index.vue       | 125 +++++++-------
 src/views/system/user/index.vue          | 201 ++++++++++++-----------
 src/views/tool/generator/index.vue       |  65 ++++----
 14 files changed, 614 insertions(+), 551 deletions(-)

diff --git a/src/components/GiTable/index.vue b/src/components/GiTable/index.vue
index ce96717..caf7d29 100644
--- a/src/components/GiTable/index.vue
+++ b/src/components/GiTable/index.vue
@@ -1,5 +1,12 @@
 <template>
   <div class="gi-table" :class="{ 'gi-table--fullscreen': isFullscreen }">
+    <a-row v-if="props.title" justify="space-between" align="center" class="gi-table__header">
+      <a-space wrap>
+        <slot name="custom-title">
+          <div class="gi-table__header-title">{{ props.title }}</div>
+        </slot>
+      </a-space>
+    </a-row>
     <a-row justify="space-between" align="center" class="gi-table__toolbar">
       <a-space wrap class="gi-table__toolbar-left" :size="[8, 8]">
         <slot name="custom-left"></slot>
@@ -84,6 +91,7 @@ import { VueDraggable } from 'vue-draggable-plus'
 
 defineOptions({ name: 'GiTable', inheritAttrs: false })
 const props = withDefaults(defineProps<Props>(), {
+  title: '',
   disabledTools: () => [], // 禁止显示的工具
   disabledColumnKeys: () => [] // 禁止控制显示隐藏的列
 })
@@ -96,6 +104,7 @@ const attrs = useAttrs()
 const slots = useSlots()
 
 interface Props {
+  title?: string
   disabledTools?: string[]
   disabledColumnKeys?: string[]
 }
@@ -201,6 +210,15 @@ defineExpose({ tableRef })
     max-height: 100%;
     overflow: hidden;
   }
+  &__header {
+    padding: 0 0 10px;
+    &-title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
+  }
   &__toolbar {
     :deep(.arco-form-item-layout-inline) {
       margin-right: 8px;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 6ff4554..3329124 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -181,12 +181,7 @@
   }
 }
 
-.gi_table_box {
-  max-height: 100%;
-  overflow: hidden;
-}
-
-// 使用场景，页面内容超出高度会自动滚动
+// 普通页面（使用场景，页面内容超出高度会自动滚动）
 .gi_page {
   flex: 1;
   padding: $margin;
@@ -194,6 +189,44 @@
   overflow-y: auto;
 }
 
+// 表格页面
+.table-page {
+  height: 100%;
+  overflow: hidden;
+  margin: $margin;
+  background: var(--color-bg-1);
+  padding: $padding;
+  padding-bottom: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .header {
+    padding: 0 0 10px;
+    .title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
+  }
+  &:after {
+    content: '';
+    height: 20px;
+    font-size: 12px;
+    color: var(--color-text-3);
+    margin-top: 12px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.gi_table_box {
+  max-height: 100%;
+  overflow: hidden;
+}
+
 .gi_card_title {
   .arco-card-header-title::before {
     content: '';
@@ -263,11 +296,17 @@
   overflow-y: auto;
   & > .arco-card-header {
     height: auto;
-    padding: 20px;
+    padding: $padding;
     border: none;
+    .arco-card-header-title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
   }
   & > .arco-card-body {
-    padding: 0 20px 20px 20px;
+    padding: 0 $padding $padding $padding;
   }
 }
 
diff --git a/src/views/monitor/log/index.vue b/src/views/monitor/log/index.vue
index 7845768..1d8700c 100644
--- a/src/views/monitor/log/index.vue
+++ b/src/views/monitor/log/index.vue
@@ -1,14 +1,19 @@
 <template>
-  <div class="gi_page">
-    <a-card title="系统日志" class="general-card">
-      <a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change">
-        <a-tab-pane key="1" title="登录日志" />
-        <a-tab-pane key="2" title="操作日志" />
-      </a-tabs>
-      <keep-alive>
-        <component :is="PaneMap[activeKey]" />
-      </keep-alive>
-    </a-card>
+  <div class="table-page">
+    <a-row justify="space-between" align="center" class="header">
+      <a-space wrap>
+        <slot name="custom-title">
+          <div class="title">系统日志</div>
+        </slot>
+      </a-space>
+    </a-row>
+    <a-tabs type="card-gutter" size="large" :active-key="activeKey" @change="change">
+      <a-tab-pane key="1" title="登录日志" />
+      <a-tab-pane key="2" title="操作日志" />
+    </a-tabs>
+    <keep-alive>
+      <component :is="PaneMap[activeKey]" />
+    </keep-alive>
   </div>
 </template>
 
diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue
index a0bead7..d45ba13 100644
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -1,45 +1,44 @@
 <template>
-  <div class="gi_page">
-    <a-card title="在线用户" class="general-card">
-      <GiTable
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-        :pagination="pagination"
-        :disabled-tools="['size', 'setting']"
-        @refresh="search"
-      >
-        <template #custom-left>
-          <a-input v-model="queryForm.nickname" placeholder="请输入用户名或昵称" allow-clear @change="search">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <DateRangePicker v-model="queryForm.loginTime" @change="search" />
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #nickname="{ record }">{{ record.nickname }}（{{ record.username }}）</template>
-        <template #action="{ record }">
-          <a-space>
-            <a-popconfirm
-              type="warning"
-              content="是否确定强退该用户？"
-              :ok-button-props="{ status: 'danger' }"
-              @ok="handleKickout(record.token)"
+  <div class="table-page">
+    <GiTable
+      row-key="id"
+      title="在线用户"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size', 'setting']"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-input v-model="queryForm.nickname" placeholder="请输入用户名或昵称" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <DateRangePicker v-model="queryForm.loginTime" @change="search" />
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #nickname="{ record }">{{ record.nickname }}（{{ record.username }}）</template>
+      <template #action="{ record }">
+        <a-space>
+          <a-popconfirm
+            type="warning"
+            content="是否确定强退该用户？"
+            :ok-button-props="{ status: 'danger' }"
+            @ok="handleKickout(record.token)"
+          >
+            <a-link
+              v-permission="['monitor:online:kickout']"
+              status="danger"
+              :title="currentToken === record.token ? '不能强退自己' : '强退'"
+              :disabled="currentToken === record.token"
             >
-              <a-link
-                v-permission="['monitor:online:kickout']"
-                status="danger"
-                :title="currentToken === record.token ? '不能强退自己' : '强退'"
-                :disabled="currentToken === record.token"
-              >
-                强退
-              </a-link>
-            </a-popconfirm>
-          </a-space>
-        </template>
-      </GiTable>
-    </a-card>
+              强退
+            </a-link>
+          </a-popconfirm>
+        </a-space>
+      </template>
+    </GiTable>
   </div>
 </template>
 
diff --git a/src/views/system/config/index.vue b/src/views/system/config/index.vue
index 0814d50..583a281 100644
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -6,7 +6,7 @@
           <BasicSetting />
         </a-tab-pane>
         <a-tab-pane key="2" title="邮件配置(暂未开放)" disabled></a-tab-pane>
-        <a-tab-pane key="3" title="安全设置">
+        <a-tab-pane key="3" title="安全配置">
           <SecuritySetting />
         </a-tab-pane>
       </a-tabs>
diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue
index 70a128e..5e4c151 100644
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,73 +1,72 @@
 <template>
-  <div class="gi_page">
-    <a-card title="部门管理" class="general-card">
-      <GiTable
-        ref="tableRef"
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-        :pagination="false"
-        :disabled-tools="['size']"
-        :disabled-column-keys="['name']"
-        @refresh="search"
-      >
-        <template #expand-icon="{ expanded }">
-          <IconDown v-if="expanded" />
-          <IconRight v-else />
-        </template>
-        <template #custom-left>
-          <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <a-select
-            v-model="queryForm.status"
-            :options="DisEnableStatusList"
-            placeholder="请选择状态"
-            allow-clear
-            style="width: 150px"
-            @change="search"
-          />
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #custom-right>
-          <a-button v-permission="['system:dept:add']" type="primary" @click="onAdd()">
-            <template #icon><icon-plus /></template>
-            <span>新增</span>
+  <div class="table-page">
+    <GiTable
+      ref="tableRef"
+      row-key="id"
+      title="部门管理"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="false"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #expand-icon="{ expanded }">
+        <IconDown v-if="expanded" />
+        <IconRight v-else />
+      </template>
+      <template #custom-left>
+        <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-select
+          v-model="queryForm.status"
+          :options="DisEnableStatusList"
+          placeholder="请选择状态"
+          allow-clear
+          style="width: 150px"
+          @change="search"
+        />
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #custom-right>
+        <a-button v-permission="['system:dept:add']" type="primary" @click="onAdd()">
+          <template #icon><icon-plus /></template>
+          <span>新增</span>
+        </a-button>
+        <a-tooltip content="导出">
+          <a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
+            <template #icon>
+              <icon-download />
+            </template>
           </a-button>
-          <a-tooltip content="导出">
-            <a-button v-permission="['system:dept:export']" class="gi_hover_btn-border" @click="onExport">
-              <template #icon>
-                <icon-download />
-              </template>
-            </a-button>
-          </a-tooltip>
-        </template>
-        <template #status="{ record }">
-          <GiCellStatus :status="record.status" />
-        </template>
-        <template #isSystem="{ record }">
-          <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
-          <a-tag v-else color="arcoblue" size="small">否</a-tag>
-        </template>
-        <template #action="{ record }">
-          <a-space>
-            <a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
-            <a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
-            <a-link
-              v-permission="['system:dept:delete']"
-              status="danger"
-              :title="record.isSystem ? '系统内置数据不能删除' : undefined"
-              :disabled="record.disabled"
-              @click="onDelete(record)"
-            >
-              删除
-            </a-link>
-          </a-space>
-        </template>
-      </GiTable>
-    </a-card>
+        </a-tooltip>
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #isSystem="{ record }">
+        <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+        <a-tag v-else color="arcoblue" size="small">否</a-tag>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
+          <a-link
+            v-permission="['system:dept:delete']"
+            status="danger"
+            :title="record.isSystem ? '系统内置数据不能删除' : undefined"
+            :disabled="record.disabled"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
 
     <DeptAddModal ref="DeptAddModalRef" @save-success="search" />
   </div>
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index beeabe4..8088d4f 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,50 +1,49 @@
 <template>
-  <div class="gi_page">
-    <a-card title="字典管理" class="general-card">
-      <GiTable
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-        :pagination="pagination"
-        :disabled-tools="['size']"
-        :disabled-column-keys="['name']"
-        @refresh="search"
-      >
-        <template #custom-left>
-          <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #custom-right>
-          <a-button v-permission="['system:dict:add']" type="primary" @click="onAdd">
-            <template #icon><icon-plus /></template>
-            <span>新增</span>
-          </a-button>
-        </template>
-        <template #isSystem="{ record }">
-          <a-tag v-if="record.isSystem" color="red">是</a-tag>
-          <a-tag v-else color="arcoblue">否</a-tag>
-        </template>
-        <template #action="{ record }">
-          <a-space>
-            <a-link @click="onViewDictItem(record)">管理</a-link>
-            <a-link v-permission="['system:dict:update']" @click="onUpdate(record)">修改</a-link>
-            <a-link
-              v-permission="['system:dict:delete']"
-              status="danger"
-              :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-              :disabled="record.disabled"
-              @click="onDelete(record)"
-            >
-              删除
-            </a-link>
-          </a-space>
-        </template>
-      </GiTable>
-    </a-card>
+  <div class="table-page">
+    <GiTable
+      row-key="id"
+      title="字典管理"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #custom-right>
+        <a-button v-permission="['system:dict:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <span>新增</span>
+        </a-button>
+      </template>
+      <template #isSystem="{ record }">
+        <a-tag v-if="record.isSystem" color="red">是</a-tag>
+        <a-tag v-else color="arcoblue">否</a-tag>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link @click="onViewDictItem(record)">管理</a-link>
+          <a-link v-permission="['system:dict:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['system:dict:delete']"
+            status="danger"
+            :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+            :disabled="record.disabled"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
 
     <DictAddModal ref="DictAddModalRef" @save-success="search" />
     <DictItemModal ref="DictItemModalRef" />
diff --git a/src/views/system/file/main/FileAside.vue b/src/views/system/file/main/FileAside.vue
index 56c4c13..71cd96d 100644
--- a/src/views/system/file/main/FileAside.vue
+++ b/src/views/system/file/main/FileAside.vue
@@ -55,6 +55,12 @@ const onClickItem = (item: FileTypeListItem) => {
     margin: 0 16px;
     padding-left: 0;
     padding-right: 0;
+    .arco-card-header-title {
+      color: var(--color-text-1);
+      font-size: 18px;
+      font-weight: 500;
+      line-height: 1.5;
+    }
   }
 }
 </style>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index 4a65e00..f9fd3e0 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,84 +1,83 @@
 <template>
-  <div class="gi_page">
-    <a-card title="菜单管理" class="general-card">
-      <GiTable
-        ref="tableRef"
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1700, maxHeight: '81vh' }"
-        :pagination="false"
-        :disabled-column-keys="['title']"
-        @refresh="search"
-      >
-        <template #expand-icon="{ expanded }">
-          <IconDown v-if="expanded" />
-          <IconRight v-else />
-        </template>
-        <template #custom-left>
-          <a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <a-select
-            v-model="queryForm.status"
-            :options="DisEnableStatusList"
-            placeholder="请选择状态"
-            allow-clear
-            style="width: 150px"
-            @change="search"
-          />
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #custom-right>
-          <a-button v-permission="['system:menu:add']" type="primary" @click="onAdd()">
-            <template #icon><icon-plus /></template>
-            <span>新增</span>
+  <div class="table-page">
+    <GiTable
+      ref="tableRef"
+      title="菜单管理"
+      row-key="id"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1700 }"
+      :pagination="false"
+      :disabled-column-keys="['title']"
+      @refresh="search"
+    >
+      <template #expand-icon="{ expanded }">
+        <IconDown v-if="expanded" />
+        <IconRight v-else />
+      </template>
+      <template #custom-left>
+        <a-input v-model="queryForm.title" placeholder="请输入菜单标题" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-select
+          v-model="queryForm.status"
+          :options="DisEnableStatusList"
+          placeholder="请选择状态"
+          allow-clear
+          style="width: 150px"
+          @change="search"
+        />
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #custom-right>
+        <a-button v-permission="['system:menu:add']" type="primary" @click="onAdd()">
+          <template #icon><icon-plus /></template>
+          <span>新增</span>
+        </a-button>
+        <a-tooltip content="展开/折叠">
+          <a-button class="gi_hover_btn-border" @click="onExpanded">
+            <template #icon>
+              <icon-list v-if="!isExpanded" />
+              <icon-mind-mapping v-else />
+            </template>
           </a-button>
-          <a-tooltip content="展开/折叠">
-            <a-button class="gi_hover_btn-border" @click="onExpanded">
-              <template #icon>
-                <icon-list v-if="!isExpanded" />
-                <icon-mind-mapping v-else />
-              </template>
-            </a-button>
-          </a-tooltip>
-        </template>
-        <template #title="{ record }">
-          <GiSvgIcon :name="record.icon" :size="15" />
-          <span style="margin-left: 5px; vertical-align: middle">{{ record.title }}</span>
-        </template>
-        <template #type="{ record }">
-          <a-tag v-if="record.type === 1" color="arcoblue">目录</a-tag>
-          <a-tag v-if="record.type === 2" color="green">菜单</a-tag>
-          <a-tag v-if="record.type === 3">按钮</a-tag>
-        </template>
-        <template #status="{ record }">
-          <GiCellStatus :status="record.status" />
-        </template>
-        <template #isExternal="{ record }">
-          <a-tag v-if="record.isExternal" color="arcoblue" size="small">是</a-tag>
-          <a-tag v-else color="red" size="small">否</a-tag>
-        </template>
-        <template #isHidden="{ record }">
-          <a-tag v-if="record.isHidden" color="arcoblue" size="small">是</a-tag>
-          <a-tag v-else color="red" size="small">否</a-tag>
-        </template>
-        <template #isCache="{ record }">
-          <a-tag v-if="record.isCache" color="arcoblue" size="small">是</a-tag>
-          <a-tag v-else color="red" size="small">否</a-tag>
-        </template>
-        <template #action="{ record }">
-          <a-space>
-            <a-link v-permission="['system:menu:update']" @click="onUpdate(record)">修改</a-link>
-            <a-link v-if="[1, 2].includes(record.type)" v-permission="['system:menu:add']" @click="onAdd(record.id)">
-              新增
-            </a-link>
-            <a-link v-permission="['system:menu:delete']" status="danger" @click="onDelete(record)">删除</a-link>
-          </a-space>
-        </template>
-      </GiTable>
-    </a-card>
+        </a-tooltip>
+      </template>
+      <template #title="{ record }">
+        <GiSvgIcon :name="record.icon" :size="15" />
+        <span style="margin-left: 5px; vertical-align: middle">{{ record.title }}</span>
+      </template>
+      <template #type="{ record }">
+        <a-tag v-if="record.type === 1" color="arcoblue">目录</a-tag>
+        <a-tag v-if="record.type === 2" color="green">菜单</a-tag>
+        <a-tag v-if="record.type === 3">按钮</a-tag>
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #isExternal="{ record }">
+        <a-tag v-if="record.isExternal" color="arcoblue" size="small">是</a-tag>
+        <a-tag v-else color="red" size="small">否</a-tag>
+      </template>
+      <template #isHidden="{ record }">
+        <a-tag v-if="record.isHidden" color="arcoblue" size="small">是</a-tag>
+        <a-tag v-else color="red" size="small">否</a-tag>
+      </template>
+      <template #isCache="{ record }">
+        <a-tag v-if="record.isCache" color="arcoblue" size="small">是</a-tag>
+        <a-tag v-else color="red" size="small">否</a-tag>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:menu:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link v-if="[1, 2].includes(record.type)" v-permission="['system:menu:add']" @click="onAdd(record.id)">
+            新增
+          </a-link>
+          <a-link v-permission="['system:menu:delete']" status="danger" @click="onDelete(record)">删除</a-link>
+        </a-space>
+      </template>
+    </GiTable>
 
     <MenuAddModal ref="MenuAddModalRef" :menus="dataList" @save-success="search" />
   </div>
diff --git a/src/views/system/notice/index.vue b/src/views/system/notice/index.vue
index acc72f8..19d5233 100644
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,56 +1,53 @@
 <template>
-  <div>
-    <div class="gi_page">
-      <a-card title="通知公告" class="general-card">
-        <GiTable
-          row-key="id"
-          :data="dataList"
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['title']"
-          @refresh="search"
-        >
-          <template #custom-left>
-            <a-input v-model="queryForm.title" placeholder="请输入公告标题" allow-clear @change="search">
-              <template #prefix><icon-search /></template>
-            </a-input>
-            <a-select
-              v-model="queryForm.type"
-              :options="notice_type"
-              placeholder="请选择类型"
-              allow-clear
-              style="width: 150px"
-              @change="search"
-            />
-            <a-button @click="reset">重置</a-button>
-          </template>
-          <template #custom-right>
-            <a-button v-permission="['system:notice:add']" type="primary" @click="onAdd">
-              <template #icon><icon-plus /></template>
-              <span>新增</span>
-            </a-button>
-          </template>
-          <template #title="{ record }">
-            <a-link @click="onDetail(record)">{{ record.title }}</a-link>
-          </template>
-          <template #type="{ record }">
-            <GiCellTag :value="record.type" :dict="notice_type" />
-          </template>
-          <template #status="{ record }">
-            <GiCellTag :value="record.status" :dict="notice_status_enum" />
-          </template>
-          <template #action="{ record }">
-            <a-space>
-              <a-link v-permission="['system:notice:update']" @click="onUpdate(record)">修改</a-link>
-              <a-link v-permission="['system:notice:delete']" status="danger" @click="onDelete(record)"> 删除 </a-link>
-            </a-space>
-          </template>
-        </GiTable>
-      </a-card>
-    </div>
+  <div class="table-page">
+    <GiTable
+      row-key="id"
+      title="通知公告"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['title']"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-input v-model="queryForm.title" placeholder="请输入公告标题" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-select
+          v-model="queryForm.type"
+          :options="notice_type"
+          placeholder="请选择类型"
+          allow-clear
+          style="width: 150px"
+          @change="search"
+        />
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #custom-right>
+        <a-button v-permission="['system:notice:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <span>新增</span>
+        </a-button>
+      </template>
+      <template #title="{ record }">
+        <a-link @click="onDetail(record)">{{ record.title }}</a-link>
+      </template>
+      <template #type="{ record }">
+        <GiCellTag :value="record.type" :dict="notice_type" />
+      </template>
+      <template #status="{ record }">
+        <GiCellTag :value="record.status" :dict="notice_status_enum" />
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:notice:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link v-permission="['system:notice:delete']" status="danger" @click="onDelete(record)"> 删除 </a-link>
+        </a-space>
+      </template>
+    </GiTable>
 
     <NoticeAddModal ref="NoticeAddModalRef" @save-success="search" />
     <NoticeDetailModal ref="NoticeDetailModalRef" />
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index b28d106..a34e41e 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,58 +1,57 @@
 <template>
-  <div class="gi_page">
-    <a-card title="角色管理" class="general-card">
-      <GiTable
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-        :pagination="pagination"
-        :disabled-tools="['size']"
-        :disabled-column-keys="['name']"
-        @refresh="search"
-      >
-        <template #custom-left>
-          <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #custom-right>
-          <a-button v-permission="['system:role:add']" type="primary" @click="onAdd">
-            <template #icon><icon-plus /></template>
-            <span>新增</span>
-          </a-button>
-        </template>
-        <template #name="{ record }">
-          <a-link @click="onDetail(record)">{{ record.name }}</a-link>
-        </template>
-        <template #dataScope="{ record }">
-          <GiCellTag :value="record.dataScope" :dict="data_scope_enum" />
-        </template>
-        <template #isSystem="{ record }">
-          <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
-          <a-tag v-else color="arcoblue" size="small">否</a-tag>
-        </template>
-        <template #action="{ record }">
-          <a-space>
-            <a-link v-permission="['system:role:update']" @click="onUpdate(record)">修改</a-link>
-            <a-link
-              v-permission="['system:role:delete']"
-              status="danger"
-              :title="record.isSystem ? '系统内置数据不能删除' : undefined"
-              :disabled="record.disabled"
-              @click="onDelete(record)"
-            >
-              删除
-            </a-link>
-          </a-space>
-        </template>
-      </GiTable>
+  <div class="table-page">
+    <GiTable
+      row-key="id"
+      title="角色管理"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #custom-right>
+        <a-button v-permission="['system:role:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <span>新增</span>
+        </a-button>
+      </template>
+      <template #name="{ record }">
+        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
+      </template>
+      <template #dataScope="{ record }">
+        <GiCellTag :value="record.dataScope" :dict="data_scope_enum" />
+      </template>
+      <template #isSystem="{ record }">
+        <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+        <a-tag v-else color="arcoblue" size="small">否</a-tag>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:role:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['system:role:delete']"
+            status="danger"
+            :title="record.isSystem ? '系统内置数据不能删除' : undefined"
+            :disabled="record.disabled"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
 
-      <RoleAddModal ref="RoleAddModalRef" @save-success="search" />
-      <RoleDetailDrawer ref="RoleDetailDrawerRef" />
-    </a-card>
+    <RoleAddModal ref="RoleAddModalRef" @save-success="search" />
+    <RoleDetailDrawer ref="RoleDetailDrawerRef" />
   </div>
 </template>
 
diff --git a/src/views/system/storage/index.vue b/src/views/system/storage/index.vue
index e3fdfd6..24346bb 100644
--- a/src/views/system/storage/index.vue
+++ b/src/views/system/storage/index.vue
@@ -1,67 +1,66 @@
 <template>
-  <div class="gi_page">
-    <a-card title="存储管理" class="general-card">
-      <GiTable
-        row-key="id"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
-        :pagination="pagination"
-        :disabled-tools="['size']"
-        :disabled-column-keys="['name']"
-        @refresh="search"
-      >
-        <template #custom-left>
-          <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <a-select
-            v-model="queryForm.status"
-            :options="DisEnableStatusList"
-            placeholder="请选择状态"
-            allow-clear
-            style="width: 150px"
-            @change="search"
-          />
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #custom-right>
-          <a-button v-permission="['system:storage:add']" type="primary" @click="onAdd">
-            <template #icon><icon-plus /></template>
-            <span>新增</span>
-          </a-button>
-        </template>
-        <template #name="{ record }">
-          <a-space fill>
-            <span>{{ record.name }}</span>
-            <a-tag v-if="record.isDefault" color="arcoblue" size="small" class="gi_round">
-              <template #default>默认</template>
-            </a-tag>
-          </a-space>
-        </template>
-        <template #type="{ record }">
-          <GiCellTag :value="record.type" :dict="storage_type_enum" />
-        </template>
-        <template #status="{ record }">
-          <GiCellStatus :status="record.status" />
-        </template>
-        <template #action="{ record }">
-          <a-space>
-            <a-link v-permission="['system:storage:update']" @click="onUpdate(record)">修改</a-link>
-            <a-link
-              v-permission="['system:storage:delete']"
-              status="danger"
-              :title="record.isDefault ? '默认存储不能删除' : undefined"
-              :disabled="record.disabled"
-              @click="onDelete(record)"
-            >
-              删除
-            </a-link>
-          </a-space>
-        </template>
-      </GiTable>
-    </a-card>
+  <div class="table-page">
+    <GiTable
+      row-key="id"
+      title="存储管理"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      :disabled-column-keys="['name']"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-select
+          v-model="queryForm.status"
+          :options="DisEnableStatusList"
+          placeholder="请选择状态"
+          allow-clear
+          style="width: 150px"
+          @change="search"
+        />
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #custom-right>
+        <a-button v-permission="['system:storage:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <span>新增</span>
+        </a-button>
+      </template>
+      <template #name="{ record }">
+        <a-space fill>
+          <span>{{ record.name }}</span>
+          <a-tag v-if="record.isDefault" color="arcoblue" size="small" class="gi_round">
+            <template #default>默认</template>
+          </a-tag>
+        </a-space>
+      </template>
+      <template #type="{ record }">
+        <GiCellTag :value="record.type" :dict="storage_type_enum" />
+      </template>
+      <template #status="{ record }">
+        <GiCellStatus :status="record.status" />
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link v-permission="['system:storage:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link
+            v-permission="['system:storage:delete']"
+            status="danger"
+            :title="record.isDefault ? '默认存储不能删除' : undefined"
+            :disabled="record.disabled"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
 
     <StorageAddModal ref="StorageAddModalRef" @save-success="search" />
   </div>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index ca1b334..1aed563 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,103 +1,108 @@
 <template>
-  <div class="gi_page">
-    <a-card title="用户管理" class="general-card">
-      <a-row :gutter="16">
-        <a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
-          <a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <a-tree
-            ref="treeRef"
-            :data="deptList"
-            :selected-keys="selectedKeys"
-            default-expand-all
-            show-line
-            block-node
-            @select="handleSelectDept"
-          >
-          </a-tree>
-        </a-col>
-        <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20">
-          <GiTable
-            row-key="id"
-            :data="dataList"
-            :columns="columns"
-            :loading="loading"
-            :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
-            :pagination="pagination"
-            :disabled-tools="['size']"
-            :disabled-column-keys="['username']"
-            @refresh="search"
-          >
-            <template #custom-left>
-              <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
-                <template #prefix><icon-search /></template>
-              </a-input>
-              <a-select
-                v-model="queryForm.status"
-                :options="DisEnableStatusList"
-                placeholder="请选择状态"
-                allow-clear
-                style="width: 150px"
-                @change="search"
-              />
-              <a-button @click="reset">重置</a-button>
-            </template>
-            <template #custom-right>
-              <a-button v-permission="['system:user:add']" type="primary" @click="onAdd">
-                <template #icon><icon-plus /></template>
-                <span>新增</span>
+  <div class="table-page">
+    <a-row justify="space-between" align="center" class="header">
+      <a-space wrap>
+        <slot name="custom-title">
+          <div class="title">用户管理</div>
+        </slot>
+      </a-space>
+    </a-row>
+    <a-row :gutter="16">
+      <a-col :xs="0" :md="4" :lg="4" :xl="4" :xxl="4">
+        <a-input v-model="deptName" placeholder="请输入部门名称" allow-clear style="margin-bottom: 10px">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-tree
+          ref="treeRef"
+          :data="deptList"
+          :selected-keys="selectedKeys"
+          default-expand-all
+          show-line
+          block-node
+          @select="handleSelectDept"
+        >
+        </a-tree>
+      </a-col>
+      <a-col :xs="24" :md="20" :lg="20" :xl="20" :xxl="20">
+        <GiTable
+          row-key="id"
+          :data="dataList"
+          :columns="columns"
+          :loading="loading"
+          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+          :pagination="pagination"
+          :disabled-tools="['size']"
+          :disabled-column-keys="['username']"
+          @refresh="search"
+        >
+          <template #custom-left>
+            <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
+              <template #prefix><icon-search /></template>
+            </a-input>
+            <a-select
+              v-model="queryForm.status"
+              :options="DisEnableStatusList"
+              placeholder="请选择状态"
+              allow-clear
+              style="width: 150px"
+              @change="search"
+            />
+            <a-button @click="reset">重置</a-button>
+          </template>
+          <template #custom-right>
+            <a-button v-permission="['system:user:add']" type="primary" @click="onAdd">
+              <template #icon><icon-plus /></template>
+              <span>新增</span>
+            </a-button>
+            <a-tooltip content="导出">
+              <a-button v-permission="['system:user:export']" class="gi_hover_btn-border" @click="onExport">
+                <template #icon>
+                  <icon-download />
+                </template>
               </a-button>
-              <a-tooltip content="导出">
-                <a-button v-permission="['system:user:export']" class="gi_hover_btn-border" @click="onExport">
-                  <template #icon>
-                    <icon-download />
-                  </template>
-                </a-button>
-              </a-tooltip>
-            </template>
-            <template #username="{ record }">
-              <GiCellAvatar
-                :avatar="getAvatar(record.avatar, record.gender)"
-                :name="record.username"
-                is-link
-                @click="onDetail(record)"
-              />
-            </template>
-            <template #gender="{ record }">
-              <GiCellGender :gender="record.gender" />
-            </template>
-            <template #status="{ record }">
-              <GiCellStatus :status="record.status" />
-            </template>
-            <template #isSystem="{ record }">
-              <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
-              <a-tag v-else color="arcoblue" size="small">否</a-tag>
-            </template>
-            <template #action="{ record }">
-              <a-space>
-                <a-link v-permission="['system:user:update']" @click="onUpdate(record)">修改</a-link>
-                <a-link
-                  v-permission="['system:user:delete']"
-                  status="danger"
-                  :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                  :disabled="record.disabled"
-                  @click="onDelete(record)"
-                >
-                  删除
-                </a-link>
-                <a-dropdown>
-                  <a-link v-if="has.hasPermOr(['system:user:resetPwd'])" type="text">更多</a-link>
-                  <template #content>
-                    <a-doption v-permission="['system:user:resetPwd']" @click="onResetPwd(record)">重置密码</a-doption>
-                  </template>
-                </a-dropdown>
-              </a-space>
-            </template>
-          </GiTable>
-        </a-col>
-      </a-row>
-    </a-card>
+            </a-tooltip>
+          </template>
+          <template #username="{ record }">
+            <GiCellAvatar
+              :avatar="getAvatar(record.avatar, record.gender)"
+              :name="record.username"
+              is-link
+              @click="onDetail(record)"
+            />
+          </template>
+          <template #gender="{ record }">
+            <GiCellGender :gender="record.gender" />
+          </template>
+          <template #status="{ record }">
+            <GiCellStatus :status="record.status" />
+          </template>
+          <template #isSystem="{ record }">
+            <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+            <a-tag v-else color="arcoblue" size="small">否</a-tag>
+          </template>
+          <template #action="{ record }">
+            <a-space>
+              <a-link v-permission="['system:user:update']" @click="onUpdate(record)">修改</a-link>
+              <a-link
+                v-permission="['system:user:delete']"
+                status="danger"
+                :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+                :disabled="record.disabled"
+                @click="onDelete(record)"
+              >
+                删除
+              </a-link>
+              <a-dropdown>
+                <a-link v-if="has.hasPermOr(['system:user:resetPwd'])" type="text">更多</a-link>
+                <template #content>
+                  <a-doption v-permission="['system:user:resetPwd']" @click="onResetPwd(record)">重置密码</a-doption>
+                </template>
+              </a-dropdown>
+            </a-space>
+          </template>
+        </GiTable>
+      </a-col>
+    </a-row>
 
     <UserAddModal ref="UserAddModalRef" @save-success="search" />
     <UserDetailDrawer ref="UserDetailDrawerRef" />
diff --git a/src/views/tool/generator/index.vue b/src/views/tool/generator/index.vue
index 48e04ac..91afece 100644
--- a/src/views/tool/generator/index.vue
+++ b/src/views/tool/generator/index.vue
@@ -1,37 +1,36 @@
 <template>
-  <div class="gi_page">
-    <a-card title="代码生成" class="general-card">
-      <GiTable
-        row-key="tableName"
-        :data="dataList"
-        :columns="columns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
-        :pagination="pagination"
-        :disabled-tools="['size', 'setting']"
-        :disabled-column-keys="['tableName']"
-        @refresh="search"
-      >
-        <template #custom-left>
-          <a-input v-model="queryForm.tableName" placeholder="请输入表名称" allow-clear @change="search">
-            <template #prefix><icon-search /></template>
-          </a-input>
-          <a-button @click="reset">重置</a-button>
-        </template>
-        <template #action="{ record }">
-          <a-space>
-            <a-link @click="onConfig(record.tableName, record.comment)">配置</a-link>
-            <a-link
-              :title="record.isConfiged ? '生成' : '请先进行生成配置'"
-              :disabled="!record.isConfiged"
-              @click="onPreview(record.tableName)"
-            >
-              生成
-            </a-link>
-          </a-space>
-        </template>
-      </GiTable>
-    </a-card>
+  <div class="table-page">
+    <GiTable
+      row-key="tableName"
+      title="代码生成"
+      :data="dataList"
+      :columns="columns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :pagination="pagination"
+      :disabled-tools="['size', 'setting']"
+      :disabled-column-keys="['tableName']"
+      @refresh="search"
+    >
+      <template #custom-left>
+        <a-input v-model="queryForm.tableName" placeholder="请输入表名称" allow-clear @change="search">
+          <template #prefix><icon-search /></template>
+        </a-input>
+        <a-button @click="reset">重置</a-button>
+      </template>
+      <template #action="{ record }">
+        <a-space>
+          <a-link @click="onConfig(record.tableName, record.comment)">配置</a-link>
+          <a-link
+            :title="record.isConfiged ? '生成' : '请先进行生成配置'"
+            :disabled="!record.isConfiged"
+            @click="onPreview(record.tableName)"
+          >
+            生成
+          </a-link>
+        </a-space>
+      </template>
+    </GiTable>
 
     <GenConfigDrawer ref="GenConfigDrawerRef" @save-success="search" />
     <GenPreviewModal ref="GenPreviewModalRef" @generate="onGenerate" />