bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: adjust all sample pages and use page components (#4118)

Browse Source
This commit is contained in:
Vben
2024-08-11 20:05:52 +08:00
committed by GitHub
parent 3015912f1a
commit 517acada1a
75 changed files with 282 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
playground/src/views/demos/access/admin-visible.vue
View File

@@ -1,11 +1,7 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
import { Page } from '@vben/common-ui';
</script>
<template>
<Fallback
description="当前页面仅 Admin 账号可见"
status="coming-soon"
title="页面访问测试"
/>
<Page description="当前页面仅 Admin 账号可见" title="页面访问测试" />
</template>

56
playground/src/views/demos/access/button-control.vue
View File

@@ -4,9 +4,10 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
import { useRouter } from 'vue-router';
import { AccessControl, useAccess } from '@vben/access';
import { Page } from '@vben/common-ui';
import { resetAllStores, useUserStore } from '@vben/stores';
import { Button } from 'ant-design-vue';
import { Button, Card } from 'ant-design-vue';
import { useAuthStore } from '#/store';
@@ -50,21 +51,17 @@ async function changeAccount(role: string) {
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">
{{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
</h1>
<div class="text-foreground/80 mt-2">切换不同的账号，观察按钮变化。</div>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3">
<span class="text-lg font-semibold">当前角色:</span>
<Page
:title="`${accessMode === 'frontend' ? '前端' : '后端'}按钮访问权限演示`"
description="切换不同的账号，观察按钮变化。"
>
<Card class="mb-5">
<template #title>
<span class="font-semibold">当前角色:</span>
<span class="text-primary mx-4 text-lg">
{{ userStore.userRoles?.[0] }}
</span>
</div>
</template>
<Button :type="roleButtonType('super')" @click="changeAccount('super')">
切换为 Super 账号
@@ -80,10 +77,9 @@ async function changeAccount(role: string) {
<Button :type="roleButtonType('user')" @click="changeAccount('user')">
切换为 User 账号
</Button>
</div>
</Card>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">组件形式控制 - 权限码方式</div>
<Card class="mb-5" title="组件形式控制 - 权限码">
<AccessControl :codes="['AC_100100']" type="code">
<Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
</AccessControl>
@@ -98,10 +94,13 @@ async function changeAccount(role: string) {
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
</Button>
</AccessControl>
</div>
</Card>
<div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
<Card
v-if="accessMode === 'frontend'"
class="mb-5"
title="组件形式控制 - 角色"
>
<AccessControl :codes="['super']" type="role">
<Button class="mr-4"> Super 角色可见 </Button>
</AccessControl>
@@ -114,10 +113,9 @@ async function changeAccount(role: string) {
<AccessControl :codes="['super', 'admin']" type="role">
<Button class="mr-4"> Super & Admin 角色可见 </Button>
</AccessControl>
</div>
</Card>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">函数形式控制</div>
<Card class="mb-5" title="函数形式控制">
<Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
Super 账号可见 ["AC_1000001"]
</Button>
@@ -130,10 +128,9 @@ async function changeAccount(role: string) {
<Button v-if="hasAccessByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
</Button>
</div>
</Card>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">指令方式 - 权限码</div>
<Card class="mb-5" title="指令方式 - 权限码">
<Button class="mr-4" v-access:code="['AC_100100']">
Super 账号可见 ["AC_1000001"]
</Button>
@@ -146,16 +143,15 @@ async function changeAccount(role: string) {
<Button class="mr-4" v-access:code="['AC_100100', 'AC_1000001']">
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
</Button>
</div>
</Card>
<div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">指令方式 - 角色</div>
<Card class="mb-5" title="指令方式 - 角色">
<Button class="mr-4" v-access:role="['super']"> Super 角色可见 </Button>
<Button class="mr-4" v-access:role="['admin']"> Admin 角色可见 </Button>
<Button class="mr-4" v-access:role="['user']"> User 角色可见 </Button>
<Button class="mr-4" v-access:role="['super', 'admin']">
Super & Admin 角色可见
</Button>
</div>
</div>
</Card>
</Page>
</template>

36
playground/src/views/demos/access/index.vue
View File

@@ -4,9 +4,10 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
import { useRouter } from 'vue-router';
import { useAccess } from '@vben/access';
import { Page } from '@vben/common-ui';
import { resetAllStores, useUserStore } from '@vben/stores';
import { Button } from 'ant-design-vue';
import { Button, Card } from 'ant-design-vue';
import { useAuthStore } from '#/store';
@@ -64,33 +65,20 @@ async function handleToggleAccessMode() {
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">
{{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
</h1>
<div class="text-foreground/80 mt-2">
切换不同的账号，观察左侧菜单变化。
</div>
</div>
<div class="card-box mt-5 p-5">
<span class="text-lg font-semibold">当前权限模式:</span>
<Page
:title="`${accessMode === 'frontend' ? '前端' : '后端'}页面访问权限演示`"
description="切换不同的账号，观察左侧菜单变化。"
>
<Card class="mb-5" title="权限模式">
<span class="font-semibold">当前权限模式:</span>
<span class="text-primary mx-4">{{
accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
}}</span>
<Button type="primary" @click="handleToggleAccessMode">
切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
</Button>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3">
<span class="text-lg font-semibold">当前账号:</span>
<span class="text-primary mx-4 text-lg">
{{ userStore.userRoles?.[0] }}
</span>
</div>
</Card>
<Card title="账号切换">
<Button :type="roleButtonType('super')" @click="changeAccount('super')">
切换为 Super 账号
</Button>
@@ -105,6 +93,6 @@ async function handleToggleAccessMode() {
<Button :type="roleButtonType('user')" @click="changeAccount('user')">
切换为 User 账号
</Button>
</div>
</div>
</Card>
</Page>
</template>

8
playground/src/views/demos/access/super-visible.vue
View File

@@ -1,11 +1,7 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
import { Page } from '@vben/common-ui';
</script>
<template>
<Fallback
description="当前页面仅 Super 账号可见"
status="coming-soon"
title="页面访问测试"
/>
<Page description="当前页面仅 Super 账号可见" title="页面访问测试" />
</template>

8
playground/src/views/demos/access/user-visible.vue
View File

@@ -1,11 +1,7 @@
<script lang="ts" setup>
import { Fallback } from '@vben/common-ui';
import { Page } from '@vben/common-ui';
</script>
<template>
<Fallback
description="当前页面仅 User 可见"
status="coming-soon"
title="页面访问测试"
/>
<Page description="当前页面仅 User 账号可见" title="页面访问测试" />
</template>

22
playground/src/views/demos/features/icons/index.vue
View File

@@ -1,4 +1,5 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import {
MdiGithub,
MdiGoogle,
@@ -14,12 +15,13 @@ import {
SvgCardIcon,
SvgDownloadIcon,
} from '@vben/icons';
import { Card } from 'ant-design-vue';
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">图标</h1>
<Page title="图标">
<template #description>
<div class="text-foreground/80 mt-2">
图标可在
<a
@@ -31,10 +33,9 @@ import {
</a>
中查找，支持多种图标库，如 Material Design, Font Awesome, Jam Icons 等。
</div>
</div>
</template>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">Iconify</div>
<Card class="mb-5" title="Iconify">
<div class="flex items-center gap-5">
<MdiGithub class="size-8" />
<MdiGoogle class="size-8 text-red-500" />
@@ -42,10 +43,9 @@ import {
<MdiWechat class="size-8" />
<MdiKeyboardEsc class="size-8" />
</div>
</div>
</Card>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">Svg Icons</div>
<Card title="Svg Icons">
<div class="flex items-center gap-5">
<SvgAvatar1Icon class="size-8" />
<SvgAvatar2Icon class="size-8 text-red-500" />
@@ -56,6 +56,6 @@ import {
<SvgCardIcon class="size-8" />
<SvgDownloadIcon class="size-8" />
</div>
</div>
</div>
</Card>
</Page>
</template>

29
playground/src/views/demos/features/login-expired/index.vue
View File

@@ -1,9 +1,10 @@
<script lang="ts" setup>
import type { LoginExpiredModeType } from '@vben/types';
import { Page } from '@vben/common-ui';
import { preferences, updatePreferences } from '@vben/preferences';
import { Button } from 'ant-design-vue';
import { Button, Card } from 'ant-design-vue';
import { getMockStatusApi } from '#/api';
@@ -17,26 +18,22 @@ async function handleClick(type: LoginExpiredModeType) {
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">登录过期演示</h1>
<Page title="登录过期演示">
<template #description>
<div class="text-foreground/80 mt-2">
接口请求遇到401状态码时，需要重新登录。有两种方式：
<div>1.转到登录页，登录成功后跳转回原页面</div>
<div>
<p>1.转到登录页，登录成功后跳转回原页面</p>
<p>
2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
</div>
</p>
</div>
</div>
</template>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">跳转登录页面方式</div>
<Card class="mb-5" title="跳转登录页面方式">
<Button type="primary" @click="handleClick('page')"> 点击触发 </Button>
</div>
<div class="card-box mt-5 p-5">
<div class="mb-3 text-lg font-semibold">登录弹窗方式</div>
</Card>
<Card class="mb-5" title="登录弹窗方式">
<Button type="primary" @click="handleClick('modal')"> 点击触发 </Button>
</div>
</div>
</Card>
</Page>
</template>

32
playground/src/views/demos/features/tabs/index.vue
View File

@@ -2,9 +2,10 @@
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { Input as AInput, Button } from 'ant-design-vue';
import { Button, Card, Input } from 'ant-design-vue';
const router = useRouter();
const newTabTitle = ref('');
@@ -38,14 +39,8 @@ function reset() {
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">标签页</h1>
<div class="text-foreground/80 mt-2">用于需要操作标签页的场景</div>
</div>
<div class="card-box mt-5 p-5">
<div class="text-lg font-semibold">打开/关闭标签页</div>
<Page description="用于需要操作标签页的场景" title="标签页">
<Card class="mb-5" title="打开/关闭标签页">
<div class="text-foreground/80 my-3">
如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
</div>
@@ -55,10 +50,9 @@ function reset() {
关闭 "关于" 标签页
</Button>
</div>
</div>
</Card>
<div class="card-box mt-5 p-5">
<div class="text-lg font-semibold">标签页操作</div>
<Card class="mb-5" title="标签页操作">
<div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
<div class="flex flex-wrap gap-3">
<Button type="primary" @click="closeCurrentTab()">
@@ -76,15 +70,15 @@ function reset() {
</Button>
<Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
</div>
</div>
</Card>
<div class="card-box mt-5 p-5">
<Card class="mb-5" title="动态标题">
<div class="text-lg font-semibold">动态标题</div>
<div class="text-foreground/80 my-3">
该操作不会影响页面标题，仅修改Tab标题
</div>
<div class="flex flex-wrap items-center gap-3">
<AInput
<Input
v-model:value="newTabTitle"
class="w-40"
placeholder="请输入新标题"
@@ -94,9 +88,9 @@ function reset() {
</Button>
<Button @click="reset"> 重置 </Button>
</div>
</div>
</Card>
<div class="card-box mt-5 p-5">
<Card class="mb-5" title="最大打开数量">
<div class="text-lg font-semibold">最大打开数量</div>
<div class="text-foreground/80 my-3">
限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
@@ -108,6 +102,6 @@ function reset() {
</Button>
</template>
</div>
</div>
</div>
</Card>
</Page>
</template>

12
playground/src/views/demos/features/tabs/tab-detail.vue
View File

@@ -2,6 +2,7 @@
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
const route = useRoute();
@@ -16,12 +17,7 @@ setTabTitle(`No.${index.value} - 详情信息`);
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">标签详情页</h1>
<div class="text-foreground/80 mt-2">
<div>{{ index }} - 详情页内容在此</div>
</div>
</div>
</div>
<Page :title="`标签页${index}详情页`">
<template #description> {{ index }} - 详情页内容在此 </template>
</Page>
</template>

24
playground/src/views/demos/features/watermark/index.vue
View File

@@ -1,7 +1,8 @@
<script lang="ts" setup>
import { Page } from '@vben/common-ui';
import { useWatermark } from '@vben/hooks';
import { Button } from 'ant-design-vue';
import { Button, Card } from 'ant-design-vue';
const { destroyWatermark, updateWatermark } = useWatermark();
@@ -40,9 +41,8 @@ async function createWaterMark() {
</script>
<template>
<div class="p-5">
<div class="card-box p-5">
<h1 class="text-xl font-semibold">水印</h1>
<Page title="水印">
<template #description>
<div class="text-foreground/80 mt-2">
水印使用了
<a
@@ -54,13 +54,13 @@ async function createWaterMark() {
</a>
开源插件，详细配置可见插件配置。
</div>
</div>
</template>
<div class="card-box mt-5 p-5">
<div class="mb-3 flex gap-3 text-lg font-semibold">
<Button type="primary" @click="createWaterMark()">创建水印</Button>
<Button danger @click="destroyWatermark">移除水印</Button>
</div>
</div>
</div>
<Card title="使用">
<Button class="mr-2" type="primary" @click="createWaterMark()">
创建水印
</Button>
<Button danger @click="destroyWatermark">移除水印</Button>
</Card>
</Page>
</template>

2
playground/src/views/examples/ellipsis/data.ts
View File

@@ -1,2 +0,0 @@
export const longText: string =
'Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。';

61
playground/src/views/examples/ellipsis/index.vue
View File

@@ -1,42 +1,41 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { EllipsisText } from '@vben/common-ui';
import { EllipsisText, Page } from '@vben/common-ui';
import { Collapse, CollapsePanel } from 'ant-design-vue';
import { Card } from 'ant-design-vue';
import { longText } from './data';
const longText = `Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
const text = ref(longText);
const activeKey = ref(['1', '2', '3', '4']);
</script>
<template>
<div class="card-box p-5">
<h1 class="mb-5 text-xl font-semibold">文本省略示例</h1>
<div>
<Collapse v-model:activeKey="activeKey">
<CollapsePanel key="1" header="Ellipsis 基本使用">
<EllipsisText :max-width="240">{{ text }}</EllipsisText>
</CollapsePanel>
<CollapsePanel key="2" header="Ellipsis 多行省略">
<EllipsisText :line="2">{{ text }}</EllipsisText>
</CollapsePanel>
<CollapsePanel key="3" header="Ellipsis 点击展开">
<EllipsisText :line="3" expand>{{ text }}</EllipsisText>
</CollapsePanel>
<CollapsePanel key="4" header="Ellipsis 定制 Tooltip 内容">
<EllipsisText :max-width="240">
住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
<template #tooltip>
<div style="text-align: center">
《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
深海的光 停滞的海浪
</div>
</template>
</EllipsisText>
</CollapsePanel>
</Collapse>
</div>
</div>
<Page
description="用于多行文本省略，支持点击展开和自定义内容。"
title="文本省略示例"
>
<Card class="mb-4" title="基本使用">
<EllipsisText :max-width="240">{{ text }}</EllipsisText>
</Card>
<Card class="mb-4" title="多行省略">
<EllipsisText :line="2">{{ text }}</EllipsisText>
</Card>
<Card class="mb-4" title="点击展开">
<EllipsisText :line="3" expand>{{ text }}</EllipsisText>
</Card>
<Card class="mb-4" title="自定义内容">
<EllipsisText :max-width="240">
住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
<template #tooltip>
<div style="text-align: center">
《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
深海的光 停滞的海浪
</div>
</template>
</EllipsisText>
</Card>
</Page>
</template>