From 6bea4a03b32c48d72cee59e46c90accdf07b8b35 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 23 四月 2026 17:59:22 +0800
Subject: [PATCH] 阳光彩印 1.协同审批管理不再需要选择审批人 2.审批管理添加审批流联调 3.销售发货、采购台账、销售报价不再需要选择审批人

---
 src/views/collaborativeApproval/approvalProcess/index.vue |  763 +++++++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 619 insertions(+), 144 deletions(-)

diff --git a/src/views/collaborativeApproval/approvalProcess/index.vue b/src/views/collaborativeApproval/approvalProcess/index.vue
index 9630af3..dba6bc1 100644
--- a/src/views/collaborativeApproval/approvalProcess/index.vue
+++ b/src/views/collaborativeApproval/approvalProcess/index.vue
@@ -1,180 +1,358 @@
 <template>
   <div class="app-container">
-    <div class="search_form">
-      <div>
-        <span class="search_title">娴佺▼缂栧彿锛�</span>
-        <el-input
-            v-model="searchForm.approveId"
-            style="width: 240px"
-            placeholder="璇疯緭鍏ユ祦绋嬬紪鍙锋悳绱�"
-            @change="handleQuery"
-            clearable
-            :prefix-icon="Search"
-        />
-        <span class="search_title ml10">瀹℃壒鐘舵�侊細</span>
-				<el-select v-model="searchForm.approveStatus" clearable @change="handleQuery" style="width: 240px">
-					<el-option label="寰呭鏍�" :value="0" />
-					<el-option label="瀹℃牳涓�" :value="1" />
-					<el-option label="瀹℃牳瀹屾垚" :value="2" />
-					<el-option label="瀹℃牳鏈�氳繃" :value="3" />
-					<el-option label="宸查噸鏂版彁浜�" :value="4" />
-				</el-select>
-        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
-        >鎼滅储</el-button
-        >
-      </div>
-      <div>
-        <el-button type="primary" @click="openForm('add')">鏂板</el-button>
-<!--        <el-button @click="handleOut">瀵煎嚭</el-button>-->
-        <el-button type="danger" plain @click="handleDelete">鍒犻櫎</el-button>
+    <!-- 瀹℃壒绫诲瀷鍒囨崲 - 绱у噾鏍囩寮� -->
+    <div class="type-tabs">
+      <div
+        v-for="type in approveTypes"
+        :key="type.value"
+        class="type-tab"
+        :class="{ active: activeTab === type.value }"
+        @click="activeTab = type.value; handleTabChange()"
+      >
+        <el-icon :size="14" :style="{ color: activeTab === type.value ? type.color : '#909399' }">
+          <component :is="type.icon" />
+        </el-icon>
+        <span class="tab-name">{{ type.label }}</span>
       </div>
     </div>
