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 };