feat: 更新财务系统界面和功能优化

- 替换系统管理和入账管理的图标为更合适的样式 - 优化登录请求的格式和错误处理 - 从localStorage读取用户信息初始化用户状态 - 简化仪表盘路由配置，移除多语言支持 - 调整工作台头部组件，移除不必要的统计信息 - 清理工作台页面，仅保留欢迎信息
2026-01-12 15:03:12 +08:00
parent 963e2a8d39
commit 77c1b37f2e
8 changed files with 249 additions and 242 deletions
--- a/apps/finance/src/api/core/auth.ts
+++ b/apps/finance/src/api/core/auth.ts
@@ -39,7 +39,10 @@ export namespace AuthApi {
 * 登录
 */
 export async function loginApi(data: AuthApi.LoginParams) {
-  return requestClient.post<AuthApi.LoginResult<AuthApi.UserToken, AuthApi.UserInfo>>('/auth/login', data);
+  return requestClient.post<AuthApi.LoginResult<AuthApi.UserToken, AuthApi.UserInfo>>(
+    '/auth/login',
+    data,
+  );
 }

 /**
--- a/apps/finance/src/api/request.ts
+++ b/apps/finance/src/api/request.ts
@@ -4,6 +4,7 @@
 import type { RequestClientOptions } from '@vben/request';

 import { useAppConfig } from '@vben/hooks';
+import { $t } from '@vben/locales';
 import { preferences } from '@vben/preferences';
 import {
  authenticateResponseInterceptor,
@@ -39,11 +40,6 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
    if (preferences.app.loginExpiredMode === 'modal' && accessStore.isAccessChecked) {
      accessStore.setLoginExpired(true);
    } else {
-      // 显示登录过期提示
-      message.error({
-        content: '您的登录状态已过期，请重新登录',
-        duration: 3,
-      });
      // 短暂延迟后跳转，让用户看到提示
      setTimeout(() => {
        authStore.logout();
@@ -196,7 +192,7 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {

      // 如果是401错误，已经在自定义拦截器中处理了，这里不需要额外提示
      if (responseCode === 401) {
-        return Promise.reject(error);
+        return Promise.reject($t('ui.fallback.http.unauthorized'));
      }

      // 如果有后端返回的错误信息，优先显示
--- a/apps/finance/src/router/routes/modules/dashboard.ts
+++ b/apps/finance/src/router/routes/modules/dashboard.ts
@@ -1,17 +1,15 @@
 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'),
+      title: '首页',
    },
    name: 'Dashboard',
    path: '/dashboard',
-    component: () => import('#/views/dashboard/analytics/index.vue'),
+    component: () => import('#/views/dashboard/workspace/index.vue'),
  },
 ];

--- a/apps/finance/src/router/routes/modules/posting.ts
+++ b/apps/finance/src/router/routes/modules/posting.ts
@@ -3,7 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
 const routes: RouteRecordRaw[] = [
  {
    meta: {
-      icon: 'ic:baseline-view-in-ar',
+      icon: 'ant-design:book-twotone',
      keepAlive: true,
      order: 1000,
      title: '入账管理',
--- a/apps/finance/src/router/routes/modules/system.ts
+++ b/apps/finance/src/router/routes/modules/system.ts
@@ -3,7 +3,7 @@ import type { RouteRecordRaw } from 'vue-router';
 const routes: RouteRecordRaw[] = [
  {
    meta: {
-      icon: 'ic:baseline-view-in-ar',
+      icon: 'ant-design:setting-twotone',
      keepAlive: true,
      order: 1000,
      title: '系统管理',
--- a/apps/finance/src/views/dashboard/workspace/index.vue
+++ b/apps/finance/src/views/dashboard/workspace/index.vue
@@ -1,250 +1,249 @@
 <script lang="ts" setup>
-import type {
-  WorkbenchProjectItem,
-  WorkbenchQuickNavItem,
-  WorkbenchTodoItem,
-  WorkbenchTrendItem,
-} from '@vben/common-ui';
+// import type {
+//   WorkbenchProjectItem,
+//   WorkbenchQuickNavItem,
+//   WorkbenchTodoItem,
+//   WorkbenchTrendItem,
+// } from '@vben/common-ui';

-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
+// import { ref } from 'vue';
+// import { useRouter } from 'vue-router';

-import {
-  AnalysisChartCard,
-  WorkbenchHeader,
-  WorkbenchProject,
-  WorkbenchQuickNav,
-  WorkbenchTodo,
-  WorkbenchTrends,
-} from '@vben/common-ui';
+// import {
+//   AnalysisChartCard,
+//   WorkbenchHeader,
+//   WorkbenchProject,
+//   WorkbenchQuickNav,
+//   WorkbenchTodo,
+//   WorkbenchTrends,
+// } from '@vben/common-ui';
+import { WorkbenchHeader } from '@vben/common-ui';
 import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
-import { openWindow } from '@vben/utils';
+// import { openWindow } from '@vben/utils';

-import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
+// import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';

 const userStore = useUserStore();

 // 这是一个示例数据，实际项目中需要根据实际情况进行调整
 // 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',
-  },
-];
+// 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 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 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();
+// 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}`);
-  }
-}
+// 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"
-    >
+    <WorkbenchHeader :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar">
      <template #title>
-        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
+        您好, {{ userStore.userInfo?.name || userStore.userInfo?.account }}, 欢迎登录财务系统！
      </template>
-      <template #description> 今日晴，20℃ - 32℃！ </template>
+      <!-- <template #description> 今日晴，20℃ - 32℃！ </template> -->
    </WorkbenchHeader>

-    <div class="mt-5 flex flex-col lg:flex-row">
+    <!-- <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="最新动态" />
@@ -261,6 +260,6 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
          <AnalyticsVisitsSource />
        </AnalysisChartCard>
      </div>
-    </div>
+    </div> -->
  </div>
 </template>
--- a/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
+++ b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
@@ -27,17 +27,20 @@ withDefaults(defineProps<Props>(), {
        <slot name="description"></slot>
      </span>
    </div>
-    <div class="mt-4 flex flex-1 justify-end md:mt-0">
-      <div class="flex flex-col justify-center text-right">
+    <div
+      v-if="$slots.todo || $slots.project || $slots.team"
+      class="mt-4 flex flex-1 justify-end md:mt-0"
+    >
+      <div v-if="$slots.todo" class="flex flex-col justify-center text-right">
        <span class="text-foreground/80"> 待办 </span>
        <span class="text-2xl">2/10</span>
      </div>

-      <div class="mx-12 flex flex-col justify-center text-right md:mx-16">
+      <div v-if="$slots.project" class="mx-12 flex flex-col justify-center text-right md:mx-16">
        <span class="text-foreground/80"> 项目 </span>
        <span class="text-2xl">8</span>
      </div>
-      <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
+      <div v-if="$slots.team" class="mr-4 flex flex-col justify-center text-right md:mr-10">
        <span class="text-foreground/80"> 团队 </span>
        <span class="text-2xl">300</span>
      </div>
--- a/packages/stores/src/modules/user.ts
+++ b/packages/stores/src/modules/user.ts
@@ -31,10 +31,18 @@ export const useUserStore = defineStore('core-user', {
      this.userRoles = roles;
    },
  },
-  state: (): AccessState => ({
-    userInfo: null,
-    userRoles: '',
-  }),
+  state: (): AccessState => {
+    // 从localStorage中读取用户信息
+    const storedUserInfo = localStorage.getItem('userInfo');
+    const userInfo = storedUserInfo ? JSON.parse(storedUserInfo) : null;
+    // 从用户信息中提取角色
+    const roles = userInfo?.role ?? '';
+
+    return {
+      userInfo,
+      userRoles: roles,
+    };
+  },
 });

 // 解决热更新问题