feat: 首页菜单、右上角和默认主题调整

2025-07-08 10:39:09 +08:00
parent c6a1ee5b04
commit 5e09229143
6 changed files with 480 additions and 60 deletions
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -4,14 +4,8 @@ import type { NotificationItem } from '@vben/layouts';
 import { computed, onMounted, ref, watch } from 'vue';

 import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
-import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
-import {
-  AntdProfileOutlined,
-  BookOpenText,
-  CircleHelp,
-  MdiGithub,
-} from '@vben/icons';
+import { AntdProfileOutlined } from '@vben/icons';
 import {
  BasicLayout,
  LockScreen,
@@ -20,7 +14,7 @@ import {
 } from '@vben/layouts';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
-import { formatDateTime, openWindow } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';

 import {
  getUnreadNotifyMessageCount,
@@ -57,31 +51,31 @@ const menus = computed(() => [
    icon: AntdProfileOutlined,
    text: $t('ui.widgets.profile'),
  },
-  {
-    handler: () => {
-      openWindow(VBEN_DOC_URL, {
-        target: '_blank',
-      });
-    },
-    icon: BookOpenText,
-    text: $t('ui.widgets.document'),
-  },
-  {
-    handler: () => {
-      openWindow(VBEN_GITHUB_URL, {
-        target: '_blank',
-      });
-    },
-    icon: MdiGithub,
-    text: 'GitHub',
-  },
-  {
-    handler: () => {
-      helpModalApi.open();
-    },
-    icon: CircleHelp,
-    text: $t('ui.widgets.qa'),
-  },
+  // {
+  //   handler: () => {
+  //     openWindow(VBEN_DOC_URL, {
+  //       target: '_blank',
+  //     });
+  //   },
+  //   icon: BookOpenText,
+  //   text: $t('ui.widgets.document'),
+  // },
+  // {
+  //   handler: () => {
+  //     openWindow(VBEN_GITHUB_URL, {
+  //       target: '_blank',
+  //     });
+  //   },
+  //   icon: MdiGithub,
+  //   text: 'GitHub',
+  // },
+  // {
+  //   handler: () => {
+  //     helpModalApi.open();
+  //   },
+  //   icon: CircleHelp,
+  //   text: $t('ui.widgets.qa'),
+  // },
 ]);

 const avatar = computed(() => {
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -7,7 +7,7 @@
    "forgetPassword": "忘记密码"
  },
  "dashboard": {
-    "title": "概览",
+    "title": "首页",
    "analytics": "分析页",
    "workspace": "工作台"
  },
--- a/apps/web-antd/src/preferences.ts
+++ b/apps/web-antd/src/preferences.ts
@@ -12,11 +12,16 @@ export const overridesPreferences = defineOverridesPreferences({
    accessMode: 'backend',
    name: import.meta.env.VITE_APP_TITLE,
    enableRefreshToken: true,
+    defaultHomePath: '/dashboard',
  },
  logo: {
    // source: 'https://www.agrandtech.com.cn/favicon.ico',
    source: '/agt.png',
  },
+  theme: {
+    /** 默认主题 */
+    mode: 'light',
+  },
  footer: {
    /** 默认关闭 footer 页脚，因为有一定遮挡 */
    enable: false,
--- a/apps/web-antd/src/router/routes/modules/dashboard.ts
+++ b/apps/web-antd/src/router/routes/modules/dashboard.ts
@@ -3,35 +3,45 @@ import type { RouteRecordRaw } from 'vue-router';
 import { $t } from '#/locales';

 const routes: RouteRecordRaw[] = [
+  // {
+  //   meta: {
+  //     icon: 'lucide:layout-dashboard',
+  //     order: -1,
+  //     title: $t('page.dashboard.title'),
+  //   },
+  //   name: 'Dashboard2',
+  //   path: '/dashboard2',
+  //   children: [
+  //     {
+  //       name: 'Workspace',
+  //       path: '/workspace',
+  //       component: () => import('#/views/dashboard/workspace/index.vue'),
+  //       meta: {
+  //         icon: 'carbon:workspace',
+  //         title: $t('page.dashboard.workspace'),
+  //       },
+  //     },
+  //     {
+  //       name: 'Analytics',
+  //       path: '/analytics',
+  //       component: () => import('#/views/dashboard/analytics/index.vue'),
+  //       meta: {
+  //         affixTab: true,
+  //         icon: 'lucide:area-chart',
+  //         title: $t('page.dashboard.analytics'),
+  //       },
+  //     },
+  //   ],
+  // },
  {
-    meta: {
-      icon: 'lucide:layout-dashboard',
-      order: -1,
-      title: $t('page.dashboard.title'),
-    },
    name: 'Dashboard',
    path: '/dashboard',
-    children: [
-      {
-        name: 'Workspace',
-        path: '/workspace',
-        component: () => import('#/views/dashboard/workspace/index.vue'),
-        meta: {
-          icon: 'carbon:workspace',
-          title: $t('page.dashboard.workspace'),
-        },
-      },
-      {
-        name: 'Analytics',
-        path: '/analytics',
-        component: () => import('#/views/dashboard/analytics/index.vue'),
-        meta: {
-          affixTab: true,
-          icon: 'lucide:area-chart',
-          title: $t('page.dashboard.analytics'),
-        },
-      },
-    ],
+    component: () => import('#/views/dashboard/index.vue'),
+    meta: {
+      icon: 'ion:home-outline',
+      title: $t('page.dashboard.title'),
+      order: -1,
+    },
  },
  {
    name: 'Profile',
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-customer-type.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-customer-type.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: '2%',
+      left: 'center',
+    },
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 100;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        avoidLabelOverlap: false,
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        data: [
+          { name: '集成商', value: 348 },
+          { name: '合作伙伴', value: 735 },
+          { name: '基站厂商', value: 1080 },
+          { name: '研究院', value: 684 },
+        ],
+        emphasis: {
+          label: {
+            fontSize: '12',
+            fontWeight: 'bold',
+            show: true,
+          },
+        },
+        itemStyle: {
+          // borderColor: '#fff',
+          borderRadius: 5,
+          borderWidth: 2,
+        },
+        label: {
+          position: 'center',
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        name: '客户类型',
+        radius: ['38%', '70%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
--- a/apps/web-antd/src/views/dashboard/index.vue
+++ b/apps/web-antd/src/views/dashboard/index.vue
@@ -0,0 +1,346 @@
+<script lang="ts" setup>
+import type {
+  AnalysisOverviewItem,
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
+} from '@vben/common-ui';
+import type { TabOption } from '@vben/types';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+  AnalysisOverview,
+  WorkbenchHeader,
+  WorkbenchProject,
+  WorkbenchQuickNav,
+  WorkbenchTodo,
+  WorkbenchTrends,
+} from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+import { preferences } from '@vben/preferences';
+import { useUserStore } from '@vben/stores';
+import { openWindow } from '@vben/utils';
+
+import AnalyticsCustomerType from './analytics/analytics-customer-type.vue';
+import AnalyticsTrends from './analytics/analytics-trends.vue';
+import AnalyticsVisitsData from './analytics/analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics/analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics/analytics-visits-source.vue';
+import AnalyticsVisits from './analytics/analytics-visits.vue';
+
+const userStore = useUserStore();
+
+const overviewItems: AnalysisOverviewItem[] = [
+  {
+    icon: SvgCardIcon,
+    title: '用户量',
+    totalTitle: '总用户量',
+    totalValue: 120_000,
+    value: 2000,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '访问量',
+    totalTitle: '总访问量',
+    totalValue: 500_000,
+    value: 20_000,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '下载量',
+    totalTitle: '总下载量',
+    totalValue: 120_000,
+    value: 8000,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '使用量',
+    totalTitle: '总使用量',
+    totalValue: 50_000,
+    value: 5000,
+  },
+];
+
+const chartTabs: TabOption[] = [
+  {
+    label: '流量趋势',
+    value: 'trends',
+  },
+  {
+    label: '月访问量',
+    value: 'visits',
+  },
+];
+
+// 这是一个示例数据，实际项目中需要根据实际情况进行调整
+// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
+// 例如：url: /dashboard/workspace
+const projectItems: WorkbenchProjectItem[] = [
+  {
+    color: '',
+    content: '不要等待机会，而要创造机会。',
+    date: '2021-04-01',
+    group: '开源组',
+    icon: 'carbon:logo-github',
+    title: 'Github',
+    url: 'https://github.com',
+  },
+  {
+    color: '#3fb27f',
+    content: '现在的你决定将来的你。',
+    date: '2021-04-01',
+    group: '算法组',
+    icon: 'ion:logo-vue',
+    title: 'Vue',
+    url: 'https://vuejs.org',
+  },
+  {
+    color: '#e18525',
+    content: '没有什么才能比努力更重要。',
+    date: '2021-04-01',
+    group: '上班摸鱼',
+    icon: 'ion:logo-html5',
+    title: 'Html5',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
+  },
+  {
+    color: '#bf0c2c',
+    content: '热情和欲望可以突破一切难关。',
+    date: '2021-04-01',
+    group: 'UI',
+    icon: 'ion:logo-angular',
+    title: 'Angular',
+    url: 'https://angular.io',
+  },
+  {
+    color: '#00d8ff',
+    content: '健康的身体是实现目标的基石。',
+    date: '2021-04-01',
+    group: '技术牛',
+    icon: 'bx:bxl-react',
+    title: 'React',
+    url: 'https://reactjs.org',
+  },
+  {
+    color: '#EBD94E',
+    content: '路是走出来的，而不是空想出来的。',
+    date: '2021-04-01',
+    group: '架构组',
+    icon: 'ion:logo-javascript',
+    title: 'Js',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
+  },
+];
+
+// 同样，这里的 url 也可以使用以 http 开头的外部链接
+const quickNavItems: WorkbenchQuickNavItem[] = [
+  {
+    color: '#1fdaca',
+    icon: 'ion:home-outline',
+    title: '首页',
+    url: '/',
+  },
+  {
+    color: '#bf0c2c',
+    icon: 'ion:grid-outline',
+    title: '仪表盘',
+    url: '/dashboard',
+  },
+  {
+    color: '#e18525',
+    icon: 'ion:layers-outline',
+    title: '组件',
+    url: '/demos/features/icons',
+  },
+  {
+    color: '#3fb27f',
+    icon: 'ion:settings-outline',
+    title: '系统管理',
+    url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
+  },
+  {
+    color: '#4daf1bc9',
+    icon: 'ion:key-outline',
+    title: '权限管理',
+    url: '/demos/access/page-control',
+  },
+  {
+    color: '#00d8ff',
+    icon: 'ion:bar-chart-outline',
+    title: '图表',
+    url: '/analytics',
+  },
+];
+
+const todoItems = ref<WorkbenchTodoItem[]>([
+  {
+    completed: false,
+    content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
+    date: '2024-07-30 11:00:00',
+    title: '审查前端代码提交',
+  },
+  {
+    completed: true,
+    content: `检查并优化系统性能，降低CPU使用率。`,
+    date: '2024-07-30 11:00:00',
+    title: '系统性能优化',
+  },
+  {
+    completed: false,
+    content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
+    date: '2024-07-30 11:00:00',
+    title: '安全检查',
+  },
+  {
+    completed: false,
+    content: `更新项目中的所有npm依赖包，确保使用最新版本。`,
+    date: '2024-07-30 11:00:00',
+    title: '更新项目依赖',
+  },
+  {
+    completed: false,
+    content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
+    date: '2024-07-30 11:00:00',
+    title: '修复UI显示问题',
+  },
+]);
+const trendItems: WorkbenchTrendItem[] = [
+  {
+    avatar: 'svg:avatar-1',
+    content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
+    date: '刚刚',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关注了 <a>威廉</a> `,
+    date: '1个小时前',
+    title: '艾文',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1天前',
+    title: '克里斯',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写一个Vite插件</a> `,
+    date: '2天前',
+    title: 'Vben',
+  },
+  {
+    avatar: 'svg:avatar-1',
+    content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
+    date: '3天前',
+    title: '皮特',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关闭了问题 <a>如何运行项目</a> `,
+    date: '1周前',
+    title: '杰克',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1周前',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `推送了代码到 <a>Github</a>`,
+    date: '2021-04-01 20:00',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
+    date: '2021-03-01 20:00',
+    title: 'Vben',
+  },
+];
+
+const router = useRouter();
+
+// 这是一个示例方法，实际项目中需要根据实际情况进行调整
+// This is a sample method, adjust according to the actual project requirements
+function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+  if (nav.url?.startsWith('http')) {
+    openWindow(nav.url);
+    return;
+  }
+  if (nav.url?.startsWith('/')) {
+    router.push(nav.url).catch((error) => {
+      console.error('Navigation failed:', error);
+    });
+  } else {
+    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
+  }
+}
+</script>
+
+<template>
+  <div class="p-5">
+    <WorkbenchHeader
+      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
+    >
+      <template #title>
+        早安, {{ userStore.userInfo?.nickname }}, 开始您一天的工作吧！
+      </template>
+      <template #description> 今日晴，20℃ - 32℃！ </template>
+    </WorkbenchHeader>
+
+    <AnalysisOverview class="mt-5" :items="overviewItems" />
+
+    <div class="mt-5 flex flex-col lg:flex-row">
+      <div class="mr-4 w-full lg:w-3/5">
+        <WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
+        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
+      </div>
+      <div class="w-full lg:w-2/5">
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+          @click="navTo"
+        />
+        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
+        <AnalysisChartCard class="mt-5" title="客户类型">
+          <AnalyticsCustomerType />
+        </AnalysisChartCard>
+      </div>
+    </div>
+
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #trends>
+        <AnalyticsTrends />
+      </template>
+      <template #visits>
+        <AnalyticsVisits />
+      </template>
+    </AnalysisChartsTabs>
+
+    <div class="mt-5 w-full md:flex">
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
+        <AnalyticsVisitsData />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSource />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSales />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>