-    <div class="table_list">
+
+    <!-- 鎼滅储鍜屾搷浣滃尯鍩� -->
+    <el-card class="search-card" shadow="never">
+      <div class="search-content">
+        <div class="search-filters">
+          <div class="filter-item">
+            <span class="filter-label">娴佺▼缂栧彿</span>
+            <el-input
+              v-model="searchForm.approveId"
+              placeholder="璇疯緭鍏ユ祦绋嬬紪鍙�"
+              clearable
+              :prefix-icon="Search"
+              @keyup.enter="handleQuery"
+              class="search-input"
+            />
+          </div>
+          <div class="filter-item">
+            <span class="filter-label">瀹℃壒鐘舵��</span>
+            <el-select 
+              v-model="searchForm.approveStatus" 
+              clearable 
+              @change="handleQuery"
+              placeholder="璇烽�夋嫨鐘舵��"
+              class="search-select"
+            >
+              <el-option label="寰呭鏍�" :value="0">
+                <el-tag size="small" type="warning">寰呭鏍�</el-tag>
+              </el-option>
+              <el-option label="瀹℃牳涓�" :value="1">
+                <el-tag size="small" type="primary">瀹℃牳涓�</el-tag>
+              </el-option>
+              <el-option label="瀹℃牳瀹屾垚" :value="2">
+                <el-tag size="small" type="success">瀹℃牳瀹屾垚</el-tag>
+              </el-option>
+              <el-option label="瀹℃牳鏈�氳繃" :value="3">
+                <el-tag size="small" type="danger">瀹℃牳鏈�氳繃</el-tag>
+              </el-option>
+              <el-option label="宸查噸鏂版彁浜�" :value="4">
+                <el-tag size="small" type="info">宸查噸鏂版彁浜�</el-tag>
+              </el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" @click="handleQuery" class="search-btn">
+            <el-icon><Search /></el-icon>
+            鎼滅储
+          </el-button>
+          <el-button @click="resetQuery" class="reset-btn">
+            <el-icon><RefreshRight /></el-icon>
+            閲嶇疆
+          </el-button>
+        </div>
+        <div class="search-actions">
+          <el-button
+            type="primary"
+            @click="openForm('add')"
+            v-if="currentApproveType !== 5 && currentApproveType !== 6 && currentApproveType !== 7"
+            class="action-btn primary"
+          >
+            <el-icon><Plus /></el-icon>
+            鏂板
+          </el-button>
+          <el-button @click="handleOut" class="action-btn">
+            <el-icon><Download /></el-icon>
+            瀵煎嚭
+          </el-button>
+          <el-button
+            type="danger"
+            plain
+            @click="handleDelete"
+            v-if="currentApproveType !== 5 && currentApproveType !== 6 && currentApproveType !== 7"
+            class="action-btn danger"
+          >
+            <el-icon><Delete /></el-icon>
+            鍒犻櫎
+          </el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <!-- 鏁版嵁琛ㄦ牸 -->
+    <el-card class="table-card" shadow="never" v-loading="tableLoading">
+      <template #header>
+        <div class="table-header">
+          <div class="table-title">
+            <div class="type-tag" :style="{ backgroundColor: currentTypeInfo.color }">
+              <el-icon color="#fff" :size="16"><component :is="currentTypeInfo.icon" /></el-icon>
+            </div>
+            <span>{{ currentTypeInfo.label }}鍒楄〃</span>
+            <el-tag type="info" size="small" effect="plain" class="count-tag">
+              鍏� {{ page.total }} 鏉�
+            </el-tag>
+          </div>
+        </div>
+      </template>
       <PIMTable
-          rowKey="id"
-          :column="tableColumn"
-          :tableData="tableData"
-          :page="page"
-          :isSelection="true"
-          @selection-change="handleSelectionChange"
-          :tableLoading="tableLoading"
-          @pagination="pagination"
-          :total="page.total"
+        rowKey="id"
+        :column="tableColumnCopy"
+        :tableData="tableData"
+        :page="page"
+        :isSelection="true"
+        @selection-change="handleSelectionChange"
+        :tableLoading="tableLoading"
+        @pagination="pagination"
+        :total="page.total"
+        class="custom-table"
       ></PIMTable>
-    </div>
-    <info-form-dia ref="infoFormDia" @close="handleQuery"></info-form-dia>
-    <approval-dia ref="approvalDia" @close="handleQuery"></approval-dia>
+    </el-card>
+
+    <!-- 寮圭獥缁勪欢 -->
+    <info-form-dia ref="infoFormDia" @close="handleQuery" :approveType="currentApproveType"></info-form-dia>
+    <approval-dia ref="approvalDia" @close="handleQuery" :approveType="currentApproveType"></approval-dia>
     <FileList ref="fileListRef" />
   </div>
 </template>
 
 <script setup>
 import FileList from "./fileList.vue";
-import { Search } from "@element-plus/icons-vue";
-import {onMounted, ref} from "vue";
+import { Search, Plus, Delete, Download, RefreshRight, DocumentChecked } from "@element-plus/icons-vue";
+import {onMounted, ref, computed, reactive, toRefs, nextTick, getCurrentInstance} from "vue";
 import {ElMessageBox} from "element-plus";
