refactor: 升级框架补充
This commit is contained in:
104
packages/effects/layouts/src/widgets/help/help.vue
Normal file
104
packages/effects/layouts/src/widgets/help/help.vue
Normal file
@@ -0,0 +1,104 @@
|
||||
<script lang="ts" setup>
|
||||
import { $t } from '@vben/locales';
|
||||
import { openWindow } from '@vben/utils';
|
||||
|
||||
import { useVbenModal } from '@vben-core/popup-ui';
|
||||
import { Badge, VbenButton, VbenButtonGroup } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { useMagicKeys, whenever } from '@vueuse/core';
|
||||
|
||||
defineOptions({
|
||||
name: 'Help',
|
||||
});
|
||||
|
||||
const keys = useMagicKeys();
|
||||
whenever(keys['Alt+KeyH']!, () => {
|
||||
modalApi.open();
|
||||
});
|
||||
|
||||
const [Modal, modalApi] = useVbenModal({
|
||||
draggable: true,
|
||||
overlayBlur: 5,
|
||||
footer: false,
|
||||
onCancel() {
|
||||
modalApi.close();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Modal class="w-1/3" :title="$t('ui.widgets.qa')">
|
||||
<div class="mt-2 flex flex-col">
|
||||
<div class="mt-2 flex flex-col">
|
||||
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
|
||||
<p class="w-24 p-2">项目地址:</p>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
|
||||
"
|
||||
>
|
||||
Gitee
|
||||
</VbenButton>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
|
||||
"
|
||||
>
|
||||
Github
|
||||
</VbenButton>
|
||||
</VbenButtonGroup>
|
||||
|
||||
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
|
||||
<p class="w-24 p-2">issues:</p>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow(
|
||||
'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
|
||||
)
|
||||
"
|
||||
>
|
||||
Gitee
|
||||
</VbenButton>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="
|
||||
openWindow(
|
||||
'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
|
||||
)
|
||||
"
|
||||
>
|
||||
Github
|
||||
</VbenButton>
|
||||
</VbenButtonGroup>
|
||||
|
||||
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
|
||||
<p class="w-24 p-2">开发文档:</p>
|
||||
<VbenButton
|
||||
variant="link"
|
||||
@click="openWindow('https://doc.iocoder.cn/quick-start/')"
|
||||
>
|
||||
项目文档
|
||||
</VbenButton>
|
||||
<VbenButton variant="link" @click="openWindow('https://antdv.com/')">
|
||||
antdv 文档
|
||||
</VbenButton>
|
||||
</VbenButtonGroup>
|
||||
</div>
|
||||
<div class="mt-2 flex justify-start">
|
||||
<p class="w-24 p-2">软件外包:</p>
|
||||
<img
|
||||
src="/wx-xingyu.png"
|
||||
alt="数舵科技"
|
||||
class="cursor-pointer"
|
||||
@click="openWindow('https://shuduokeji.com')"
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-2 flex justify-center pt-4 text-sm italic">
|
||||
本项目采用 <Badge class="mx-2" variant="destructive">MIT</Badge>
|
||||
开源协议,个人与企业可100% 免费使用。
|
||||
</p>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
1
packages/effects/layouts/src/widgets/help/index.ts
Normal file
1
packages/effects/layouts/src/widgets/help/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as Help } from './help.vue';
|
||||
@@ -0,0 +1 @@
|
||||
export { default as TenantDropdown } from './tenant-dropdown.vue';
|
||||
@@ -0,0 +1,83 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { $t } from '@vben/locales';
|
||||
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@vben-core/shadcn-ui';
|
||||
|
||||
interface Tenant {
|
||||
id?: number;
|
||||
name: string;
|
||||
packageId: number;
|
||||
contactName: string;
|
||||
contactMobile: string;
|
||||
accountCount: number;
|
||||
expireTime: Date;
|
||||
website: string;
|
||||
status: number;
|
||||
}
|
||||
|
||||
defineOptions({
|
||||
name: 'TenantDropdown',
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
tenantList?: Tenant[];
|
||||
visitTenantId?: null | number;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
// 租户列表
|
||||
const tenants = computed(() => props.tenantList ?? []);
|
||||
|
||||
async function handleChange(id: number | undefined) {
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
const tenant = tenants.value.find((item) => item.id === id);
|
||||
|
||||
emit('success', tenant);
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="hover:bg-accent ml-1 mr-2 h-8 w-32 cursor-pointer rounded-full p-1.5"
|
||||
>
|
||||
<IconifyIcon icon="lucide:align-justify" class="mr-4" />
|
||||
{{ $t('page.tenant.placeholder') }}
|
||||
<!-- {{ tenants.find((item) => item.id === visitTenantId)?.name }} -->
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-40 p-0 pb-1">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
v-for="tenant in tenants"
|
||||
:key="tenant.id"
|
||||
:disabled="tenant.id === visitTenantId"
|
||||
class="mx-1 flex cursor-pointer items-center rounded-sm py-1 leading-8"
|
||||
@click="handleChange(tenant.id)"
|
||||
>
|
||||
<template v-if="tenant.id === visitTenantId">
|
||||
<IconifyIcon icon="lucide:check" class="mr-2" />
|
||||
{{ tenant.name }}
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ tenant.name }}
|
||||
</template>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
Reference in New Issue
Block a user