Merge pull request #1429 from colinin/system-info

feat(vben5): Add system info component

apps/vben5/apps/app-antd/src/api/core/useSystemInfoApi.ts

@@ -0,0 +1,21 @@
+import type { SystemInfo } from '#/types/systemInfo';
+
+import { useRequest } from '@abp/request';
+
+export function useSystemInfoApi() {
+  const { cancel, request } = useRequest();
+
+  /**
+   * 获取应用程序状态
+   */
+  function getSystemInfoApi(): Promise<SystemInfo> {
+    return request<SystemInfo>('/api/system-info', {
+      method: 'GET',
+    });
+  }
+
+  return {
+    cancel,
+    getSystemInfoApi,
+  };
+}

apps/vben5/apps/app-antd/src/types/index.ts

@@ -0,0 +1 @@
+export * from './systemInfo';

apps/vben5/apps/app-antd/src/types/systemInfo.ts

@@ -0,0 +1,21 @@
+interface ComponentKey {
+  /** 组件名称 */
+  name: string;
+  /** 组件显示名称 */
+  displayName: string;
+}
+
+interface ComponentInfo {
+  /** 组件名称 */
+  name: string;
+  /** 组件名称集合 */
+  keys: ComponentKey[];
+  /** 组件状态集合 */
+  details: Record<string, any>;
+}
+
+interface SystemInfo {
+  components: ComponentInfo[];
+}
+
+export type { SystemInfo };

apps/vben5/apps/app-antd/src/views/_core/about/app.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import { onMounted, ref } from 'vue';
+
+import { AbpAbout } from '@abp/ui';
+
+import { useSystemInfoApi } from '#/api/core/useSystemInfoApi';
+
+defineOptions({ name: 'AbpAbout' });
+
+interface AboutComponent {
+  content: Component | string;
+  title: string;
+}
+
+interface AboutItem {
+  items?: AboutComponent[];
+  title: string;
+}
+
+const aboutItems = ref<AboutItem[]>([]);
+const { getSystemInfoApi } = useSystemInfoApi();
+
+async function onInit() {
+  const items: AboutItem[] = [];
+  const res = await getSystemInfoApi();
+  res.components.forEach((component) => {
+    const components: AboutComponent[] = [];
+    component.keys.forEach((key) => {
+      components.push({
+        title: key.displayName,
+        content: component.details[key.name],
+      });
+    });
+    items.push({
+      title: component.name,
+      items: components,
+    });
+  });
+  aboutItems.value = items;
+}
+
+onMounted(onInit);
+</script>
+
+<template>
+  <AbpAbout :custom-items="aboutItems" />
+</template>

apps/vben5/packages/@abp/auditing/src/components/loggings/LoggingDrawer.vue

@@ -10,7 +10,7 @@ import { $t } from '@vben/locales';
 
 import { formatToDateTime } from '@abp/core';
 import { useVbenVxeGrid } from '@abp/ui';
-import { Descriptions, Tabs, Tag, Textarea } from 'ant-design-vue';
+import { Descriptions, Skeleton, Tabs, Tag, Textarea } from 'ant-design-vue';
 
 import { useLoggingsApi } from '../../api/useLoggingsApi';
 
@@ -25,7 +25,7 @@ const TabPane = Tabs.TabPane;
 const DescriptionsItem = Descriptions.Item;
 
 const activedTab = ref('basic');