+import { useRoute } from 'vue-router';
 import InfoFormDia from "@/views/collaborativeApproval/approvalProcess/components/infoFormDia.vue";
 import ApprovalDia from "@/views/collaborativeApproval/approvalProcess/components/approvalDia.vue";
 import {approveProcessDelete, approveProcessListPage} from "@/api/collaborativeApproval/approvalProcess.js";
 import useUserStore from "@/store/modules/user";
+
 const userStore = useUserStore();
+const route = useRoute();
+
+// 褰撳墠閫変腑鐨勬爣绛鹃〉锛岄粯璁や负鍏嚭绠＄悊
+const activeTab = ref('1');
+
+// 鍚勭被鍨嬫暟閲忕粺璁�
+const typeCounts = ref({});
+
+// 瀹℃壒绫诲瀷閰嶇疆
+const approveTypes = [
+  { value: '1', label: '鍏嚭绠＄悊', icon: 'Suitcase', color: '#409EFF' },
+  { value: '2', label: '璇峰亣绠＄悊', icon: 'Calendar', color: '#67C23A' },
+  { value: '3', label: '鍑哄樊绠＄悊', icon: 'Location', color: '#E6A23C' },
+  { value: '4', label: '鎶ラ攢绠＄悊', icon: 'Money', color: '#F56C6C' },
+  { value: '5', label: '閲囪喘瀹℃壒', icon: 'ShoppingCart', color: '#909399' },
+  { value: '6', label: '鎶ヤ环瀹℃壒', icon: 'DocumentChecked', color: '#9B59B6' },
+  { value: '7', label: '鍙戣揣瀹℃壒', icon: 'Van', color: '#1ABC9C' },
+];
+
+// 褰撳墠瀹℃壒绫诲瀷淇℃伅
+const currentTypeInfo = computed(() => {
+  return approveTypes.find(t => t.value === activeTab.value) || approveTypes[0];
+});
+
+// 鑾峰彇绫诲瀷鏁伴噺
+const getTypeCount = (value) => {
+  return typeCounts.value[value] || 0;
+};
+
+// 褰撳墠瀹℃壒绫诲瀷锛屾牴鎹�変腑鐨勬爣绛鹃〉璁＄畻
+const currentApproveType = computed(() => {
+  return Number(activeTab.value);
+});
+
+// 鏍囩椤靛垏鎹㈠鐞�
+const handleTabChange = () => {
+  // 鍒囨崲鏍囩椤垫椂閲嶇疆鎼滅储鏉′欢鍜屽垎椤碉紝骞堕噸鏂板姞杞芥暟鎹�
+  searchForm.value.approveId = '';
+  searchForm.value.approveStatus = '';
+  page.current = 1;
+  getList();
+};
 
 
 const data = reactive({
   searchForm: {
-		approveId: "",
-		approveStatus: "",
+    approveId: "",
+    approveStatus: "",
   },
 });
 const { searchForm } = toRefs(data);
