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