xk-admin/apps/web-antd/src/views/dashboard/workspace/index.vue

<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
  WorkbenchTrendItem,
} from '@vben/common-ui';

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

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

import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
import {getQuickMenuApi} from "#/views/system/admin/api";
import {getLatestNotice} from "#/views/system/notice/api";

const userStore = useUserStore();

// 这是一个示例数据，实际项目中需要根据实际情况进行调整
// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
// 例如：url: /dashboard/workspace
const projectItems: WorkbenchProjectItem[] = [
  {
    color: 'blue',
    content: '不要等待机会，而要创造机会。',
    date: '2021-04-01',
    group: '萧康云医科技',
    icon: LogoSvgICON,
    title: '萧康后台管理系统-旧版本',
    url: 'https://admin.xiaokang88.com',
  },
  {
    color: 'blue',
    content: '数据可视化平台。',
    date: '2021-04-01',
    group: '萧康云医科技',
    icon: 'fluent-color:data-bar-vertical-ascending-20',
    title: '数据大屏',
    url: 'http://dls.xiaokang88.com',
  },
];

// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = ref([]);

/**
 * 获取快捷菜单
 */
function getQuickMenu() {
  getQuickMenuApi().then((res) => {
    quickNavItems.value = res;
  });
}
getQuickMenu();
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 = ref<WorkbenchTrendItem[]>([]);

/**
 * 获取最新公告
 */
function getLatestNoticeList() {
  getLatestNotice(10).then((res) => {
    trendItems.value = res;
  });
}
getLatestNoticeList();

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 getTodayDate() {
  const today = new Date();
  const options: Intl.DateTimeFormatOptions = {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  };
  return today.toLocaleDateString('zh-CN', options);
}
const todayDate = getTodayDate();
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        哈喽, {{ userStore.userInfo?.nick_name }} -
        {{ userStore.userInfo?.roles?.name }}, 开始您一天的工作吧！
        <!--        <Button type="primary" v-access:code="['Super Admin']">测我是超级管理员</Button>-->
        <!--        <Button type="primary" v-access:code="['Admin']">测我是管理员</Button>-->
      </template>
      <template #description>
        {{ todayDate }}
      </template>
    </WorkbenchHeader>

    <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="最新动态" />-->
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          title="快捷导航"
          @click="navTo"
        />
      </div>
      <div class="w-full lg:w-2/5">
        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
<!--        <WorkbenchQuickNav-->
<!--          :items="quickNavItems"-->
<!--          class="mt-5 lg:mt-0"-->
<!--          title="快捷导航"-->
<!--          @click="navTo"-->
<!--        />-->
<!--        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />-->
<!--        <AnalysisChartCard class="mt-5" title="访问来源">-->
<!--          <AnalyticsVisitsSource />-->
<!--        </AnalysisChartCard>-->
      </div>
    </div>
  </div>
</template>