-const tableColumn = ref([
-  {
-    label: "瀹℃壒鐘舵��",
-    prop: "approveStatus",
-    dataType: "tag",
-		width: 100,
-    formatData: (params) => {
-      if (params == 0) {
-        return "寰呭鏍�";
-      } else if (params == 1) {
-        return "瀹℃牳涓�";
-      } else if (params == 2) {
-        return "瀹℃牳瀹屾垚";
-      } else if (params == 4) {
-        return "宸查噸鏂版彁浜�";
-      } else {
-        return '涓嶉�氳繃';
-      }
+
+// 閲嶇疆鎼滅储
+const resetQuery = () => {
+  searchForm.value.approveId = '';
+  searchForm.value.approveStatus = '';
+  handleQuery();
+};
+
+// 鍔ㄦ�佽〃鏍煎垪閰嶇疆锛屾牴鎹鎵圭被鍨嬬敓鎴愬垪
+const tableColumnCopy = computed(() => {
+  const isLeaveType = currentApproveType.value === 2; // 璇峰亣绠＄悊
+  const isReimburseType = currentApproveType.value === 4; // 鎶ラ攢绠＄悊
+  const isQuotationType = currentApproveType.value === 6; // 鎶ヤ环瀹℃壒
+  const isPurchaseType = currentApproveType.value === 5; // 閲囪喘瀹℃壒
+  
+  // 鍩虹鍒楅厤缃�
+  const baseColumns = [
+    {
+      label: "瀹℃壒鐘舵��",
+      prop: "approveStatus",
+      dataType: "tag",
+      width: 100,
+      formatData: (params) => {
+        if (params == 0) {
+          return "寰呭鏍�";
+        } else if (params == 1) {
+          return "瀹℃牳涓�";
+        } else if (params == 2) {
+          return "瀹℃牳瀹屾垚";
+        } else if (params == 4) {
+          return "宸查噸鏂版彁浜�";
+        } else {
+          return '涓嶉�氳繃';
+        }
+      },
+      formatType: (params) => {
+        if (params == 0) {
+          return "warning";
+        } else if (params == 1) {
+          return "primary";
+        } else if (params == 2) {
+          return "success";
+        } else if (params == 4) {
+          return "info";
+        } else {
+          return 'danger';
+        }
+      },
     },
-    formatType: (params) => {
-      if (params == 0) {
-        return "warning";
-      } else if (params == 1) {
-        return "primary";
-      } else if (params == 2) {
-        return "success";
-      } else if (params == 4) {
-        return "";
-      } else {
-        return 'danger';
-      }
+    {
+      label: "娴佺▼缂栧彿",
+      prop: "approveId",
+      width: 170
     },
-  },
-  {
-    label: "娴佺▼缂栧彿",
-    prop: "approveId",
-    width: 170
-  },
-  {
-    label: "鐢宠閮ㄩ棬",
-    prop: "approveDeptName",
-		width: 220
-  },
-  {
-    label: "瀹℃壒浜嬬敱",
-    prop: "approveReason",
-		width: 200
-  },
-  {
-    label: "鐢宠浜�",
-    prop: "approveUserName",
-    width: 120
-  },
-  {
-    label: "鐢宠鏃ユ湡",
-    prop: "approveTime",
-		width: 200
-  },
-  {
-    label: "缁撴潫鏃ユ湡",
-    prop: "approveOverTime",
-    width: 120
-  },
-  {
+    {
+      label: "鐢宠閮ㄩ棬",
+      prop: "approveDeptName",
+      width: 220
+    },
+    {
+      label: isQuotationType ? "鎶ヤ环鍗曞彿" : isPurchaseType ? "閲囪喘鍚堝悓鍙�" : "瀹℃壒浜嬬敱",
+      prop: "approveReason",
+    },
+    {
+      label: "鐢宠浜�",
+      prop: "approveUserName",
+      width: 120
+    }
+  ];
+  
+  // 閲戦鍒楋紙浠呮姤閿�绠＄悊鏄剧ず锛�
+  if (isReimburseType) {
+    baseColumns.push({
+      label: "閲戦锛堝厓锛�",
+      prop: "price",
+      width: 120
+    });
+  }
+  
+  // 鏃ユ湡鍒楋紙鏍规嵁绫诲瀷鍔ㄦ�侀厤缃級
+  baseColumns.push(
+    {
+      label: isLeaveType ? "寮�濮嬫棩鏈�" : "鐢宠鏃ユ湡",
+      prop: isLeaveType ? "startDate" : "approveTime",
+      width: 200
+    },
+    {
+      label: "缁撴潫鏃ユ湡",
+      prop: isLeaveType ? "endDate" : "approveOverTime",
+      width: 120
+    }
+  );
+  
+  // 褰撳墠瀹℃壒浜哄垪
+  baseColumns.push({
     label: "褰撳墠瀹℃壒浜�",
     prop: "approveUserCurrentName",
     width: 120
-  },
-  {
+  });
+  
+  // 鎿嶄綔鍒�
+  const actionOperations = [
+    {
+      name: "缂栬緫",
+      type: "text",
+      clickFun: (row) => {
+        openForm("edit", row);
+      },
+      disabled: (row) =>
+        currentApproveType.value === 5 ||
+        currentApproveType.value === 6 ||
+        currentApproveType.value === 7 ||
+        row.approveStatus == 2 ||
+        row.approveStatus == 1 ||
+        row.approveStatus == 4
+    },
+    {
+      name: "瀹℃牳",
+      type: "text",
+      clickFun: (row) => {
+        openApprovalDia("approval", row);
+      },
+      disabled: (row) =>
+        row.approveUserCurrentId == null ||
+        row.approveStatus == 2 ||
+        row.approveStatus == 3 ||
+        row.approveStatus == 4 ||
+        row.approveUserCurrentId !== userStore.id
+    },
+    {
+      name: "璇︽儏",
+      type: "text",
+      clickFun: (row) => {
+        openApprovalDia("view", row);
+      },
+    },
+  ];
+
+  // 鎶ヤ环瀹℃壒锛堢被鍨� 6锛変笉灞曠ず"闄勪欢"鎿嶄綔
+  if (!isQuotationType) {
+    actionOperations.push({
+      name: "闄勪欢",
+      type: "text",
+      clickFun: (row) => {
+        downLoadFile(row);
+      },
+    });
+  }
+
+  baseColumns.push({
     dataType: "action",
     label: "鎿嶄綔",
     align: "center",
     fixed: "right",
     width: 230,
-    operation: [
-      {
-        name: "缂栬緫",
-        type: "text",
-        clickFun: (row) => {
-          openForm("edit", row);
-        },
-				disabled: (row) => row.approveStatus == 2 || row.approveStatus == 1 || row.approveStatus == 4
-      },
-      {
-        name: "瀹℃牳",
-        type: "text",
-        clickFun: (row) => {
-          openApprovalDia("approval", row);
-        },
-				disabled: (row) => row.approveUserCurrentId == null || row.approveStatus == 2 || row.approveStatus == 3 || row.approveStatus == 4 || row.approveUserCurrentId !== userStore.id
-      },
-      {
-        name: "璇︽儏",
-        type: "text",
-        clickFun: (row) => {
-          openApprovalDia('view', row);
-        },
-      },
-      {
-        name: "闄勪欢",
-        type: "text",
-        clickFun: (row) => {
-          downLoadFile(row);
-        },
-      },
-    ],
-  },
-]);
+    operation: actionOperations,
+  });
+  
+  return baseColumns;
+});
 const tableData = ref([]);
 const selectedRows = ref([]);
 const tableLoading = ref(false);
@@ -205,14 +383,43 @@
 };
 const getList = () => {
   tableLoading.value = true;
-  approveProcessListPage({...page, ...searchForm.value,}).then(res => {
+  approveProcessListPage({...page, ...searchForm.value, approveType: currentApproveType.value}).then(res => {
     tableLoading.value = false;
     tableData.value = res.data.records
     page.total = res.data.total;
+    // 鏇存柊褰撳墠绫诲瀷鏁伴噺
+    typeCounts.value[activeTab.value] = res.data.total;
   }).catch(err => {
     tableLoading.value = false;
   })
 };
+// 瀵煎嚭
+const handleOut = () => {
+  const type = currentApproveType.value
+  const urlMap = {
+    0: "/approveProcess/exportZero",
+    1: "/approveProcess/exportOne",
+    2: "/approveProcess/exportTwo",
+    3: "/approveProcess/exportThree",
+    4: "/approveProcess/exportFour",
+    5: "/approveProcess/exportFive",
+    6: "/approveProcess/exportSix",
+    7: "/approveProcess/exportSeven",
+  }
+  const url = urlMap[type] || urlMap[0]
+  const nameMap = {
+    0: "鍗忓悓瀹℃壒绠＄悊琛�",
+    1: "鍏嚭绠＄悊瀹℃壒琛�",
+    2: "璇峰亣绠＄悊瀹℃壒琛�",
+    3: "鍑哄樊绠＄悊瀹℃壒琛�",
+    4: "鎶ラ攢绠＄悊瀹℃壒琛�",
+    5: "閲囪喘鐢宠瀹℃壒琛�",
+    6: "鎶ヤ环瀹℃壒琛�",
+    7: "鍙戣揣瀹℃壒琛�",
+  }
+  const fileName = nameMap[type] || nameMap[0]
+  proxy.download(url, {}, `${fileName}.xlsx`)
+}
 // 琛ㄦ牸閫夋嫨鏁版嵁
 const handleSelectionChange = (selection) => {
   selectedRows.value = selection;
@@ -256,8 +463,276 @@
       });
 };
 onMounted(() => {
+  // 鏍规嵁URL鍙傛暟璁剧疆鏍囩椤靛拰鏌ヨ鏉′欢
+  const approveType = route.query.approveType;
+  const approveId = route.query.approveId;
+  
+  if (approveType) {
+    // 璁剧疆鏍囩椤碉紙approveType 瀵瑰簲 activeTab 鐨� name锛�
+    activeTab.value = String(approveType);
+  }
+  
+  if (approveId) {
+    // 璁剧疆娴佺▼缂栧彿鏌ヨ鏉′欢
+    searchForm.value.approveId = String(approveId);
+  }
+  
+  // 鏌ヨ鍒楄〃
   getList();
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.page-header {
+  margin-bottom: 20px;
+}
+
+.header-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.title-icon {
+  font-size: 28px;
+  color: var(--el-color-primary, #409EFF);
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.main-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--el-text-color-primary, #303133);
+}
+
+.sub-title {
+  font-size: 13px;
+  color: var(--el-text-color-secondary, #909399);
+}
+
+/* 瀹℃壒绫诲瀷鍒囨崲 - 绱у噾鏍囩寮� */
+.type-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 16px;
+  padding: 4px;
+  background: var(--el-fill-color-light, #f5f7fa);
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+.type-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  font-size: 13px;
+  color: var(--el-text-color-regular, #606266);
+}
+
+.type-tab:hover {
+  background: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.1));
+  color: var(--el-color-primary, #409EFF);
+}
+
+.type-tab.active {
+  background: var(--el-bg-color, #fff);
+  color: var(--el-color-primary, #409EFF);
+  font-weight: 600;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.tab-name {
+  font-size: 13px;
+}
+
+.tab-count {
+  min-width: 16px;
+  height: 16px;
+  padding: 0 5px;
+  background: var(--el-color-success, #67C23A);
+  color: #fff;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 鎼滅储鍗＄墖 */
+.search-card {
+  margin-bottom: 16px;
+  border-radius: 12px;
+}
+
+:deep(.el-card__body) {
+  padding: 20px;
+}
+
+.search-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.search-filters {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.filter-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.filter-label {
+  font-size: 14px;
+  color: var(--el-text-color-regular, #606266);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.search-input,
+.search-select {
+  width: 200px;
+}
+
+.search-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.reset-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.search-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.action-btn.primary {
+  background: var(--el-color-primary, #409EFF);
+  border: none;
+}
+
+.action-btn.danger {
+  transition: all 0.3s;
+}
+
+.action-btn.danger:hover {
+  background: #f56c6c;
+  color: #fff;
+}
+
+/* 琛ㄦ牸鍗＄墖 */
+.table-card {
+  border-radius: 12px;
+}
+
+:deep(.el-card__header) {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.table-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary, #303133);
+}
+
+.type-tag {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.count-tag {
+  margin-left: 8px;
+}
+
+.custom-table {
+  margin-top: 8px;
+}
+
+/* 鍝嶅簲寮� */
+@media (max-width: 1200px) {
+  .search-content {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-filters {
+    justify-content: flex-start;
+  }
+
+  .search-actions {
+    justify-content: flex-end;
+  }
+}
+
+@media (max-width: 768px) {
+  .type-tabs {
+    padding: 3px;
+  }
+
+  .type-tab {
+    padding: 6px 10px;
+    font-size: 12px;
+  }
+
+  .tab-name {
+    font-size: 12px;
+  }
+
+  .search-filters {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .filter-item {
+    width: 100%;
+  }
+
+  .search-input,
+  .search-select {
+    width: 100%;
+  }
+}
+</style>

--
Gitblit v1.9.3