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

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

import { useRouter } from 'vue-router';

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

const userStore = useUserStore();

// 同样，这里的 url 也可以使用以 http 开头的外部链接
const cv: WorkbenchQuickNavItem[] = [
  {
    color: '#3fb27f',
    authority: ['iva'],
    icon: 'mdi:video',
    title: '视频智能分析',
    url: '/cv/iva',
  },
  {
    color: '#3fb27f',
    authority: ['sca'],
    icon: 'mdi:ice-cream',
    title: '蚕茧仪评分析',
    url: '/cv/sca',
  },
  {
    color: '#3fb27f',
    authority: ['sca2'],
    icon: 'mdi:ice-pop',
    title: '蚕茧仪评分析V2',
    url: '/cv/sca2',
  },
  {
    color: '#3fb27f',
    authority: ['ysa'],
    icon: 'mdi:waveform',
    title: '催青阶段分析',
    url: '/cv/ysa',
  },
  {
    color: '#3fb27f',
    authority: ['ticket'],
    icon: 'mdi:ticket-confirmation',
    title: '仪评指标联分析',
    url: '/cv/ticket',
  },
  {
    color: '#3fb27f',
    authority: ['license'],
    icon: 'mdi:certificate',
    title: '证件照片分析',
    url: '/cv/license',
  },
  {
    color: '#3fb27f',
    icon: 'ion:bar-chart-outline',
    title: '数据标注入口',
    authority: ['user'],
    url: 'https://ai.ronsunny.cn:8094/',
  },
];
const llm: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    authority: ['bot'],
    icon: 'mdi:face-agent',
    title: '通用智能体',
    url: '/llm/bot',
  },
  {
    color: '#1fdaca',
    authority: ['report'],
    icon: 'mdi:set-center',
    title: '智农观数阁',
    url: '/llm/report/report-chat',
  },
  {
    color: '#1fdaca',
    authority: ['service'],
    icon: 'mdi:android-head',
    title: '灵思智服阁',
    url: '/llm/service/service-chat',
  },
];
const common: WorkbenchQuickNavItem[] = [
  {
    color: '#bf0c2c',
    authority: ['remote'],
    icon: 'carbon:workspace',
    title: '设备远程控制',
    url: '/remote',
  },
  {
    color: '#bf0c2c',
    icon: 'ion:grid-outline',
    title: 'RAGFlow',
    authority: ['user'],
    url: '/out/rag',
  },
];
const router = useRouter();

// 这是一个示例方法，实际项目中需要根据实际情况进行调整
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 getGreeting() {
  const hour = new Date().getHours();
  if (hour < 6) return '凌晨好';
  if (hour < 12) return '早安';
  if (hour < 18) return '下午好';
  return '晚上好';
}
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        {{ getGreeting() }}, {{ userStore.userInfo?.username }},
        开始您一天的工作吧！
      </template>
      <template #description> 欢迎使用主干AI实验室</template>
    </WorkbenchHeader>

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="w-full">
        <WorkbenchQuickNav
          :items="cv"
          class="mt-5 lg:mt-0"
          title="计算机视觉"
          @click="navTo"
        />
      </div>
    </div>
    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="w-full">
        <WorkbenchQuickNav
          :items="llm"
          class="mt-5 lg:mt-0"
          title="大语言模型"
          @click="navTo"
        />
      </div>
    </div>
    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="w-full">
        <WorkbenchQuickNav
          :items="common"
          class="mt-5 lg:mt-0"
          title="其他应用"
          @click="navTo"
        />
      </div>
    </div>
  </div>
</template>