feat: add about page

anncwb · anncwb · commit 199d5506acd6 · 2024-06-23T20:05:22.000+08:00
diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
@@ -35,9 +35,9 @@
     "@vben/icons": "workspace:*",
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
-    "@vben/universal-ui": "workspace:*",
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
+    "@vben/universal-ui": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vben/widgets": "workspace:*",
     "@vueuse/core": "^10.11.0",
diff --git a/apps/web-antd/src/views/_essential/vben/about/index.vue b/apps/web-antd/src/views/_essential/vben/about/index.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { Fallback } from '@vben/universal-ui';
+import { About } from '@vben/universal-ui';
 
-defineOptions({ name: 'Menu1' });
+defineOptions({ name: 'About' });
 </script>
 
 <template>
-  <Fallback status="hello" />
+  <About />
 </template>
diff --git a/cspell.json b/cspell.json
@@ -22,7 +22,6 @@
     "qrcode",
     "shadcn",
     "sonner",
-    "ui-kit",
     "unplugin",
     "vben",
     "vueuse",
@@ -35,7 +34,9 @@
     "nocheck",
     "prefixs",
     "vitepress",
-    "ependencies"
+    "ependencies",
+    "vite",
+    "echarts"
   ],
   "ignorePaths": ["**/node_modules/**", "**/dist/**", "**/iconify/**"]
 }
diff --git a/internal/node-utils/src/date.ts b/internal/node-utils/src/date.ts
@@ -5,6 +5,8 @@ import utc from 'dayjs/plugin/utc';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 
-const dateUtil = dayjs().tz('Asia/Shanghai');
+dayjs.tz.setDefault('Asia/Shanghai');
+
+const dateUtil = dayjs;
 
 export { dateUtil };
diff --git a/internal/node-utils/src/index.ts b/internal/node-utils/src/index.ts
@@ -9,6 +9,6 @@ export { prettierFormat } from './prettier';
 export type { Package } from '@manypkg/get-packages';
 export { consola } from 'consola';
 export { nanoid } from 'nanoid';
-export { readPackageJSON } from 'pkg-types';
+export { type PackageJson, readPackageJSON } from 'pkg-types';
 export { rimraf } from 'rimraf';
 export { $, chalk as colors, fs, spinner } from 'zx';
diff --git a/internal/tsconfig/web.json b/internal/tsconfig/web.json
@@ -8,7 +8,7 @@
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "useDefineForClassFields": true,
     "moduleResolution": "bundler",
-    "types": ["vite/client"],
+    "types": ["vite/client", "@vben/types/window"],
     "declaration": false
   }
 }
