Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
This commit is contained in:
dap
@@ -13,7 +13,7 @@ onMounted(() => {
|
||||
containLabel: true,
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '2 %',
|
||||
top: '2 %',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
@@ -13,7 +13,7 @@ onMounted(() => {
|
||||
containLabel: true,
|
||||
left: '1%',
|
||||
right: '1%',
|
||||
top: '2 %',
|
||||
top: '2 %',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="当前页面仅 Admin 账号可见"
|
||||
status="coming-soon"
|
||||
title="页面访问测试"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,159 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { LoginAndRegisterParams } from '@vben/common-ui';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { AccessControl, useAccess } from '@vben/access';
|
||||
import { resetAllStores, useUserStore } from '@vben/stores';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useAuthStore } from '#/store';
|
||||
|
||||
const accounts: Record<string, LoginAndRegisterParams> = {
|
||||
admin: {
|
||||
password: '123456',
|
||||
username: 'admin',
|
||||
},
|
||||
super: {
|
||||
password: '123456',
|
||||
username: 'vben',
|
||||
},
|
||||
user: {
|
||||
password: '123456',
|
||||
username: 'jack',
|
||||
},
|
||||
};
|
||||
|
||||
const { accessMode, hasAccessByCodes } = useAccess();
|
||||
const authStore = useAuthStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
|
||||
function roleButtonType(role: string) {
|
||||
return userStore.userRoles.includes(role) ? 'primary' : 'default';
|
||||
}
|
||||
|
||||
async function changeAccount(role: string) {
|
||||
if (userStore.userRoles.includes(role)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const account = accounts[role];
|
||||
resetAllStores();
|
||||
await authStore.authLogin(account, async () => {
|
||||
router.go(0);
|
||||
});
|
||||
}
|
||||
</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>
|
||||
<span class="text-primary mx-4 text-lg">
|
||||
{{ userStore.userRoles?.[0] }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button :type="roleButtonType('super')" @click="changeAccount('super')">
|
||||
切换为 Super 账号
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
:type="roleButtonType('admin')"
|
||||
class="mx-4"
|
||||
@click="changeAccount('admin')"
|
||||
>
|
||||
切换为 Admin 账号
|
||||
</Button>
|
||||
<Button :type="roleButtonType('user')" @click="changeAccount('user')">
|
||||
切换为 User 账号
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">组件形式控制 - 权限码方式</div>
|
||||
<AccessControl :codes="['AC_100100']" type="code">
|
||||
<Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
|
||||
</AccessControl>
|
||||
<AccessControl :codes="['AC_100030']" type="code">
|
||||
<Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
|
||||
</AccessControl>
|
||||
<AccessControl :codes="['AC_1000001']" type="code">
|
||||
<Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
|
||||
</AccessControl>
|
||||
<AccessControl :codes="['AC_100100', 'AC_100010']" type="code">
|
||||
<Button class="mr-4">
|
||||
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
|
||||
</Button>
|
||||
</AccessControl>
|
||||
</div>
|
||||
|
||||
<div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
|
||||
<AccessControl :codes="['super']" type="role">
|
||||
<Button class="mr-4"> Super 角色可见 </Button>
|
||||
</AccessControl>
|
||||
<AccessControl :codes="['admin']" type="role">
|
||||
<Button class="mr-4"> Admin 角色可见 </Button>
|
||||
</AccessControl>
|
||||
<AccessControl :codes="['user']" type="role">
|
||||
<Button class="mr-4"> User 角色可见 </Button>
|
||||
</AccessControl>
|
||||
<AccessControl :codes="['super', 'admin']" type="role">
|
||||
<Button class="mr-4"> Super & Admin 角色可见 </Button>
|
||||
</AccessControl>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">函数形式控制</div>
|
||||
<Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
|
||||
Super 账号可见 ["AC_1000001"]
|
||||
</Button>
|
||||
<Button v-if="hasAccessByCodes(['AC_100030'])" class="mr-4">
|
||||
Admin 账号可见 ["AC_100010"]
|
||||
</Button>
|
||||
<Button v-if="hasAccessByCodes(['AC_1000001'])" class="mr-4">
|
||||
User 账号可见 ["AC_1000001"]
|
||||
</Button>
|
||||
<Button v-if="hasAccessByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
|
||||
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">指令方式 - 权限码</div>
|
||||
<Button class="mr-4" v-access:code="['AC_100100']">
|
||||
Super 账号可见 ["AC_1000001"]
|
||||
</Button>
|
||||
<Button class="mr-4" v-access:code="['AC_100030']">
|
||||
Admin 账号可见 ["AC_100010"]
|
||||
</Button>
|
||||
<Button class="mr-4" v-access:code="['AC_1000001']">
|
||||
User 账号可见 ["AC_1000001"]
|
||||
</Button>
|
||||
<Button class="mr-4" v-access:code="['AC_100100', 'AC_1000001']">
|
||||
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">指令方式 - 角色</div>
|
||||
<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>
|
||||
</template>
|
||||
@@ -1,105 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { LoginAndRegisterParams } from '@vben/common-ui';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { useAccess } from '@vben/access';
|
||||
import { resetAllStores, useUserStore } from '@vben/stores';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { useAuthStore } from '#/store';
|
||||
|
||||
const accounts: Record<string, LoginAndRegisterParams> = {
|
||||
admin: {
|
||||
password: '123456',
|
||||
username: 'admin',
|
||||
},
|
||||
super: {
|
||||
password: '123456',
|
||||
username: 'vben',
|
||||
},
|
||||
user: {
|
||||
password: '123456',
|
||||
username: 'jack',
|
||||
},
|
||||
};
|
||||
|
||||
const { accessMode, toggleAccessMode } = useAccess();
|
||||
const userStore = useUserStore();
|
||||
const accessStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
function roleButtonType(role: string) {
|
||||
return userStore.userRoles.includes(role) ? 'primary' : 'default';
|
||||
}
|
||||
|
||||
async function changeAccount(role: string) {
|
||||
if (userStore.userRoles.includes(role)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const account = accounts[role];
|
||||
resetAllStores();
|
||||
await accessStore.authLogin(account, async () => {
|
||||
router.go(0);
|
||||
});
|
||||
}
|
||||
|
||||
async function handleToggleAccessMode() {
|
||||
await toggleAccessMode();
|
||||
resetAllStores();
|
||||
|
||||
await accessStore.authLogin(accounts.super, async () => {
|
||||
setTimeout(() => {
|
||||
router.go(0);
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<Button :type="roleButtonType('super')" @click="changeAccount('super')">
|
||||
切换为 Super 账号
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
:type="roleButtonType('admin')"
|
||||
class="mx-4"
|
||||
@click="changeAccount('admin')"
|
||||
>
|
||||
切换为 Admin 账号
|
||||
</Button>
|
||||
<Button :type="roleButtonType('user')" @click="changeAccount('user')">
|
||||
切换为 User 账号
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="当前页面用户不可见，会被重定向到403页面"
|
||||
status="coming-soon"
|
||||
title="页面访问测试"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="当前页面仅 Super 账号可见"
|
||||
status="coming-soon"
|
||||
title="页面访问测试"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="当前页面仅 User 可见"
|
||||
status="coming-soon"
|
||||
title="页面访问测试"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="用于菜单激活显示不同的图标"
|
||||
status="coming-soon"
|
||||
title="激活图标示例"
|
||||
/>
|
||||
</template>
|
||||
66
apps/web-antd/src/views/demos/antd/index.vue
Normal file
66
apps/web-antd/src/views/demos/antd/index.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script lang="ts" setup>
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { Button, Card, message, notification, Space } from 'ant-design-vue';
|
||||
|
||||
type NotificationType = 'error' | 'info' | 'success' | 'warning';
|
||||
|
||||
function info() {
|
||||
message.info('How many roads must a man walk down');
|
||||
}
|
||||
|
||||
function error() {
|
||||
message.error({
|
||||
content: 'Once upon a time you dressed so fine',
|
||||
duration: 2500,
|
||||
});
|
||||
}
|
||||
|
||||
function warning() {
|
||||
message.warning('How many roads must a man walk down');
|
||||
}
|
||||
function success() {
|
||||
message.success('Cause you walked hand in hand With another man in my place');
|
||||
}
|
||||
|
||||
function notify(type: NotificationType) {
|
||||
notification[type]({
|
||||
duration: 2500,
|
||||
message: '说点啥呢',
|
||||
type,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page
|
||||
description="支持多语言，主题功能集成切换等"
|
||||
title="Ant Design Vue组件使用演示"
|
||||
>
|
||||
<Card title="按钮">
|
||||
<Space>
|
||||
<Button>Default</Button>
|
||||
<Button type="primary"> Primary </Button>
|
||||
<Button> Info </Button>
|
||||
<Button danger> Error </Button>
|
||||
</Space>
|
||||
</Card>
|
||||
<Card class="mb-5" title="Message">
|
||||
<Space>
|
||||
<Button @click="info"> 信息 </Button>
|
||||
<Button danger @click="error"> 错误 </Button>
|
||||
<Button @click="warning"> 警告 </Button>
|
||||
<Button @click="success"> 成功 </Button>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
<Card class="mb-5" title="Notification">
|
||||
<Space>
|
||||
<Button @click="notify('info')"> 信息 </Button>
|
||||
<Button danger @click="notify('error')"> 错误 </Button>
|
||||
<Button @click="notify('warning')"> 警告 </Button>
|
||||
<Button @click="notify('success')"> 成功 </Button>
|
||||
</Space>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback description="用于徽标示例" status="coming-soon" title="徽标示例" />
|
||||
</template>
|
||||
@@ -1,21 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="面包屑导航-平级模式-详情页"
|
||||
status="coming-soon"
|
||||
title="注意观察面包屑导航变化"
|
||||
>
|
||||
<template #action>
|
||||
<Button @click="router.go(-1)">返回</Button>
|
||||
</template>
|
||||
</Fallback>
|
||||
</template>
|
||||
@@ -1,25 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function details() {
|
||||
router.push({ name: 'BreadcrumbLateralDetailDemo' });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="点击查看详情，并观察面包屑导航变化"
|
||||
status="coming-soon"
|
||||
title="面包屑导航-平级模式"
|
||||
>
|
||||
<template #action>
|
||||
<Button type="primary" @click="details">点击查看详情</Button>
|
||||
</template>
|
||||
</Fallback>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="面包屑导航-层级模式-详情页"
|
||||
status="coming-soon"
|
||||
title="注意观察面包屑导航变化"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div>children</div>
|
||||
</template>
|
||||
@@ -1,11 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback
|
||||
description="当前菜单的子菜单不可见"
|
||||
status="coming-soon"
|
||||
title="隐藏子菜单"
|
||||
/>
|
||||
</template>
|
||||
@@ -1,61 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
MdiGithub,
|
||||
MdiGoogle,
|
||||
MdiKeyboardEsc,
|
||||
MdiQqchat,
|
||||
MdiWechat,
|
||||
SvgAvatar1Icon,
|
||||
SvgAvatar2Icon,
|
||||
SvgAvatar3Icon,
|
||||
SvgAvatar4Icon,
|
||||
SvgBellIcon,
|
||||
SvgCakeIcon,
|
||||
SvgCardIcon,
|
||||
SvgDownloadIcon,
|
||||
} from '@vben/icons';
|
||||
</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">
|
||||
图标可在
|
||||
<a
|
||||
class="text-primary"
|
||||
href="https://icon-sets.iconify.design/"
|
||||
target="_blank"
|
||||
>
|
||||
Iconify
|
||||
</a>
|
||||
中查找，支持多种图标库，如 Material Design, Font Awesome, Jam Icons 等。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">Iconify</div>
|
||||
<div class="flex items-center gap-5">
|
||||
<MdiGithub class="size-8" />
|
||||
<MdiGoogle class="size-8 text-red-500" />
|
||||
<MdiQqchat class="size-8 text-green-500" />
|
||||
<MdiWechat class="size-8" />
|
||||
<MdiKeyboardEsc class="size-8" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">Svg Icons</div>
|
||||
<div class="flex items-center gap-5">
|
||||
<SvgAvatar1Icon class="size-8" />
|
||||
<SvgAvatar2Icon class="size-8 text-red-500" />
|
||||
<SvgAvatar3Icon class="size-8 text-green-500" />
|
||||
<SvgAvatar4Icon class="size-8" />
|
||||
<SvgCakeIcon class="size-8" />
|
||||
<SvgBellIcon class="size-8" />
|
||||
<SvgCardIcon class="size-8" />
|
||||
<SvgDownloadIcon class="size-8" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,42 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import type { LoginExpiredModeType } from '@vben/types';
|
||||
|
||||
import { preferences, updatePreferences } from '@vben/preferences';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
import { getMockStatusApi } from '#/api';
|
||||
|
||||
async function handleClick(type: LoginExpiredModeType) {
|
||||
const loginExpiredMode = preferences.app.loginExpiredMode;
|
||||
|
||||
updatePreferences({ app: { loginExpiredMode: type } });
|
||||
await getMockStatusApi('401');
|
||||
updatePreferences({ app: { loginExpiredMode } });
|
||||
}
|
||||
</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">
|
||||
接口请求遇到401状态码时，需要重新登录。有两种方式：
|
||||
<div>1.转到登录页，登录成功后跳转回原页面</div>
|
||||
<div>
|
||||
2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="mb-3 text-lg font-semibold">跳转登录页面方式</div>
|
||||
<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>
|
||||
<Button type="primary" @click="handleClick('modal')"> 点击触发 </Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,113 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { useTabs } from '@vben/hooks';
|
||||
|
||||
import { Input as AInput, Button } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter();
|
||||
const newTabTitle = ref('');
|
||||
|
||||
const {
|
||||
closeAllTabs,
|
||||
closeCurrentTab,
|
||||
closeLeftTabs,
|
||||
closeOtherTabs,
|
||||
closeRightTabs,
|
||||
closeTabByKey,
|
||||
refreshTab,
|
||||
resetTabTitle,
|
||||
setTabTitle,
|
||||
} = useTabs();
|
||||
|
||||
function openTab() {
|
||||
// 这里就是路由跳转，也可以用path
|
||||
router.push({ name: 'VbenAbout' });
|
||||
}
|
||||
|
||||
function openTabWithParams(id: number) {
|
||||
// 这里就是路由跳转，也可以用path
|
||||
router.push({ name: 'FeatureTabDetailDemo', params: { id } });
|
||||
}
|
||||
|
||||
function reset() {
|
||||
newTabTitle.value = '';
|
||||
resetTabTitle();
|
||||
}
|
||||
</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>
|
||||
<div class="text-foreground/80 my-3">
|
||||
如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<Button type="primary" @click="openTab"> 打开 "关于" 标签页 </Button>
|
||||
<Button type="primary" @click="closeTabByKey('/vben-admin/about')">
|
||||
关闭 "关于" 标签页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="text-lg font-semibold">标签页操作</div>
|
||||
<div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<Button type="primary" @click="closeCurrentTab()">
|
||||
关闭当前标签页
|
||||
</Button>
|
||||
<Button type="primary" @click="closeLeftTabs()">
|
||||
关闭左侧标签页
|
||||
</Button>
|
||||
<Button type="primary" @click="closeRightTabs()">
|
||||
关闭右侧标签页
|
||||
</Button>
|
||||
<Button type="primary" @click="closeAllTabs()"> 关闭所有标签页 </Button>
|
||||
<Button type="primary" @click="closeOtherTabs()">
|
||||
关闭其他标签页
|
||||
</Button>
|
||||
<Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<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
|
||||
v-model:value="newTabTitle"
|
||||
class="w-40"
|
||||
placeholder="请输入新标题"
|
||||
/>
|
||||
<Button type="primary" @click="() => setTabTitle(newTabTitle)">
|
||||
修改
|
||||
</Button>
|
||||
<Button @click="reset"> 重置 </Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-box mt-5 p-5">
|
||||
<div class="text-lg font-semibold">最大打开数量</div>
|
||||
<div class="text-foreground/80 my-3">
|
||||
限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<template v-for="item in 5" :key="item">
|
||||
<Button type="primary" @click="openTabWithParams(item)">
|
||||
打开{{ item }}详情页
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,27 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { useTabs } from '@vben/hooks';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const { setTabTitle } = useTabs();
|
||||
|
||||
const index = computed(() => {
|
||||
return route.params?.id ?? -1;
|
||||
});
|
||||
|
||||
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>
|
||||
</template>
|
||||
@@ -1,66 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { useWatermark } from '@vben/hooks';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
|
||||
const { destroyWatermark, updateWatermark } = useWatermark();
|
||||
|
||||
async function createWaterMark() {
|
||||
await updateWatermark({
|
||||
advancedStyle: {
|
||||
colorStops: [
|
||||
{
|
||||
color: 'red',
|
||||
offset: 0,
|
||||
},
|
||||
{
|
||||
color: 'blue',
|
||||
offset: 1,
|
||||
},
|
||||
],
|
||||
type: 'linear',
|
||||
},
|
||||
content: 'hello my watermark',
|
||||
globalAlpha: 0.5,
|
||||
gridLayoutOptions: {
|
||||
cols: 2,
|
||||
gap: [20, 20],
|
||||
matrix: [
|
||||
[1, 0],
|
||||
[0, 1],
|
||||
],
|
||||
rows: 2,
|
||||
},
|
||||
height: 200,
|
||||
layout: 'grid',
|
||||
rotate: 22,
|
||||
width: 200,
|
||||
});
|
||||
}
|
||||
</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">
|
||||
水印使用了
|
||||
<a
|
||||
class="text-primary"
|
||||
href="https://zhensherlock.github.io/watermark-js-plus/"
|
||||
target="_blank"
|
||||
>
|
||||
watermark-js-plus
|
||||
</a>
|
||||
开源插件，详细配置可见插件配置。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback status="coming-soon" />
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback status="coming-soon" />
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback status="coming-soon" />
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { Fallback } from '@vben/common-ui';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback status="coming-soon" />
|
||||
</template>
|
||||
@@ -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 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。';
|
||||
@@ -1,42 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { EllipsisText } from '@vben/common-ui';
|
||||
|
||||
import { Collapse, CollapsePanel } from 'ant-design-vue';
|
||||
|
||||
import { longText } from './data';
|
||||
|
||||
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>
|
||||
</template>
|
||||
Reference in New Issue
Block a user