chore: update @pureadmin/descriptions

This commit is contained in:
xiaoxian521 2022-06-24 14:12:56 +08:00
parent 1b2eb2481e
commit 91576bd7dd
8 changed files with 276 additions and 178 deletions

View File

@ -31,7 +31,7 @@
"@logicflow/core": "^1.1.16",
"@logicflow/extension": "^1.1.16",
"@pureadmin/components": "^1.0.6",
"@pureadmin/descriptions": "^1.0.0",
"@pureadmin/descriptions": "^1.1.0",
"@pureadmin/table": "^0.0.1",
"@vueuse/core": "^8.7.4",
"@vueuse/motion": "^2.0.0-beta.12",

8
pnpm-lock.yaml generated
View File

@ -19,7 +19,7 @@ specifiers:
"@logicflow/core": ^1.1.16
"@logicflow/extension": ^1.1.16
"@pureadmin/components": ^1.0.6
"@pureadmin/descriptions": ^1.0.0
"@pureadmin/descriptions": ^1.1.0
"@pureadmin/table": ^0.0.1
"@pureadmin/theme": ^2.4.0
"@types/element-resize-detector": 1.1.3
@ -124,7 +124,7 @@ dependencies:
"@logicflow/core": 1.1.16
"@logicflow/extension": 1.1.16
"@pureadmin/components": 1.0.6_vue@3.2.37
"@pureadmin/descriptions": 1.0.0
"@pureadmin/descriptions": 1.1.0
"@pureadmin/table": 0.0.1
"@vueuse/core": 8.7.4_vue@3.2.37
"@vueuse/motion": 2.0.0-beta.12_vue@3.2.37
@ -1353,10 +1353,10 @@ packages:
vue: 3.2.37
dev: false
/@pureadmin/descriptions/1.0.0:
/@pureadmin/descriptions/1.1.0:
resolution:
{
integrity: sha512-fr+YLrxlmwiXTAVIKPqJbWQsRt3rqeUUz17d1BuH2Fzz8iSCd+hI4BoE1Z/bivzzoXVBC9wxBmWBSlN0n1YFAw==
integrity: sha512-Bi6lasPjc8P61kMcCXZjCd9ne99rj+whwUJ1ulKQX7JFupBhjo71Vu0TV5I7oEN52lZuvV1+F0EhJlEoIHpGFQ==
}
dependencies:
"@element-plus/icons-vue": 2.0.6_vue@3.2.37

View File

@ -0,0 +1,67 @@
export function useColumns() {
const { pkg, lastBuildTime } = __APP_INFO__;
const { version } = pkg;
const columns = [
{
label: "版本",
cellRenderer: () => {
return <el-tag size="small">{version}</el-tag>;
}
},
{
label: "最后编译时间",
cellRenderer: () => {
return <el-tag size="small">{lastBuildTime}</el-tag>;
}
},
{
label: "文档地址",
cellRenderer: () => {
return (
<a href="https://pure-admin-doc.vercel.app" target="_blank">
<span style="color: var(--el-color-primary)"></span>
</a>
);
}
},
{
label: "预览地址",
cellRenderer: () => {
return (
<a href="https://vue-pure-admin.vercel.app" target="_blank">
<span style="color: var(--el-color-primary)"></span>
</a>
);
}
},
{
label: "Github",
cellRenderer: () => {
return (
<a
href="https://github.com/xiaoxian521/vue-pure-admin"
target="_blank"
>
<span style="color: var(--el-color-primary)">Github</span>
</a>
);
}
},
{
label: "QQ交流群",
cellRenderer: () => {
return (
<a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
<span style="color: var(--el-color-primary)">
Pure Admin
</span>
</a>
);
}
}
];
return {
columns
};
}