diff --git a/internal/vite-config/src/config/application.ts b/internal/vite-config/src/config/application.ts
@@ -24,6 +24,7 @@ function defineApplicationConfig(options: DefineApplicationOptions = {}) {
       html: true,
       i18n: true,
       injectAppLoading: true,
+      injectMetadata: true,
       isBuild,
       license: true,
       mock: true,
diff --git a/internal/vite-config/src/config/library.ts b/internal/vite-config/src/config/library.ts
@@ -19,6 +19,7 @@ function defineLibraryConfig(options: DefineLibraryOptions = {}) {
     const plugins = await getLibraryConditionPlugins({
       dts: false,
       injectLibCss: true,
+      injectMetadata: true,
       isBuild,
       mode,
       ...(typeof library === 'function' ? library(config) : library),
diff --git a/internal/vite-config/src/plugins/index.ts b/internal/vite-config/src/plugins/index.ts
@@ -27,6 +27,7 @@ import viteVueDevTools from 'vite-plugin-vue-devtools';
 import { viteExtraAppConfigPlugin } from './extra-app-config';
 import { viteImportMapPlugin } from './importmap';
 import { viteInjectAppLoadingPlugin } from './inject-app-loading';
+import { viteMetadataPlugin } from './inject-metadata';
 import { viteLicensePlugin } from './license';
 
 /**
@@ -52,7 +53,7 @@ async function getConditionEstablishedPlugins(
 async function getCommonConditionPlugins(
   options: CommonPluginOptions,
 ): Promise<ConditionPlugin[]> {
-  const { devtools, isBuild, visualizer } = options;
+  const { devtools, injectMetadata, isBuild, visualizer } = options;
   return [
     {
       condition: true,
@@ -66,10 +67,15 @@ async function getCommonConditionPlugins(
         viteVueJsx(),
       ],
     },
+
     {
       condition: !isBuild && devtools,
       plugins: () => [viteVueDevTools()],
     },
+    {
+      condition: injectMetadata,
+      plugins: async () => [await viteMetadataPlugin()],
+    },
     {
       condition: isBuild && !!visualizer,
       plugins: () => [<PluginOption>viteVisualizerPlugin({
diff --git a/internal/vite-config/src/plugins/inject-metadata.ts b/internal/vite-config/src/plugins/inject-metadata.ts
@@ -0,0 +1,87 @@
+import type { PluginOption } from 'vite';
+
+import { dateUtil, getPackages, readPackageJSON } from '@vben/node-utils';
+
+function resolvePackageVersion(
+  pkgsMeta: Record<string, string>,
+  name: string,
+  value: string,
+) {
+  if (value.includes('workspace')) {
+    return pkgsMeta[name];
+  }
+  return value;
+}
+
+async function resolveMonorepoDependencies() {
+  const { packages } = await getPackages();
+  const resultDevDependencies: Record<string, string> = {};
+  const resultDependencies: Record<string, string> = {};
+  const pkgsMeta: Record<string, string> = {};
+
+  for (const { packageJson } of packages) {
+    pkgsMeta[packageJson.name] = packageJson.version;
+  }
+
+  for (const { packageJson } of packages) {
+    const { dependencies = {}, devDependencies = {} } = packageJson;
+    for (const [key, value] of Object.entries(dependencies)) {
+      resultDependencies[key] = resolvePackageVersion(pkgsMeta, key, value);
+    }
+    for (const [key, value] of Object.entries(devDependencies)) {
+      resultDevDependencies[key] = resolvePackageVersion(pkgsMeta, key, value);
+    }
+  }
+  return {
+    dependencies: resultDependencies,
+    devDependencies: resultDevDependencies,
+  };
+}
+
+/**
+ * 用于注入项目信息
+ */
+async function viteMetadataPlugin(
+  root = process.cwd(),
+): Promise<PluginOption | undefined> {
+  const { author, description, homepage, license, repository, version } =
+    await readPackageJSON(root);
+
+  const buildTime = dateUtil().format('YYYY-MM-DD HH:mm:ss');
+
+  return {
+    async config() {
+      const { dependencies, devDependencies } =
+        await resolveMonorepoDependencies();
+      const repositoryUrl =
+        typeof repository === 'object' ? repository.url : repository;
+
+      const isAuthorObject = typeof author === 'object';
+      const authorName = isAuthorObject ? author.name : author;
+      const authorEmail = isAuthorObject ? author.email : null;
+      const authorUrl = isAuthorObject ? author.url : null;
+
+      return {
+        define: {
+          __VBEN_ADMIN_METADATA__: JSON.stringify({
+            authorEmail,
+            authorName,
+            authorUrl,
+            buildTime,
+            dependencies,
+            description,
+            devDependencies,
+            homepage,
+            license,
+            repositoryUrl,
+            version,
+          }),
+        },
+      };
+    },
+    enforce: 'post',
+    name: 'vite:inject-metadata',
+  };
+}
+
+export { viteMetadataPlugin };
diff --git a/internal/vite-config/src/plugins/license.ts b/internal/vite-config/src/plugins/license.ts
@@ -10,7 +10,7 @@ import { EOL } from 'node:os';
 import { dateUtil, readPackageJSON } from '@vben/node-utils';
 
 /**
- * 用于将配置文件抽离出来并注入到项目中
+ * 用于注入版权信息
  * @returns
  */
 
@@ -28,8 +28,7 @@ async function viteLicensePlugin(
     enforce: 'post',
     generateBundle: {
       handler: (_options: NormalizedOutputOptions, bundle: OutputBundle) => {
-        const date = dateUtil.format('YYYY-MM-DD ');
-
+        const date = dateUtil().format('YYYY-MM-DD ');
         const copyrightText = `/*!
   * Vben Admin Pro
   * Version: ${version}
diff --git a/internal/vite-config/src/typing.ts b/internal/vite-config/src/typing.ts
@@ -42,6 +42,8 @@ interface CommonPluginOptions {
   devtools?: boolean;
   /** 环境变量 */
   env?: Record<string, any>;
+  /** 是否开启注入metadata */
+  injectMetadata: boolean;
   /** 是否构建模式 */
   isBuild?: boolean;
   /** 构建模式 */
diff --git a/packages/@core/shared/design-tokens/src/dark/index.css b/packages/@core/shared/design-tokens/src/dark/index.css
@@ -6,7 +6,9 @@
   --foreground: 220 13% 91%;
 
   /* Background color for <Card /> */
-  --card: 222.2 84% 4.9%;
+  --card: 222.86deg 8.43% 16.27%;
+
+  /* --card: 222.2 84% 4.9%; */
   --card-foreground: 210 40% 98%;
 
   /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
diff --git a/packages/@core/shared/design/src/scss/common/base.scss b/packages/@core/shared/design/src/scss/common/base.scss
@@ -46,7 +46,7 @@ a:active,
 a:hover,
 a:link,
 a:visited {
-  color: inherit;
+  // color: inherit;
   text-decoration: none;
 }
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
@@ -13,10 +13,12 @@ export * from './hover-card';
 export * from './icon';
 export * from './input';
 export * from './input-password';
+export * from './link';
 export * from './logo';
 export * from './menu-badge';
 export * from './pin-input';
 export * from './popover';
+export * from './render-content';
 export * from './scrollbar';
 export * from './segmented';
 export * from './sheet';
@@ -27,6 +29,7 @@ export * from './ui/avatar';
 export * from './ui/badge';
 export * from './ui/breadcrumb';
 export * from './ui/button';
+export * from './ui/card';
 export * from './ui/checkbox';
 export * from './ui/dialog';
 export * from './ui/dropdown-menu';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/link/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/link/index.ts
@@ -0,0 +1 @@
+export { default as VbenLink } from './link.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue b/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@vben-core/toolkit';
+
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+
+interface Props extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  href: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'a',
+  class: '',
+  href: '',
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('text-primary hover:text-primary-hover', props.class)"
+    :href="href"
+    target="_blank"
+  >
+    <slot></slot>
+  </Primitive>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/render-content/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/render-content/index.ts
@@ -0,0 +1 @@
+export { default as VbenRenderContent } from './render-content.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue b/packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+defineOptions({
+  name: 'RenderContent',
+});
+
+const props = withDefaults(
+  defineProps<{ content: Component | string; props?: Record<string, any> }>(),
+  {
+    props: () => ({}),
+  },
+);
+
+const isComponent = typeof props.content === 'object' && props.content !== null;
+</script>
+
+<template>
+  <component :is="content" v-bind="props" v-if="isComponent" />
+  <template v-else-if="!isComponent">
+    {{ content }}
+  </template>
+</template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -61,7 +61,7 @@ function onTransitionEnd() {
     :class="{
       'invisible opacity-0': !showSpinner,
     }"
-    class="flex-center bg-overlay absolute left-0 top-0 size-full backdrop-blur-sm transition-all duration-500"
+    class="flex-center bg-overlay z-100 absolute left-0 top-0 size-full backdrop-blur-sm transition-all duration-500"
     @transitionend="onTransitionEnd"
   >
     <div
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/Card.vue
@@ -11,7 +11,10 @@ const props = defineProps<{
 <template>
   <div
     :class="
-      cn('bg-card text-card-foreground rounded-xl border shadow', props.class)
+      cn(
+        'bg-card text-card-foreground border-border rounded-xl border shadow',
+        props.class,
+      )
     "
   >
     <slot></slot>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardHeader.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/card/CardHeader.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+  <div :class="cn('flex flex-col gap-y-1.5 p-5', props.class)">
     <slot></slot>
   </div>
 </template>
diff --git a/packages/business/universal-ui/src/about/about.ts b/packages/business/universal-ui/src/about/about.ts
@@ -0,0 +1,14 @@
+import type { Component } from 'vue';
+
+interface AboutProps {
+  description?: string;
+  name?: string;
+  title?: string;
+}
+
+interface DescriptionItem {
+  content: Component | string;
+  title: string;
+}
+
+export type { AboutProps, DescriptionItem };
diff --git a/packages/business/universal-ui/src/about/about.vue b/packages/business/universal-ui/src/about/about.vue
diff --git a/packages/business/universal-ui/src/about/index.ts b/packages/business/universal-ui/src/about/index.ts
diff --git a/packages/business/universal-ui/src/index.ts b/packages/business/universal-ui/src/index.ts
diff --git a/packages/types/package.json b/packages/types/package.json
diff --git a/packages/types/window.d.ts b/packages/types/window.d.ts

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`"lib": ["ESNext", "DOM", "DOM.Iterable"],`
`9`	`9`	`"useDefineForClassFields": true,`
`10`	`10`	`"moduleResolution": "bundler",`
`11`		`- "types": ["vite/client"],`
	`11`	`+ "types": ["vite/client", "@vben/types/window"],`
`12`	`12`	`"declaration": false`
`13`	`13`	`}`
`14`	`14`	`}`