mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-06 08:27:54 +08:00
chore: 优化演示代码
This commit is contained in:
xiaoxian521
parent
81552e0261
commit
9d965a7c63
@ -83,7 +83,7 @@
|
||||
"responsive-storage": "^2.2.0",
|
||||
"sortablejs": "^1.15.1",
|
||||
"swiper": "^11.0.5",
|
||||
"typeit": "^8.8.0",
|
||||
"typeit": "8.7.1",
|
||||
"v-contextmenu": "3.0.0",
|
||||
"v3-infinite-loading": "^1.3.1",
|
||||
"version-rocket": "^1.7.1",
|
||||
|
||||
14
pnpm-lock.yaml
generated
14
pnpm-lock.yaml
generated
@ -111,8 +111,8 @@ dependencies:
|
||||
specifier: ^11.0.5
|
||||
version: 11.0.5
|
||||
typeit:
|
||||
specifier: ^8.8.0
|
||||
version: 8.8.0
|
||||
specifier: 8.7.1
|
||||
version: 8.7.1
|
||||
v-contextmenu:
|
||||
specifier: 3.0.0
|
||||
version: 3.0.0(vue@3.4.7)
|
||||
@ -2067,10 +2067,6 @@ packages:
|
||||
resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
|
||||
dev: false
|
||||
|
||||
/@types/web-animations-js@2.2.16:
|
||||
resolution: {integrity: sha512-ATELeWMFwj8eQiH0KmvsCl1V2lu/qx/CjOBmv4ADSZS5u8r4reMyjCXtxG7khqyiwH3IOMNdrON/Ugn94OUcRA==}
|
||||
dev: false
|
||||
|
||||
/@types/web-bluetooth@0.0.14:
|
||||
resolution: {integrity: sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==}
|
||||
dev: false
|
||||
@ -8469,11 +8465,9 @@ packages:
|
||||
is-typedarray: 1.0.0
|
||||
dev: false
|
||||
|
||||
/typeit@8.8.0:
|
||||
resolution: {integrity: sha512-GQp6OW7vxro1HN3F7UPL0C2KzkGs8bFtUgmJSeK+xNhdofI40mkWxrBT2AXQwtS5Txkg7ttwplxvWCQxnUXyrw==}
|
||||
/typeit@8.7.1:
|
||||
resolution: {integrity: sha512-Bx/O4NMz10NWh9FWYtVwV4XwGHF9UDJfpCZPJRtw2/oUcahFAStU8J0t19aroPfTV6s1UlS5ICoqilOqmEnh2Q==}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@types/web-animations-js': 2.2.16
|
||||
dev: false
|
||||
|
||||
/typescript@5.3.3:
|
||||
|
||||
@ -72,6 +72,7 @@ function onMouseleave() {
|
||||
|
||||
<template>
|
||||
<el-select
|
||||
class="!w-[200px]"
|
||||
:model-value="inputValue"
|
||||
placeholder="请选择动画"
|
||||
clearable
|
||||
|
||||
@ -121,7 +121,7 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="selector w-[350px]">
|
||||
<div class="selector w-[220px]">
|
||||
<el-input v-model="inputValue" disabled>
|
||||
<template #append>
|
||||
<el-popover
|
||||
|
||||
@ -81,10 +81,10 @@ const tableData: User[] = [
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="font-medium">打印功能（报表、图表、图片）</span>
|
||||
<div>
|
||||
<div class="flex">
|
||||
<el-select
|
||||
v-model="value"
|
||||
class="m-2"
|
||||
class="!w-[100px] mr-2"
|
||||
placeholder="Select"
|
||||
size="small"
|
||||
>
|
||||
@ -121,7 +121,7 @@ const tableData: User[] = [
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Table</p>
|
||||
<p class="font-medium text-lg text-center">Table</p>
|
||||
<el-table
|
||||
border
|
||||
:data="tableData"
|
||||
@ -135,8 +135,6 @@ const tableData: User[] = [
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-col
|
||||
v-motion
|
||||
:xs="11"
|
||||
@ -156,7 +154,7 @@ const tableData: User[] = [
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Echart</p>
|
||||
<p class="font-medium text-lg text-center">Echart</p>
|
||||
<pieChart class="echart mt-[10px]" />
|
||||
</el-col>
|
||||
|
||||
@ -179,11 +177,11 @@ const tableData: User[] = [
|
||||
}
|
||||
}"
|
||||
>
|
||||
<p class="font-medium pt-1">Image</p>
|
||||
<p class="font-medium text-lg text-center">Image</p>
|
||||
<img
|
||||
src="https://avatars.githubusercontent.com/u/44761321?v=4"
|
||||
src="https://pure-admin-utils.netlify.app/logo.png"
|
||||
alt="avatars"
|
||||
class="img mt-[10px] w-[250px] h-[250px] m-auto"
|
||||
class="img mt-[10px] m-auto"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
@ -24,7 +24,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
delay: 80
|
||||
}
|
||||
}"
|
||||
>
|
||||
@ -41,7 +41,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
delay: 120
|
||||
}
|
||||
}"
|
||||
>
|
||||
@ -58,7 +58,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
delay: 160
|
||||
}
|
||||
}"
|
||||
@click="router.push('/')"
|
||||
|
||||
@ -24,7 +24,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
delay: 80
|
||||
}
|
||||
}"
|
||||
>
|
||||
@ -41,7 +41,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
delay: 120
|
||||
}
|
||||
}"
|
||||
>
|
||||
@ -58,7 +58,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
delay: 160
|
||||
}
|
||||
}"
|
||||
@click="router.push('/')"
|
||||
|
||||
@ -24,7 +24,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 100
|
||||
delay: 80
|
||||
}
|
||||
}"
|
||||
>
|
||||
@ -41,7 +41,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 300
|
||||
delay: 120
|
||||
}
|
||||
}"
|
||||
>
|
||||
@ -58,7 +58,7 @@ const router = useRouter();
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 500
|
||||
delay: 160
|
||||
}
|
||||
}"
|
||||
@click="router.push('/')"
|
||||
|
||||
@ -53,7 +53,7 @@ function onChange() {
|
||||
<span>当前角色：{{ username }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-select v-model="username" @change="onChange">
|
||||
<el-select v-model="username" class="!w-[160px]" @change="onChange">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
|
||||
@ -33,7 +33,7 @@ function tabClick({ index }) {
|
||||
|
||||
<el-alert
|
||||
title="高级用法中所有表格都设置了 row-key ，后端需返回唯一值的字段，比如id 作用：1. 用来优化 Table
|
||||
的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置哦，坑都帮您们踩过啦 ❤️）"
|
||||
的渲染，尤其当字段在深层结构中；2. 防止拖拽后表格组件内部混乱（拖拽必须设置）"
|
||||
type="info"
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
@ -71,7 +71,7 @@ export const list = [
|
||||
{
|
||||
key: "watermark",
|
||||
content: rendContent("watermark"),
|
||||
title: "水印（无法删除的水印哦🤓️）",
|
||||
title: "水印",
|
||||
component: Watermark
|
||||
},
|
||||
{
|
||||
|
||||
@ -20,7 +20,7 @@ const {
|
||||
<el-select
|
||||
ref="selectRef"
|
||||
v-model="selectValue"
|
||||
class="w-[160px]"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
multiple
|
||||
|
||||
@ -17,6 +17,7 @@ const {
|
||||
<el-select
|
||||
ref="selectRef"
|
||||
v-model="selectValue"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
>
|
||||
|
||||
@ -34,8 +34,8 @@ export function useColumns(waterRef: Ref) {
|
||||
font: "16px Microsoft YaHei",
|
||||
globalAlpha: 0.8,
|
||||
forever: true,
|
||||
width: 252,
|
||||
height: 80
|
||||
width: 240,
|
||||
height: 90
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -20,13 +20,13 @@ function tabClick({ index }) {
|
||||
<span class="font-medium">
|
||||
平台二次封装 element-plus 的 Table ，完全兼容 Api
|
||||
并提供灵活的配置项以及完善的类型提醒，再也不用将代码都写在 template
|
||||
里了，欢迎 Star
|
||||
里了
|
||||
<el-link
|
||||
href="https://github.com/pure-admin/pure-admin-table"
|
||||
target="_blank"
|
||||
style="margin: 0 4px 5px; font-size: 16px"
|
||||
>
|
||||
@pureadmin/table
|
||||
@pureadmin/table 源码
|
||||
</el-link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@ -6,56 +6,51 @@ export function useColumns() {
|
||||
{
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<span class="flex items-center -mt-6">
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
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)"
|
||||
>
|
||||
立即解冻
|
||||
<div class="w-full">
|
||||
<div class="flex items-center">
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
icon={CloseCircleLine}
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
cellRenderer: () => {
|
||||
return (
|
||||
<span class="flex items-center -mt-8">
|
||||
<iconify-icon-offline
|
||||
icon={CloseCircleLine}
|
||||
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)"
|
||||
>
|
||||
立即升级
|
||||
<span class="ml-1 mr-4">您的账户已被冻结</span>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="flex items-center"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即解冻
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex items-center">
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
icon={CloseCircleLine}
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
<span class="ml-1 mr-4">您的账户还不具备申请资格</span>
|
||||
<a
|
||||
href="javascript:void(0);"
|
||||
class="flex items-center"
|
||||
style="color: var(--el-color-primary)"
|
||||
>
|
||||
立即升级
|
||||
<iconify-icon-offline
|
||||
icon={ArrowRightSLine}
|
||||
color="var(--el-color-primary)"
|
||||
width="18px"
|
||||
height="18px"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ const { columns } = useColumns();
|
||||
<PureDescriptions
|
||||
:columns="columns"
|
||||
title="您提交的内容有如下错误："
|
||||
class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]"
|
||||
class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]"
|
||||
/>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@ -41,7 +41,7 @@ const columns = [
|
||||
</div>
|
||||
</template>
|
||||
</el-result>
|
||||
<div class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]">
|
||||
<div class="p-6 w-[90%] m-auto bg-[#fafafa] dark:bg-[#1d1d1d]">
|
||||
<PureDescriptions title="项目名称" :columns="columns" class="mb-5" />
|
||||
<el-steps :active="2">
|
||||
<el-step title="创建项目">
|
||||
|
||||
@ -41,7 +41,7 @@ const {
|
||||
v-model="form.name"
|
||||
placeholder="请输入部门名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
|
||||
@ -49,7 +49,7 @@ const {
|
||||
v-model="form.name"
|
||||
placeholder="请输入角色名称"
|
||||
clearable
|
||||
class="!w-[200px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色标识：" prop="code">
|
||||
|
||||
@ -70,7 +70,7 @@ const {
|
||||
v-model="form.username"
|
||||
placeholder="请输入用户名称"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码：" prop="phone">
|
||||
@ -78,7 +78,7 @@ const {
|
||||
v-model="form.phone"
|
||||
placeholder="请输入手机号码"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
class="!w-[180px]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态：" prop="status">
|
||||
@ -86,7 +86,7 @@ const {
|
||||
v-model="form.status"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
class="!w-[160px]"
|
||||
class="!w-[180px]"
|
||||
>
|
||||
<el-option label="已开启" value="1" />
|
||||
<el-option label="已关闭" value="0" />
|
||||
|
||||
@ -86,7 +86,7 @@ function onCloseTags() {
|
||||
<el-divider />
|
||||
<el-tree-select
|
||||
v-model="currentValues"
|
||||
class="w-[300px]"
|
||||
class="!w-[300px]"
|
||||
node-key="uniqueId"
|
||||
placeholder="请选择要关闭的标签"
|
||||
clearable
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user