From c187d5de513cec2b543c179c3f71007930ab5637 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BB=96=E5=BE=B7=E4=BA=91?= <ldeyun@163.com>
Date: Tue, 9 Dec 2025 00:30:56 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8D=95=E4=BD=8D=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=96=B9=E6=B3=95=EF=BC=8C=E5=8A=A0=E8=BD=BD=E8=BF=98?=
 =?UTF-8?q?=E6=9C=89=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inputValueUnit/index.vue |  12 +-
 src/store/modules/unitData.ts           | 305 +++++---
 src/views/index.vue                     | 963 ++++++++++++------------
 3 files changed, 697 insertions(+), 583 deletions(-)

diff --git a/src/components/inputValueUnit/index.vue b/src/components/inputValueUnit/index.vue
index 09e51d7..ea4085b 100644
--- a/src/components/inputValueUnit/index.vue
+++ b/src/components/inputValueUnit/index.vue
@@ -28,8 +28,7 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
-import { listConvert } from '@/api/system/convert.js';
+import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'; 
 
 // 定义 props
 const props = defineProps({
@@ -138,7 +137,9 @@ const popupPosition = computed(() => {
 		left: `${rect.left + window.scrollX}px`
 	};
 });
+import { useUnitStore } from '@/store/modules/unitData'
 
+	const unitStore = useUnitStore()
 // 安全宽度更新方法
 const safeUpdateWidth = () => {
 	if (unitLabel.value) {
@@ -203,10 +204,17 @@ const loadUnits = async (unitType) => {
 		
 		var unitDatalist =JSON.parse( localStorage.getItem("unitData"));
 		 
+		 if (unitDatalist) {
+			 	 
 		  unitData.value = unitDatalist[unitType];
 		 
 		baseUnit.value = unitData.value.find((u) => u.baseUnit === 'Y');
 		console.log(baseUnit.value);
+		 }else{
+			 	unitStore.restoreUnitDataFromLocal();
+			 		await unitStore.getList();
+		 }
+	
 		
 		// const res = await listConvert({
 		// 	unitType: unitType,
diff --git a/src/store/modules/unitData.ts b/src/store/modules/unitData.ts
index e1a0ffe..c43aadc 100644
--- a/src/store/modules/unitData.ts
+++ b/src/store/modules/unitData.ts
@@ -1,15 +1,119 @@
-import { defineStore } from 'pinia'
 import { listConvert } from '@/api/system/convert.js'
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
 
-// 定义计量单位Store
-const useUnitStore = defineStore(
-  'unit', // Store唯一标识
-  {
-    state: () => ({
-      // 分组后的单位数据（按unitType分组）
-      unitData: {},
-      // 查询参数（与原逻辑一致）
-      queryParams: {
+// 定义计量单位接口
+export interface UnitItem {
+  id: number
+  unitType: string
+  unitName: string
+  conversionFactor: number
+  unitOrder: number
+  baseUnit: string
+  status: string
+  unitTypeName: string
+}
+
+export interface UnitQueryParams {
+  pageNum: number
+  pageSize: number
+  unitType: string | null
+  unitName: string | null
+  baseUnit: string | null
+  conversionFactor: number | null
+  unitTypeName: string | null
+  status: string | null
+  unitOrder: number | null
+}
+
+// 定义按类型分组的单位数据结构
+export interface GroupedUnitData {
+  [unitType: string]: UnitItem[]
+}
+
+export const useUnitStore = defineStore('unit', {
+  state: () => ({
+    // 单位数据列表
+    unitData: [] as UnitItem[],
+    // 按类型分组后的单位数据
+    groupedUnitData: {} as GroupedUnitData,
+    // 查询参数
+    queryParams: {
+      pageNum: 1,
+      pageSize: 1000,
+      unitType: null,
+      unitName: null,
+      baseUnit: null,
+      conversionFactor: null,
+      unitTypeName: null,
+      status: null,
+      unitOrder: null
+    } as UnitQueryParams,
+    // 加载状态
+    loading: false,
+    // 总条数
+    total: 0
+  }),
+
+  getters: {
+    // 获取所有单位类型
+    unitTypes: (state) => {
+      return Object.keys(state.groupedUnitData)
+    },
+
+    // 获取特定类型的单位列表
+    getUnitsByType: (state) => {
+      return (unitType: string) => {
+        return state.groupedUnitData[unitType] || []
+      }
+    },
+
+    // 获取基本单位
+    getBaseUnit: (state) => {
+      return (unitType: string) => {
+        const units = state.groupedUnitData[unitType] || []
+        return units.find(unit => unit.baseUnit === '1') || units[0]
+      }
+    },
+
+    // 按类型排序的单位数据
+    sortedUnitTypes: (state) => {
+      return Object.keys(state.groupedUnitData).sort()
+    }
+  },
+
+  actions: {
+    // 按单位类型分组
+    groupByUnitType(data: UnitItem[]): GroupedUnitData {
+      return data.reduce((acc: GroupedUnitData, unit: UnitItem) => {
+        const type = unit.unitType
+        if (!acc[type]) {
+          acc[type] = []
+        }
+        acc[type].push({
+          id: unit.id,
+          unitType: unit.unitType,
+          unitName: unit.unitName,
+          conversionFactor: unit.conversionFactor,
+          unitOrder: unit.unitOrder,
+          baseUnit: unit.baseUnit,
+          status: unit.status,
+          unitTypeName: unit.unitTypeName
+        })
+        // 按单位排序
+        acc[type].sort((a, b) => (a.unitOrder || 0) - (b.unitOrder || 0))
+        return acc
+      }, {})
+    },
+
+    // 设置查询参数
+    setQueryParams(params: Partial<UnitQueryParams>) {
+      this.queryParams = { ...this.queryParams, ...params }
+    },
+
+    // 重置查询参数
+    resetQueryParams() {
+      this.queryParams = {
         pageNum: 1,
         pageSize: 1000,
         unitType: null,
@@ -19,101 +123,94 @@ const useUnitStore = defineStore(
         unitTypeName: null,
         status: null,
         unitOrder: null
-      },
-      // 加载状态（扩展：可选）
-      loading: false
-    }),
-    actions: {
-      /**
-       * 数据分组核心方法（复用原有逻辑）
-       * @param {Array} data 原始单位列表数据
-       * @returns {Object} 按unitType分组后的对象
-       */
-      groupByUnitType(data) {
-        return data.reduce((acc, unit) => {
-          const type = unit.unitType;
-          if (!acc[type]) acc[type] = [];
-          acc[type].push({
-            id: unit.id,
-            unitType: unit.unitType,
-            unitName: unit.unitName,
-            conversionFactor: unit.conversionFactor,
-            unitOrder: unit.unitOrder,
-            baseUnit: unit.baseUnit,
-            status: unit.status,
-            unitTypeName: unit.unitTypeName
-          });
-          return acc;
-        }, {});
-      },
-
-      /**
-       * 获取计量单位列表（异步）
-       * @returns {Promise} 操作结果Promise
-       */
-      getList() {
-        // 标记加载中
-        this.loading = true;
-        return new Promise((resolve, reject) => {
-          listConvert(this.queryParams)
-            .then((response) => {
-              // 数据分组处理
-              const unitDataGrouped = this.groupByUnitType(response.rows);
-              // 更新Store状态
-              this.unitData = unitDataGrouped;
-              // 本地存储备份
-              localStorage.setItem('unitData', JSON.stringify(unitDataGrouped));
-              resolve(unitDataGrouped);
-            })
-            .catch((error) => {
-              console.error('获取单位数据失败:', error);
-              reject(error);
-            })
-            .finally(() => {
-              // 结束加载状态
-              this.loading = false;
-            });
-        });
-      },
-
-      /**
-       * 重置查询参数（扩展：方便复用）
-       */
-      resetQueryParams() {
-        this.queryParams = {
-          pageNum: 1,
-          pageSize: 1000,
-          unitType: null,
-          unitName: null,
-          baseUnit: null,
-          conversionFactor: null,
-          unitTypeName: null,
-          status: null,
-          unitOrder: null
-        };
-      },
-
-      /**
-       * 刷新计量单位数据（扩展：重新获取最新数据）
-       * @returns {Promise} 操作结果Promise
-       */
-      refreshUnitData() {
-        // 重置页码后重新获取
-        this.queryParams.pageNum = 1;
-        return this.getList();
-      },
-
-      /**
-       * 从本地缓存恢复单位数据（扩展：页面刷新后恢复）
-       */
-      restoreUnitDataFromLocal() {
-        const localData = localStorage.getItem('unitData');
-        if (localData) {
-          this.unitData = JSON.parse(localData);
-        }
       }
+    },
+
+    // 获取单位列表
+    async getList() {
+      this.loading = true
+      try {
+        const response = await listConvert(this.queryParams)
+        this.unitData = response.rows || []
+        this.total = response.total || 0
+        this.groupedUnitData = this.groupByUnitType(this.unitData)        
+        // 保存到localStorage
+        localStorage.setItem('unitData', JSON.stringify(this.groupedUnitData))
+        
+        return response
+      } catch (error) {
+        console.error('获取单位数据失败:', error)
+        throw error
+      } finally {
+        this.loading = false
+      }
+    },
+
+    // 从localStorage加载缓存的单位数据
+    loadFromLocalStorage() {
+      try {
+        const storedData = localStorage.getItem('unitData')
+        if (storedData) {
+          this.groupedUnitData = JSON.parse(storedData)
+          // 从分组数据中提取所有单位
+          this.unitData = Object.values(this.groupedUnitData).flat()
+          return true
+        }
+      } catch (error) {
+        console.error('从localStorage加载单位数据失败:', error)
+      }
+      return false
+    },
+
+    // 清除localStorage中的单位数据
+    clearLocalStorage() {
+      localStorage.removeItem('unitData')
+    },
+
+    // 单位转换方法
+    convertUnit(value: number, fromUnit: UnitItem, toUnit: UnitItem): number {
+      if (fromUnit.unitType !== toUnit.unitType) {
+        throw new Error('单位类型不匹配，无法转换')
+      }
+      
+      // 先转换到基本单位，再从基本单位转换到目标单位
+      const valueInBaseUnit = value * (fromUnit.conversionFactor || 1)
+      return valueInBaseUnit / (toUnit.conversionFactor || 1)
+    },
+
+    // 根据单位名称查找单位
+    findUnitByName(unitName: string): UnitItem | undefined {
+      return this.unitData.find(unit => unit.unitName === unitName)
+    },
+
+    // 根据ID查找单位
+    findUnitById(id: number): UnitItem | undefined {
+      return this.unitData.find(unit => unit.id === id)
+    },
+
+    // 刷新单位数据
+    async refresh() {
+      await this.getList()
+    },
+
+    // 获取有效的单位列表（状态为正常的）
+    getActiveUnits(unitType?: string): UnitItem[] {
+      const units = unitType 
+        ? (this.groupedUnitData[unitType] || [])
+        : this.unitData
+      
+      return units.filter(unit => unit.status === '0') // 假设 '0' 表示正常状态
+    },
+
+    // 根据类型和名称模糊查询单位
+    searchUnits(type: string, keyword: string): UnitItem[] {
+      const units = this.groupedUnitData[type] || []
+      return units.filter(unit => 
+        unit.unitName.includes(keyword) || 
+        (unit.unitTypeName && unit.unitTypeName.includes(keyword))
+      )
     }
   }
-);
+})
 
-export default useUnitStore;
\ No newline at end of file
+export default useUnitStore
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index e0cadd4..bb320c0 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,89 +1,92 @@
 <template>
-  <div class="app-container home">
- 
-    <el-row :gutter="20">
-      <!-- 左侧个人信息 -->
-      <el-col :lg="6" :md="8" :sm="24" :xs="24">
-        <el-card class="user-info-card">
-          <div class="user-profile">
-            <el-avatar :size="40" :src="userInfo.avatar || profile" />
-            <h2 class="welcome-text">欢迎回来，{{ userInfo.name }}</h2>
-            <p class="user-role">{{ userInfo.roleName }}</p>
-          </div>
-          <div class="user-stats">
-            <div class="stat-item">
-              <div class="stat-value text-ellipsis" :title="formatDate(userInfo.loginDate) || '暂无'">
-               上次登录： {{ formatDate(userInfo.loginDate) || '暂无' }}
-              </div>             
-            </div></div>
-			   <div class="user-stats">
-            <div class="stat-item">
-              <div class="stat-value text-ellipsis" :title="userInfo.deptName || '暂无'">
-                所属部门：{{ userInfo.deptName || '暂无' }}
-              </div>
-              
-            </div>
-          </div>
-        </el-card>
+	<div class="app-container home">
 
-        <!-- 系统公告卡片 -->
-        <el-card class="notice-card hide-on-small" v-loading="noticeLoading">
-          <template #header>
-            <div class="card-header">
-              <span class="header-title">
-                <el-icon>
-                  <Bell />
-                </el-icon>
-                系统公告
-              </span>
-              <el-button v-if="noticeList.length" link @click="viewMoreNotices">
-                查看更多<el-icon>
-                  <ArrowRight />
-                </el-icon>
-              </el-button>
-            </div>
-          </template>
-          <div v-if="noticeList.length" class="notice-list">
-            <div v-for="item in noticeList" :key="item.noticeId" class="notice-item" @click="showNoticeDetail(item)">
-              <el-tag size="small" :type="item.noticeType === '1' ? 'danger' : 'success'">
-                {{ item.noticeType === '1' ? '通知' : '公告' }}
-              </el-tag>
-              <span class="notice-title">{{ item.noticeTitle }}</span>
-              <span class="notice-time">{{ parseTime(item.createTime) }}</span>
-            </div>
-          </div>
-          <el-empty v-else description="暂无公告" />
-        </el-card>
-      </el-col>
+		<el-row :gutter="20">
+			<!-- 左侧个人信息 -->
+			<el-col :lg="6" :md="8" :sm="24" :xs="24">
+				<el-card class="user-info-card">
+					<div class="user-profile">
+						<el-avatar :size="40" :src="userInfo.avatar || profile" />
+						<h2 class="welcome-text">欢迎回来，{{ userInfo.name }}</h2>
+						<p class="user-role">{{ userInfo.roleName }}</p>
+					</div>
+					<div class="user-stats">
+						<div class="stat-item">
+							<div class="stat-value text-ellipsis" :title="formatDate(userInfo.loginDate) || '暂无'">
+								上次登录： {{ formatDate(userInfo.loginDate) || '暂无' }}
+							</div>
+						</div>
+					</div>
+					<div class="user-stats">
+						<div class="stat-item">
+							<div class="stat-value text-ellipsis" :title="userInfo.deptName || '暂无'">
+								所属部门：{{ userInfo.deptName || '暂无' }}
+							</div>
 
-      <!-- 右侧内容区 -->
-      <el-col :lg="18" :md="16" :sm="24" :xs="24">
-        <el-row :gutter="20">
-          <!-- 欢迎信息和特色功能 -->
-          <el-col :span="24">
-            <el-card class="welcome-card">
-              <div class="welcome-container">
-                <h1 class="welcome-title">欢迎使用天然气工具箱</h1>
-                <p class="welcome-desc">基于Ruoyi-Geek开源开发</p>
-              </div>
+						</div>
+					</div>
+				</el-card>
 
-              <el-row :gutter="20" class="feature-section">
-                <el-col :lg="8" :md="12" :sm="24" :xs="24" v-for="(feature, index) in features" :key="index">
-                  <div class="feature-item">
-                    <div class="feature-icon">
-                      <el-icon>
-                        <component :is="feature.icon" />
-                      </el-icon>
-                    </div>
-                    <h3>{{ feature.title }}</h3>
-                    <p>{{ feature.description }}</p>
-                  </div>
-                </el-col>
-              </el-row>
-            </el-card>
-          </el-col>
+				<!-- 系统公告卡片 -->
+				<el-card class="notice-card hide-on-small" v-loading="noticeLoading">
+					<template #header>
+						<div class="card-header">
+							<span class="header-title">
+								<el-icon>
+									<Bell />
+								</el-icon>
+								系统公告
+							</span>
+							<el-button v-if="noticeList.length" link @click="viewMoreNotices">
+								查看更多<el-icon>
+									<ArrowRight />
+								</el-icon>
+							</el-button>
+						</div>
+					</template>
+					<div v-if="noticeList.length" class="notice-list">
+						<div v-for="item in noticeList" :key="item.noticeId" class="notice-item"
+							@click="showNoticeDetail(item)">
+							<el-tag size="small" :type="item.noticeType === '1' ? 'danger' : 'success'">
+								{{ item.noticeType === '1' ? '通知' : '公告' }}
+							</el-tag>
+							<span class="notice-title">{{ item.noticeTitle }}</span>
+							<span class="notice-time">{{ parseTime(item.createTime) }}</span>
+						</div>
+					</div>
+					<el-empty v-else description="暂无公告" />
+				</el-card>
+			</el-col>
 
-         <!-- 移动端公告展示
+			<!-- 右侧内容区 -->
+			<el-col :lg="18" :md="16" :sm="24" :xs="24">
+				<el-row :gutter="20">
+					<!-- 欢迎信息和特色功能 -->
+					<el-col :span="24">
+						<el-card class="welcome-card">
+							<div class="welcome-container">
+								<h1 class="welcome-title">欢迎使用天然气工具箱</h1>
+								<p class="welcome-desc">基于Ruoyi-Geek开源开发</p>
+							</div>
+
+							<el-row :gutter="20" class="feature-section">
+								<el-col :lg="8" :md="12" :sm="24" :xs="24" v-for="(feature, index) in features"
+									:key="index">
+									<div class="feature-item">
+										<div class="feature-icon">
+											<el-icon>
+												<component :is="feature.icon" />
+											</el-icon>
+										</div>
+										<h3>{{ feature.title }}</h3>
+										<p>{{ feature.description }}</p>
+									</div>
+								</el-col>
+							</el-row>
+						</el-card>
+					</el-col>
+
+					<!-- 移动端公告展示
           <el-col :span="24">
             <el-card class="notice-card show-on-small" v-loading="noticeLoading">
               <template #header>
@@ -115,8 +118,8 @@
             </el-card>
           </el-col> -->
 
-          <!-- 内置功能说明 -->
-        <!--  <el-col :span="24">
+					<!-- 内置功能说明 -->
+					<!--  <el-col :span="24">
             <el-card class="features-card">
               <template #header>
                 <div class="card-header">
@@ -141,473 +144,479 @@
               </el-row>
             </el-card>
           </el-col> -->
-        </el-row>
-      </el-col>
-    </el-row>
+				</el-row>
+			</el-col>
+		</el-row>
 
-    <!-- 公告详情对话框 -->
-    <el-dialog v-model="noticeDialogVisible" :title="currentNotice.noticeTitle" width="50%" destroy-on-close>
-      <div v-html="currentNotice.noticeContent"></div>
-    </el-dialog>
-  </div>
+		<!-- 公告详情对话框 -->
+		<el-dialog v-model="noticeDialogVisible" :title="currentNotice.noticeTitle" width="50%" destroy-on-close>
+			<div v-html="currentNotice.noticeContent"></div>
+		</el-dialog>
+	</div>
 </template>
-<script setup name="Index" lang="ts">	
-import { ref, onMounted } from 'vue'
-import { listNotice } from '@/api/system/notice'
-import { parseTime } from '@/utils/ruoyi'
-import { Bell, ArrowRight } from '@element-plus/icons-vue'
-import { formatDate } from '@/utils'
-import profile from '@/assets/images/profile.jpg'
-import useUserStore from '@/store/modules/user'
-import { useRouter, type RouteLocationRaw } from 'vue-router'
-import { GeekResponseForList } from '@/types/request'
+<script setup name="Index" lang="ts">
+	import { ref, onMounted, onShow } from 'vue'
+	import { listNotice } from '@/api/system/notice'
+	import { parseTime } from '@/utils/ruoyi'
+	import { Bell, ArrowRight } from '@element-plus/icons-vue'
+	import { formatDate } from '@/utils'
+	import profile from '@/assets/images/profile.jpg'
+	import useUserStore from '@/store/modules/user'
+	import { useRouter, type RouteLocationRaw } from 'vue-router'
+	import { GeekResponseForList } from '@/types/request'
 
- 
- 
-const router = useRouter()
+	import { useUnitStore } from '@/store/modules/unitData'
 
-interface Feature {
-  icon: string;
-  title: string;
-  description: string;
-}
+	const unitStore = useUnitStore()
 
-interface Plugin {
-  name: string;
-  description: string;
-}
+	const router = useRouter()
 
-interface Directive {
-  name: string;
-  description: string;
-  usage: string;
-}
+	interface Feature {
+		icon : string;
+		title : string;
+		description : string;
+	}
 
-interface Notice {
-  noticeId: number;
-  noticeTitle: string;
-  noticeType: string;
-  noticeContent: string;
-  status: string;
-  createBy: string;
-  createTime: string;
-}
+	interface Plugin {
+		name : string;
+		description : string;
+	}
 
-// 状态定义
-const features = ref<Feature[]>([
-  {
-    icon: 'Monitor',
-    title: '严格执行标准',
-    description: '全部采用相关国家和行业标准的算法。'
-  },
-  {
-    icon: 'SetUp',
-    title: '确保计算准确',
-    description: '计算结果准确，用标准计算实例验证。'
-  },
-  {
-    icon: 'Document',
-    title: '多端灵活好用',
-    description: '开发了web端、移动APP以及微信小程序，方便使用'
-  }
-])
+	interface Directive {
+		name : string;
+		description : string;
+		usage : string;
+	}
 
-const plugins = ref<Plugin[]>([
-  {
-    name: 'Auth 权限验证',
-    description: '提供了权限验证相关方法，包括hasPermi、hasRole等功能，用于控制按钮和功能的访问权限'
-  },
-  {
-    name: 'Cache 缓存',
-    description: '提供了浏览器缓存操作方法，支持session和local存储的设置与获取'
-  },
-  {
-    name: 'Modal 弹窗',
-    description: '封装了Element Plus的弹窗组件，提供了更便捷的调用方式'
-  }
-])
+	interface Notice {
+		noticeId : number;
+		noticeTitle : string;
+		noticeType : string;
+		noticeContent : string;
+		status : string;
+		createBy : string;
+		createTime : string;
+	}
 
-const directives = ref<Directive[]>([
-  {
-    name: 'hasPermi',
-    description: '用于控制按钮级别的权限',
-    usage: 'v-hasPermi="[\'system:user:add\']"'
-  },
-  {
-    name: 'hasRole',
-    description: '用于控制角色级别的权限',
-    usage: 'v-hasRole="[\'admin\']"'
-  },
-  {
-    name: 'auth',
-    description: '通用权限验证指令',
-    usage: 'v-auth="\'system:user:edit\'"'
-  }
-])
+	// 状态定义
+	const features = ref<Feature[]>([
+		{
+			icon: 'Monitor',
+			title: '严格执行标准',
+			description: '全部采用相关国家和行业标准的算法。'
+		},
+		{
+			icon: 'SetUp',
+			title: '确保计算准确',
+			description: '计算结果准确，用标准计算实例验证。'
+		},
+		{
+			icon: 'Document',
+			title: '多端灵活好用',
+			description: '开发了web端、移动APP以及微信小程序，方便使用'
+		}
+	])
 
-const noticeList = ref<Notice[]>([])
-const noticeLoading = ref(false)
-const noticeDialogVisible = ref(false)
-const currentNotice = ref<Notice>({} as Notice)
+	const plugins = ref<Plugin[]>([
+		{
+			name: 'Auth 权限验证',
+			description: '提供了权限验证相关方法，包括hasPermi、hasRole等功能，用于控制按钮和功能的访问权限'
+		},
+		{
+			name: 'Cache 缓存',
+			description: '提供了浏览器缓存操作方法，支持session和local存储的设置与获取'
+		},
+		{
+			name: 'Modal 弹窗',
+			description: '封装了Element Plus的弹窗组件，提供了更便捷的调用方式'
+		}
+	])
 
-// 用户信息store
-const userInfo = useUserStore()
+	const directives = ref<Directive[]>([
+		{
+			name: 'hasPermi',
+			description: '用于控制按钮级别的权限',
+			usage: 'v-hasPermi="[\'system:user:add\']"'
+		},
+		{
+			name: 'hasRole',
+			description: '用于控制角色级别的权限',
+			usage: 'v-hasRole="[\'admin\']"'
+		},
+		{
+			name: 'auth',
+			description: '通用权限验证指令',
+			usage: 'v-auth="\'system:user:edit\'"'
+		}
+	])
+
+	const noticeList = ref<Notice[]>([])
+	const noticeLoading = ref(false)
+	const noticeDialogVisible = ref(false)
+	const currentNotice = ref<Notice>({} as Notice)
+
+	// 用户信息store
+	const userInfo = useUserStore()
 
 
 
-// 获取公告列表
-const getNoticeList = async () => {
-  noticeLoading.value = true
-  try {
-    const res: GeekResponseForList<Notice> = await listNotice({ pageNum: 1, pageSize: 5 })
-    noticeList.value = res.rows
-  } catch (error) {
-    console.error('获取公告列表失败:', error)
-  } finally {
-    noticeLoading.value = false
-  }
-}
+	// 获取公告列表
+	const getNoticeList = async () => {
+		noticeLoading.value = true
+		try {
+			const res : GeekResponseForList<Notice> = await listNotice({ pageNum: 1, pageSize: 5 })
+			noticeList.value = res.rows
+		} catch (error) {
+			console.error('获取公告列表失败:', error)
+		} finally {
+			noticeLoading.value = false
+		}
+	}
 
-// 显示公告详情
-const showNoticeDetail = (notice: Notice) => {
-  currentNotice.value = notice
-  noticeDialogVisible.value = true
-}
+	// 显示公告详情
+	const showNoticeDetail = (notice : Notice) => {
+		currentNotice.value = notice
+		noticeDialogVisible.value = true
+	}
 
-// 查看更多公告
-const viewMoreNotices = () => {
-  const route: RouteLocationRaw = { path: '/system/notice' }
-  router.push(route)
-}
+	// 查看更多公告
+	const viewMoreNotices = () => {
+		const route : RouteLocationRaw = { path: '/system/notice' }
+		router.push(route)
+	}
 
-onMounted(() => {
-  userInfo.getInfo()
-  getNoticeList()
+	onMounted(async () => {
+		userInfo.getInfo()
+		await getNoticeList()
+		// 优先从本地缓存恢复，再请求最新数据
+		 
+		await unitStore.getList();
 
-})
+	})
+	
 </script>
 
 <style scoped lang="scss">
-.home {
-  padding: clamp(10px, 3vw, 20px);
+	.home {
+		padding: clamp(10px, 3vw, 20px);
 
-  .welcome-container {
-    text-align: center;
-    margin-bottom: 40px;
+		.welcome-container {
+			text-align: center;
+			margin-bottom: 40px;
 
-    .welcome-title {
-      font-size: clamp(1.8em, 4vw, 2.5em);
-      color: var(--el-text-color-primary);
-      margin-bottom: 20px;
-    }
+			.welcome-title {
+				font-size: clamp(1.8em, 4vw, 2.5em);
+				color: var(--el-text-color-primary);
+				margin-bottom: 20px;
+			}
 
-    .welcome-desc {
-      font-size: clamp(1em, 2vw, 1.2em);
-      color: var(--el-text-color-secondary);
-    }
-  }
+			.welcome-desc {
+				font-size: clamp(1em, 2vw, 1.2em);
+				color: var(--el-text-color-secondary);
+			}
+		}
 
-  // 响应式间距调整
-  :deep(.el-row) {
-    margin-left: -10px !important;
-    margin-right: -10px !important;
+		// 响应式间距调整
+		:deep(.el-row) {
+			margin-left: -10px !important;
+			margin-right: -10px !important;
 
-    .el-col {
-      padding-left: 10px !important;
-      padding-right: 10px !important;
-    }
-  }
+			.el-col {
+				padding-left: 10px !important;
+				padding-right: 10px !important;
+			}
+		}
 
-  .feature-section {
-    .feature-card {
-      margin-bottom: 20px;
-      height: 100%;
-      text-align: center;
-      transition: transform 0.3s;
+		.feature-section {
+			.feature-card {
+				margin-bottom: 20px;
+				height: 100%;
+				text-align: center;
+				transition: transform 0.3s;
 
-      &:hover {
-        transform: translateY(-5px);
-      }
+				&:hover {
+					transform: translateY(-5px);
+				}
 
-      .feature-icon {
-        font-size: 2.5em;
-        color: var(--el-color-primary);
-        margin-bottom: 20px;
-      }
+				.feature-icon {
+					font-size: 2.5em;
+					color: var(--el-color-primary);
+					margin-bottom: 20px;
+				}
 
-      h3 {
-        margin: 10px 0;
-        font-size: 1.2em;
-        color: var(--el-text-color-primary);
-      }
+				h3 {
+					margin: 10px 0;
+					font-size: 1.2em;
+					color: var(--el-text-color-primary);
+				}
 
-      p {
-        color: var(--el-text-color-secondary);
-        line-height: 1.5;
-      }
-    }
-  }
+				p {
+					color: var(--el-text-color-secondary);
+					line-height: 1.5;
+				}
+			}
+		}
 
-  .user-info-card {
-    margin-bottom: 20px;
+		.user-info-card {
+			margin-bottom: 20px;
 
-    .user-profile {
-      text-align: center;
-      padding: 20px 0;
+			.user-profile {
+				text-align: center;
+				padding: 20px 0;
 
-      .welcome-text {
-        margin: 15px 0 5px;
-        font-size: 1.1em;
-        color: var(--el-text-color-primary);
-      }
+				.welcome-text {
+					margin: 15px 0 5px;
+					font-size: 1.1em;
+					color: var(--el-text-color-primary);
+				}
 
-      .user-role {
-        color: var(--el-text-color-secondary);
-        font-size: 0.9em;
-      }
-    }
+				.user-role {
+					color: var(--el-text-color-secondary);
+					font-size: 0.9em;
+				}
+			}
 
-    .user-stats {
-      display: flex;
-      justify-content: space-around;
-      padding: 15px 0;
-      border-top: 1px solid var(--el-border-color-lighter);
+			.user-stats {
+				display: flex;
+				justify-content: space-around;
+				padding: 15px 0;
+				border-top: 1px solid var(--el-border-color-lighter);
 
-      .stat-item {
-        text-align: center;
+				.stat-item {
+					text-align: center;
 
-        .stat-value {
-          font-size: 1.0em;
-          color: var(--el-text-color-primary);
-          margin-bottom: 5px;
-        }
+					.stat-value {
+						font-size: 1.0em;
+						color: var(--el-text-color-primary);
+						margin-bottom: 5px;
+					}
 
-        .stat-label {
-          color: var(--el-text-color-secondary);
-          font-size: 0.9em;
-        }
-      }
-    }
-  }
+					.stat-label {
+						color: var(--el-text-color-secondary);
+						font-size: 0.9em;
+					}
+				}
+			}
+		}
 
-  .notice-card {
-    &.show-on-small {
-      display: none;
-      margin: 20px 0;
-    }
+		.notice-card {
+			&.show-on-small {
+				display: none;
+				margin: 20px 0;
+			}
 
-    .card-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+			.card-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
 
-      .header-title {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        font-weight: bold;
-        color: var(--el-text-color-primary);
-      }
-    }
+				.header-title {
+					display: flex;
+					align-items: center;
+					gap: 5px;
+					font-weight: bold;
+					color: var(--el-text-color-primary);
+				}
+			}
 
-    .notice-list {
-      .notice-item {
-        padding: 10px 0;
-        border-bottom: 1px solid var(--el-border-color-lighter);
-        cursor: pointer;
-        transition: all 0.3s;
+			.notice-list {
+				.notice-item {
+					padding: 10px 0;
+					border-bottom: 1px solid var(--el-border-color-lighter);
+					cursor: pointer;
+					transition: all 0.3s;
 
-        &:last-child {
-          border-bottom: none;
-        }
+					&:last-child {
+						border-bottom: none;
+					}
 
-        &:hover {
-          background-color: var(--el-fill-color-lighter);
-        }
+					&:hover {
+						background-color: var(--el-fill-color-lighter);
+					}
 
-        .notice-title {
-          margin: 0 10px;
-          color: var(--el-text-color-primary);
-          flex: 1;
-        }
+					.notice-title {
+						margin: 0 10px;
+						color: var(--el-text-color-primary);
+						flex: 1;
+					}
 
-        .notice-time {
-          font-size: 0.9em;
-          color: var(--el-text-color-secondary);
-        }
-      }
-    }
-  }
+					.notice-time {
+						font-size: 0.9em;
+						color: var(--el-text-color-secondary);
+					}
+				}
+			}
+		}
 
-  // 响应式显示控制
-  @media (max-width: 768px) {
-    .hide-on-small {
-      display: none;
-    }
+		// 响应式显示控制
+		@media (max-width: 768px) {
+			.hide-on-small {
+				display: none;
+			}
 
-    .show-on-small {
-      display: block !important;
-    }
+			.show-on-small {
+				display: block !important;
+			}
 
-    .welcome-container {
-      margin-bottom: 20px;
-    }
+			.welcome-container {
+				margin-bottom: 20px;
+			}
 
-    .docs-section {
-      .doc-card {
-        margin-bottom: 20px;
-      }
-    }
-  }
+			.docs-section {
+				.doc-card {
+					margin-bottom: 20px;
+				}
+			}
+		}
 
-  @media (max-width: 576px) {
-    .user-info-card {
-      .user-stats {
-        flex-direction: column;
-        gap: 15px;
+		@media (max-width: 576px) {
+			.user-info-card {
+				.user-stats {
+					flex-direction: column;
+					gap: 15px;
 
-        .stat-item {
-          width: 100%;
-          padding: 10px 0;
-          border-bottom: 1px solid var(--el-border-color-lighter);
+					.stat-item {
+						width: 100%;
+						padding: 10px 0;
+						border-bottom: 1px solid var(--el-border-color-lighter);
 
-          &:last-child {
-            border-bottom: none;
-          }
-        }
-      }
-    }
+						&:last-child {
+							border-bottom: none;
+						}
+					}
+				}
+			}
 
-    .feature-section {
-      .feature-card {
-        .feature-icon {
-          font-size: 2em;
-        }
-      }
-    }
-  }
+			.feature-section {
+				.feature-card {
+					.feature-icon {
+						font-size: 2em;
+					}
+				}
+			}
+		}
 
-  .text-ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+		.text-ellipsis {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
 
-  .welcome-card {
-    margin-bottom: 20px;
+		.welcome-card {
+			margin-bottom: 20px;
 
-    .welcome-container {
-      text-align: center;
-      margin-bottom: 30px;
+			.welcome-container {
+				text-align: center;
+				margin-bottom: 30px;
 
-      // ...existing code...
-    }
+				// ...existing code...
+			}
 
-    .feature-section {
-      .feature-item {
-        text-align: center;
-        padding: 20px;
-        border-radius: 8px;
-        transition: all 0.3s;
-        background-color: var(--el-fill-color-light);
-        margin-bottom: 20px;
+			.feature-section {
+				.feature-item {
+					text-align: center;
+					padding: 20px;
+					border-radius: 8px;
+					transition: all 0.3s;
+					background-color: var(--el-fill-color-light);
+					margin-bottom: 20px;
 
-        &:hover {
-          transform: translateY(-5px);
-          background-color: var(--el-fill-color);
-        }
+					&:hover {
+						transform: translateY(-5px);
+						background-color: var(--el-fill-color);
+					}
 
-        .feature-icon {
-          font-size: 2.5em;
-          color: var(--el-color-primary);
-          margin-bottom: 15px;
-        }
+					.feature-icon {
+						font-size: 2.5em;
+						color: var(--el-color-primary);
+						margin-bottom: 15px;
+					}
 
-        h3 {
-          margin: 10px 0;
-          font-size: 1.2em;
-          color: var(--el-text-color-primary);
-        }
+					h3 {
+						margin: 10px 0;
+						font-size: 1.2em;
+						color: var(--el-text-color-primary);
+					}
 
-        p {
-          color: var(--el-text-color-secondary);
-          line-height: 1.5;
-          margin: 0;
-        }
-      }
-    }
-  }
+					p {
+						color: var(--el-text-color-secondary);
+						line-height: 1.5;
+						margin: 0;
+					}
+				}
+			}
+		}
 
-  .features-card {
-    .feature-group {
-      margin-bottom: 30px;
+		.features-card {
+			.feature-group {
+				margin-bottom: 30px;
 
-      .group-title {
-        font-size: 1.2em;
-        color: var(--el-text-color-primary);
-        margin-bottom: 20px;
-        padding-bottom: 10px;
-        border-bottom: 1px solid var(--el-border-color-lighter);
-      }
+				.group-title {
+					font-size: 1.2em;
+					color: var(--el-text-color-primary);
+					margin-bottom: 20px;
+					padding-bottom: 10px;
+					border-bottom: 1px solid var(--el-border-color-lighter);
+				}
 
-      .feature-list {
-        .feature-list-item {
-          padding: 15px;
-          margin-bottom: 15px;
-          border-radius: 6px;
-          background-color: var(--el-fill-color-light);
+				.feature-list {
+					.feature-list-item {
+						padding: 15px;
+						margin-bottom: 15px;
+						border-radius: 6px;
+						background-color: var(--el-fill-color-light);
 
-          h4 {
-            color: var(--el-color-primary);
-            margin: 0 0 10px;
-          }
+						h4 {
+							color: var(--el-color-primary);
+							margin: 0 0 10px;
+						}
 
-          p {
-            color: var(--el-text-color-secondary);
-            margin: 0 0 10px;
-            line-height: 1.5;
-          }
-        }
-      }
-    }
-  }
+						p {
+							color: var(--el-text-color-secondary);
+							margin: 0 0 10px;
+							line-height: 1.5;
+						}
+					}
+				}
+			}
+		}
 
-  // 响应式调整
-  @media (max-width: 768px) {
-    .features-card {
-      .el-row {
-        .el-col {
-          width: 100%;
-        }
-      }
-    }
-  }
-}
+		// 响应式调整
+		@media (max-width: 768px) {
+			.features-card {
+				.el-row {
+					.el-col {
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
 
-// 覆盖卡片样式
-:deep(.el-card) {
-  --el-card-padding: 20px;
+	// 覆盖卡片样式
+	:deep(.el-card) {
+		--el-card-padding: 20px;
 
-  .el-card__header {
-    padding: 15px 20px;
-    border-bottom: 1px solid var(--el-border-color-lighter);
-  }
-}
+		.el-card__header {
+			padding: 15px 20px;
+			border-bottom: 1px solid var(--el-border-color-lighter);
+		}
+	}
 
-// 调整卡片间距
-.el-card {
-  margin-bottom: clamp(15px, 3vw, 20px);
+	// 调整卡片间距
+	.el-card {
+		margin-bottom: clamp(15px, 3vw, 20px);
 
-  :deep(.el-card__body) {
-    padding: clamp(12px, 2vw, 20px);
-  }
-}
+		:deep(.el-card__body) {
+			padding: clamp(12px, 2vw, 20px);
+		}
+	}
 
-// 调整对话框响应式
-:deep(.el-dialog) {
-  @media (max-width: 768px) {
-    width: 90% !important;
-    margin: 0 auto;
-  }
-}
-</style>
+	// 调整对话框响应式
+	:deep(.el-dialog) {
+		@media (max-width: 768px) {
+			width: 90% !important;
+			margin: 0 auto;
+		}
+	}
+</style>
\ No newline at end of file