chore: format code
This commit is contained in:
parent
68229a4d2f
commit
35c3dd78ec
|
@ -3,6 +3,7 @@ dist
|
|||
.output.js
|
||||
node_modules
|
||||
.nvmrc
|
||||
coverage
|
||||
|
||||
|
||||
**/*.svg
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
dist
|
||||
public
|
||||
__tests__
|
||||
coverage
|
||||
|
|
|
@ -96,16 +96,16 @@ function handleNoticeClear() {
|
|||
<UserDropdown
|
||||
:avatar="preferences.app.defaultAvatar"
|
||||
:menus="menus"
|
||||
text="Vben Admin"
|
||||
description="ann.vben@gmail.com"
|
||||
tag-text="Pro"
|
||||
text="Vben Admin"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
</template>
|
||||
<template #notification>
|
||||
<Notification
|
||||
dot
|
||||
:notifications="notifications"
|
||||
dot
|
||||
@clear="handleNoticeClear"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -69,9 +69,9 @@ const loginLoading = computed(() => {
|
|||
|
||||
<template>
|
||||
<AuthenticationLogin
|
||||
username-placeholder="vben"
|
||||
password-placeholder="123456"
|
||||
:loading="loginLoading"
|
||||
password-placeholder="123456"
|
||||
username-placeholder="vben"
|
||||
@submit="handleLogin"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -3,5 +3,5 @@ import { Fallback } from '@vben/common-ui';
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Fallback status="500" :show-back="false" />
|
||||
<Fallback :show-back="false" status="500" />
|
||||
</template>
|
||||
|
|
|
@ -81,7 +81,41 @@ export async function perfectionist(): Promise<Linter.FlatConfig[]> {
|
|||
type: 'natural',
|
||||
},
|
||||
],
|
||||
'perfectionist/sort-vue-attributes': 'off',
|
||||
'perfectionist/sort-vue-attributes': [
|
||||
'error',
|
||||
{
|
||||
// Based on: https://vuejs.org/style-guide/rules-recommended.html#element-attribute-order
|
||||
'custom-groups': {
|
||||
/* eslint-disable perfectionist/sort-objects */
|
||||
DEFINITION: '*(is|:is|v-is)',
|
||||
LIST_RENDERING: 'v-for',
|
||||
CONDITIONALS: 'v-*(else-if|if|else|show|cloak)',
|
||||
RENDER_MODIFIERS: 'v-*(pre|once)',
|
||||
GLOBAL: '*(:id|id)',
|
||||
UNIQUE: '*(ref|key|:ref|:key)',
|
||||
SLOT: '*(v-slot|slot)',
|
||||
TWO_WAY_BINDING: '*(v-model|v-model:*)',
|
||||
// OTHER_DIRECTIVES e.g. 'v-custom-directive'
|
||||
EVENTS: '*(v-on|@*)',
|
||||
CONTENT: 'v-*(html|text)',
|
||||
/* eslint-enable perfectionist/sort-objects */
|
||||
},
|
||||
groups: [
|
||||
'DEFINITION',
|
||||
'LIST_RENDERING',
|
||||
'CONDITIONALS',
|
||||
'RENDER_MODIFIERS',
|
||||
'GLOBAL',
|
||||
'UNIQUE',
|
||||
'SLOT',
|
||||
'TWO_WAY_BINDING',
|
||||
'unknown',
|
||||
'EVENTS',
|
||||
'CONTENT',
|
||||
],
|
||||
type: 'natural',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
@ -65,8 +65,8 @@ const style = computed((): CSSProperties => {
|
|||
<template>
|
||||
<footer
|
||||
:class="b()"
|
||||
class="bottom-0 w-full transition-all duration-200"
|
||||
:style="style"
|
||||
class="bottom-0 w-full transition-all duration-200"
|
||||
>
|
||||
<slot></slot>
|
||||
</footer>
|
||||
|
|
|
@ -267,7 +267,7 @@ function handleScroll(event: Event) {
|
|||
<div v-if="slots.logo" :style="headerStyle">
|
||||
<slot name="logo"></slot>
|
||||
</div>
|
||||
<ScrollArea :style="contentStyle" :on-scroll="handleScroll">
|
||||
<ScrollArea :on-scroll="handleScroll" :style="contentStyle">
|
||||
<div :class="[e('shadow'), { scrolled }]"></div>
|
||||
<slot></slot>
|
||||
</ScrollArea>
|
||||
|
@ -282,8 +282,8 @@ function handleScroll(event: Event) {
|
|||
v-if="isSideMixed"
|
||||
ref="asideRef"
|
||||
:class="e('extra')"
|
||||
class="transition-[width] duration-200"
|
||||
:style="extraStyle"
|
||||
class="transition-[width] duration-200"
|
||||
>
|
||||
<SideCollapseButton
|
||||
v-if="isSideMixed && expandOnHover"
|
||||
|
@ -300,9 +300,9 @@ function handleScroll(event: Event) {
|
|||
<slot name="extra-title"></slot>
|
||||
</div>
|
||||
<ScrollArea
|
||||
:style="extraContentStyle"
|
||||
:class="e('extra-content')"
|
||||
:on-scroll="handleScroll"
|
||||
:style="extraContentStyle"
|
||||
>
|
||||
<div :class="[e('shadow'), { scrolled }]"></div>
|
||||
<slot name="extra"></slot>
|
||||
|
|
|
@ -46,6 +46,11 @@ interface VbenLayoutProps {
|
|||
* @default #fff
|
||||
*/
|
||||
footerBackgroundColor?: string;
|
||||
/**
|
||||
* footer 是否可见
|
||||
* @default false
|
||||
*/
|
||||
footerEnable?: boolean;
|
||||
/**
|
||||
* footer 是否固定
|
||||
* @default true
|
||||
|
@ -56,11 +61,6 @@ interface VbenLayoutProps {
|
|||
* @default 32
|
||||
*/
|
||||
footerHeight?: number;
|
||||
/**
|
||||
* footer 是否可见
|
||||
* @default false
|
||||
*/
|
||||
footerVisible?: boolean;
|
||||
/**
|
||||
* 背景颜色
|
||||
* @default #fff
|
||||
|
|
|
@ -26,10 +26,10 @@ const props = withDefaults(defineProps<Props>(), {
|
|||
contentPaddingLeft: 0,
|
||||
contentPaddingRight: 0,
|
||||
contentPaddingTop: 0,
|
||||
footerEnable: false,
|
||||
// footerBackgroundColor: '#fff',
|
||||
footerFixed: true,
|
||||
footerHeight: 32,
|
||||
footerVisible: false,
|
||||
// headerBackgroundColor: 'hsl(var(--color-background))',
|
||||
headerHeight: 50,
|
||||
headerHeightOffset: 10,
|
||||
|
@ -323,7 +323,7 @@ const contentStyle = computed((): CSSProperties => {
|
|||
(!isHeaderAuto.value || scrollY.value < headerWrapperHeight.value)
|
||||
? `${headerWrapperHeight.value}px`
|
||||
: 0,
|
||||
paddingBottom: `${props.footerVisible ? props.footerHeight : 0}px`,
|
||||
paddingBottom: `${props.footerEnable ? props.footerHeight : 0}px`,
|
||||
};
|
||||
});
|
||||
|
||||
|
@ -465,19 +465,19 @@ function handleOpenMenu() {
|
|||
<LayoutSide
|
||||
v-if="sideVisibleState"
|
||||
v-model:collapse="sideCollapse"
|
||||
v-model:extra-collapse="sideExtraCollapse"
|
||||
v-model:expand-on-hovering="sideExpandOnHovering"
|
||||
v-model:expand-on-hover="sideExpandOnHover"
|
||||
v-model:expand-on-hovering="sideExpandOnHovering"
|
||||
v-model:extra-collapse="sideExtraCollapse"
|
||||
v-model:extra-visible="sideExtraVisible"
|
||||
:dom-visible="!isMobile"
|
||||
:fixed-extra="sideExpandOnHover"
|
||||
:mixed-width="sideMixedWidth"
|
||||
:header-height="isMixedNav ? 0 : getHeaderHeight"
|
||||
:collapse-width="getSideCollapseWidth"
|
||||
:dom-visible="!isMobile"
|
||||
:extra-width="getExtraWidth"
|
||||
:fixed-extra="sideExpandOnHover"
|
||||
:header-height="isMixedNav ? 0 : getHeaderHeight"
|
||||
:is-side-mixed="isSideMixedNav"
|
||||
:mixed-width="sideMixedWidth"
|
||||
:padding-top="sidePaddingTop"
|
||||
:show="showSide"
|
||||
:extra-width="getExtraWidth"
|
||||
:width="getSideWidth"
|
||||
:z-index="sideZIndex"
|
||||
v-bind="sideFace"
|
||||
|
@ -513,16 +513,16 @@ function handleOpenMenu() {
|
|||
v-if="headerVisible"
|
||||
:full-width="!isSideMode"
|
||||
:height="getHeaderHeight"
|
||||
:show="!fullContent && !headerHidden"
|
||||
:side-hidden="sideHidden"
|
||||
:show-toggle-btn="showHeaderToggleButton"
|
||||
:width="mainStyle.width"
|
||||
:is-mixed-nav="isMixedNav"
|
||||
:is-mobile="isMobile"
|
||||
:z-index="headerZIndex"
|
||||
:show="!fullContent && !headerHidden"
|
||||
:show-toggle-btn="showHeaderToggleButton"
|
||||
:side-hidden="sideHidden"
|
||||
:side-width="sideWidth"
|
||||
@toggle-menu="handleToggleMenu"
|
||||
:width="mainStyle.width"
|
||||
:z-index="headerZIndex"
|
||||
@open-menu="handleOpenMenu"
|
||||
@toggle-menu="handleToggleMenu"
|
||||
>
|
||||
<template v-if="showHeaderLogo" #logo>
|
||||
<slot name="logo"></slot>
|
||||
|
@ -540,8 +540,6 @@ function handleOpenMenu() {
|
|||
|
||||
<!-- </div> -->
|
||||
<LayoutContent
|
||||
class="transition-[margin-top] duration-200"
|
||||
:style="contentStyle"
|
||||
:content-compact="contentCompact"
|
||||
:content-compact-width="contentCompactWidth"
|
||||
:padding="contentPadding"
|
||||
|
@ -549,12 +547,14 @@ function handleOpenMenu() {
|
|||
:padding-left="contentPaddingLeft"
|
||||
:padding-right="contentPaddingRight"
|
||||
:padding-top="contentPaddingTop"
|
||||
:style="contentStyle"
|
||||
class="transition-[margin-top] duration-200"
|
||||
>
|
||||
<slot name="content"></slot>
|
||||
</LayoutContent>
|
||||
|
||||
<LayoutFooter
|
||||
v-if="footerVisible"
|
||||
v-if="footerEnable"
|
||||
:fixed="footerFixed"
|
||||
:height="footerHeight"
|
||||
:show="!fullContent"
|
||||
|
@ -566,8 +566,8 @@ function handleOpenMenu() {
|
|||
</div>
|
||||
<div
|
||||
v-if="maskVisible"
|
||||
class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
|
||||
:style="maskStyle"
|
||||
class="fixed left-0 top-0 h-full w-full bg-[rgb(0_0_0_/_40%)] transition-[background-color] duration-200"
|
||||
@click="handleClickMask"
|
||||
></div>
|
||||
</div>
|
||||
|
|
|
@ -334,7 +334,7 @@ function removeMenuItem(item: MenuItemRegistered) {
|
|||
<template v-for="item in getSlot.slotDefault" :key="item.key">
|
||||
<component :is="item" />
|
||||
</template>
|
||||
<SubMenu path="sub-menu-more" is-sub-menu-more>
|
||||
<SubMenu is-sub-menu-more path="sub-menu-more">
|
||||
<template #title>
|
||||
<IcRoundMoreHoriz />
|
||||
</template>
|
||||
|
|
|
@ -214,11 +214,11 @@ onBeforeUnmount(() => {
|
|||
<template #trigger>
|
||||
<SubMenuContent
|
||||
:class="is('active', active)"
|
||||
:icon="icon"
|
||||
:is-menu-more="isSubMenuMore"
|
||||
:is-top-level-menu-submenu="isTopLevelMenuSubmenu"
|
||||
:level="currentLevel"
|
||||
:path="path"
|
||||
:icon="icon"
|
||||
:is-menu-more="isSubMenuMore"
|
||||
@click.stop="handleClick"
|
||||
>
|
||||
<template #title>
|
||||
|
@ -244,12 +244,12 @@ onBeforeUnmount(() => {
|
|||
|
||||
<template v-else>
|
||||
<SubMenuContent
|
||||
:class="is('active', active)"
|
||||
:icon="icon"
|
||||
:is-menu-more="isSubMenuMore"
|
||||
:is-top-level-menu-submenu="isTopLevelMenuSubmenu"
|
||||
:level="currentLevel"
|
||||
:path="path"
|
||||
:icon="icon"
|
||||
:is-menu-more="isSubMenuMore"
|
||||
:class="is('active', active)"
|
||||
@click.stop="handleClick"
|
||||
>
|
||||
<slot name="content"></slot>
|
||||
|
|
|
@ -37,19 +37,19 @@ const hasChildren = computed(() => {
|
|||
<MenuItem
|
||||
v-if="!hasChildren"
|
||||
:key="menu.path"
|
||||
:path="menu.path"
|
||||
:icon="menu.icon"
|
||||
:badge="menu.badge"
|
||||
:badge-type="menu.badgeType"
|
||||
:badge-variants="menu.badgeVariants"
|
||||
:icon="menu.icon"
|
||||
:path="menu.path"
|
||||
>
|
||||
<template #title>{{ menu.name }}</template>
|
||||
</MenuItem>
|
||||
<SubMenuComp
|
||||
v-else
|
||||
:key="`${menu.path}_sub`"
|
||||
:path="menu.path"
|
||||
:icon="menu.icon"
|
||||
:path="menu.path"
|
||||
>
|
||||
<template #content>
|
||||
<VbenMenuBadge
|
||||
|
|
|
@ -41,8 +41,8 @@ const text = computed(() => {
|
|||
</Avatar>
|
||||
<span
|
||||
v-if="dot"
|
||||
class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
|
||||
:class="dotClass"
|
||||
class="border-background absolute bottom-0 right-0 size-3 rounded-full border-2"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
@ -34,8 +34,8 @@ function handleClick(path?: string) {
|
|||
<span class="flex-center h-full">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="mr-1 size-5 flex-shrink-0"
|
||||
:icon="item.icon"
|
||||
class="mr-1 size-5 flex-shrink-0"
|
||||
/>
|
||||
<span
|
||||
:class="{
|
||||
|
|
|
@ -53,8 +53,8 @@ function handleClick(path?: string) {
|
|||
<DropdownMenuTrigger class="flex items-center gap-1">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="size-5"
|
||||
:icon="item.icon"
|
||||
class="size-5"
|
||||
/>
|
||||
{{ item.title }}
|
||||
<IcRoundKeyboardArrowDown class="size-5" />
|
||||
|
@ -79,9 +79,9 @@ function handleClick(path?: string) {
|
|||
<div class="flex-center">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="mr-1 size-4"
|
||||
:class="{ 'size-5': item.isHome }"
|
||||
:icon="item.icon"
|
||||
class="mr-1 size-4"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
|
@ -90,9 +90,9 @@ function handleClick(path?: string) {
|
|||
<div class="flex-center">
|
||||
<VbenIcon
|
||||
v-if="item.icon && showIcon"
|
||||
class="mr-1 size-4"
|
||||
:class="{ 'size-5': item.isHome }"
|
||||
:icon="item.icon"
|
||||
class="mr-1 size-4"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
|
|
|
@ -72,10 +72,10 @@ function handleClick(menu: IContextMenuItem) {
|
|||
>
|
||||
<template v-for="menu in menusView" :key="menu.key">
|
||||
<ContextMenuItem
|
||||
:inset="menu.inset || !menu.icon"
|
||||
:disabled="menu.disabled"
|
||||
class="cursor-pointer"
|
||||
:class="itemClass"
|
||||
:disabled="menu.disabled"
|
||||
:inset="menu.inset || !menu.icon"
|
||||
class="cursor-pointer"
|
||||
@click="handleClick(menu)"
|
||||
>
|
||||
<component
|
||||
|
|
|
@ -22,24 +22,24 @@ function handleItemClick(value: string) {
|
|||
</script>
|
||||
<template>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger class="flex items-center gap-1" as-child>
|
||||
<DropdownMenuTrigger as-child class="flex items-center gap-1">
|
||||
<slot></slot>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start">
|
||||
<DropdownMenuGroup>
|
||||
<template v-for="menu in menus" :key="menu.key">
|
||||
<DropdownMenuItem
|
||||
class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
|
||||
:class="
|
||||
menu.key === modelValue ? 'bg-accent text-accent-foreground' : ''
|
||||
"
|
||||
class="data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground text-foreground/80 mb-1 cursor-pointer"
|
||||
@click="handleItemClick(menu.key)"
|
||||
>
|
||||
<component :is="menu.icon" v-if="menu.icon" class="mr-2 size-4" />
|
||||
<span
|
||||
v-if="!menu.icon"
|
||||
class="mr-2 size-1.5 rounded-full"
|
||||
:class="menu.key === modelValue ? 'bg-foreground' : ''"
|
||||
class="mr-2 size-1.5 rounded-full"
|
||||
></span>
|
||||
{{ menu.text }}
|
||||
</DropdownMenuItem>
|
||||
|
|
|
@ -16,18 +16,18 @@ const handleMenuItemClick = (_item) => {
|
|||
<template>
|
||||
<div class="fixed bottom-5 right-5 flex flex-col-reverse items-center gap-2">
|
||||
<button
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white transition-transform duration-300"
|
||||
:class="{ 'rotate-45': isMenuOpen }"
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white transition-transform duration-300"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
✖
|
||||
</button>
|
||||
<div
|
||||
class="absolute bottom-16 right-0 flex flex-col-reverse gap-2 transition-all duration-300"
|
||||
:class="{
|
||||
'visible translate-y-0 opacity-100': isMenuOpen,
|
||||
'invisible translate-y-2 opacity-0': !isMenuOpen,
|
||||
}"
|
||||
class="absolute bottom-16 right-0 flex flex-col-reverse gap-2 transition-all duration-300"
|
||||
>
|
||||
<button
|
||||
v-for="(item, index) in menuItems"
|
||||
|
|
|
@ -54,11 +54,11 @@ function checkPasswordStrength(password: string) {
|
|||
class="dark:bg-input-background bg-heavy relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0"
|
||||
>
|
||||
<span
|
||||
class="absolute left-0 h-full w-0 rounded-sm transition-all duration-500"
|
||||
:style="{
|
||||
backgroundColor: currentColor,
|
||||
width: currentStrength >= index ? '100%' : '',
|
||||
}"
|
||||
class="absolute left-0 h-full w-0 rounded-sm transition-all duration-500"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -32,8 +32,8 @@ const inputClass = computed(() => {
|
|||
:id="name"
|
||||
v-model="modelValue"
|
||||
:class="[props.class, inputClass]"
|
||||
class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
autocomplete="off"
|
||||
class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
required
|
||||
type="text"
|
||||
v-bind="$attrs"
|
||||
|
|
|
@ -51,16 +51,16 @@ const logoClass = computed(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group flex h-full items-center text-lg" :class="logoClass">
|
||||
<div :class="logoClass" class="group flex h-full items-center text-lg">
|
||||
<a
|
||||
:class="$attrs.class"
|
||||
:href="href"
|
||||
class="flex h-full items-center gap-2 overflow-hidden px-3 font-semibold leading-normal transition-all duration-500"
|
||||
:class="$attrs.class"
|
||||
>
|
||||
<img
|
||||
v-if="src"
|
||||
:src="src"
|
||||
:alt="alt"
|
||||
:src="src"
|
||||
:width="logoSize"
|
||||
class="relative rounded-none bg-transparent"
|
||||
/>
|
||||
|
|
|
@ -14,15 +14,15 @@ withDefaults(defineProps<Props>(), {
|
|||
<template>
|
||||
<span class="relative mr-1 flex size-1.5">
|
||||
<span
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
|
||||
:class="dotClass"
|
||||
:style="dotStyle"
|
||||
class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
class="relative inline-flex size-1.5 rounded-full"
|
||||
:class="dotClass"
|
||||
:style="dotStyle"
|
||||
class="relative inline-flex size-1.5 rounded-full"
|
||||
></span>
|
||||
</span>
|
||||
</template>
|
||||
|
|
|
@ -43,7 +43,7 @@ const badgeStyle = computed(() => {
|
|||
});
|
||||
</script>
|
||||
<template>
|
||||
<span v-if="isDot || badge" class="absolute right-5" :class="$attrs.class">
|
||||
<span v-if="isDot || badge" :class="$attrs.class" class="absolute right-5">
|
||||
<BadgeDot v-if="isDot" :dot-class="badgeClass" :dot-style="badgeStyle" />
|
||||
<div
|
||||
v-else
|
||||
|
|
|
@ -56,10 +56,10 @@ function handleComplete(e: string[]) {
|
|||
<PinInput
|
||||
:id="name"
|
||||
v-model="inputValue"
|
||||
:class="inputClass"
|
||||
class="flex justify-between"
|
||||
otp
|
||||
placeholder="○"
|
||||
class="flex justify-between"
|
||||
:class="inputClass"
|
||||
type="number"
|
||||
@complete="handleComplete"
|
||||
>
|
||||
|
@ -71,10 +71,10 @@ function handleComplete(e: string[]) {
|
|||
/>
|
||||
</PinInputGroup>
|
||||
<VbenButton
|
||||
:loading="btnLoading"
|
||||
class="w-[300px] xl:w-full"
|
||||
size="lg"
|
||||
variant="outline"
|
||||
:loading="btnLoading"
|
||||
@click="handleSendCode"
|
||||
>
|
||||
{{ btnText }}
|
||||
|
|
|
@ -7,7 +7,7 @@ const props = defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<nav aria-label="breadcrumb" role="navigation" :class="props.class">
|
||||
<nav :class="props.class" aria-label="breadcrumb" role="navigation">
|
||||
<slot></slot>
|
||||
</nav>
|
||||
</template>
|
||||
|
|
|
@ -12,9 +12,9 @@ const props = defineProps<{
|
|||
|
||||
<template>
|
||||
<span
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
:class="cn('flex h-9 w-9 items-center justify-center', props.class)"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
>
|
||||
<slot>
|
||||
<DotsHorizontalIcon class="h-4 w-4" />
|
||||
|
|
|
@ -10,10 +10,10 @@ const props = defineProps<{
|
|||
|
||||
<template>
|
||||
<span
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
:class="cn('text-foreground font-normal', props.class)"
|
||||
aria-current="page"
|
||||
aria-disabled="true"
|
||||
role="link"
|
||||
>
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
|
|
@ -12,9 +12,9 @@ const props = defineProps<{
|
|||
|
||||
<template>
|
||||
<li
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
:class="cn('[&>svg]:size-3.5', props.class)"
|
||||
aria-hidden="true"
|
||||
role="presentation"
|
||||
>
|
||||
<slot>
|
||||
<ChevronRightIcon />
|
||||
|
|
|
@ -37,8 +37,8 @@ const delegatedProps = computed(() => {
|
|||
:class="cn('relative overflow-hidden', props.class)"
|
||||
>
|
||||
<ScrollAreaViewport
|
||||
class="h-full w-full rounded-[inherit]"
|
||||
as-child
|
||||
class="h-full w-full rounded-[inherit]"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<slot></slot>
|
||||
|
|
|
@ -12,10 +12,10 @@ const { b, e } = useNamespace('chrome-tab-background');
|
|||
<div :class="b()">
|
||||
<div :class="e('divider')"></div>
|
||||
<div :class="e('content')"></div>
|
||||
<svg width="10" height="10" :class="e('before')">
|
||||
<svg :class="e('before')" height="10" width="10">
|
||||
<path d="M 0 10 A 10 10 0 0 0 10 0 L 10 10 Z" />
|
||||
</svg>
|
||||
<svg width="10" height="10" :class="e('after')">
|
||||
<svg :class="e('after')" height="10" width="10">
|
||||
<path d="M 0 0 A 10 10 0 0 0 10 10 L 0 10 Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
@ -39,7 +39,7 @@ function handleUnPushPin() {
|
|||
|
||||
<template>
|
||||
<div :class="[b()]">
|
||||
<VbenContextMenu :menus="menus" :handler-data="tab" item-class="pr-4">
|
||||
<VbenContextMenu :handler-data="tab" :menus="menus" item-class="pr-4">
|
||||
<div class="h-full">
|
||||
<TabBackground />
|
||||
<div :class="e('content')" :title="title">
|
||||
|
|
|
@ -89,18 +89,18 @@ function handleUnPushPin(tab: TabItem) {
|
|||
<Tab
|
||||
v-for="(tab, i) in tabsView"
|
||||
:key="tab.key"
|
||||
:menus="menus"
|
||||
:tab="tab"
|
||||
:icon="tab.icon"
|
||||
:title="tab.title"
|
||||
:show-icon="showIcon"
|
||||
:affix-tab="tab.affixTab"
|
||||
:only-one="tabsView.length <= 1"
|
||||
:class="[e('tab'), is('active', tab.key === active)]"
|
||||
:icon="tab.icon"
|
||||
:menus="menus"
|
||||
:only-one="tabsView.length <= 1"
|
||||
:show-icon="showIcon"
|
||||
:style="{
|
||||
width: `${tabWidth}px`,
|
||||
left: `${(tabWidth - gap * 2) * i}px`,
|
||||
}"
|
||||
:tab="tab"
|
||||
:title="tab.title"
|
||||
@click="active = tab.key"
|
||||
@close="() => handleClose(tab.key)"
|
||||
@un-push-pin="() => handleUnPushPin(tab)"
|
||||
|
|
|
@ -125,26 +125,26 @@ onBeforeUnmount(() => {
|
|||
</Title>
|
||||
<VbenInput
|
||||
v-model="formState.phoneNumber"
|
||||
:status="phoneNumberStatus"
|
||||
:autofocus="true"
|
||||
:error-tip="$t('authentication.mobile-tip')"
|
||||
:label="$t('authentication.mobile')"
|
||||
:placeholder="$t('authentication.mobile')"
|
||||
:status="phoneNumberStatus"
|
||||
name="phoneNumber"
|
||||
type="number"
|
||||
:placeholder="$t('authentication.mobile')"
|
||||
:autofocus="true"
|
||||
@keyup.enter="handleSubmit"
|
||||
/>
|
||||
<VbenPinInput
|
||||
v-model="formState.code"
|
||||
:handle-send-code="handleSendCode"
|
||||
:status="codeStatus"
|
||||
:btn-loading="btnLoading"
|
||||
:btn-text="btnText"
|
||||
:code-length="4"
|
||||
:error-tip="$t('authentication.code-tip')"
|
||||
:handle-send-code="handleSendCode"
|
||||
:label="$t('authentication.code')"
|
||||
name="password"
|
||||
:placeholder="$t('authentication.code')"
|
||||
:btn-text="btnText"
|
||||
:btn-loading="btnLoading"
|
||||
:status="codeStatus"
|
||||
name="password"
|
||||
@keyup.enter="handleSubmit"
|
||||
/>
|
||||
<VbenButton :loading="loading" class="mt-2 w-full" @click="handleSubmit">
|
||||
|
|
|
@ -65,11 +65,11 @@ function goLogin() {
|
|||
<div class="mb-6">
|
||||
<VbenInput
|
||||
v-model="formState.email"
|
||||
:status="emailStatus"
|
||||
:error-tip="$t('authentication.email-tip')"
|
||||
:label="$t('authentication.email')"
|
||||
name="email"
|
||||
:status="emailStatus"
|
||||
autofocus
|
||||
name="email"
|
||||
placeholder="example@example.com"
|
||||
type="text"
|
||||
/>
|
||||
|
|
|
@ -160,22 +160,22 @@ function handleGo(path: string) {
|
|||
|
||||
<VbenInput
|
||||
v-model="formState.username"
|
||||
:status="usernameStatus"
|
||||
:autofocus="false"
|
||||
:error-tip="$t('authentication.username-tip')"
|
||||
:label="$t('authentication.username')"
|
||||
name="username"
|
||||
:placeholder="usernamePlaceholder || $t('authentication.username')"
|
||||
type="text"
|
||||
:status="usernameStatus"
|
||||
name="username"
|
||||
required
|
||||
:autofocus="false"
|
||||
type="text"
|
||||
/>
|
||||
<VbenInputPassword
|
||||
v-model="formState.password"
|
||||
:status="passwordStatus"
|
||||
:error-tip="$t('authentication.password-tip')"
|
||||
:label="$t('authentication.password')"
|
||||
name="password"
|
||||
:placeholder="passwordPlaceholder || $t('authentication.password')"
|
||||
:status="passwordStatus"
|
||||
name="password"
|
||||
required
|
||||
type="password"
|
||||
/>
|
||||
|
@ -205,16 +205,16 @@ function handleGo(path: string) {
|
|||
<div class="mb-2 mt-4 flex items-center justify-between">
|
||||
<VbenButton
|
||||
v-if="showCodeLogin"
|
||||
variant="outline"
|
||||
class="w-1/2"
|
||||
variant="outline"
|
||||
@click="handleGo(codeLoginPath)"
|
||||
>
|
||||
{{ $t('authentication.mobile-login') }}
|
||||
</VbenButton>
|
||||
<VbenButton
|
||||
v-if="showQrcodeLogin"
|
||||
variant="outline"
|
||||
class="ml-4 w-1/2"
|
||||
variant="outline"
|
||||
@click="handleGo(qrCodeLoginPath)"
|
||||
>
|
||||
{{ $t('authentication.qrcode-login') }}
|
||||
|
|
|
@ -90,24 +90,24 @@ function goLogin() {
|
|||
</Title>
|
||||
<VbenInput
|
||||
v-model="formState.username"
|
||||
:status="usernameStatus"
|
||||
:error-tip="$t('authentication.username-tip')"
|
||||
:label="$t('authentication.username')"
|
||||
name="username"
|
||||
:placeholder="$t('authentication.username')"
|
||||
:status="usernameStatus"
|
||||
name="username"
|
||||
type="text"
|
||||
/>
|
||||
<!-- Use 8 or more characters with a mix of letters, numbers & symbols. -->
|
||||
<VbenInputPassword
|
||||
v-model="formState.password"
|
||||
:status="passwordStatus"
|
||||
:error-tip="$t('authentication.password-tip')"
|
||||
:label="$t('authentication.password')"
|
||||
name="password"
|
||||
:password-strength="true"
|
||||
:placeholder="$t('authentication.password')"
|
||||
:status="passwordStatus"
|
||||
name="password"
|
||||
required
|
||||
type="password"
|
||||
:password-strength="true"
|
||||
>
|
||||
<template #strengthText>
|
||||
{{ $t('authentication.password-strength') }}
|
||||
|
@ -116,11 +116,11 @@ function goLogin() {
|
|||
|
||||
<VbenInputPassword
|
||||
v-model="formState.comfirmPassword"
|
||||
:status="comfirmPasswordStatus"
|
||||
:error-tip="$t('authentication.comfirm-password-tip')"
|
||||
:label="$t('authentication.comfirm-password')"
|
||||
name="comfirmPassword"
|
||||
:placeholder="$t('authentication.comfirm-password')"
|
||||
:status="comfirmPasswordStatus"
|
||||
name="comfirmPassword"
|
||||
required
|
||||
type="password"
|
||||
/>
|
||||
|
|
|
@ -31,13 +31,13 @@ function handleUpdate(value: string) {
|
|||
@click="handleUpdate(color)"
|
||||
>
|
||||
<div
|
||||
class="relative h-3.5 w-3.5 rounded-[2px] before:absolute before:left-0.5 before:top-0.5 before:h-2.5 before:w-2.5 before:rounded-[2px] before:border before:border-gray-900 before:opacity-0 before:transition-all before:duration-150 before:content-[''] hover:scale-110"
|
||||
:class="[
|
||||
preferences.theme.colorPrimary === color
|
||||
? `before:opacity-100`
|
||||
: '',
|
||||
]"
|
||||
:style="{ backgroundColor: color }"
|
||||
class="relative h-3.5 w-3.5 rounded-[2px] before:absolute before:left-0.5 before:top-0.5 before:h-2.5 before:w-2.5 before:rounded-[2px] before:border before:border-gray-900 before:opacity-0 before:transition-all before:duration-150 before:content-[''] hover:scale-110"
|
||||
></div>
|
||||
</VbenIconButton>
|
||||
</template>
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import type { AuthPageLayoutType } from '@vben-core/preferences';
|
||||
import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
|
||||
|
||||
import { computed } from 'vue';
|
||||
|
@ -6,7 +7,6 @@ import { computed } from 'vue';
|
|||
import { $t } from '@vben/locales';
|
||||
import { MdiDockBottom, MdiDockLeft, MdiDockRight } from '@vben-core/iconify';
|
||||
import {
|
||||
type AuthPageLayoutType,
|
||||
preferences,
|
||||
updatePreferences,
|
||||
usePreferences,
|
||||
|
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="586"
|
||||
height="659.29778"
|
||||
viewBox="0 0 586 659.29778"
|
||||
width="586"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<circle cx="332.47856" cy="254" r="254.00001" fill="#f2f2f2" />
|
||||
<circle cx="332.47856" cy="254" fill="#f2f2f2" r="254.00001" />
|
||||
<path
|
||||
d="M498.46363,113.58835H33.17063c-.99774-.02133-1.78931-.84746-1.76797-1.84521,.02069-.96771,.80026-1.74727,1.76797-1.76796H498.46363c.99774,.02133,1.78931,.84746,1.76794,1.84521-.02069,.96771-.80023,1.74727-1.76794,1.76796Z"
|
||||
fill="#cacaca"
|
||||
/>
|
||||
<rect
|
||||
x="193.77441"
|
||||
y="174.47256"
|
||||
width="163.61147"
|
||||
fill="#fff"
|
||||
height="34.98639"
|
||||
rx="17.49318"
|
||||
ry="17.49318"
|
||||
fill="#fff"
|
||||
width="163.61147"
|
||||
x="193.77441"
|
||||
y="174.47256"
|
||||
/>
|
||||
<path
|
||||
d="M128.17493,244.44534H422.98542c9.66122,0,17.49316,7.83197,17.49316,17.49319h0c0,9.66122-7.83194,17.49319-17.49316,17.49319H128.17493c-9.66122,0-17.49318-7.83197-17.49318-17.49319h0c0-9.66122,7.83196-17.49319,17.49318-17.49319Z"
|
||||
|
@ -33,16 +33,16 @@
|
|||
fill="#f2f2f2"
|
||||
/>
|
||||
<polygon
|
||||
points="171.30016 646.86102 182.10017 646.85999 187.23916 605.198 171.29716 605.19897 171.30016 646.86102"
|
||||
fill="#a0616a"
|
||||
points="171.30016 646.86102 182.10017 646.85999 187.23916 605.198 171.29716 605.19897 171.30016 646.86102"
|
||||
/>
|
||||
<path
|
||||
d="M170.9192,658.12816l33.21436-.00122v-.41998c-.00049-7.13965-5.78833-12.92737-12.92798-12.92773h-.00079l-6.06702-4.60278-11.3197,4.60345-2.89941,.00012,.00055,13.34814Z"
|
||||
fill="#2f2e41"
|
||||
/>
|
||||
<polygon
|
||||
points="84.74116 616.94501 93.38016 623.42603 122.49316 593.185 109.74116 583.61902 84.74116 616.94501"
|
||||
fill="#a0616a"
|
||||
points="84.74116 616.94501 93.38016 623.42603 122.49316 593.185 109.74116 583.61902 84.74116 616.94501"
|
||||
/>
|
||||
<path
|
||||
d="M77.67448,625.72966l26.569,19.93188,.25208-.336c4.2843-5.71136,3.12799-13.81433-2.58279-18.09937l-.00064-.00049-2.09079-7.32275-11.81735-3.11102-2.31931-1.73993-8.01019,10.67767Z"
|
||||
|
@ -64,7 +64,7 @@
|
|||
d="M157.62488,302.62425l-5.26666-.55807c-4.86633-.50473-9.64093,1.57941-12.57947,5.491-1.12549,1.48346-1.9339,3.18253-2.37491,4.99164l-.00317,.01447c-1.32108,5.44534,.75095,11.15201,5.25803,14.48117l18.19031,13.41101c12.76544,17.24899,36.75653,28.69272,64.89832,37.98978l43.74274-27.16666-15.47186-18.73843-30.00336,16.0798-44.59833-34.52374-.0257-.02075-16.97424-10.936-4.79169-.5152Z"
|
||||
fill="#3f3d56"
|
||||
/>
|
||||
<circle cx="167.29993" cy="248.60526" r="24.9798" fill="#a0616a" />
|
||||
<circle cx="167.29993" cy="248.60526" fill="#a0616a" r="24.9798" />
|
||||
<path
|
||||
d="M167.8769,273.59047c-.20135,.00662-.4032,.01108-.6048,.01657-.0863,.22388-.17938,.44583-.2868,.66357l.8916-.68015Z"
|
||||
fill="#2f2e41"
|
||||
|
@ -80,9 +80,9 @@
|
|||
<circle
|
||||
cx="281.3585"
|
||||
cy="285.71051"
|
||||
fill="hsl(var(--color-primary))"
|
||||
r="51.12006"
|
||||
transform="translate(-26.58509 542.54478) rotate(-85.26884)"
|
||||
fill="hsl(var(--color-primary))"
|
||||
/>
|
||||
<path
|
||||
d="M294.78675,264.41051l-13.42828,13.42828-13.42828-13.42828c-2.17371-2.17374-5.69806-2.17374-7.87177,0s-2.17371,5.69803,0,7.87177l13.42828,13.42828-13.42828,13.42828c-2.17169,2.17575-2.1684,5.70007,.00739,7.87177,2.17285,2.16879,5.69153,2.16879,7.86438-.00003l13.42828-13.42828,13.42828,13.42828c2.17578,2.17169,5.70007,2.1684,7.87177-.00735,2.16882-2.17288,2.16882-5.6915,0-7.86438l-13.42828-13.42828,13.42828-13.42828c2.17371-2.17374,2.17371-5.69803,0-7.87177s-5.69806-2.17374-7.87177,0h0Z"
|
||||
|
@ -104,23 +104,23 @@
|
|||
<ellipse
|
||||
cx="56.77685"
|
||||
cy="82.05834"
|
||||
fill="#3f3d56"
|
||||
rx="8.45661"
|
||||
ry="8.64507"
|
||||
fill="#3f3d56"
|
||||
/>
|
||||
<ellipse
|
||||
cx="85.9906"
|
||||
cy="82.05834"
|
||||
fill="#3f3d56"
|
||||
rx="8.45661"
|
||||
ry="8.64507"
|
||||
fill="#3f3d56"
|
||||
/>
|
||||
<ellipse
|
||||
cx="115.20435"
|
||||
cy="82.05834"
|
||||
fill="#3f3d56"
|
||||
rx="8.45661"
|
||||
ry="8.64507"
|
||||
fill="#3f3d56"
|
||||
/>
|
||||
<path
|
||||
d="M148.51577,88.89113c-.25977,0-.51904-.10059-.71484-.30078l-5.70605-5.83301c-.38037-.38867-.38037-1.00977,0-1.39844l5.70605-5.83252c.38721-.39453,1.021-.40088,1.41406-.01562,.39502,.38623,.40186,1.01953,.01562,1.41406l-5.02197,5.1333,5.02197,5.13379c.38623,.39453,.37939,1.02783-.01562,1.41406-.19434,.19043-.44678,.28516-.69922,.28516Z"
|
||||
|
|
|
@ -1,215 +1,215 @@
|
|||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="1119"
|
||||
height="699"
|
||||
viewBox="0 0 1119 699"
|
||||
width="1119"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
>
|
||||
<title>server down</title>
|
||||
<circle cx="292.60911" cy="213" r="213" fill="#f2f2f2" />
|
||||
<circle cx="292.60911" cy="213" fill="#f2f2f2" r="213" />
|
||||
<path
|
||||
d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#2f2e41"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="hsl(var(--color-primary))"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="hsl(var(--color-primary))"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#2f2e41"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#a8a8a8"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
opacity="0.2"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="#3f3d56" />
|
||||
<ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1" />
|
||||
<ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="#3f3d56" />
|
||||
<ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="#3f3d56" />
|
||||
<ellipse cx="198.60911" cy="424.5" fill="#3f3d56" rx="187" ry="25.43993" />
|
||||
<ellipse cx="198.60911" cy="424.5" opacity="0.1" rx="157" ry="21.35866" />
|
||||
<ellipse cx="836.60911" cy="660.5" fill="#3f3d56" rx="283" ry="38.5" />
|
||||
<ellipse cx="310.60911" cy="645.5" fill="#3f3d56" rx="170" ry="23.12721" />
|
||||
<path
|
||||
d="M494,726.5c90,23,263-30,282-90"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="none"
|
||||
stroke="#2f2e41"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="2"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M341,359.5s130-36,138,80-107,149-17,172"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="none"
|
||||
stroke="#2f2e41"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="2"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="none"
|
||||
stroke="#2f2e41"
|
||||
stroke-miterlimit="10"
|
||||
stroke-width="2"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#2f2e41"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
opacity="0.1"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<rect
|
||||
x="578.43291"
|
||||
y="212.68859"
|
||||
width="513.25314"
|
||||
fill="#2f2e41"
|
||||
height="357.51989"
|
||||
rx="18.04568"
|
||||
fill="#2f2e41"
|
||||
width="513.25314"
|
||||
x="578.43291"
|
||||
y="212.68859"
|
||||
/>
|
||||
<rect
|
||||
fill="#3f3d56"
|
||||
height="267.83694"
|
||||
width="478.71308"
|
||||
x="595.70294"
|
||||
y="231.77652"
|
||||
width="478.71308"
|
||||
height="267.83694"
|
||||
fill="#3f3d56"
|
||||
/>
|
||||
<circle cx="835.05948" cy="223.29299" r="3.02983" fill="#f2f2f2" />
|
||||
<circle cx="835.05948" cy="223.29299" fill="#f2f2f2" r="3.02983" />
|
||||
<path
|
||||
d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#2f2e41"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<polygon
|
||||
points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
|
||||
fill="#2f2e41"
|
||||
points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
|
||||
/>
|
||||
<path
|
||||
d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#2f2e41"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<path
|
||||
d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
opacity="0.1"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="1066.53846"
|
||||
cy="654.13477"
|
||||
fill="#f2f2f2"
|
||||
rx="7.87756"
|
||||
ry="2.42386"
|
||||
fill="#f2f2f2"
|
||||
/>
|
||||
<circle cx="835.05948" cy="545.66686" r="11.51335" fill="#f2f2f2" />
|
||||
<circle cx="835.05948" cy="545.66686" fill="#f2f2f2" r="11.51335" />
|
||||
<polygon
|
||||
points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
|
||||
opacity="0.1"
|
||||
points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
|
||||
/>
|
||||
<rect x="108.60911" y="159" width="208" height="242" fill="#2f2e41" />
|
||||
<rect x="87.60911" y="135" width="250" height="86" fill="#3f3d56" />
|
||||
<rect x="87.60911" y="237" width="250" height="86" fill="#3f3d56" />
|
||||
<rect x="87.60911" y="339" width="250" height="86" fill="#3f3d56" />
|
||||
<rect fill="#2f2e41" height="242" width="208" x="108.60911" y="159" />
|
||||
<rect fill="#3f3d56" height="86" width="250" x="87.60911" y="135" />
|
||||
<rect fill="#3f3d56" height="86" width="250" x="87.60911" y="237" />
|
||||
<rect fill="#3f3d56" height="86" width="250" x="87.60911" y="339" />
|
||||
<rect
|
||||
fill="#6c63ff"
|
||||
height="16"
|
||||
opacity="0.4"
|
||||
width="16"
|
||||
x="271.60911"
|
||||
y="150"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#6c63ff"
|
||||
opacity="0.4"
|
||||
/>
|
||||
<rect
|
||||
fill="#6c63ff"
|
||||
height="16"
|
||||
opacity="0.8"
|
||||
width="16"
|
||||
x="294.60911"
|
||||
y="150"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#6c63ff"
|
||||
opacity="0.8"
|
||||
/>
|
||||
<rect x="317.60911" y="150" width="16" height="16" fill="#6c63ff" />
|
||||
<rect fill="#6c63ff" height="16" width="16" x="317.60911" y="150" />
|
||||
<rect
|
||||
fill="#6c63ff"
|
||||
height="16"
|
||||
opacity="0.4"
|
||||
width="16"
|
||||
x="271.60911"
|
||||
y="251"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#6c63ff"
|
||||
opacity="0.4"
|
||||
/>
|
||||
<rect
|
||||
fill="#6c63ff"
|
||||
height="16"
|
||||
opacity="0.8"
|
||||
width="16"
|
||||
x="294.60911"
|
||||
y="251"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#6c63ff"
|
||||
opacity="0.8"
|
||||
/>
|
||||
<rect x="317.60911" y="251" width="16" height="16" fill="#6c63ff" />
|
||||
<rect fill="#6c63ff" height="16" width="16" x="317.60911" y="251" />
|
||||
<rect
|
||||
fill="#6c63ff"
|
||||
height="16"
|
||||
opacity="0.4"
|
||||
width="16"
|
||||
x="271.60911"
|
||||
y="352"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#6c63ff"
|
||||
opacity="0.4"
|
||||
/>
|
||||
<rect
|
||||
fill="#6c63ff"
|
||||
height="16"
|
||||
opacity="0.8"
|
||||
width="16"
|
||||
x="294.60911"
|
||||
y="352"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="#6c63ff"
|
||||
opacity="0.8"
|
||||
/>
|
||||
<rect x="317.60911" y="352" width="16" height="16" fill="#6c63ff" />
|
||||
<circle cx="316.60911" cy="538" r="79" fill="#2f2e41" />
|
||||
<rect x="280.60911" y="600" width="24" height="43" fill="#2f2e41" />
|
||||
<rect x="328.60911" y="600" width="24" height="43" fill="#2f2e41" />
|
||||
<ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="#2f2e41" />
|
||||
<ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="#2f2e41" />
|
||||
<circle cx="318.60911" cy="518" r="27" fill="#fff" />
|
||||
<circle cx="318.60911" cy="518" r="9" fill="#3f3d56" />
|
||||
<rect fill="#6c63ff" height="16" width="16" x="317.60911" y="352" />
|
||||
<circle cx="316.60911" cy="538" fill="#2f2e41" r="79" />
|
||||
<rect fill="#2f2e41" height="43" width="24" x="280.60911" y="600" />
|
||||
<rect fill="#2f2e41" height="43" width="24" x="328.60911" y="600" />
|
||||
<ellipse cx="300.60911" cy="643.5" fill="#2f2e41" rx="20" ry="7.5" />
|
||||
<ellipse cx="348.60911" cy="642.5" fill="#2f2e41" rx="20" ry="7.5" />
|
||||
<circle cx="318.60911" cy="518" fill="#fff" r="27" />
|
||||
<circle cx="318.60911" cy="518" fill="#3f3d56" r="9" />
|
||||
<path
|
||||
d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#6c63ff"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
<ellipse
|
||||
cx="417.21511"
|
||||
cy="611.34365"
|
||||
fill="#2f2e41"
|
||||
rx="39.5"
|
||||
ry="12.40027"
|
||||
transform="translate(-238.28665 112.98044) rotate(-23.17116)"
|
||||
fill="#2f2e41"
|
||||
/>
|
||||
<ellipse
|
||||
cx="269.21511"
|
||||
cy="664.34365"
|
||||
fill="#2f2e41"
|
||||
rx="39.5"
|
||||
ry="12.40027"
|
||||
transform="translate(-271.07969 59.02084) rotate(-23.17116)"
|
||||
fill="#2f2e41"
|
||||
/>
|
||||
<path
|
||||
d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
fill="#fff"
|
||||
transform="translate(-31.39089 -100.5)"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
|
@ -249,20 +249,20 @@ onMounted(() => {
|
|||
<li
|
||||
v-for="(item, index) in searchResults"
|
||||
:key="item.path"
|
||||
:data-index="index"
|
||||
:data-search-item="index"
|
||||
class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
|
||||
:class="
|
||||
activeIndex === index
|
||||
? 'active bg-primary text-primary-foreground text-muted-foreground'
|
||||
: ''
|
||||
"
|
||||
:data-index="index"
|
||||
:data-search-item="index"
|
||||
class="bg-accent flex-center group mb-3 w-full cursor-pointer rounded-lg px-4 py-4"
|
||||
@mouseenter="handleMouseenter"
|
||||
>
|
||||
<VbenIcon
|
||||
fallback
|
||||
:icon="item.icon"
|
||||
class="mr-2 size-5 flex-shrink-0"
|
||||
fallback
|
||||
/>
|
||||
|
||||
<span class="flex-1">{{ item.name }}</span>
|
||||
|
|
|
@ -35,13 +35,13 @@ function handleClick(value: string) {
|
|||
<div
|
||||
v-for="item in transitionPreset"
|
||||
:key="item"
|
||||
class="outline-box p-2"
|
||||
:class="{
|
||||
'outline-box-active': transitionName === item,
|
||||
}"
|
||||
class="outline-box p-2"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<div class="bg-accent h-10 w-12 rounded-md" :class="`${item}-slow`"></div>
|
||||
<div :class="`${item}-slow`" class="bg-accent h-10 w-12 rounded-md"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -45,8 +45,8 @@ const disableItem = computed(() => {
|
|||
</SwitchItem>
|
||||
<ToggleItem
|
||||
v-model="breadcrumbStyleType"
|
||||
:items="typeItems"
|
||||
:disabled="disableItem"
|
||||
:items="typeItems"
|
||||
>
|
||||
{{ $t('preference.breadcrumb-style') }}
|
||||
</ToggleItem>
|
||||
|
|
|
@ -41,8 +41,8 @@ const localeItems: SelectListItem[] = [
|
|||
</SwitchItem>
|
||||
<SelectItem
|
||||
v-model="headerMode"
|
||||
:items="localeItems"
|
||||
:disabled="!headerEnable"
|
||||
:items="localeItems"
|
||||
>
|
||||
{{ $t('preference.mode') }}
|
||||
</SelectItem>
|
||||
|
|
|
@ -25,8 +25,8 @@ const stylesItems: SelectListItem[] = [
|
|||
<template>
|
||||
<ToggleItem
|
||||
v-model="navigationStyleType"
|
||||
:items="stylesItems"
|
||||
:disabled="disabled"
|
||||
:items="stylesItems"
|
||||
>
|
||||
{{ $t('preference.navigation-style') }}
|
||||
</ToggleItem>
|
||||
|
|
|
@ -37,11 +37,11 @@ const slots = useSlots();
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
|
||||
:class="{
|
||||
'hover:bg-accent': !slots.tip,
|
||||
'pointer-events-none opacity-50': disabled,
|
||||
}"
|
||||
class="my-1 flex w-full items-center justify-between rounded-md px-2 py-1"
|
||||
>
|
||||
<span class="flex items-center text-sm">
|
||||
<slot></slot>
|
||||
|
|
|
@ -23,10 +23,10 @@ function handleClick() {
|
|||
|
||||
<template>
|
||||
<div
|
||||
class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2"
|
||||
:class="{
|
||||
'pointer-events-none opacity-50': disabled,
|
||||
}"
|
||||
class="hover:bg-accent my-1 flex w-full items-center justify-between rounded-md px-2 py-2"
|
||||
@click="handleClick"
|
||||
>
|
||||
<span class="flex items-center text-sm">
|
||||
|
|
|
@ -17,19 +17,19 @@ const modelValue = defineModel<string>();
|
|||
|
||||
<template>
|
||||
<div
|
||||
disabled
|
||||
class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
|
||||
:class="{
|
||||
'pointer-events-none opacity-50': disabled,
|
||||
}"
|
||||
class="hover:bg-accent flex w-full items-center justify-between rounded-md px-2 py-2"
|
||||
disabled
|
||||
>
|
||||
<span class="text-sm"><slot></slot></span>
|
||||
<ToggleGroup
|
||||
v-model="modelValue"
|
||||
class="gap-2"
|
||||
size="sm"
|
||||
type="single"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="gap-2"
|
||||
>
|
||||
<template v-for="item in items" :key="item.value">
|
||||
<ToggleGroupItem
|
||||
|
|
|
@ -10,218 +10,125 @@ import Preferences from './preferences.vue';
|
|||
</script>
|
||||
<template>
|
||||
<Preferences
|
||||
:color-primary-presets="COLOR_PRIMARY_RESETS"
|
||||
:app-locale="preferences.app.locale"
|
||||
:app-layout="preferences.app.layout"
|
||||
:app-dynamic-title="preferences.app.dynamicTitle"
|
||||
:app-theme-mode="preferences.app.themeMode"
|
||||
:app-color-gray-mode="preferences.app.colorGrayMode"
|
||||
:app-color-weak-mode="preferences.app.colorWeakMode"
|
||||
:app-semi-dark-menu="preferences.app.semiDarkMenu"
|
||||
:app-content-compact="preferences.app.contentCompact"
|
||||
:app-dynamic-title="preferences.app.dynamicTitle"
|
||||
:app-layout="preferences.app.layout"
|
||||
:app-locale="preferences.app.locale"
|
||||
:app-semi-dark-menu="preferences.app.semiDarkMenu"
|
||||
:app-theme-mode="preferences.app.themeMode"
|
||||
:breadcrumb-enable="preferences.breadcrumb.enable"
|
||||
:breadcrumb-hide-only-one="preferences.breadcrumb.hideOnlyOne"
|
||||
:breadcrumb-home="preferences.breadcrumb.showHome"
|
||||
:breadcrumb-icon="preferences.breadcrumb.showIcon"
|
||||
:breadcrumb-style="preferences.breadcrumb.styleType"
|
||||
:color-primary-presets="COLOR_PRIMARY_RESETS"
|
||||
:footer-enable="preferences.footer.enable"
|
||||
:footer-fixed="preferences.footer.fixed"
|
||||
:header-enable="preferences.header.enable"
|
||||
:header-mode="preferences.header.mode"
|
||||
:navigation-accordion="preferences.navigation.accordion"
|
||||
:navigation-split="preferences.navigation.split"
|
||||
:navigation-style-type="preferences.navigation.styleType"
|
||||
:shortcut-keys-enable="preferences.shortcutKeys.enable"
|
||||
:sidebar-collapse="preferences.sidebar.collapse"
|
||||
:sidebar-collapse-show-title="preferences.sidebar.collapseShowTitle"
|
||||
:sidebar-enable="preferences.sidebar.enable"
|
||||
:tabbar-enable="preferences.tabbar.enable"
|
||||
:tabbar-show-icon="preferences.tabbar.showIcon"
|
||||
:theme-color-primary="preferences.theme.colorPrimary"
|
||||
:transition-enable="preferences.transition.enable"
|
||||
:transition-name="preferences.transition.name"
|
||||
:transition-progress="preferences.transition.progress"
|
||||
:theme-color-primary="preferences.theme.colorPrimary"
|
||||
:sidebar-enable="preferences.sidebar.enable"
|
||||
:sidebar-collapse="preferences.sidebar.collapse"
|
||||
:sidebar-collapse-show-title="preferences.sidebar.collapseShowTitle"
|
||||
:header-enable="preferences.header.enable"
|
||||
:header-mode="preferences.header.mode"
|
||||
:breadcrumb-enable="preferences.breadcrumb.enable"
|
||||
:breadcrumb-style="preferences.breadcrumb.styleType"
|
||||
:breadcrumb-icon="preferences.breadcrumb.showIcon"
|
||||
:breadcrumb-home="preferences.breadcrumb.showHome"
|
||||
:breadcrumb-hide-only-one="preferences.breadcrumb.hideOnlyOne"
|
||||
:tabbar-enable="preferences.tabbar.enable"
|
||||
:tabbar-show-icon="preferences.tabbar.showIcon"
|
||||
:navigation-accordion="preferences.navigation.accordion"
|
||||
:navigation-style-type="preferences.navigation.styleType"
|
||||
:navigation-split="preferences.navigation.split"
|
||||
:footer-enable="preferences.footer.enable"
|
||||
:footer-fixed="preferences.footer.fixed"
|
||||
:shortcut-keys-enable="preferences.shortcutKeys.enable"
|
||||
@update:app-color-gray-mode="
|
||||
(val) => updatePreferences({ app: { colorGrayMode: val } })
|
||||
"
|
||||
@update:app-color-weak-mode="
|
||||
(val) => updatePreferences({ app: { colorWeakMode: val } })
|
||||
"
|
||||
@update:app-content-compact="
|
||||
(val) => updatePreferences({ app: { contentCompact: val } })
|
||||
"
|
||||
@update:app-dynamic-title="
|
||||
(val) => updatePreferences({ app: { dynamicTitle: val } })
|
||||
"
|
||||
@update:app-layout="(val) => updatePreferences({ app: { layout: val } })"
|
||||
@update:app-locale="
|
||||
(val) => {
|
||||
updatePreferences({
|
||||
app: { locale: val },
|
||||
});
|
||||
updatePreferences({ app: { locale: val } });
|
||||
loadLocaleMessages(val);
|
||||
}
|
||||
"
|
||||
@update:app-layout="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
app: { layout: val },
|
||||
})
|
||||
"
|
||||
@update:app-dynamic-title="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
app: { dynamicTitle: val },
|
||||
})
|
||||
@update:app-semi-dark-menu="
|
||||
(val) => updatePreferences({ app: { semiDarkMenu: val } })
|
||||
"
|
||||
@update:app-theme-mode="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
app: { themeMode: val },
|
||||
})
|
||||
"
|
||||
@update:app-color-gray-mode="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
app: { colorGrayMode: val },
|
||||
})
|
||||
"
|
||||
@update:app-color-weak-mode="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
app: { colorWeakMode: val },
|
||||
})
|
||||
"
|
||||
@update:app-semi-dark-menu="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
app: { semiDarkMenu: val },
|
||||
})
|
||||
"
|
||||
@update:app-content-compact="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
app: { contentCompact: val },
|
||||
})
|
||||
"
|
||||
@update:transition-enable="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
transition: { enable: val },
|
||||
})
|
||||
"
|
||||
@update:transition-name="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
transition: { name: val },
|
||||
})
|
||||
"
|
||||
@update:transition-progress="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
transition: { progress: val },
|
||||
})
|
||||
"
|
||||
@update:theme-color-primary="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
theme: { colorPrimary: val },
|
||||
})
|
||||
"
|
||||
@update:sidebar-enable="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
sidebar: { enable: val },
|
||||
})
|
||||
"
|
||||
@update:sidebar-collapse="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
sidebar: { collapse: val },
|
||||
})
|
||||
"
|
||||
@update:sidebar-collapse-show-title="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
sidebar: { collapseShowTitle: val },
|
||||
})
|
||||
"
|
||||
@update:header-enable="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
header: { enable: val },
|
||||
})
|
||||
"
|
||||
@update:header-mode="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
header: { mode: val },
|
||||
})
|
||||
(val) => updatePreferences({ app: { themeMode: val } })
|
||||
"
|
||||
@update:breadcrumb-enable="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
breadcrumb: { enable: val },
|
||||
})
|
||||
"
|
||||
@update:breadcrumb-style-type="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
breadcrumb: { styleType: val },
|
||||
})
|
||||
"
|
||||
@update:breadcrumb-show-icon="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
breadcrumb: { showIcon: val },
|
||||
})
|
||||
"
|
||||
@update:breadcrumb-show-home="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
breadcrumb: { showHome: val },
|
||||
})
|
||||
(val) => updatePreferences({ breadcrumb: { enable: val } })
|
||||
"
|
||||
@update:breadcrumb-hide-only-one="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
breadcrumb: { hideOnlyOne: val },
|
||||
})
|
||||
(val) => updatePreferences({ breadcrumb: { hideOnlyOne: val } })
|
||||
"
|
||||
@update:tabbar-enable="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
tabbar: { enable: val },
|
||||
})
|
||||
@update:breadcrumb-show-home="
|
||||
(val) => updatePreferences({ breadcrumb: { showHome: val } })
|
||||
"
|
||||
@update:tabbar-show-icon="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
tabbar: { showIcon: val },
|
||||
})
|
||||
@update:breadcrumb-show-icon="
|
||||
(val) => updatePreferences({ breadcrumb: { showIcon: val } })
|
||||
"
|
||||
@update:navigation-accordion="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
navigation: { accordion: val },
|
||||
})
|
||||
"
|
||||
@update:navigation-style-type="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
navigation: { styleType: val },
|
||||
})
|
||||
"
|
||||
@update:navigation-split="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
navigation: { split: val },
|
||||
})
|
||||
@update:breadcrumb-style-type="
|
||||
(val) => updatePreferences({ breadcrumb: { styleType: val } })
|
||||
"
|
||||
@update:footer-enable="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
footer: { enable: val },
|
||||
})
|
||||
(val) => updatePreferences({ footer: { enable: val } })
|
||||
"
|
||||
@update:footer-fixed="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
footer: { fixed: val },
|
||||
})
|
||||
(val) => updatePreferences({ footer: { fixed: val } })
|
||||
"
|
||||
@update:header-enable="
|
||||
(val) => updatePreferences({ header: { enable: val } })
|
||||
"
|
||||
@update:header-mode="(val) => updatePreferences({ header: { mode: val } })"
|
||||
@update:navigation-accordion="
|
||||
(val) => updatePreferences({ navigation: { accordion: val } })
|
||||
"
|
||||
@update:navigation-split="
|
||||
(val) => updatePreferences({ navigation: { split: val } })
|
||||
"
|
||||
@update:navigation-style-type="
|
||||
(val) => updatePreferences({ navigation: { styleType: val } })
|
||||
"
|
||||
@update:shortcut-keys-enable="
|
||||
(val) =>
|
||||
updatePreferences({
|
||||
shortcutKeys: { enable: val },
|
||||
})
|
||||
(val) => updatePreferences({ shortcutKeys: { enable: val } })
|
||||
"
|
||||
@update:sidebar-collapse="
|
||||
(val) => updatePreferences({ sidebar: { collapse: val } })
|
||||
"
|
||||
@update:sidebar-collapse-show-title="
|
||||
(val) => updatePreferences({ sidebar: { collapseShowTitle: val } })
|
||||
"
|
||||
@update:sidebar-enable="
|
||||
(val) => updatePreferences({ sidebar: { enable: val } })
|
||||
"
|
||||
@update:tabbar-enable="
|
||||
(val) => updatePreferences({ tabbar: { enable: val } })
|
||||
"
|
||||
@update:tabbar-show-icon="
|
||||
(val) => updatePreferences({ tabbar: { showIcon: val } })
|
||||
"
|
||||
@update:theme-color-primary="
|
||||
(val) => updatePreferences({ theme: { colorPrimary: val } })
|
||||
"
|
||||
@update:transition-enable="
|
||||
(val) => updatePreferences({ transition: { enable: val } })
|
||||
"
|
||||
@update:transition-name="
|
||||
(val) => updatePreferences({ transition: { name: val } })
|
||||
"
|
||||
@update:transition-progress="
|
||||
(val) => updatePreferences({ transition: { progress: val } })
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -172,9 +172,9 @@ function handleReset() {
|
|||
</template>
|
||||
<template #extra>
|
||||
<VbenIconButton
|
||||
class="relative"
|
||||
:disabled="!diffPreference"
|
||||
:tooltip="$t('preference.reset-tip')"
|
||||
class="relative"
|
||||
>
|
||||
<span
|
||||
v-if="diffPreference"
|
||||
|
@ -216,9 +216,9 @@ function handleReset() {
|
|||
|
||||
<Block :title="$t('preference.sidebar')">
|
||||
<Sidebar
|
||||
v-model:sidebar-enable="sidebarEnable"
|
||||
v-model:sidebar-collapse="sidebarCollapse"
|
||||
v-model:side-collapse-show-title="sidebarCollapseShowTitle"
|
||||
v-model:sidebar-collapse="sidebarCollapse"
|
||||
v-model:sidebar-enable="sidebarEnable"
|
||||
:disabled="!isSideMode"
|
||||
/>
|
||||
</Block>
|
||||
|
@ -233,9 +233,9 @@ function handleReset() {
|
|||
|
||||
<Block :title="$t('preference.navigation-menu')">
|
||||
<Navigation
|
||||
v-model:navigation-style-type="navigationStyleType"
|
||||
v-model:navigation-split="navigationSplit"
|
||||
v-model:navigation-accordion="navigationAccordion"
|
||||
v-model:navigation-split="navigationSplit"
|
||||
v-model:navigation-style-type="navigationStyleType"
|
||||
:disabled="isFullContent"
|
||||
:disabled-navigation-split="!isMixedNav"
|
||||
/>
|
||||
|
@ -244,10 +244,10 @@ function handleReset() {
|
|||
<Block :title="$t('preference.breadcrumb')">
|
||||
<Breadcrumb
|
||||
v-model:breadcrumb-enable="breadcrumbEnable"
|
||||
v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
|
||||
v-model:breadcrumb-show-home="breadcrumbShowHome"
|
||||
v-model:breadcrumb-show-icon="breadcrumbShowIcon"
|
||||
v-model:breadcrumb-style-type="breadcrumbStyleType"
|
||||
v-model:breadcrumb-show-home="breadcrumbShowHome"
|
||||
v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
|
||||
:disabled="
|
||||
!showBreadcrumbConfig || !(isSideNav || isSideMixedNav)
|
||||
"
|
||||
|
@ -270,17 +270,17 @@ function handleReset() {
|
|||
<template #general>
|
||||
<Block :title="$t('preference.general')">
|
||||
<General
|
||||
v-model:app-locale="appLocale"
|
||||
v-model:app-dynamic-title="appDynamicTitle"
|
||||
v-model:app-locale="appLocale"
|
||||
v-model:shortcut-keys-enable="shortcutKeysEnable"
|
||||
/>
|
||||
</Block>
|
||||
|
||||
<Block :title="$t('preference.animation')">
|
||||
<Animation
|
||||
v-model:transition-progress="transitionProgress"
|
||||
v-model:transition-name="transitionName"
|
||||
v-model:transition-enable="transitionEnable"
|
||||
v-model:transition-name="transitionName"
|
||||
v-model:transition-progress="transitionProgress"
|
||||
/>
|
||||
</Block>
|
||||
</template>
|
||||
|
@ -306,10 +306,10 @@ function handleReset() {
|
|||
|
||||
<template #footer>
|
||||
<VbenButton
|
||||
class="mx-6 w-full"
|
||||
variant="default"
|
||||
size="sm"
|
||||
:disabled="!diffPreference"
|
||||
class="mx-6 w-full"
|
||||
size="sm"
|
||||
variant="default"
|
||||
@click="handleCopy"
|
||||
>
|
||||
<IcRoundFolderCopy class="mr-2 size-3" />
|
||||
|
|
|
@ -11,8 +11,8 @@ defineOptions({
|
|||
|
||||
<template>
|
||||
<VbenButton
|
||||
class="bg-primary flex-col-center h-9 w-9 cursor-pointer rounded-l-md rounded-r-none border-none"
|
||||
:title="$t('preference.preferences')"
|
||||
class="bg-primary flex-col-center h-9 w-9 cursor-pointer rounded-l-md rounded-r-none border-none"
|
||||
>
|
||||
<IconSetting class="text-lg" />
|
||||
</VbenButton>
|
||||
|
|
|
@ -55,7 +55,7 @@ const PRESETS = [
|
|||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<VbenTooltip side="bottom" :disabled="!shouldOnHover">
|
||||
<VbenTooltip :disabled="!shouldOnHover" side="bottom">
|
||||
<template #trigger>
|
||||
<ThemeButton
|
||||
:model-value="isDark"
|
||||
|
@ -65,9 +65,9 @@ const PRESETS = [
|
|||
</template>
|
||||
<ToggleGroup
|
||||
:model-value="preferences.app.themeMode"
|
||||
class="gap-2"
|
||||
type="single"
|
||||
variant="outline"
|
||||
class="gap-2"
|
||||
@update:model-value="
|
||||
(val) =>
|
||||
updatePreferences({ app: { themeMode: val as ThemeModeType } })
|
||||
|
|
|
@ -110,10 +110,10 @@ if (shortcutKeys.value) {
|
|||
<template>
|
||||
<VbenAlertDialog
|
||||
v-model:open="openDialog"
|
||||
:content="$t('widgets.logout-tip')"
|
||||
:title="$t('common.prompt')"
|
||||
:cancel-text="$t('common.cancel')"
|
||||
:content="$t('widgets.logout-tip')"
|
||||
:submit-text="$t('common.confirm')"
|
||||
:title="$t('common.prompt')"
|
||||
@submit="handleSubmitLogout"
|
||||
/>
|
||||
|
||||
|
|
|
@ -28,12 +28,12 @@ const appName = computed(() => preferences.app.name);
|
|||
|
||||
<div class="absolute left-0 top-0 z-10 flex flex-1">
|
||||
<div
|
||||
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
|
||||
:class="
|
||||
authPanelLeft || authPanelCenter
|
||||
? 'lg:text-foreground'
|
||||
: 'lg:text-white'
|
||||
"
|
||||
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
|
||||
>
|
||||
<img
|
||||
:alt="appName"
|
||||
|
|
|
@ -14,7 +14,7 @@ defineOptions({
|
|||
</slot>
|
||||
|
||||
<RouterView v-slot="{ Component, route }">
|
||||
<Transition name="slide-right" mode="out-in" appear>
|
||||
<Transition appear mode="out-in" name="slide-right">
|
||||
<KeepAlive :include="['Login']">
|
||||
<component
|
||||
:is="Component"
|
||||
|
|
|
@ -41,11 +41,11 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
|
|||
<template>
|
||||
<IFrameRouterView />
|
||||
<RouterView v-slot="{ Component, route }">
|
||||
<Transition :name="getTransitionName(route)" mode="out-in" appear>
|
||||
<Transition :name="getTransitionName(route)" appear mode="out-in">
|
||||
<KeepAlive
|
||||
v-if="keepAlive"
|
||||
:include="getCacheTabs"
|
||||
:exclude="getExcludeTabs"
|
||||
:include="getCacheTabs"
|
||||
>
|
||||
<component
|
||||
:is="Component"
|
||||
|
|
|
@ -31,9 +31,9 @@ const accessStore = useAccessStore();
|
|||
</div>
|
||||
<div class="flex h-full min-w-0 flex-shrink-0 items-center">
|
||||
<GlobalSearch
|
||||
class="mr-4"
|
||||
:enable-shortcut-key="preferences.shortcutKeys.enable"
|
||||
:menus="accessStore.getAccessMenus"
|
||||
class="mr-4"
|
||||
/>
|
||||
<ThemeToggle class="mr-2" />
|
||||
<LanguageToggle class="mr-2" />
|
||||
|
|
|
@ -103,56 +103,38 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
|
|||
<template>
|
||||
<VbenAdminLayout
|
||||
v-model:side-extra-visible="extraVisible"
|
||||
:side-extra-collapse="preferences.sidebar.extraCollapse"
|
||||
:side-expand-on-hover="preferences.sidebar.expandOnHover"
|
||||
:side-collapse="preferences.sidebar.collapse"
|
||||
:side-collapse-show-title="preferences.sidebar.collapseShowTitle"
|
||||
:content-compact="preferences.app.contentCompact"
|
||||
:footer-enable="preferences.footer.enable"
|
||||
:footer-fixed="preferences.footer.fixed"
|
||||
:header-hidden="preferences.header.hidden"
|
||||
:header-mode="preferences.header.mode"
|
||||
:header-visible="preferences.header.enable"
|
||||
:is-mobile="preferences.app.isMobile"
|
||||
:layout="layout"
|
||||
:header-mode="preferences.header.mode"
|
||||
:footer-fixed="preferences.footer.fixed"
|
||||
:side-collapse="preferences.sidebar.collapse"
|
||||
:side-collapse-show-title="preferences.sidebar.collapseShowTitle"
|
||||
:side-expand-on-hover="preferences.sidebar.expandOnHover"
|
||||
:side-extra-collapse="preferences.sidebar.extraCollapse"
|
||||
:side-hidden="preferences.sidebar.hidden"
|
||||
:side-semi-dark="preferences.app.semiDarkMenu"
|
||||
:side-theme="theme"
|
||||
:side-hidden="preferences.sidebar.hidden"
|
||||
:side-visible="sideVisible"
|
||||
:footer-visible="preferences.footer.enable"
|
||||
:header-visible="preferences.header.enable"
|
||||
:header-hidden="preferences.header.hidden"
|
||||
:side-width="preferences.sidebar.width"
|
||||
:tabs-visible="preferences.tabbar.enable"
|
||||
@update:side-extra-collapse="
|
||||
(value: boolean) =>
|
||||
updatePreferences({
|
||||
sidebar: {
|
||||
extraCollapse: value,
|
||||
},
|
||||
})
|
||||
@side-mouse-leave="handleSideMouseLeave"
|
||||
@update:side-collapse="
|
||||
(value: boolean) => updatePreferences({ sidebar: { collapse: value } })
|
||||
"
|
||||
@update:side-expand-on-hover="
|
||||
(value: boolean) =>
|
||||
updatePreferences({
|
||||
sidebar: {
|
||||
expandOnHover: value,
|
||||
},
|
||||
})
|
||||
updatePreferences({ sidebar: { expandOnHover: value } })
|
||||
"
|
||||
@update:side-collapse="
|
||||
@update:side-extra-collapse="
|
||||
(value: boolean) =>
|
||||
updatePreferences({
|
||||
sidebar: {
|
||||
collapse: value,
|
||||
},
|
||||
})
|
||||
updatePreferences({ sidebar: { extraCollapse: value } })
|
||||
"
|
||||
@side-mouse-leave="handleSideMouseLeave"
|
||||
@update:side-visible="
|
||||
(value: boolean) =>
|
||||
updatePreferences({
|
||||
sidebar: {
|
||||
enable: value,
|
||||
},
|
||||
})
|
||||
(value: boolean) => updatePreferences({ sidebar: { enable: value } })
|
||||
"
|
||||
>
|
||||
<template v-if="preferences.app.showPreference" #preferences>
|
||||
|
@ -167,12 +149,12 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
|
|||
<!-- logo -->
|
||||
<template #logo>
|
||||
<VbenLogo
|
||||
:alt="preferences.app.name"
|
||||
:class="logoClass"
|
||||
:collapse="logoCollapse"
|
||||
:src="preferences.logo.source"
|
||||
:text="preferences.app.name"
|
||||
:theme="showHeaderNav ? headerMenuTheme : theme"
|
||||
:alt="preferences.app.name"
|
||||
:class="logoClass"
|
||||
/>
|
||||
</template>
|
||||
<!-- 头部区域 -->
|
||||
|
@ -184,19 +166,19 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
|
|||
>
|
||||
<Breadcrumb
|
||||
:hide-when-only-one="preferences.breadcrumb.hideOnlyOne"
|
||||
:type="preferences.breadcrumb.styleType"
|
||||
:show-icon="preferences.breadcrumb.showIcon"
|
||||
:show-home="preferences.breadcrumb.showHome"
|
||||
:show-icon="preferences.breadcrumb.showIcon"
|
||||
:type="preferences.breadcrumb.styleType"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="showHeaderNav" #menu>
|
||||
<LayoutMenu
|
||||
class="w-full"
|
||||
:rounded="isMenuRounded"
|
||||
mode="horizontal"
|
||||
:theme="headerMenuTheme"
|
||||
:menus="wrapperMenus(headerMenus)"
|
||||
:default-active="headerActive"
|
||||
:menus="wrapperMenus(headerMenus)"
|
||||
:rounded="isMenuRounded"
|
||||
:theme="headerMenuTheme"
|
||||
class="w-full"
|
||||
mode="horizontal"
|
||||
@select="handleMenuSelect"
|
||||
/>
|
||||
</template>
|
||||
|
@ -211,44 +193,44 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
|
|||
<!-- 侧边菜单区域 -->
|
||||
<template #menu>
|
||||
<LayoutMenu
|
||||
mode="vertical"
|
||||
:accordion="preferences.navigation.accordion"
|
||||
:rounded="isMenuRounded"
|
||||
:collapse-show-title="preferences.sidebar.collapseShowTitle"
|
||||
:collapse="preferences.sidebar.collapse"
|
||||
:theme="theme"
|
||||
:menus="wrapperMenus(sideMenus)"
|
||||
:collapse-show-title="preferences.sidebar.collapseShowTitle"
|
||||
:default-active="sideActive"
|
||||
:menus="wrapperMenus(sideMenus)"
|
||||
:rounded="isMenuRounded"
|
||||
:theme="theme"
|
||||
mode="vertical"
|
||||
@select="handleMenuSelect"
|
||||
/>
|
||||
</template>
|
||||
<template #mixed-menu>
|
||||
<LayoutMixedMenu
|
||||
:rounded="isMenuRounded"
|
||||
:collapse="!preferences.sidebar.collapseShowTitle"
|
||||
:active-path="extraActiveMenu"
|
||||
:collapse="!preferences.sidebar.collapseShowTitle"
|
||||
:rounded="isMenuRounded"
|
||||
:theme="theme"
|
||||
@select="handleMixedMenuSelect"
|
||||
@default-select="handleDefaultSelect"
|
||||
@enter="handleMenuMouseEnter"
|
||||
@select="handleMixedMenuSelect"
|
||||
/>
|
||||
</template>
|
||||
<!-- 侧边额外区域 -->
|
||||
<template #side-extra>
|
||||
<LayoutExtraMenu
|
||||
:accordion="preferences.navigation.accordion"
|
||||
:rounded="isMenuRounded"
|
||||
:menus="wrapperMenus(extraMenus)"
|
||||
:collapse="preferences.sidebar.extraCollapse"
|
||||
:menus="wrapperMenus(extraMenus)"
|
||||
:rounded="isMenuRounded"
|
||||
:theme="theme"
|
||||
/>
|
||||
</template>
|
||||
<template #side-extra-title>
|
||||
<VbenLogo
|
||||
v-if="preferences.logo.enable"
|
||||
:alt="preferences.app.name"
|
||||
:text="preferences.app.name"
|
||||
:theme="theme"
|
||||
:alt="preferences.app.name"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -27,11 +27,11 @@ async function handleSelect(key: string) {
|
|||
|
||||
<template>
|
||||
<Menu
|
||||
:rounded="rounded"
|
||||
:accordion="accordion"
|
||||
:collapse="collapse"
|
||||
:default-active="route.path"
|
||||
:menus="menus"
|
||||
:rounded="rounded"
|
||||
:theme="theme"
|
||||
mode="vertical"
|
||||
@select="handleSelect"
|
||||
|
|
|
@ -23,14 +23,14 @@ function handleMenuSelect(key: string) {
|
|||
|
||||
<template>
|
||||
<Menu
|
||||
:rounded="rounded"
|
||||
:collapse-show-title="collapseShowTitle"
|
||||
:collapse="collapse"
|
||||
:accordion="accordion"
|
||||
:collapse="collapse"
|
||||
:collapse-show-title="collapseShowTitle"
|
||||
:default-active="defaultActive"
|
||||
:menus="menus"
|
||||
:theme="theme"
|
||||
:mode="mode"
|
||||
:rounded="rounded"
|
||||
:theme="theme"
|
||||
@select="handleMenuSelect"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -42,12 +42,12 @@ onBeforeMount(() => {
|
|||
|
||||
<template>
|
||||
<NormalMenu
|
||||
:rounded="rounded"
|
||||
:active-path="activePath"
|
||||
:collapse="collapse"
|
||||
:menus="menus"
|
||||
:active-path="activePath"
|
||||
:rounded="rounded"
|
||||
:theme="theme"
|
||||
@select="handleSelect"
|
||||
@enter="(menu) => emit('enter', menu)"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -21,12 +21,12 @@ const {
|
|||
|
||||
<template>
|
||||
<TabsView
|
||||
:active="currentActive"
|
||||
:menus="createContextMenus"
|
||||
:show-icon="showIcon"
|
||||
:tabs="currentTabs"
|
||||
:menus="createContextMenus"
|
||||
:active="currentActive"
|
||||
@update:active="handleClick"
|
||||
@close="handleClose"
|
||||
@un-push-pin="handleUnPushPin"
|
||||
@update:active="handleClick"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -75,15 +75,15 @@ function handleSelect(path: string) {
|
|||
<VbenBreadcrumb
|
||||
v-if="type === 'normal'"
|
||||
:breadcrumbs="breadcrumbs"
|
||||
class="ml-2"
|
||||
:show-icon="showIcon"
|
||||
class="ml-2"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
<VbenBackgroundBreadcrumb
|
||||
v-if="type === 'background'"
|
||||
:breadcrumbs="breadcrumbs"
|
||||
class="ml-2"
|
||||
:show-icon="showIcon"
|
||||
class="ml-2"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
@ -70,8 +70,8 @@ function showSpinning(index: number) {
|
|||
{{ iframeRoutes.length }}
|
||||
<template v-for="(item, index) in iframeRoutes" :key="item.fullPath">
|
||||
<div
|
||||
v-show="routeShow(item)"
|
||||
v-if="canRender(item)"
|
||||
v-show="routeShow(item)"
|
||||
class="relative size-full"
|
||||
>
|
||||
<Spinner :spinning="showSpinning(index)" />
|
||||
|
|
Loading…
Reference in New Issue