refactor: 重构 API 层目录结构 & 样式模块化拆分

- API 层按业务域拆分（api/auth/, api/file/, api/system/*） - 类型定义从 types/api/ 移入对应 api 模块内（就近原则） - 公共类型统一为 api/common.ts，移除冗余类型重导出 - 样式文件按职责拆分（base/, layout/, vendors/），移除 common.scss - 移除失效的单元测试文件
2026-03-30 08:11:03 +08:00
parent 3a27da6607
commit 3fedf4943d
107 changed files with 464 additions and 8264 deletions
--- a/src/views/codegen/index.vue
+++ b/src/views/codegen/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <!-- 搜索区域 -->
-    <div class="search-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
@@ -12,7 +12,7 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <template #icon>
              <Search />
@@ -27,16 +27,15 @@
          </el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-card">
+    <el-card class="page-content" shadow="never">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        border
-        class="data-table__content"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="表名" prop="tableName" min-width="100" />
@@ -531,7 +530,7 @@ import type {
  TableQueryParams,
  TableItem,
  GeneratorPreviewItem,
-} from "@/api/types";
+} from "@/api/codegen";
 import { ElLoading } from "element-plus";

 import DictAPI from "@/api/system/dict";
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="relative p-6">
+  <div class="relative p-5">
    <!-- github 角标 -->
    <github-corner class="absolute top-0 right-0 z-1 border-0" />

-    <el-card shadow="never" class="mt-2">
+    <el-card shadow="never">
      <div class="flex flex-wrap">
        <!-- 左侧问候语区域 -->
        <div class="flex-1 flex items-start">
@@ -383,7 +383,7 @@ import { dayjs } from "element-plus";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
 import LogAPI from "@/api/system/log";
-import type { VisitStatsDetail, VisitTrendDetail } from "@/types/api";
+import type { VisitStatsDetail, VisitTrendDetail } from "@/api/system/log";
 import { useUserStore } from "@/store/modules/user";
 import { formatGrowthRate } from "@/utils";
 import { useTransition, useDateFormat } from "@vueuse/core";
--- a/src/views/demo/api/apifox.vue
+++ b/src/views/demo/api/apifox.vue
@@ -1,6 +1,6 @@
 <!-- 接口文档 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <iframe
      src="https://www.apifox.cn/apidoc/shared-195e783f-4d85-4235-a038-eec696de4ea5"
      width="100%"
@@ -12,14 +12,14 @@

 <style lang="scss" scoped>
 /** 关闭tag标签  */
