twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: Review所有演示页，修复开发环境下可避免的警告以及保持所有演示页风格大致统一

Browse Source
This commit is contained in:
xiaoxian521 2024-01-14 12:22:05 +08:00
parent 3873699370
commit c48291130c
14 changed files with 74 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/navbar.vue
View File

@ -46,7 +46,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<div v-if="layout === 'vertical'" class="vertical-header-right">
<!-- 菜单搜索 -->
<Search />
<Search id="header-search" />
<!-- 通知 -->
<Notice id="header-notice" />
<!-- 国际化 -->

2
src/layout/components/search/index.vue
View File

@ -9,6 +9,7 @@ function handleSearch() {
</script>
<template>
<div>
<div
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
@click="handleSearch"
@ -16,4 +17,5 @@ function handleSearch() {
<IconifyIconOffline icon="search" />
</div>
<SearchModal v-model:value="show" />
</div>
</template>

2
src/layout/components/sidebar/horizontal.vue
View File

@ -64,7 +64,7 @@ nextTick(() => {
</el-menu>
<div class="horizontal-header-right">
<!-- 菜单搜索 -->
<Search />
<Search id="header-search" />
<!-- 通知 -->
<Notice id="header-notice" />
<!-- 国际化 -->

2
src/layout/components/sidebar/mixNav.vue
View File

@ -97,7 +97,7 @@ watch(
</el-menu>
<div class="horizontal-header-right">
<!-- 菜单搜索 -->
<Search />
<Search id="header-search" />
<!-- 通知 -->
<Notice id="header-notice" />
<!-- 国际化 -->

6
src/router/enums.ts
View File

@ -13,10 +13,10 @@ const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以
system = 10,
tabs = 11,
about = 12,
formdesign = 13,
editor = 13,
flowchart = 14,
ppt = 15,
editor = 16,
formdesign = 15,
ppt = 16,
guide = 17,
menuoverflow = 18;

32
src/views/able/watermark.vue
View File

@ -36,7 +36,7 @@ onBeforeUnmount(() => {
<template #header>
<div class="card-header">
<span class="font-medium">
页面水印菜单树结构
页面水印
<el-link
href="https://pure-admin-utils.netlify.app/hooks/useWatermark/useWatermark"
target="_blank"
@ -55,12 +55,11 @@ onBeforeUnmount(() => {
</el-space>
<el-space wrap>
<el-button bg text @click="setWatermark(value, { color })">
<el-button plain @click="setWatermark(value, { color })">
创建整页水印
</el-button>
<el-button
bg
text
plain
@click="
setWatermark(value, {
gradient: [
@ -74,8 +73,7 @@ onBeforeUnmount(() => {
创建整页渐变水印
</el-button>
<el-button
bg
text
plain
@click="
setWatermark(value, {
rotate: 0,
@ -90,8 +88,7 @@ onBeforeUnmount(() => {
创建整页渐变且水平90度的水印
</el-button>
<el-button
bg
text
plain
@click="
setWatermark(value, {
gradient: [
@ -106,8 +103,7 @@ onBeforeUnmount(() => {
创建整页渐变且有阴影的水印
</el-button>
<el-button
bg
text
plain
@click="
setWatermark(value, {
globalAlpha: 0.15, // 值越低越透明
@ -121,7 +117,7 @@ onBeforeUnmount(() => {
>
创建整页高透明渐变水印
</el-button>
<el-button bg text @click="clear">清除整页水印</el-button>
<el-button plain @click="clear">清除整页水印</el-button>
</el-space>
<el-divider />
@ -130,8 +126,7 @@ onBeforeUnmount(() => {
<el-space wrap class="mt-6">
<el-button
bg
text
plain
@click="
setLocalWatermark('局部水印', {
color,
@ -143,8 +138,7 @@ onBeforeUnmount(() => {
创建局部水印
</el-button>
<el-button
bg
text
plain
@click="
setLocalWatermark('局部水印', {
width: 140,
@ -160,8 +154,7 @@ onBeforeUnmount(() => {
创建局部渐变水印
</el-button>
<el-button
bg
text
plain
@click="
setLocalWatermark('局部水印', {
width: 140,
@ -178,8 +171,7 @@ onBeforeUnmount(() => {
创建局部渐变且水平90度的水印
</el-button>
<el-button
bg
text
plain
@click="
setLocalWatermark('局部水印', {
width: 140,
@ -195,7 +187,7 @@ onBeforeUnmount(() => {
>
创建局部渐变且有阴影的水印
</el-button>
<el-button bg text @click="clearLocal">清除局部水印</el-button>
<el-button plain @click="clearLocal">清除局部水印</el-button>
</el-space>
<el-divider />

6
src/views/about/index.vue
View File

@ -100,8 +100,9 @@ Object.keys(devDependencies).forEach(key => {
<span
:class="getMainLabel(item.label)"
style="color: var(--el-color-primary)"
>{{ item.field }}</span
>
{{ item.field }}
</span>
</a>
</el-descriptions-item>
</el-descriptions>
@ -129,8 +130,9 @@ Object.keys(devDependencies).forEach(key => {
<span
:class="getMainLabel(item.label)"
style="color: var(--el-color-primary)"
>{{ item.field }}</span
>
{{ item.field }}
</span>
</a>
</el-descriptions-item>
</el-descriptions>

3
src/views/components/draggable/index.vue
View File

@ -3,8 +3,6 @@ import { ref, onMounted } from "vue";
import Sortable, { Swap } from "sortablejs";
import draggable from "vuedraggable/src/vuedraggable";
import { useAppStoreHook } from "@/store/modules/app";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Rank from "@iconify-icons/ep/rank";
defineOptions({
name: "Draggable"
@ -64,7 +62,6 @@ onMounted(() => {
<el-link
href="https://sortablejs.github.io/vue.draggable.next/#/simple"
target="_blank"
:icon="useRenderIcon(Rank)"
style="margin: 0 4px 5px; font-size: 16px"
>
vuedraggable

1
src/views/components/segmented/index.vue
View File

@ -179,6 +179,5 @@ function onChange({ index, option }) {
<el-divider />
<p class="mb-2">change事件</p>
<Segmented :options="optionsChange" @change="onChange" />
<el-divider />
</el-card>
</template>

12
src/views/components/waterfall/index.vue
View File

@ -92,7 +92,7 @@ onMounted(() => {
</script>
<template>
<el-scrollbar height="87vh" class="content">
<el-scrollbar max-height="calc(100vh - 90px)" class="content">
<Waterfall :list="list" v-bind="options">
<template #item="{ item, url, index }">
<div
@ -149,3 +149,13 @@ onMounted(() => {
<InfiniteLoading :firstload="false" @infinite="handleLoadMore" />
</el-scrollbar>
</template>
<style lang="scss" scoped>
.main-content {
margin: 0 !important;
}
:deep(.el-loading-spinner .el-loading-text) {
font-size: 24px;
}
</style>

8
src/views/editor/index.vue
View File

@ -6,7 +6,7 @@ defineOptions({
name: "Editor"
});
const activeNames = ref(["1"]);
const activeNames = ref("1");
</script>
<template>
@ -27,13 +27,13 @@ const activeNames = ref(["1"]);
</template>
<el-collapse v-model="activeNames" accordion>
<el-collapse-item title="基础用法" name="1">
<Base />
<Base v-if="activeNames === '1'" />
</el-collapse-item>
<el-collapse-item title="多个富文本" name="2">
<Multi />
<Multi v-if="activeNames === '2'" />
</el-collapse-item>
<el-collapse-item title="自定义图片上传" name="3">
<PicUpload />
<PicUpload v-if="activeNames === '3'" />
</el-collapse-item>
</el-collapse>
</el-card>

2
src/views/flow-chart/index.vue
View File

@ -87,7 +87,7 @@ onMounted(() => {
@catData="catData"
/>
<!-- 节点面板 -->
<NodePanel :lf="lf" :nodeList="nodeList" />
<NodePanel v-if="lf" :lf="lf" :nodeList="nodeList" />
<!-- 画布 -->
<div id="turbo" />
<!-- 数据查看面板 -->

24
src/views/guide/index.vue
View File

@ -6,10 +6,26 @@ defineOptions({
name: "Guide"
});
const guide = () => {
const onGuide = () => {
intro()
.setOptions({
steps: [
{
element: document.querySelector(".sidebar-logo-container") as
| string
| HTMLElement,
title: "项目名称和Logo",
intro: "您可以在这里设置项目名称和Logo",
position: "left"
},
{
element: document.querySelector("#header-search") as
| string
| HTMLElement,
title: "搜索菜单",
intro: "您可以在这里搜索想要查看的菜单",
position: "left"
},
{
element: document.querySelector("#header-notice") as
| string
@ -49,12 +65,10 @@ const guide = () => {
<template #header>
<div class="card-header">
<span class="font-medium">
引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能
引导页常用于引导式介绍项目的基本功能或亮点
</span>
</div>
</template>
<el-button type="primary" class="mt-[10px]" @click="guide">
打开引导页
</el-button>
<el-button @click="onGuide"> 打开引导页 </el-button>
</el-card>
</template>

20
src/views/permission/button/index.vue
View File

@ -16,17 +16,17 @@ defineOptions({
</template>
<el-space wrap>
<Auth value="btn_add">
<el-button text bg type="warning">
<el-button plain type="warning">
拥有code：'btn_add' 权限可见
</el-button>
</Auth>
<Auth :value="['btn_edit']">
<el-button text bg type="primary">
<el-button plain type="primary">
拥有code：['btn_edit'] 权限可见
</el-button>
</Auth>
<Auth :value="['btn_add', 'btn_edit', 'btn_delete']">
<el-button text bg type="danger">
<el-button plain type="danger">
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
</el-button>
</Auth>
@ -38,16 +38,15 @@ defineOptions({
<div class="card-header">函数方式判断权限</div>
</template>
<el-space wrap>
<el-button v-if="hasAuth('btn_add')" text bg type="warning">
<el-button v-if="hasAuth('btn_add')" plain type="warning">
拥有code：'btn_add' 权限可见
</el-button>
<el-button v-if="hasAuth(['btn_edit'])" text bg type="primary">
<el-button v-if="hasAuth(['btn_edit'])" plain type="primary">
拥有code：['btn_edit'] 权限可见
</el-button>
<el-button
v-if="hasAuth(['btn_add', 'btn_edit', 'btn_delete'])"
text
bg
plain
type="danger"
>
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见
@ -62,16 +61,15 @@ defineOptions({
</div>
</template>
<el-space wrap>
<el-button v-auth="'btn_add'" text bg type="warning">
<el-button v-auth="'btn_add'" plain type="warning">
拥有code：'btn_add' 权限可见
</el-button>
<el-button v-auth="['btn_edit']" text bg type="primary">
<el-button v-auth="['btn_edit']" plain type="primary">
拥有code：['btn_edit'] 权限可见
</el-button>
<el-button
v-auth="['btn_add', 'btn_edit', 'btn_delete']"
text
bg
plain
type="danger"
>
拥有code：['btn_add', 'btn_edit', 'btn_delete'] 权限可见