feat: 首页调整

apps/web-antd/src/api/license/customer/index.ts

@@ -16,6 +16,20 @@ export namespace CustomerApi {
     email: string; // 邮箱
     remark: string; // 备注
   }
+
+  export interface Dashboard {
+    customerCount: number;
+    projectCount: number;
+    licenseCount: number;
+    userCount: number;
+  }
+}
+
+/** 查询首页详情 */
+export function dashboard() {
+  return requestClient.get<CustomerApi.Dashboard>(
+    `/license/customer/dashboard`,
+  );
 }
 
 /** 查询客户分页 */

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

@@ -1,309 +1,71 @@
 <script lang="ts" setup>
-import type {
+import type { AnalysisOverviewItem } from '@vben/common-ui';
-  AnalysisOverviewItem,
-  WorkbenchProjectItem,
-  WorkbenchQuickNavItem,
-  WorkbenchTodoItem,
-  WorkbenchTrendItem,
-} from '@vben/common-ui';
-import type { TabOption } from '@vben/types';
 
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
 
-import {
+import { AnalysisOverview } from '@vben/common-ui';
-  AnalysisChartCard,
-  AnalysisChartsTabs,
-  AnalysisOverview,
-  WorkbenchHeader,
-  WorkbenchProject,
-  WorkbenchQuickNav,
-  WorkbenchTodo,
-  WorkbenchTrends,
-} from '@vben/common-ui';
 import {
   SvgBellIcon,
   SvgCakeIcon,
   SvgCardIcon,
   SvgDownloadIcon,
 } from '@vben/icons';
-import { preferences } from '@vben/preferences';
-import { useUserStore } from '@vben/stores';
-import { openWindow } from '@vben/utils';
 
-import AnalyticsCustomerType from './analytics/analytics-customer-type.vue';
+import { dashboard } from '#/api/license/customer';
-import AnalyticsTrends from './analytics/analytics-trends.vue';
-import AnalyticsVisitsData from './analytics/analytics-visits-data.vue';
-import AnalyticsVisitsSales from './analytics/analytics-visits-sales.vue';
-import AnalyticsVisitsSource from './analytics/analytics-visits-source.vue';
-import AnalyticsVisits from './analytics/analytics-visits.vue';
 
-const userStore = useUserStore();
+const overviewItems = ref<AnalysisOverviewItem[]>([]);
 
-const overviewItems: AnalysisOverviewItem[] = [
+onMounted(async () => {
+  const data = await dashboard();
+
+  overviewItems.value = [
     {
       icon: SvgCardIcon,
       title: '用户量',
       totalTitle: '总用户量',
-    totalValue: 120_000,
+      totalValue: data.userCount || 0,
-    value: 2000,
+      value: data.userCount || 0,
     },
     {
       icon: SvgCakeIcon,
-    title: '访问量',
+      title: '客户量',
-    totalTitle: '总访问量',
+      totalTitle: '总客户量',
-    totalValue: 500_000,
+      totalValue: data?.customerCount || 0,
-    value: 20_000,
+      value: data?.customerCount || 0,
-  },
-  {
-    icon: SvgDownloadIcon,
-    title: '下载量',
-    totalTitle: '总下载量',
-    totalValue: 120_000,
-    value: 8000,
     },
     {
       icon: SvgBellIcon,
-    title: '使用量',
+      title: '项目量',
-    totalTitle: '总使用量',
+      totalTitle: '总项目量',
-    totalValue: 50_000,
+      totalValue: data?.projectCount || 0,
-    value: 5000,
+      value: data?.projectCount || 0,
-  },
-];
-
-const chartTabs: TabOption[] = [
-  {
-    label: '流量趋势',
-    value: 'trends',
     },
     {
-    label: '月访问量',
+      icon: SvgDownloadIcon,
-    value: 'visits',
+      title: 'License量',
+      totalTitle: '总License量',
+      totalValue: data?.licenseCount || 0,
+      value: data?.licenseCount || 0,
     },
-];
+  ];
-
+});
-// 这是一个示例数据，实际项目中需要根据实际情况进行调整
-// 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',
-  },
-];
-
-// 同样，这里的 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 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();
-
-// 这是一个示例方法，实际项目中需要根据实际情况进行调整
-// 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}`);
-  }
-}
 </script>
 
 <template>
   <div class="p-5">
