mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
107 lines
3.0 KiB
Vue
107 lines
3.0 KiB
Vue
<script setup lang="ts">
|
||
import { useColumns } from "./columns";
|
||
export interface schemaItem {
|
||
field: string;
|
||
label: string;
|
||
}
|
||
|
||
defineOptions({
|
||
name: "About"
|
||
});
|
||
|
||
const { pkg } = __APP_INFO__;
|
||
const { dependencies, devDependencies } = pkg;
|
||
|
||
const schema: schemaItem[] = [];
|
||
const devSchema: schemaItem[] = [];
|
||
|
||
const { columns } = useColumns();
|
||
|
||
Object.keys(dependencies).forEach(key => {
|
||
schema.push({ field: dependencies[key], label: key });
|
||
});
|
||
|
||
Object.keys(devDependencies).forEach(key => {
|
||
devSchema.push({ field: devDependencies[key], label: key });
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<el-card class="mb-4 box-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium">关于</span>
|
||
</div>
|
||
</template>
|
||
<span style="font-size: 15px">
|
||
Pure-Admin 是一个基于Vue3、Vite、TypeScript、Element-Plus
|
||
的中后台解决方案，它可以帮助您快速搭建企业级中后台，提供现成的开箱解决方案及丰富的示例。原则上不收取任何费用及版权，可以放心使用，不过如需二次开源（比如用此平台二次开发并开源）请联系作者获取许可！
|
||
</span>
|
||
</el-card>
|
||
|
||
<el-card class="m-4 box-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium">项目信息</span>
|
||
</div>
|
||
</template>
|
||
<PureDescriptions :columns="columns" border :column="3" align="left" />
|
||
</el-card>
|
||
|
||
<el-card class="m-4 box-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium">生产环境依赖</span>
|
||
</div>
|
||
</template>
|
||
<el-descriptions border>
|
||
<el-descriptions-item
|
||
:label="item.label"
|
||
label-align="left"
|
||
align="left"
|
||
v-for="(item, index) in schema"
|
||
:key="index"
|
||
>
|
||
<a
|
||
:href="'https://www.npmjs.com/package/' + item.label"
|
||
target="_blank"
|
||
>
|
||
<span style="color: var(--el-color-primary)">{{ item.field }}</span>
|
||
</a>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
|
||
<el-card class="m-4 box-card" shadow="never">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span class="font-medium">开发环境依赖</span>
|
||
</div>
|
||
</template>
|
||
<el-descriptions border>
|
||
<el-descriptions-item
|
||
:label="item.label"
|
||
label-align="left"
|
||
align="left"
|
||
v-for="(item, index) in devSchema"
|
||
:key="index"
|
||
>
|
||
<a
|
||
:href="'https://www.npmjs.com/package/' + item.label"
|
||
target="_blank"
|
||
>
|
||
<span style="color: var(--el-color-primary)">{{ item.field }}</span>
|
||
</a>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.main-content {
|
||
margin: 0 !important;
|
||
}
|
||
</style>
|