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

- 替换系统管理和入账管理的图标为更合适的样式
- 优化登录请求的格式和错误处理
- 从localStorage读取用户信息初始化用户状态
- 简化仪表盘路由配置,移除多语言支持
- 调整工作台头部组件,移除不必要的统计信息
- 清理工作台页面,仅保留欢迎信息
This commit is contained in:
2026-01-12 15:03:12 +08:00
parent 963e2a8d39
commit 77c1b37f2e
8 changed files with 249 additions and 242 deletions

View File

@@ -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,
);
}
/**

View File

@@ -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'));
}
// 如果有后端返回的错误信息,优先显示

View File

@@ -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'),
},
];

View File

@@ -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: '入账管理',

View File

@@ -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: '系统管理',

View File

@@ -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>