-    <WorkbenchHeader
+    <!-- <WorkbenchHeader
       :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
+      :alt="userStore.userInfo?.nickname || '管理员'"
     >
       <template #title>
         早安, {{ userStore.userInfo?.nickname }}, 开始您一天的工作吧！
       </template>
       <template #description> 今日晴，20℃ - 32℃！ </template>
-    </WorkbenchHeader>
+    </WorkbenchHeader> -->
 
     <AnalysisOverview class="mt-5" :items="overviewItems" />
 
-    <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="最新动态" />
@@ -320,18 +82,18 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
           <AnalyticsCustomerType />
         </AnalysisChartCard>
       </div>
-    </div>
+    </div> -->
 
-    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+    <!-- <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
       <template #trends>
         <AnalyticsTrends />
       </template>
       <template #visits>
         <AnalyticsVisits />
       </template>
-    </AnalysisChartsTabs>
+    </AnalysisChartsTabs> -->
 
-    <div class="mt-5 w-full md:flex">
+    <!-- <div class="mt-5 w-full md:flex">
       <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
         <AnalyticsVisitsData />
       </AnalysisChartCard>
@@ -341,6 +103,6 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
       <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
         <AnalyticsVisitsSales />
       </AnalysisChartCard>
-    </div>
+    </div> -->
   </div>
 </template>

apps/web-antd/src/views/license/project/data.ts

@@ -12,13 +12,13 @@ import {
   isProjectCodeUnique,
   isProjectNameUnique,
 } from '#/api/license/project';
-import { getSimpleUserList } from '#/api/system/user';
+// import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
 const { hasAccessByCodes } = useAccess();
 
-const userList = await getSimpleUserList();
+// const userList = await getSimpleUserList();
 
 export const formData = ref<ProjectApi.Project>();
 /** 新增/修改的表单 */
@@ -126,82 +126,37 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'businessOwner',
       label: $t('project.businessOwner'),
       rules: 'required',
-      component: 'Select',
+      component: 'Input',
-      componentProps: {
-        options: userList,
-        allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
-      },
     },
     {
       fieldName: 'customerOwner',
       label: $t('project.customerOwner'),
       rules: 'required',
-      component: 'Select',
+      component: 'Input',
-      componentProps: {
-        options: userList,
-        allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
-      },
     },
     {
       fieldName: 'technicalOwnerA',
       label: $t('project.technicalOwnerA'),
       rules: 'required',
-      component: 'Select',
+      component: 'Input',
-      componentProps: {
-        options: userList,
-        allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
-      },
     },
     {
       fieldName: 'technicalOwnerB',
       label: $t('project.technicalOwnerB'),
-      component: 'Select',
+      component: 'Input',
-      componentProps: {
-        options: userList,
-        allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
-      },
     },
     {
       fieldName: 'technicalOwnerC',
       label: $t('project.technicalOwnerC'),
-      component: 'Select',
+      component: 'Input',
-      componentProps: {
-        options: userList,
-        allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
-      },
     },
     {
       fieldName: 'startTime',
       label: $t('project.startTime'),
       component: 'DatePicker',
+      rules: 'required',
       componentProps: {
-        showTime: true,
+        format: 'YYYY-MM-DD',
-        format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
       },
     },
@@ -210,14 +165,14 @@ export function useFormSchema(): VbenFormSchema[] {
       label: $t('project.endTime'),
       component: 'DatePicker',
       componentProps: {
-        showTime: true,
+        format: 'YYYY-MM-DD',
-        format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
       },
     },
     {
       fieldName: 'envInfo',
       label: $t('project.envInfo'),
+      rules: 'required',
       component: 'Input',
     },
     // {