View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { useColumns } from "./columns";
export interface schemaItem {
field: string;
label: string;
@ -8,12 +9,14 @@ defineOptions({
name: "About"
});
const { pkg, lastBuildTime } = __APP_INFO__;
const { dependencies, devDependencies, version } = pkg;
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 });
});
@ -43,43 +46,7 @@ Object.keys(devDependencies).forEach(key => {
<span class="font-medium">项目信息</span>
</div>
</template>
<el-descriptions :column="2" border>
<el-descriptions-item label="版本" label-align="left" align="left">
<el-tag>{{ version }}</el-tag>
</el-descriptions-item>
<el-descriptions-item
label="最后编译时间"
label-align="left"
align="left"
>
<el-tag>{{ lastBuildTime }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="文档地址" label-align="left" align="left">
<a href="https://pure-admin-doc.vercel.app" target="_blank">
<span style="color: var(--el-color-primary)">文档地址</span>
</a>
</el-descriptions-item>
<el-descriptions-item label="预览地址" label-align="left" align="left">
<a href="https://vue-pure-admin.vercel.app" target="_blank">
<span style="color: var(--el-color-primary)">预览地址</span>
</a>
</el-descriptions-item>
<el-descriptions-item label="Github" label-align="left" align="left">
<a
href="https://github.com/xiaoxian521/vue-pure-admin"
target="_blank"
>
<span style="color: var(--el-color-primary)">Github</span>
</a>
</el-descriptions-item>
<el-descriptions-item label="QQ交流群" label-align="left" align="left">
<a href="https://jq.qq.com/?_wv=1027&k=HntMx0dt" target="_blank">
<span style="color: var(--el-color-primary)">
点击链接加入群聊Pure Admin
</span>
</a>
</el-descriptions-item>
</el-descriptions>
<PureDescriptions :columns="columns" border :column="3" align="left" />
</el-card>
<el-card class="box-card m-4" shadow="hover">

View File

@ -0,0 +1,66 @@
import { IconifyIconOffline } from "/@/components/ReIcon";
export function useColumns() {
const columns = [
{
cellRenderer: () => {
return (
<span class="flex items-center -mt-6">
<IconifyIconOffline
icon="close-circle-line"
color="#F56C6C"
width="18px"
height="18px"
/>
<span class="ml-1 mr-4"></span>
<a
href="javascript:void(0);"
class="flex items-center"
style="color: var(--el-color-primary)"
>
<IconifyIconOffline
icon="arrow-right-s-line"
color="var(--el-color-primary)"
width="18px"
height="18px"
/>
</a>
</span>
);
}
},
{
cellRenderer: () => {
return (
<span class="flex items-center -mt-8">
<IconifyIconOffline
icon="close-circle-line"
color="#F56C6C"
width="18px"
height="18px"
/>
<span class="ml-1 mr-4"></span>
<a
href="javascript:void(0);"
class="flex items-center"
style="color: var(--el-color-primary)"
>
<IconifyIconOffline
icon="arrow-right-s-line"
color="var(--el-color-primary)"
width="18px"
height="18px"
/>
</a>
</span>
);
}
}
];
return {
columns
};
}

View File

@ -1,7 +1,10 @@
<script setup lang="ts">
import { useColumns } from "./columns";
defineOptions({
name: "Fail"
});
const { columns } = useColumns();
</script>
<template>
@ -20,61 +23,12 @@ defineOptions({
<el-button type="primary">返回修改</el-button>
</template>
</el-result>
<el-descriptions
:column="1"
<PureDescriptions
:columns="columns"
title="您提交的内容有如下错误:"
style="background: rgb(250, 250, 250)"
class="p-6 ml-10 mr-10"
>
<el-descriptions-item>
<span class="flex items-center -mt-6">
<IconifyIconOffline
icon="close-circle-line"
color="#F56C6C"
width="18px"
height="18px"
/>
<span class="ml-1 mr-4">您的账户已被冻结</span>
<a
href="javascript:void(0);"
class="flex items-center"
style="color: var(--el-color-primary)"
>
立即解冻
<IconifyIconOffline
icon="arrow-right-s-line"
color="var(--el-color-primary)"
width="18px"
height="18px"
/>
</a>
</span>
</el-descriptions-item>
<el-descriptions-item>
<span class="flex items-center -mt-8">
<IconifyIconOffline
icon="close-circle-line"
color="#F56C6C"
width="18px"
height="18px"
/>
<span class="ml-1 mr-4">您的账户还不具备申请资格</span>
<a
href="javascript:void(0);"
class="flex items-center"
style="color: var(--el-color-primary)"
>
立即升级
<IconifyIconOffline
icon="arrow-right-s-line"
color="var(--el-color-primary)"
width="18px"
height="18px"
/>
</a>
</span>
</el-descriptions-item>
</el-descriptions>
</el-card>
</template>

View File

@ -1,87 +1,31 @@
<script setup lang="ts">
import { ref } from "vue";
const lists = ref([
{ type: "", label: "善良" },
{ type: "success", label: "好学" },
{ type: "info", label: "幽默" },
{ type: "danger", label: "旅游" },
{ type: "warning", label: "追剧" }
]);
import { useColumns } from "./columns";
const { columnsA, columnsB, columnsC } = useColumns();
const list = [
{
columns: columnsA,
column: 3
},
{
columns: columnsB,
column: 2
},
{
columns: columnsC,
column: 1
}
];
</script>
<template>
<el-descriptions class="margin-top" direction="vertical" :column="3" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="user" />
</el-icon>
用户名
</template>
xiaoxian
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="iphone" />
</el-icon>
手机号
</template>
123456789
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="location" />
</el-icon>
居住地
</template>
上海
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" direction="vertical" :column="2" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="tickets" />
</el-icon>
标签
</template>
<el-tag
v-for="item in lists"
:key="item.label"
:type="item.type"
size="small"
effect="dark"
>
{{ item.label }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="office-building" />
</el-icon>
联系地址
</template>
上海市徐汇区
</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" direction="vertical" :column="1" border>
<el-descriptions-item>
<template #label>
<el-icon>
<IconifyIconOffline icon="notebook" />
</el-icon>
留言
</template>
好好学习天天向上
</el-descriptions-item>
</el-descriptions>
<PureDescriptions
v-for="(item, index) in list"
:key="index"
:columns="item.columns"
:column="item.column"
class="margin-top"
direction="vertical"
border
/>
</template>
<style scoped>
.el-tag {
margin-right: 10px !important;
}
</style>

View File

@ -0,0 +1,100 @@
import { IconifyIconOffline } from "/@/components/ReIcon";
export function useColumns() {
const lists = [
{ type: "", label: "善良" },
{ type: "success", label: "好学" },
{ type: "info", label: "幽默" },
{ type: "danger", label: "旅游" },
{ type: "warning", label: "追剧" }
];
const columnsA = [
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="user" />
</el-icon>
</div>
),
value: "xiaoxian"
},
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="iphone" />
</el-icon>
</div>
),
value: "123456789"
},
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="location" />
</el-icon>
</div>
),
value: "上海"
}
];
const columnsB = [
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="tickets" />
</el-icon>
</div>
),
cellRenderer: () => {
return lists.map(v => {
return (
<el-tag class="mr-10px" type={v.type} size="small" effect="dark">
{v.label}
</el-tag>
);
});
}
},
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="office-building" />
</el-icon>
</div>
),
value: "上海市徐汇区"
}
];
const columnsC = [
{
labelRenderer: () => (
<div class="flex items-center">
<el-icon>
<IconifyIconOffline icon="notebook" />
</el-icon>
</div>
),
value: "上海市徐汇区"
}
];
return {
columnsA,
columnsB,
columnsC
};
}