feat(projects): theme store完成

src/views/about/components/DevDependency.vue

@@ -0,0 +1,17 @@
+<template>
+  <n-card title="开发环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
+    <n-descriptions label-placement="left" bordered size="small">
+      <n-descriptions-item v-for="item in devDependencies" :key="item.name" :label="item.name">
+        {{ item.version }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { pkgJson } from '../model';
+
+const { devDependencies } = pkgJson;
+</script>
+<style scoped></style>

src/views/about/components/ProDependency.vue

@@ -0,0 +1,17 @@
+<template>
+  <n-card title="生产环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
+    <n-descriptions label-placement="left" bordered size="small">
+      <n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
+        {{ item.version }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NDescriptions, NDescriptionsItem } from 'naive-ui';
+import { pkgJson } from '../model';
+
+const { dependencies } = pkgJson;
+</script>
+<style scoped></style>

src/views/about/components/ProjectInfo.vue

@@ -0,0 +1,27 @@
+<template>
+  <n-card title="项目信息" :bordered="false" size="small" class="rounded-16px shadow-sm">
+    <n-descriptions label-placement="left" bordered size="small" :column="2">
+      <n-descriptions-item label="版本">
+        <n-tag type="primary">{{ version }}</n-tag>
+      </n-descriptions-item>
+      <n-descriptions-item label="最后编译时间">
+        <n-tag type="primary">{{ lastestBuildTime }}</n-tag>
+      </n-descriptions-item>
+      <n-descriptions-item label="Github地址">
+        <a class="text-primary" href="https://github.com/honghuangdc/soybean-admin" target="_blank">Github地址</a>
+      </n-descriptions-item>
+      <n-descriptions-item label="预览地址">
+        <a class="text-primary" href="https://soybean.pro" target="_blank">预览地址</a>
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NDescriptions, NDescriptionsItem, NTag } from 'naive-ui';
+import { pkgJson } from '../model';
+
+const { version } = pkgJson;
+const lastestBuildTime = PROJECT_BUILD_TIME;
+</script>
+<style scoped></style>

src/views/about/components/ProjectIntroduction.vue

@@ -0,0 +1,13 @@
+<template>
+  <n-card title="关于" :bordered="false" size="large" class="rounded-16px shadow-sm">
+    <p class="leading-24px">
+      Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript
+      的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你。
+    </p>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard } from 'naive-ui';
+</script>
+<style scoped></style>

src/views/about/components/index.ts

@@ -0,0 +1,6 @@
+import ProjectIntroduction from './ProjectIntroduction.vue';
+import ProjectInfo from './ProjectInfo.vue';
+import ProDependency from './ProDependency.vue';
+import DevDependency from './DevDependency.vue';
+
+export { ProjectIntroduction, ProjectInfo, ProDependency, DevDependency };

src/views/about/index.vue

@@ -1,9 +1,14 @@
 <template>
-  <div>
-    <h3>about</h3>
-    <router-link to="/">analysis</router-link>
-  </div>
+  <n-space :vertical="true" :size="16">
+    <project-introduction />
+    <project-info />
+    <pro-dependency />
+    <dev-dependency />
+  </n-space>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { NSpace } from 'naive-ui';
+import { ProjectIntroduction, ProjectInfo, ProDependency, DevDependency } from './components';
+</script>
 <style scoped></style>

src/views/about/model.ts

@@ -0,0 +1,43 @@
+import pkg from '~/package.json';
+
+/** npm依赖包版本信息 */
+export interface PkgVersionInfo {
+  name: string;
+  version: string;
+}
+
+interface Package {
+  name: string;
+  version: string;
+  dependencies: {
+    [key: string]: string;
+  };
+  devDependencies: {
+    [key: string]: string;
+  };
+  [key: string]: any;
+}
+
+interface PkgJson {
+  name: string;
+  version: string;
+  dependencies: PkgVersionInfo[];
+  devDependencies: PkgVersionInfo[];
+}
+
+const pkgWithType = pkg as Package;
+
+function transformVersionData(tuple: [string, string]): PkgVersionInfo {
+  const [name, version] = tuple;
+  return {
+    name,
+    version
+  };
+}
+
+export const pkgJson: PkgJson = {
+  name: pkgWithType.name,
+  version: pkgWithType.version,
+  dependencies: Object.entries(pkgWithType.dependencies).map(item => transformVersionData(item)),
+  devDependencies: Object.entries(pkgWithType.devDependencies).map(item => transformVersionData(item))
+};