优化字典模块

pc/src/components/CommonHeader.vue

@@ -5,9 +5,11 @@
         <i class="fa fa-bars"></i>
       </el-button>
       <el-breadcrumb separator="/" class="bread">
-        <el-breadcrumb-item :to="{ path: '/' }" style="position: relative !important; top: 1px !important;">首页</el-breadcrumb-item>
+        <el-breadcrumb-item :to="{ path: '/' }"
+          style="position: relative !important; top: 1px !important;">首页</el-breadcrumb-item>
         <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index"
-          :to="(item.label === '首页' || index === breadcrumbs.length - 1) ? { path: item.path } : null" style="position: relative !important; top: 1px !important;">
+          :to="(item.label === '首页' || index === breadcrumbs.length - 1) ? { path: item.path } : null"
+          style="position: relative !important; top: 1px !important;">
           {{ item.label }}
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -21,6 +23,22 @@
       <el-button circle :icon="themeIcon" @click="toggleTheme" class="theme-toggle-btn"
         :title="currentTheme === 'dark' ? '切换到亮色模式' : '切换到暗色模式'" />
 
+      <!-- 消息中心 -->
+      <el-dropdown trigger="click">
+        <span class="el-dropdown-link" style="cursor: pointer;">
+          <el-button circle class="message-btn" title="消息中心">
+            <el-icon>
+              <Bell />
+            </el-icon>
+          </el-button>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="message-menu" style="width: 260px;">
+            <el-dropdown-item disabled>暂无新消息</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
       <el-dropdown trigger="click" @command="handleCommand">
         <span class="el-dropdown-link" style="cursor: pointer;">
           <img :src="getImageUrl('user')" class="user" />
@@ -45,6 +63,9 @@
       </el-dropdown>
     </div>
   </div>
+
+  <div class="message-center">
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -52,7 +73,7 @@ import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { useAllDataStore, useMenuStore } from "@/stores";
 import { useAuthStore } from "@/stores/auth";
-import { User, SwitchButton, Sunny, Moon, Refresh } from '@element-plus/icons-vue';
+import { User, SwitchButton, Sunny, Moon, Refresh, Bell } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 
 const router = useRouter();
@@ -72,7 +93,6 @@ interface Breadcrumb {
 
 const menuStore = useMenuStore();
 const cacheLoading = ref(false);
-
 // 使用 store 中的菜单数据
 const menuList = computed(() => menuStore.menus);
 
@@ -360,7 +380,7 @@ onUnmounted(() => {
     height: 40px;
     border-radius: 50%;
     // 使用 Element Plus 的边框颜色变量
-    border: 2px solid var(--el-border-color);
+    // border: 2px solid var(--el-border-color);
     transition: border-color 0.3s ease;
 
     &:hover {
@@ -444,7 +464,11 @@ onUnmounted(() => {
   }
 }
 
-:deep(.el-tabs__nav){
+:deep(.el-tabs__nav) {
   height: 36px !important;
 }
+
+:deep(.el-button) {
+  margin-left: 0 !important;
+}
 </style>

pc/src/views/system/dict/index.vue

@@ -35,7 +35,7 @@
           </div>
 
           <el-table
-            :data="filteredDictTypes"
+            :data="dictTypes"
             stripe
             style="width: 100%"
             v-loading="typeLoading"
@@ -67,8 +67,8 @@
                 </el-tag>
               </template>
             </el-table-column>
-            <el-table-column prop="sort" label="排序" width="80" align="center" />
-            <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip />
+            <!-- <el-table-column prop="sort" label="排序" width="80" align="center" /> -->
+            <!-- <el-table-column prop="remark" label="备注" min-width="200" show-overflow-tooltip /> -->
             <el-table-column prop="create_time" label="创建时间" width="180" align="center">
               <template #default="{ row }">
                 {{ formatDate(row.create_time) }}
@@ -91,6 +91,16 @@
               </template>
             </el-table-column>
           </el-table>
+          <div class="pagination-bar">
+            <el-pagination
+              background
+              :current-page="currentPage"
+              :page-size="pageSize"
+              :total="totalCount"
+              @current-change="handlePageChange"
+              layout="total, prev, pager, next"
+            />
+          </div>
       </div>
     </div>
 
@@ -150,6 +160,11 @@ const typeSearchKeyword = ref('')
 const typeDialogVisible = ref(false)
 const currentDictType = ref<any>(null)
 
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const totalCount = ref(0)
+
 const selectedDictTypeId = ref<number | null>(null)
 const selectedDictType = computed(() => {
   if (!selectedDictTypeId.value) {
@@ -158,19 +173,6 @@ const selectedDictType = computed(() => {
   return dictTypes.value.find((type) => type.id === selectedDictTypeId.value) || null
 })
 
-// 过滤后的字典类型
-const filteredDictTypes = computed(() => {
-  if (!typeSearchKeyword.value) {
-    return dictTypes.value
-  }
-  const keyword = typeSearchKeyword.value.toLowerCase()
-  return dictTypes.value.filter(
-    (type) =>
-      (type.dict_name && type.dict_name.toLowerCase().includes(keyword)) ||
-      (type.dict_code && type.dict_code.toLowerCase().includes(keyword))
-  )
-})
-
 // 格式化日期
 function formatDate(dateStr: string | null | undefined): string {
   if (!dateStr) return ''
@@ -192,31 +194,42 @@ function formatDate(dateStr: string | null | undefined): string {
 async function fetchDictTypes() {
   typeLoading.value = true
   try {
-    const res = await getDictTypes()
+    const res = await getDictTypes({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      keyword: typeSearchKeyword.value
+    })
     if (res.success === true && res.data) {
-      dictTypes.value = Array.isArray(res.data) ? res.data : []
+      dictTypes.value = Array.isArray(res.data.list) ? res.data.list : (Array.isArray(res.data) ? res.data : [])
+      totalCount.value = res.data.total || res.data.length || 0
     } else if (Array.isArray(res)) {
       dictTypes.value = res
+      totalCount.value = res.length
     } else {
       dictTypes.value = []
+      totalCount.value = 0
       ElMessage.error(res.message || '获取字典类型失败')
     }
   } catch (error: any) {
     ElMessage.error(error.message || '获取字典类型失败')
     dictTypes.value = []
+    totalCount.value = 0
   } finally {
     typeLoading.value = false
   }
 }
 
-// 标签式视图切换已移除
-
 // 字典类型搜索
 function handleTypeSearch() {
-  // 搜索逻辑已在computed中处理
+  currentPage.value = 1
+  fetchDictTypes()
 }
 
-// 字典项视图内由子组件处理
+// 分页切换
+function handlePageChange(page: number) {
+  currentPage.value = page
+  fetchDictTypes()
+}
 
 // 添加字典类型
 function handleAddType() {
@@ -334,6 +347,12 @@ onMounted(() => {
   }
 }
 
+.pagination-bar {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+
 .color-display {
   display: flex;
   align-items: center;