home over

src/views/dashboard/workbench/components/workbench-main/components/shortcuts-card.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="flex-col-center h-120px p-12px border-1px border-#efeff5 dark:border-#ffffff17 rounded-4px hover:shadow-sm cursor-pointer"
+    @click="handClick"
   >
     <svg-icon :icon="icon" :style="{ color: iconColor }" class="text-30px" />
     <p class="py-8px text-16px">{{ label }}</p>
@@ -9,6 +10,8 @@
 
 <script setup lang="ts">
 defineOptions({ name: 'DashboardWorkbenchMainShortcutsCard' });
+import { useRouter } from 'vue-router';
+type callback = () => void;
 
 interface Props {
   /** 快捷操作名称 */
@@ -17,9 +20,22 @@ interface Props {
   icon: string;
   /** 图标颜色 */
   iconColor: string;
+  siteOrfunc: string | callback;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const router = useRouter();
+
+function handClick() {
+  if (typeof props.siteOrfunc === 'function') {
+    props.siteOrfunc();
+  } else {
+    router.push({
+      path: props.siteOrfunc
+    });
+  }
+}
 </script>
 
 <style scoped></style>

src/views/dashboard/workbench/components/workbench-main/index.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script setup lang="ts">
+import { useAppStore, useThemeStore } from '@/store';
 import { ShortcutsCard, TechnologyCard } from './components';
-
 defineOptions({ name: 'DashboardWorkbenchMain' });
 
 interface Technology {
@@ -39,7 +39,8 @@ interface Technology {
   icon: string;
   iconColor?: string;
 }
-
+const app = useAppStore();
+const theme = useThemeStore();
 const technology: Technology[] = [
   {
     id: 0,
@@ -101,20 +102,39 @@ function getRandomColor(): string {
   return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 }
 
+type callback = () => void;
+
 interface Shortcuts {
   id: number;
   label: string;
   icon: string;
   iconColor: string;
+  siteOrfunc: string | callback;
 }
 
 const shortcuts: Shortcuts[] = [
-  { id: 0, label: '查档案', icon: 'icons8:student', iconColor: '#409eff' },
-  { id: 2, label: '看管理', icon: 'arcticons:classroom', iconColor: '#f56c6c' },
-  { id: 1, label: '个性化', icon: 'ic:outline-settings', iconColor: '#7238d1' },
-  { id: 3, label: '改密码', icon: 'teenyicons:password-solid', iconColor: '#19a2f1' },
-  { id: 4, label: '切主题', icon: 'icon-park-solid:theme', iconColor: '#fab251' },
-  { id: 5, label: '说明', icon: 'gg:readme', iconColor: '#8aca6b' }
+  { id: 0, label: '查档案', icon: 'icons8:student', iconColor: '#409eff', siteOrfunc: '/archives/students' },
+  { id: 2, label: '查班级', icon: 'arcticons:classroom', iconColor: '#f56c6c', siteOrfunc: '/group/group' },
+  {
+    id: 1,
+    label: '个性化',
+    icon: 'ic:outline-settings',
+    iconColor: '#7238d1',
+    siteOrfunc: () => {
+      app.toggleSettingDrawerVisible();
+    }
+  },
+  { id: 3, label: '改密码', icon: 'teenyicons:password-solid', iconColor: '#19a2f1', siteOrfunc: '/system/profile' },
+  {
+    id: 4,
+    label: '切主题',
+    icon: 'icon-park-solid:theme',
+    iconColor: '#fab251',
+    siteOrfunc: () => {
+      theme.setDarkMode(!theme.darkMode);
+    }
+  },
+  { id: 5, label: '说明', icon: 'gg:readme', iconColor: '#8aca6b', siteOrfunc: '/about' }
 ];
 </script>