更新常用功能card

pc/src/views/apps/oa/workbench/index.vue

@@ -126,26 +126,31 @@
               </div>
             </section>
 
-            <!-- 常用单据 -->
+            <!-- 常用功能 -->
             <section class="section-card">
               <div class="section-header">
                 <div class="section-title">
                   <el-icon class="section-icon"><Document /></el-icon>
-                  <span>常用单据</span>
+                  <span>常用功能</span>
                 </div>
               </div>
               <el-divider />
-              <el-row :gutter="16" class="forms-grid">
-                <el-col
-                  :span="8"
-                  v-for="(form, index) in commonForms"
+              <div class="common-functions-container">
+                <div
+                  v-for="(func, index) in commonFunctions"
                   :key="index"
+                  class="common-function-item"
+                  @click="handleFunctionClick(func)"
+                  :style="{ '--index': index }"
                 >
-                  <el-button class="form-button" @click="handleFormClick(form)">
-                    {{ form }}
-                  </el-button>
-                </el-col>
-              </el-row>
+                  <div class="function-icon-wrapper">
+                    <el-icon class="function-icon" :style="{ color: func.color }">
+                      <component :is="func.icon" />
+                    </el-icon>
+                  </div>
+                  <div class="function-name">{{ func.name }}</div>
+                </div>
+              </div>
             </section>
           </div>
         </div>
@@ -374,6 +379,7 @@ import {
   ArrowRight,
   Plus,
   Clock,
+  ShoppingCart,
 } from "@element-plus/icons-vue";
 
 const authStore = useAuthStore();
@@ -533,14 +539,44 @@ const currentApprovalApps = computed(() => {
   return approvalAppsData[approvalTab.value] || approvalAppsData.apply;
 });
 
-// 常用单据
-const commonForms = ref([
-  "请假申请单",
-  "加班申请单",
-  "报销申请单",
-  "出差申请单",
-  "用印申请单",
-  "采购申请单",
+// 常用功能
+const commonFunctions = ref([
+  {
+    name: "请假申请",
+    icon: Clock,
+    color: "#409EFF",
+    path: "/approval/leave",
+  },
+  {
+    name: "加班申请",
+    icon: Plus,
+    color: "#67C23A",
+    path: "/approval/overtime",
+  },
+  {
+    name: "报销申请",
+    icon: Goods,
+    color: "#E6A23C",
+    path: "/approval/expense",
+  },
+  {
+    name: "出差申请",
+    icon: Location,
+    color: "#F56C6C",
+    path: "/approval/travel",
+  },
+  {
+    name: "用印申请",
+    icon: Document,
+    color: "#909399",
+    path: "/approval/seal",
+  },
+  {
+    name: "采购申请",
+    icon: ShoppingCart,
+    color: "#409EFF",
+    path: "/approval/purchase",
+  },
 ]);
 
 // 行业资讯
@@ -1001,8 +1037,14 @@ function handleAppClick(app) {
   }
 }
 
-function handleFormClick(form) {
-  ElMessage.info(`打开${form}`);
+function handleFunctionClick(func) {
+  if (func.path) {
+    router.push(func.path).catch(() => {
+      ElMessage.info(`${func.name}功能开发中...`);
+    });
+  } else {
+    ElMessage.info(`打开${func.name}`);
+  }
 }
 
 function handleNewsClick(news) {
@@ -1494,9 +1536,60 @@ function isToday(dateStrOrDate) {
   color: #1976d2;
 }
 
-/* 常用单据 */
-.forms-grid {
-  margin-top: 12px;
+/* 常用功能 */
+.common-functions-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+}
+
+.common-function-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  aspect-ratio: 1;
+}
+
+.common-function-item:hover {
+  transform: translateY(-2px);
+}
+
+.function-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  background: var(--el-bg-color);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  transition: all 0.3s ease;
+}
+
+.common-function-item:hover .function-icon-wrapper {
+  transform: scale(1.1);
+  background: var(--el-color-primary-light-9);
+}
+
+.function-icon {
+  font-size: 24px;
+  transition: all 0.3s ease;
+}
+
+.function-name {
+  font-size: 13px;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  line-height: 1.4;
+  transition: all 0.3s ease;
+}
+
+.common-function-item:hover .function-name {
+  color: var(--el-color-primary);
 }
 
 .form-button {
@@ -1608,7 +1701,29 @@ function isToday(dateStrOrDate) {
 .knowledge-list {
   /* margin-top: 12px; */
   min-height: 200px;
+  max-height: 240px;
+  overflow-y: auto;
+  overflow-x: hidden;
   position: relative;
+  padding-right: 4px;
+}
+
+.knowledge-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.knowledge-list::-webkit-scrollbar-track {
+  background: var(--el-fill-color-lighter);
+  border-radius: 3px;
+}
+
+.knowledge-list::-webkit-scrollbar-thumb {
+  background: var(--el-border-color);
+  border-radius: 3px;
+}
+
+.knowledge-list::-webkit-scrollbar-thumb:hover {
+  background: var(--el-border-color-dark);
 }
 
 .knowledge-empty {