by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

Browse Source
This commit is contained in:
dap
2024-11-30 20:03:53 +08:00
parent 7461693aa7 e8992a1d16
commit 839e2e4321
23 changed files with 117 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,17 +79,17 @@ async function changeAccount(role: string) {
<Card class="mb-5" title="组件形式控制 - 权限码">
<AccessControl :codes="['AC_100100']" type="code">
<Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
<Button class="mr-4"> Super 账号可见 ["AC_100100"] </Button>
</AccessControl>
<AccessControl :codes="['AC_100030']" type="code">
<Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
<Button class="mr-4"> Admin 账号可见 ["AC_100030"] </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">
<AccessControl :codes="['AC_100100', 'AC_100030']" type="code">
<Button class="mr-4">
Super & Admin 账号可见 ["AC_100100","AC_1000001"]
Super & Admin 账号可见 ["AC_100100","AC_100030"]
</Button>
</AccessControl>
</Card>
@@ -115,35 +115,35 @@ async function changeAccount(role: string) {
<Card class="mb-5" title="函数形式控制">
<Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
Super 账号可见 ["AC_1000001"]
Super 账号可见 ["AC_100100"]
</Button>
<Button v-if="hasAccessByCodes(['AC_100030'])" class="mr-4">
Admin 账号可见 ["AC_100010"]
Admin 账号可见 ["AC_100030"]
</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 v-if="hasAccessByCodes(['AC_100100', 'AC_100030'])" class="mr-4">
Super & Admin 账号可见 ["AC_100100","AC_100030"]
</Button>
</Card>
<Card class="mb-5" title="指令方式 - 权限码">
<Button class="mr-4" v-access:code="['AC_100100']">
Super 账号可见 ["AC_1000001"]
Super 账号可见 ["AC_100100"]
</Button>
<Button class="mr-4" v-access:code="['AC_100030']">
Admin 账号可见 ["AC_100010"]
Admin 账号可见 ["AC_100030"]
</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 class="mr-4" v-access:code="['AC_100100', 'AC_100030']">
Super & Admin 账号可见 ["AC_100100","AC_100030"]
</Button>
</Card>
<Card class="mb-5" title="指令方式 - 角色">
<Card v-if="accessMode === 'frontend'" 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>

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

@@ -60,6 +60,17 @@ import IconPicker from './icon-picker.vue';
</div>
</Card>
<Card class="mb-5" title="Tailwind CSS">
<div class="flex items-center gap-5 text-3xl">
<span class="icon-[ant-design--alipay-circle-outlined]"></span>
<span class="icon-[ant-design--account-book-filled]"></span>
<span class="icon-[ant-design--container-outlined]"></span>
<span class="icon-[svg-spinners--wind-toy]"></span>
<span class="icon-[svg-spinners--blocks-wave]"></span>
<span class="icon-[line-md--compass-filled-loop]"></span>
</div>
</Card>
<Card class="mb-5" title="图标选择器(Iconify)">
<div class="flex items-center gap-5">
<IconPicker width="300px" />

17
playground/src/views/examples/drawer/index.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Page, useVbenDrawer } from '@vben/common-ui';
import { type DrawerPlacement, Page, useVbenDrawer } from '@vben/common-ui';
import { Button, Card } from 'ant-design-vue';
@@ -13,6 +13,7 @@ import SharedDataDemo from './shared-data-demo.vue';
const [BaseDrawer, baseDrawerApi] = useVbenDrawer({
// 连接抽离的组件
connectedComponent: BaseDemo,
// placement: 'left',
});
const [AutoHeightDrawer, autoHeightDrawerApi] = useVbenDrawer({
@@ -31,7 +32,8 @@ const [FormDrawer, formDrawerApi] = useVbenDrawer({
connectedComponent: FormDrawerDemo,
});
function openBaseDrawer() {
function openBaseDrawer(placement: DrawerPlacement = 'right') {
baseDrawerApi.setState({ placement });
baseDrawerApi.open();
}
@@ -81,7 +83,16 @@ function openFormDrawer() {
<Card class="mb-4" title="基本使用">
<p class="mb-3">一个基础的抽屉示例</p>
<Button type="primary" @click="openBaseDrawer">打开抽屉</Button>
<Button type="primary" @click="openBaseDrawer('right')">右侧打开</Button>
<Button class="ml-2" type="primary" @click="openBaseDrawer('bottom')">
底部打开
</Button>
<Button class="ml-2" type="primary" @click="openBaseDrawer('left')">
左侧打开
</Button>
<Button class="ml-2" type="primary" @click="openBaseDrawer('top')">
顶部打开
</Button>
</Card>
<Card class="mb-4" title="内容高度自适应滚动">

4
playground/src/views/examples/modal/auto-height-demo.vue
View File

@@ -22,10 +22,10 @@ const [Modal, modalApi] = useVbenModal({
});
function handleUpdate(len: number) {
modalApi.setState({ loading: true });
modalApi.setState({ confirmDisabled: true, loading: true });
setTimeout(() => {
list.value = Array.from({ length: len }, (_v, k) => k + 1);
modalApi.setState({ loading: false });
modalApi.setState({ confirmDisabled: false, loading: false });
}, 2000);
}
</script>