-const logModel = ref<LogDto>({} as LogDto);
+const logModel = ref<Partial<LogDto>>({});
 
 const { getApi } = useLoggingsApi();
 const [Drawer, drawerApi] = useVbenDrawer({
@@ -83,7 +83,7 @@ const exceptionsGridOptions: VxeGridProps<LogExceptionDto> = {
   proxyConfig: {
     ajax: {
       query: () => {
-        return Promise.resolve(logModel.value.exceptions);
+        return Promise.resolve(logModel.value.exceptions ?? []);
       },
     },
     response: {
@@ -108,7 +108,8 @@ async function onGet(id: string) {
 <template>
   <Drawer>
     <div style="width: 800px">
-      <Tabs v-model="activedTab">
+      <Skeleton v-if="!logModel" />
+      <Tabs v-else v-model="activedTab">
         <TabPane key="basic" :tab="$t('AbpAuditLogging.Operation')">
           <Descriptions
             :colon="false"
@@ -121,8 +122,8 @@ async function onGet(id: string) {
               {{ formatToDateTime(logModel.timeStamp) }}
             </DescriptionsItem>
             <DescriptionsItem :label="$t('AbpAuditLogging.Level')">
-              <Tag :color="logLevelOptions[logModel.level]?.color">
+              <Tag :color="logLevelOptions[logModel!.level!]?.color">
-                {{ logLevelOptions[logModel.level]?.label }}
+                {{ logLevelOptions[logModel!.level!]?.label }}
               </Tag>
             </DescriptionsItem>
             <DescriptionsItem :label="$t('AbpAuditLogging.Message')" :span="2">
@@ -130,7 +131,11 @@ async function onGet(id: string) {
             </DescriptionsItem>
           </Descriptions>
         </TabPane>
-        <TabPane key="fields" :tab="$t('AbpAuditLogging.Fields')">
+        <TabPane
+          v-if="logModel.fields"
+          key="fields"
+          :tab="$t('AbpAuditLogging.Fields')"
+        >
           <Descriptions
             :colon="false"
             :column="1"
@@ -183,7 +188,7 @@ async function onGet(id: string) {
           </Descriptions>
         </TabPane>
         <TabPane
-          v-if="logModel.exceptions?.length > 0"
+          v-if="logModel.exceptions && logModel.exceptions.length > 0"
           key="exception"
           :tab="$t('AbpAuditLogging.Exceptions')"
         >

apps/vben5/packages/@abp/ui/package.json

@@ -27,6 +27,7 @@
     "@vben-core/shared": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vben/common-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
     "@vben/hooks": "workspace:*",
     "@vben/icons": "workspace:*",
     "@vben/locales": "workspace:*",

apps/vben5/packages/@abp/ui/src/about/about.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'vue';
+
+interface AboutProps {
+  customItems?: ExtraDescriptionItem[];
+  description?: string;
+  name?: string;
+  title?: string;
+}
+
+interface ExtraDescriptionItem {
+  items?: DescriptionItem[];
+  title: string;
+}
+
+interface DescriptionItem {
+  content: Component | string;
+  title: string;
+}
+
+export type { AboutProps, DescriptionItem };

apps/vben5/packages/@abp/ui/src/about/about.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import type { AboutProps, DescriptionItem } from './about';
+
+import { h } from 'vue';
+
+import {
+  VBEN_DOC_URL,
+  VBEN_GITHUB_URL,
+  VBEN_PREVIEW_URL,
+} from '@vben/constants';
+
+import { VbenRenderContent } from '@vben-core/shadcn-ui';
+
+interface Props extends AboutProps {}
+
+defineOptions({
+  name: 'AboutUI',
+});
+
+withDefaults(defineProps<Props>(), {
+  description:
+    '是一个现代化开箱即用的中后台解决方案，采用最新的技术栈，包括 Vue 3.0、Vite、TailwindCSS 和 TypeScript 等前沿技术，代码规范严谨，提供丰富的配置选项，旨在为中大型项目的开发提供现成的开箱即用解决方案及丰富的示例，同时，它也是学习和深入前端技术的一个极佳示例。',
+  name: 'Vben Admin',
+  title: '关于项目',
+});
+
+const renderLink = (href: string, text: string) =>
+  h(
+    'a',
+    { href, target: '_blank', class: 'vben-link' },
+    { default: () => text },
+  );
+
+const {
+  authorEmail,
+  authorName,
+  authorUrl,
+  buildTime,
+  dependencies = {},
+  devDependencies = {},
+  homepage,
+  license,
+  version,
+  // vite inject-metadata 插件注入的全局变量
+} = __VBEN_ADMIN_METADATA__ || {};
+
+const vbenDescriptionItems: DescriptionItem[] = [
+  {
+    content: version,
+    title: '版本号',
+  },
+  {
+    content: license,
+    title: '开源许可协议',
+  },
+  {
+    content: buildTime,
+    title: '最后构建时间',
+  },
+  {
+    content: renderLink(homepage, '点击查看'),
+    title: '主页',
+  },
+  {
+    content: renderLink(VBEN_DOC_URL, '点击查看'),
+    title: '文档地址',
+  },
+  {
+    content: renderLink(VBEN_PREVIEW_URL, '点击查看'),
+    title: '预览地址',
+  },
+  {
+    content: renderLink(VBEN_GITHUB_URL, '点击查看'),
+    title: 'Github',
+  },
+  {
+    content: h('div', [
+      renderLink(authorUrl, `${authorName}  `),
+      renderLink(`mailto:${authorEmail}`, authorEmail),
+    ]),
+    title: '作者',
+  },
+];
+
+const dependenciesItems = Object.keys(dependencies).map((key) => ({
+  content: dependencies[key],
+  title: key,
+}));
+
+const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
+  content: devDependencies[key],
+  title: key,
+}));
+</script>
+
+<template>
+  <Page :title="title">
+    <template #description>
+      <p class="text-foreground mt-3 text-sm leading-6">
+        <a :href="VBEN_GITHUB_URL" class="vben-link" target="_blank">
+          {{ name }}
+        </a>
+        {{ description }}
+      </p>
+    </template>
+    <div class="card-box p-5">
+      <div>
+        <h5 class="text-foreground text-lg">基本信息</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in vbenDescriptionItems" :key="item.title">
+            <div class="border-border border-t px-4 py-6 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm font-medium leading-6">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+
+    <template v-if="customItems">
+      <div
+        v-for="customItem in customItems"
+        :key="customItem.title"
+        class="card-box mt-6 p-5"
+      >
+        <div>
+          <h5 class="text-foreground text-lg">{{ customItem.title }}</h5>
+        </div>
+        <div class="mt-4">
+          <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            <template v-for="item in customItem.items" :key="item.title">
+              <div
+                class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0"
+              >
+                <dt class="text-foreground text-sm">
+                  {{ item.title }}
+                </dt>
+                <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                  <VbenRenderContent :content="item.content" />
+                </dd>
+              </div>
+            </template>
+          </dl>
+        </div>
+      </div>
+    </template>
+
+    <div class="card-box mt-6 p-5">
+      <div>
+        <h5 class="text-foreground text-lg">生产环境依赖</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in dependenciesItems" :key="item.title">
+            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+    <div class="card-box mt-6 p-5">
+      <div>
+        <h5 class="text-foreground text-lg">开发环境依赖</h5>
+      </div>
+      <div class="mt-4">
+        <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          <template v-for="item in devDependenciesItems" :key="item.title">
+            <div class="border-border border-t px-4 py-3 sm:col-span-1 sm:px-0">
+              <dt class="text-foreground text-sm">
+                {{ item.title }}
+              </dt>
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
+                <VbenRenderContent :content="item.content" />
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+  </Page>
+</template>

apps/vben5/packages/@abp/ui/src/about/index.ts

@@ -0,0 +1 @@
+export { default as AbpAbout } from './about.vue';

apps/vben5/packages/@abp/ui/src/index.ts

@@ -1,2 +1,3 @@
+export * from './about';
 export * from './adapter/vxe-table';
 export * from './components';