-.app-container {
+.page-container {
  /* 50px = navbar = 50px */
  height: calc(100vh - 50px);
 }

 /** 开启tag标签  */
 .hasTagsView {
-  .app-container {
+  .page-container {
    /* 84px = navbar + tags-view = 50px + 34px */
    height: calc(100vh - 84px);
  }
--- a/src/views/demo/auto-operation-column.vue
+++ b/src/views/demo/auto-operation-column.vue
@@ -1,6 +1,6 @@
 <!-- 文件上传组件示例 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-link
      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/auto-opreation-column.vue"
      type="primary"
--- a/src/views/demo/curd-single.vue
+++ b/src/views/demo/curd-single.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container h-full flex flex-1 flex-col">
+  <div class="page-container h-full flex flex-1 flex-col">
    <div class="mb-10">
      <el-link
        href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/curd-demo.vue"
@@ -76,7 +76,7 @@
 import UserAPI from "@/api/system/user";
 import DeptAPI from "@/api/system/dept";
 import RoleAPI from "@/api/system/role";
-import type { UserForm, UserQueryParams, UserItem } from "@/types/api";
+import type { UserForm, UserQueryParams, UserItem } from "@/api/system/user";
 import type { IObject, IModalConfig, IContentConfig, ISearchConfig } from "@/components/CURD/types";
 import { DeviceEnum } from "@/enums/settings";
 import { useAppStore } from "@/store";
@@ -585,7 +585,7 @@ onMounted(() => {
 </script>

 <style scoped>
-.app-container {
+.page-container {
  padding: 20px;
 }
 </style>
--- a/src/views/demo/curd/config/add.ts
+++ b/src/views/demo/curd/config/add.ts
@@ -1,5 +1,5 @@
 import UserAPI from "@/api/system/user";
-import type { UserForm } from "@/types/api";
+import type { UserForm } from "@/api/system/user";
 import type { IModalConfig } from "@/components/CURD/types";
 import { deptArr, roleArr } from "./options";

--- a/src/views/demo/curd/config/content.ts
+++ b/src/views/demo/curd/config/content.ts
@@ -1,6 +1,6 @@
 import UserAPI from "@/api/system/user";
 import RoleAPI from "@/api/system/role";
-import type { UserQueryParams, UserItem } from "@/types/api";
+import type { UserQueryParams, UserItem } from "@/api/system/user";
 import type { IContentConfig } from "@/components/CURD/types";

 const contentConfig: IContentConfig<UserQueryParams, UserItem> = {
--- a/src/views/demo/curd/config/edit.ts
+++ b/src/views/demo/curd/config/edit.ts
@@ -1,5 +1,5 @@
 import UserAPI from "@/api/system/user";
-import type { UserForm } from "@/types/api";
+import type { UserForm } from "@/api/system/user";
 import type { IModalConfig } from "@/components/CURD/types";
 import { DeviceEnum } from "@/enums/settings";
 import { useAppStore } from "@/store";
--- a/src/views/demo/curd/config2/add.ts
+++ b/src/views/demo/curd/config2/add.ts
@@ -1,4 +1,4 @@
-import type { UserForm } from "@/types/api";
+import type { UserForm } from "@/api/system/user";
 import type { IModalConfig } from "@/components/CURD/types";
 import { deptArr } from "../config/options";

--- a/src/views/demo/curd/index.vue
+++ b/src/views/demo/curd/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container h-full flex flex-1 flex-col">
+  <div class="page-container h-full flex flex-1 flex-col">
    <div class="flex-x-between mb-10">
      <el-link
        href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/curd/index.vue"
--- a/src/views/demo/dict-sync.vue
+++ b/src/views/demo/dict-sync.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
@@ -143,7 +143,7 @@
 import { useDictStoreHook } from "@/store/modules/dict";
 import { useDateFormat } from "@vueuse/core";
 import DictAPI from "@/api/system/dict";
-import type { DictItemForm } from "@/types/api";
+import type { DictItemForm } from "@/api/system/dict";
 import { useDictSync, DictMessage } from "@/composables";

 // 性别字典编码
--- a/src/views/demo/dictionary.vue
+++ b/src/views/demo/dictionary.vue
@@ -1,6 +1,6 @@
 <!-- 字典组件示例 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-link
      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/dictionary.vue"
      type="primary"
--- a/src/views/demo/drag.vue
+++ b/src/views/demo/drag.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card shadow="never">
@@ -71,7 +71,7 @@ const userList = ref([
 </script>

 <style lang="scss" scoped>
-.app-container {
+.page-container {
  padding: 20px;

  .el-card {
--- a/src/views/demo/icon-selector.vue
+++ b/src/views/demo/icon-selector.vue
@@ -1,6 +1,6 @@
 <!-- 图标选择器示例 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-link
      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/icon-selector.vue"
      type="primary"
--- a/src/views/demo/internal-doc.vue
+++ b/src/views/demo/internal-doc.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <iframe src="https://juejin.cn/post/7228990409909108793" frameborder="0" />
  </div>
 </template>
 <style lang="scss" scoped>
 /** 关闭tag标签  */
-.app-container {
+.page-container {
  /* 50px = navbar = 50px */
  height: calc(100vh - 50px);
 }

 /** 开启tag标签  */
 .hasTagsView {
-  .app-container {
+  .page-container {
    /* 84px = navbar + tags-view = 50px + 34px */
    height: calc(100vh - 84px);
  }
--- a/src/views/demo/multi-level/children/children/level3-1.vue
+++ b/src/views/demo/multi-level/children/children/level3-1.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <div flex flex-col gap-20px>
      <MultiLevel1 />
      <MultiLevel2 />
--- a/src/views/demo/multi-level/children/children/level3-2.vue
+++ b/src/views/demo/multi-level/children/children/level3-2.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <div flex flex-col gap-20px>
      <MultiLevel1 />
      <MultiLevel2 />
--- a/src/views/demo/table-select/index.vue
+++ b/src/views/demo/table-select/index.vue
@@ -1,6 +1,6 @@
 <!-- 列表选择器示例 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-link
      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/table-select/index.vue"
      type="primary"
--- a/src/views/demo/text-scroll.vue
+++ b/src/views/demo/text-scroll.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <!-- 基础用法 -->
    <TextScroll text="这是一条基础的滚动公告，默认向左滚动" typewriter />

@@ -22,7 +22,7 @@ import TextScroll from "@/components/TextScroll/index.vue";
 </script>

 <style lang="scss" scoped>
-.app-container {
+.page-container {
  :deep(.text-scroll-container) {
    margin-bottom: 20px;
  }
--- a/src/views/demo/upload.vue
+++ b/src/views/demo/upload.vue
@@ -1,6 +1,6 @@
 <!-- 文件上传组件示例 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-link
      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/upload.vue"
      type="primary"
--- a/src/views/demo/vxe-table/index.vue
+++ b/src/views/demo/vxe-table/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <!-- 表格 -->
    <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridEvents">
      <!-- 搜索 -->
--- a/src/views/demo/wang-editor.vue
+++ b/src/views/demo/wang-editor.vue
@@ -1,6 +1,6 @@
 <!-- wangEditor富文本编辑器示例 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-link
      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/wang-editor.vue"
      type="primary"
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -118,7 +118,7 @@
 <script setup lang="ts">
 import type { FormInstance } from "element-plus";
 import AuthAPI from "@/api/auth";
-import type { LoginRequest } from "@/types/api";
+import type { LoginRequest } from "@/api/auth";
 import router from "@/router";
 import { useUserStore } from "@/store";
 import { AuthStorage } from "@/utils/auth";
--- a/src/views/login/components/Register.vue
+++ b/src/views/login/components/Register.vue
@@ -103,7 +103,7 @@ import type { FormInstance } from "element-plus";
 import { Lock } from "@element-plus/icons-vue";
 import { useI18n } from "vue-i18n";
 import AuthAPI from "@/api/auth";
-import type { LoginRequest } from "@/types/api";
+import type { LoginRequest } from "@/api/auth";

 const { t } = useI18n();

--- a/src/views/profile/index.vue
+++ b/src/views/profile/index.vue
@@ -307,7 +307,7 @@ import type {
  MobileUpdateForm,
  EmailUpdateForm,
  UserProfileForm,
-} from "@/types/api";
+} from "@/api/system/user";

 import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import FileAPI from "@/api/file";
--- a/src/views/profile/notice/index.vue
+++ b/src/views/profile/notice/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <!-- 搜索区域 -->
-    <div class="filter-section">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="通知标题" prop="title">
          <el-input
@@ -12,7 +12,7 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <template #icon>
              <Search />
@@ -27,15 +27,14 @@
          </el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
+    <el-card class="page-content" shadow="never">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="pageData"
        highlight-current-row
-        class="table-section__content"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="通知标题" prop="title" min-width="200" />
@@ -115,7 +114,7 @@ defineOptions({

 import { onMounted, reactive, ref } from "vue";
 import NoticeAPI from "@/api/system/notice";
-import type { NoticeDetail, NoticeItem, NoticeQueryParams } from "@/types/api";
+import type { NoticeDetail, NoticeItem, NoticeQueryParams } from "@/api/system/notice";

 const queryFormRef = ref();
 const pageData = ref<NoticeItem[]>([]);
--- a/src/views/system/config/index.vue
+++ b/src/views/system/config/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
@@ -11,16 +11,16 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button
            v-hasPerm="['sys:config:create']"
            type="success"
@@ -45,7 +45,6 @@
        v-loading="loading"
        :data="pageData"
        highlight-current-row
-        class="table-section__content"
        border
        @selection-change="handleSelectionChange"
      >
@@ -139,7 +138,7 @@ defineOptions({
 });

 import ConfigAPI from "@/api/system/config";
-import type { ConfigItem, ConfigForm, ConfigQueryParams } from "@/types/api";
+import type { ConfigItem, ConfigForm, ConfigQueryParams } from "@/api/system/config";
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
 import { useDebounceFn } from "@vueuse/core";

--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
@@ -17,18 +17,18 @@
          </el-select>
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button
            v-hasPerm="['sys:dept:create']"
            type="success"
@@ -55,7 +55,6 @@
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-        class="table-section__content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
@@ -163,7 +162,7 @@ defineOptions({
 });

 import DeptAPI from "@/api/system/dept";
-import type { DeptItem, DeptForm, DeptQueryParams } from "@/types/api";
+import type { DeptItem, DeptForm, DeptQueryParams } from "@/api/system/dept";
 import type { FormInstance, FormRules } from "element-plus";

 // 表单引用
--- a/src/views/system/dict/dict-item.vue
+++ b/src/views/system/dict/dict-item.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
@@ -11,16 +11,16 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="never" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button type="success" icon="plus" @click="openDialog()">新增</el-button>
          <el-button
            type="danger"
@@ -153,7 +153,7 @@

 <script setup lang="ts">
 import DictAPI from "@/api/system/dict";
-import type { DictItemQueryParams, DictItem, DictItemForm } from "@/types/api";
+import type { DictItemQueryParams, DictItem, DictItemForm } from "@/api/system/dict";
 import type { FormInstance, FormRules } from "element-plus";

 const route = useRoute();
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
@@ -11,16 +11,16 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
          <el-button
            type="danger"
@@ -38,7 +38,6 @@
        highlight-current-row
        :data="tableData"
        border
-        class="table-section__content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
@@ -135,7 +134,7 @@ defineOptions({
 });

 import DictAPI from "@/api/system/dict";
-import type { DictTypeQueryParams, DictTypeItem, DictTypeForm } from "@/types/api";
+import type { DictTypeQueryParams, DictTypeItem, DictTypeForm } from "@/api/system/dict";
 import type { FormInstance, FormRules } from "element-plus";
 import router from "@/router";

--- a/src/views/system/log/index.vue
+++ b/src/views/system/log/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
        <el-form-item prop="keywords" label="关键字">
          <el-input
@@ -24,20 +24,19 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="data-table">
+    <el-card class="page-content" shadow="never">
      <el-table
        v-loading="loading"
        :data="pageData"
        highlight-current-row
        border
-        class="data-table__content"
      >
        <el-table-column label="操作标题" prop="title" min-width="180" show-overflow-tooltip />
        <el-table-column label="状态" prop="status" width="80" align="center">
@@ -117,7 +116,7 @@ defineOptions({
 });

 import LogAPI from "@/api/system/log";
-import type { LogItem, LogQueryParams } from "@/types/api";
+import type { LogItem, LogQueryParams } from "@/api/system/log";
 import type { FormInstance, TagProps } from "element-plus";

 function getMethodTagType(method: string): TagProps["type"] {
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
@@ -11,16 +11,16 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button
            v-hasPerm="['sys:menu:create']"
            type="success"
@@ -41,7 +41,6 @@
          children: 'children',
          hasChildren: 'hasChildren',
        }"
-        class="table-section__content"
        @row-click="handleRowClick"
      >
        <el-table-column label="菜单名称" min-width="200">
@@ -361,7 +360,7 @@
 import { useAppStore } from "@/store/modules/app";
 import { DeviceEnum } from "@/enums/settings";
 import MenuAPI from "@/api/system/menu";
-import type { MenuQueryParams, MenuForm, MenuItem } from "@/types/api";
+import type { MenuQueryParams, MenuForm, MenuItem } from "@/api/system/menu";
 import type { FormInstance, FormRules } from "element-plus";
 import { MenuScopeEnum, MenuTypeEnum } from "@/enums/business";
 import { isTenantEnabled } from "@/utils/tenant";
--- a/src/views/system/notice/index.vue
+++ b/src/views/system/notice/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-suffix=":">
        <el-form-item label="标题" prop="title">
          <el-input
@@ -24,16 +24,16 @@
          </el-select>
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button
            v-hasPerm="['sys:notice:create']"
            type="success"
@@ -59,7 +59,6 @@
        v-loading="loading"
        :data="pageData"
        highlight-current-row
-        class="table-section__content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
@@ -278,7 +277,7 @@ defineOptions({
 });

 import NoticeAPI from "@/api/system/notice";
-import type { NoticeItem, NoticeForm, NoticeQueryParams, NoticeDetail } from "@/types/api";
+import type { NoticeItem, NoticeForm, NoticeQueryParams, NoticeDetail } from "@/api/system/notice";
 import UserAPI from "@/api/system/user";
 import type { FormInstance, FormRules } from "element-plus";

--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <!-- 搜索区域 -->
-    <div class="filter-section">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
@@ -12,16 +12,16 @@
          />
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button type="success" icon="plus" @click="handleCreateClick()">新增</el-button>
          <el-button
            type="danger"
@@ -40,7 +40,6 @@
        :data="roleList"
        highlight-current-row
        border
-        class="table-section__content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center" />
@@ -234,7 +233,7 @@ import { useAppStore } from "@/store/modules/app";
 import { DeviceEnum } from "@/enums/settings";

 import RoleAPI from "@/api/system/role";
-import type { RoleItem, RoleForm, RoleQueryParams } from "@/types/api";
+import type { RoleItem, RoleForm, RoleQueryParams } from "@/api/system/role";
 import MenuAPI from "@/api/system/menu";
 import DeptAPI from "@/api/system/dept";

--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item prop="keywords" label="关键字">
          <el-input
@@ -18,16 +18,16 @@
          </el-select>
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button
            v-hasPerm="['sys:tenant:create']"
            type="success"
@@ -53,7 +53,6 @@
        :data="pageData"
        highlight-current-row
        border
-        class="table-section__content"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
@@ -362,12 +361,12 @@ import TenantAPI from "@/api/system/tenant";
 import TenantPlanAPI from "@/api/system/tenant-plan";
 import MenuAPI from "@/api/system/menu";
 import type {
-  OptionItem,
  TenantCreateForm,
  TenantForm,
  TenantQueryParams,
  TenantItem,
-} from "@/types/api";
+} from "@/api/system/tenant";
+import type { OptionItem } from "@/api/common";
 import { MenuScopeEnum } from "@/enums/business";
 import { isPlatformTenantId } from "@/utils/tenant";

@@ -487,7 +486,7 @@ function fetchData(): void {
  loading.value = true;
  TenantAPI.getPage(queryParams)
    .then((data) => {
-      pageData.value = data.list.map((item) => ({
+      pageData.value = data.list.map((item: TenantItem) => ({
        ...item,
        planId: item.planId != null ? Number(item.planId) : undefined,
      }));
--- a/src/views/system/tenant/plan.vue
+++ b/src/views/system/tenant/plan.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-container">
-    <div class="filter-section">
+  <div class="page-container">
+    <el-card class="page-search" shadow="never">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
@@ -18,16 +18,16 @@
          </el-select>
        </el-form-item>

-        <el-form-item class="search-buttons">
+        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
-    </div>
+    </el-card>

-    <el-card shadow="hover" class="table-section">
-      <div class="table-section__toolbar">
-        <div class="table-section__toolbar--actions">
+    <el-card class="page-content" shadow="never">
+      <div class="page-toolbar">
+        <div class="page-toolbar__left">
          <el-button
            v-hasPerm="['sys:tenant-plan:create']"
            type="success"
@@ -45,7 +45,6 @@
        :data="pageData"
        highlight-current-row
        border
-        class="table-section__content"
      >
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column label="套餐名称" prop="name" min-width="120" />
@@ -223,8 +222,8 @@ import type {
  TenantPlanForm,
  TenantPlanItem,
  TenantPlanQueryParams,
-  OptionItem,
-} from "@/types/api";
+} from "@/api/system/tenant-plan";
+import type { OptionItem } from "@/api/common";
 import { MenuScopeEnum } from "@/enums/business";

 // 表单引用
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -1,16 +1,16 @@
 <!-- 用户管理 -->
 <template>
-  <div class="app-container">
+  <div class="page-container">
    <el-row :gutter="20">
      <!-- 部门树 -->
-      <el-col :lg="4" :xs="24" class="mb-[12px]">
+      <el-col :lg="4" :xs="24" class="page-aside">
        <UserDeptTree v-model="queryParams.deptId" @node-click="handleQuery" />
      </el-col>

      <!-- 用户列表 -->
-      <el-col :lg="20" :xs="24">
+      <el-col :lg="20" :xs="24" class="page-main">
        <!-- 搜索区域 -->
-        <div class="filter-section">
+        <el-card shadow="never" class="page-search">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="auto">
            <el-form-item label="关键字" prop="keywords">
              <el-input
@@ -45,16 +45,16 @@
              />
            </el-form-item>

-            <el-form-item class="search-buttons">
+            <el-form-item>
              <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
              <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
            </el-form-item>
          </el-form>
-        </div>
+        </el-card>

-        <el-card shadow="hover" class="table-section">
-          <div class="table-section__toolbar">
-            <div class="table-section__toolbar--actions">
+        <el-card shadow="never" class="page-content">
+          <div class="page-toolbar">
+            <div class="page-toolbar__left">
              <el-button
                v-hasPerm="['sys:user:create']"
                type="success"
@@ -73,7 +73,7 @@
                删除
              </el-button>
            </div>
-            <div class="table-section__toolbar--tools">
+            <div class="page-toolbar__right">
              <el-button v-hasPerm="'sys:user:import'" icon="upload" @click="openImportDialog">
                导入
              </el-button>
@@ -90,7 +90,6 @@
            border
            stripe
            highlight-current-row
-            class="table-section__content"
            row-key="id"
            @selection-change="handleSelectionChange"
          >
@@ -245,7 +244,7 @@
 import { computed, onMounted, reactive, ref } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
-import type { UserForm, UserQueryParams, UserItem } from "@/types/api";
+import type { UserForm, UserQueryParams, UserItem } from "@/api/system/user";
 import { downloadFile } from "@/utils";
 import UserAPI from "@/api/system/user";
 import DeptAPI from "@/api/system/dept";