@@ -273,91 +228,61 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'businessOwner',
       label: $t('project.businessOwner'),
-      component: 'Select',
+      component: 'Input',
       componentProps: {
-        options: userList,
         allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
       },
     },
     {
       fieldName: 'customerOwner',
       label: $t('project.customerOwner'),
-      component: 'Select',
+      component: 'Input',
       componentProps: {
-        options: userList,
         allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
       },
     },
     {
       fieldName: 'technicalOwnerA',
       label: $t('project.technicalOwnerA'),
-      component: 'Select',
+      component: 'Input',
       componentProps: {
-        options: userList,
         allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
       },
     },
     {
       fieldName: 'technicalOwnerB',
       label: $t('project.technicalOwnerB'),
-      component: 'Select',
+      component: 'Input',
       componentProps: {
-        options: userList,
         allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
       },
     },
     {
       fieldName: 'technicalOwnerC',
       label: $t('project.technicalOwnerC'),
-      component: 'Select',
+      component: 'Input',
       componentProps: {
-        options: userList,
-        allowClear: true,
-        showSearch: true,
-        fieldNames: { label: 'nickname', value: 'id' },
-        filterOption: (input: string, option: any) => {
-          return option.nickname.toLowerCase().includes(input.toLowerCase());
-        },
-      },
-    },
-    {
-      fieldName: 'startTime',
-      label: $t('project.startTime'),
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'endTime',
-      label: $t('project.endTime'),
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
         allowClear: true,
       },
     },
+    // {
+    //   fieldName: 'startTime',
+    //   label: $t('project.startTime'),
+    //   component: 'RangePicker',
+    //   componentProps: {
+    //     ...getRangePickerDefaultProps(),
+    //     allowClear: true,
+    //   },
+    // },
+    // {
+    //   fieldName: 'endTime',
+    //   label: $t('project.endTime'),
+    //   component: 'RangePicker',
+    //   componentProps: {
+    //     ...getRangePickerDefaultProps(),
+    //     allowClear: true,
+    //   },
+    // },
     {
       fieldName: 'status',
       label: $t('project.status'),
@@ -412,13 +337,18 @@ export function useGridColumns(
       field: 'startTime',
       title: $t('project.startTime'),
       minWidth: 120,
-      formatter: 'formatDateTime',
+      formatter: 'formatDate',
     },
     {
       field: 'contractCode',
       title: $t('project.contractCode'),
       minWidth: 120,
     },
+    {
+      field: 'sn',
+      title: 'SN',
+      minWidth: 120,
+    },
     {
       field: 'businessStatus',
       title: $t('project.businessStatus'),
@@ -439,28 +369,28 @@ export function useGridColumns(
       },
     },
     {
-      field: 'businessOwnerName',
+      field: 'businessOwner',
       title: $t('project.businessOwner'),
       minWidth: 120,
     },
     {
-      field: 'customerOwnerName',
+      field: 'customerOwner',
       title: $t('project.customerOwner'),
       visible: false,
       minWidth: 120,
     },
     {
-      field: 'technicalOwnerAName',
+      field: 'technicalOwnerA',
       title: $t('project.technicalOwnerA'),
       minWidth: 120,
     },
     {
-      field: 'technicalOwnerBName',
+      field: 'technicalOwnerB',
       title: $t('project.technicalOwnerB'),
       minWidth: 120,
     },
     {
-      field: 'technicalOwnerCName',
+      field: 'technicalOwnerC',
       title: $t('project.technicalOwnerC'),
       minWidth: 120,
     },
@@ -469,7 +399,7 @@ export function useGridColumns(
       title: $t('project.endTime'),
       visible: false,
       minWidth: 120,
-      formatter: 'formatDateTime',
+      formatter: 'formatDate',
     },
     {
       field: 'envInfo',