首页功能模块支持动态惨淡

vue2/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav-access.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { WorkbenchQuickNavItem } from '../typing';
+
+import {
+  AccessControl,
+  useAccess,
+} from '../../../../../../effects/access/src/index';
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  VbenIcon,
+} from '@vben-core/shadcn-ui';
+
+defineOptions({
+  name: 'WorkbenchQuickNav',
+});
+
+withDefaults(defineProps<Props>(), {
+  items: () => [],
+});
+
+defineEmits(['click']);
+
+const { hasAccessByRoles } = useAccess();
+
+interface Props {
+  items?: WorkbenchQuickNavItem[];
+  title: string;
+}
+
+</script>
+
+<template>
+  <Card>
+    <!-- 标题 -->
+    <CardHeader class="py-4 pb-0">
+      <CardTitle class="text-lg">{{ title }}</CardTitle>
+    </CardHeader>
+
+    <!-- 单行水平滑动卡片 -->
+    <CardContent class="scrollbar-hide flex gap-4 overflow-x-auto p-4">
+      <template v-for="(item, index) in items" :key="item.title">
+        <div
+          v-if="hasAccessByRoles(item.authority)"
+          @click="$emit('click', item)"
+          class="border-border flex h-32 w-40 flex-shrink-0 cursor-pointer flex-col items-center justify-center rounded-xl border transition-all duration-300 hover:shadow-xl"
+        >
+          <VbenIcon
+            :icon="item.icon"
+            :color="item.color"
+            class="mb-2 size-7 transition-transform duration-300 group-hover:scale-125"
+          />
+          <span class="text-md truncate text-center">{{ item.title }}</span>
+        </div>
+
+        <div
+          v-else
+          class="border-border flex h-32 w-40 flex-shrink-0 cursor-not-allowed flex-col items-center justify-center rounded-xl border bg-gray-300 opacity-50"
+        >
+          <VbenIcon
+            :icon="item.icon"
+            color="#9CA3AF"
+            class="mb-2 size-7"
+          />
+          <span class="text-md truncate text-center">{{ item.title }}</span>
+        </div>
+      </template>
+    </CardContent>
+  </Card>
+</template>
+
+<style scoped>
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+</style>

vue2/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue

@@ -24,8 +24,6 @@ withDefaults(defineProps<Props>(), {
 
 defineEmits(['click']);
 
-const { hasAccessByRoles } = useAccess();
-
 interface Props {
   items?: WorkbenchQuickNavItem[];
   title: string;
@@ -44,7 +42,6 @@ interface Props {
     <CardContent class="scrollbar-hide flex gap-4 overflow-x-auto p-4">
       <template v-for="(item, index) in items" :key="item.title">
         <div
-          v-if="hasAccessByRoles(item.authority)"
           @click="$emit('click', item)"
           class="border-border flex h-32 w-40 flex-shrink-0 cursor-pointer flex-col items-center justify-center rounded-xl border transition-all duration-300 hover:shadow-xl"
         >
@@ -55,18 +52,6 @@ interface Props {
           />
           <span class="text-md truncate text-center">{{ item.title }}</span>
         </div>
-
-        <div
-          v-else
-          class="border-border flex h-32 w-40 flex-shrink-0 cursor-not-allowed flex-col items-center justify-center rounded-xl border bg-gray-300 opacity-50"
-        >
-          <VbenIcon
-            :icon="item.icon"
-            color="#9CA3AF"
-            class="mb-2 size-7"
-          />
-          <span class="text-md truncate text-center">{{ item.title }}</span>
-        </div>
       </template>
     </CardContent>
   </Card>