chore: update deps

This commit is contained in:
vben
2024-06-01 22:17:52 +08:00
parent c531f0c154
commit f7b97e8a83
47 changed files with 569 additions and 322 deletions

View File

@@ -61,6 +61,8 @@ interface Preference {
footerFixed: boolean;
/** 页脚是否可见 */
footerVisible: boolean;
/** 顶栏是否隐藏 */
headerHidden: boolean;
/** header显示模式 */
headerMode: LayoutHeaderMode;
/** 顶栏是否可见 */
@@ -103,6 +105,8 @@ interface Preference {
sideExpandOnHover: boolean;
/** 侧边栏扩展区域是否折叠 */
sideExtraCollapse: boolean;
/** 侧边栏是否隐藏 */
sideHidden: boolean;
/** 侧边栏是否可见 */
sideVisible: boolean;
/** 侧边栏宽度 */

View File

@@ -112,7 +112,7 @@ function handleOpenMenu() {
<template>
<header
:style="style"
class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b"
class="border-border top-0 flex w-full flex-[0_0_auto] items-center border-b transition-[margin-top] duration-200"
>
<div v-if="slots.logo" :style="logoStyle">
<slot name="logo"></slot>

View File

@@ -136,11 +136,11 @@ const style = computed((): CSSProperties => {
});
const extraStyle = computed((): CSSProperties => {
const { extraBackgroundColor, extraWidth, width, zIndex } = props;
const { extraBackgroundColor, extraWidth, show, width, zIndex } = props;
return {
backgroundColor: extraBackgroundColor,
left: `${width}px`,
width: extraVisible.value ? `${extraWidth}px` : 0,
width: extraVisible.value && show ? `${extraWidth}px` : 0,
zIndex,
};
});
@@ -156,9 +156,6 @@ const extraTitleStyle = computed((): CSSProperties => {
const contentWidthStyle = computed((): CSSProperties => {
const { collapseWidth, fixedExtra, isSideMixed, mixedWidth } = props;
if (isSideMixed && fixedExtra) {
// if (!extraVisible.value) {
// return {};
// }
return { width: `${collapse.value ? collapseWidth : mixedWidth}px` };
}
return {};
@@ -204,14 +201,6 @@ watchEffect(() => {
extraVisible.value = props.fixedExtra ? true : extraVisible.value;
});
// onClickOutside(asideRef, (event) => {
// const { fixedExtra, width } = props;
// // 防止点击 aside 区域关闭
// if (!fixedExtra && event.clientX >= width && extraVisible.value) {
// extraVisible.value = false;
// }
// });
function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
const { backgroundColor, extraWidth, fixedExtra, isSideMixed, show, width } =
props;
@@ -294,6 +283,7 @@ function handleScroll(event: Event) {
v-if="isSideMixed"
ref="asideRef"
:class="e('extra')"
class="transition-[width] duration-200"
:style="extraStyle"
>
<SideCollapseButton

View File

@@ -77,6 +77,11 @@ interface VbenLayoutProps {
* @default 10
*/
headerHeightOffset?: number;
/**
* 顶栏是否隐藏
* @default false
*/
headerHidden?: boolean;
/**
* header 显示模式
* @default 'fixed'
@@ -117,6 +122,11 @@ interface VbenLayoutProps {
* @default 48
*/
sideCollapseWidth?: number;
/**
* 侧边栏是否隐藏
* @default false
*/
sideHidden?: boolean;
/**
* 混合侧边扩展区域是否可见
* @default false

View File

@@ -33,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
// headerBackgroundColor: 'hsl(var(--color-background))',
headerHeight: 50,
headerHeightOffset: 10,
headerHidden: false,
headerMode: 'fixed',
headerVisible: true,
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
sideCollapseShowTitle: false,
// sideCollapse: false,
sideCollapseWidth: 60,
sideHidden: false,
sideMixedWidth: 80,
sideSemiDark: true,
sideTheme: 'dark',
@@ -68,7 +70,7 @@ const { y: mouseY } = useMouse({ type: 'client' });
// side是否处于hover状态展开菜单中
const sideExpandOnHovering = ref(false);
const sideHidden = ref(false);
// const sideHidden = ref(false);
const headerIsHidden = ref(false);
const realLayout = computed(() => {
@@ -104,11 +106,11 @@ const isHeaderAuto = computed(() => props.headerMode === 'auto');
* header区域高度
*/
const getHeaderHeight = computed(() => {
const { headerHeight, headerHeightOffset, headerVisible } = props;
const { headerHeight, headerHeightOffset } = props;
if (!headerVisible) {
return 0;
}
// if (!headerVisible) {
// return 0;
// }
// 顶部存在导航时增加10
const offset = isMixedNav.value || isHeaderNav.value ? headerHeightOffset : 0;
@@ -118,7 +120,7 @@ const getHeaderHeight = computed(() => {
const headerWrapperHeight = computed(() => {
let height = 0;
if (props.headerVisible) {
if (props.headerVisible && !props.headerHidden) {
height += getHeaderHeight.value;
}
if (props.tabsVisible) {
@@ -154,12 +156,16 @@ const sidePaddingTop = computed(() => {
* 动态获取侧边宽度
*/
const getSideWidth = computed(() => {
const { isMobile, sideMixedWidth, sideWidth } = props;
const { isMobile, sideHidden, sideMixedWidth, sideWidth } = props;
let width = 0;
if (sideHidden) {
return width;
}
if (
!sideVisibleState.value ||
(sideHidden.value && !isSideMixedNav.value && !isMixedNav.value)
(sideHidden && !isSideMixedNav.value && !isMixedNav.value)
) {
return width;
}
@@ -190,6 +196,9 @@ const isSideMode = computed(() =>
);
const showSide = computed(() => {
// if (isMixedNav.value && !props.sideHidden) {
// return false;
// }
return isSideMode.value && sideVisible.value;
});
@@ -441,7 +450,7 @@ function handleClickMask() {
function handleToggleMenu() {
// sideVisible.value = !sideVisible.value;
sideHidden.value = !sideHidden.value;
// sideHidden.value = !sideHidden.value;
}
function handleOpenMenu() {
@@ -452,7 +461,7 @@ function handleOpenMenu() {
<template>
<div class="relative flex min-h-full w-full">
<slot name="preference"></slot>
<slot name="back-top"></slot>
<slot name="floating-button-group"></slot>
<LayoutSide
v-if="sideVisibleState"
v-model:collapse="sideCollapse"
@@ -498,13 +507,13 @@ function handleOpenMenu() {
>
<div
:style="headerWrapperStyle"
class="overflow-hidden transition-all duration-200 ease-in-out"
class="overflow-hidden transition-all duration-200"
>
<LayoutHeader
v-if="headerVisible"
:full-width="!isSideMode"
:height="getHeaderHeight"
:show="!fullContent"
:show="!fullContent && !headerHidden"
:side-hidden="sideHidden"
:show-toggle-btn="showHeaderToggleButton"
:width="mainStyle.width"
@@ -531,7 +540,7 @@ function handleOpenMenu() {
<!-- </div> -->
<LayoutContent
class="transition-[margin-top] duration-300 ease-in"
class="transition-[margin-top] duration-200"
:style="contentStyle"
:content-compact="contentCompact"
:content-compact-width="contentCompactWidth"

View File

@@ -14,6 +14,7 @@ defineOptions({ name: 'BackTop' });
const props = withDefaults(defineProps<Props>(), {
bottom: 40,
isGroup: false,
right: 40,
target: '',
visibilityHeight: 200,
@@ -31,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
<VbenButton
v-if="visible"
:style="backTopStyle"
class="bg-accent fixed bottom-5 right-5 h-10 w-10 rounded-full"
class="bg-accent data fixed bottom-10 right-5 h-10 w-10 rounded-full"
size="icon"
variant="icon"
@click="handleClick"

View File

@@ -31,6 +31,7 @@ export const backtopProps = {
export interface BacktopProps {
bottom?: number;
isGroup?: boolean;
right?: number;
target?: string;
visibilityHeight?: number;

View File

@@ -0,0 +1,46 @@
<script setup>
import { ref } from 'vue';
const isMenuOpen = ref(false);
const menuItems = ref(['1', '2', '3', '4']);
const toggleMenu = () => {
isMenuOpen.value = !isMenuOpen.value;
};
const handleMenuItemClick = (_item) => {
// console.log(111, item);
};
</script>
<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 }"
@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,
}"
>
<button
v-for="(item, index) in menuItems"
:key="index"
class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-500 text-xl text-white"
@click="handleMenuItemClick(item)"
>
{{ item }}
</button>
</div>
</div>
</template>
<style scoped>
/* 可以在这里添加任何需要的额外样式 */
</style>

View File

@@ -0,0 +1 @@
export { default as VbenFloatingButtonGroup } from './floating-button-group.vue';

View File

@@ -7,6 +7,7 @@ export * from './button';
export * from './checkbox';
export * from './context-menu';
export * from './dropdown-menu';
export * from './floating-button-group';
export * from './full-screen';
export * from './hover-card';
export * from './icon';

View File

@@ -1,8 +1,6 @@
<script setup lang="ts">
import { computed } from 'vue';
import { VbenAvatar } from '../avatar';
interface Props {
/**
* Logo 图标 alt
@@ -42,7 +40,7 @@ const props = withDefaults(defineProps<Props>(), {
alt: 'Vben',
collapse: false,
href: 'javascript:void 0',
logoSize: 32,
logoSize: 36,
src: '',
text: '',
theme: 'light',
@@ -59,13 +57,12 @@ const logoClass = computed(() => {
class="flex h-full items-center gap-2 overflow-hidden px-3 font-semibold leading-normal transition-all duration-500"
:class="$attrs.class"
>
<VbenAvatar
<img
v-if="src"
:src="src"
:alt="alt"
:height="logoSize"
:width="logoSize"
class="relative size-9 rounded-none bg-transparent"
class="relative rounded-none bg-transparent"
/>
<span
v-if="!collapse"

View File

@@ -33,6 +33,7 @@
opacity: 0;
transform: translateX(30px) skewX(-30deg);
}
/*
.breadcrumb-transition-move,
.breadcrumb-transition-enter-active {

View File

@@ -1,6 +1,10 @@
<script lang="ts" setup>
import { VbenAdminLayout } from '@vben-core/layout-ui';
import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
import {
VbenBackTop,
// VbenFloatingButtonGroup,
VbenLogo,
} from '@vben-core/shadcn-ui';
import { mapTree } from '@vben-core/toolkit';
import { MenuRecordRaw } from '@vben-core/typings';
@@ -107,9 +111,11 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
:footer-fixed="preference.footerFixed"
:side-semi-dark="preference.semiDarkMenu"
:side-theme="theme"
:side-hidden="preference.sideHidden"
:side-visible="sideVisible"
:footer-visible="preference.footerVisible"
:header-visible="preference.headerVisible"
:header-hidden="preference.headerHidden"
:side-width="preference.sideWidth"
:tabs-visible="preference.tabsVisible"
:side-expand-on-hover="preference.sideExpandOnHover"
@@ -131,8 +137,9 @@ function wrapperMenus(menus: MenuRecordRaw[]) {
<PreferenceWidget />
</template>
<template #back-top>
<template #floating-button-group>
<VbenBackTop />
<!-- <VbenFloatingButtonGroup /> -->
</template>
<!-- logo -->

View File

@@ -17,8 +17,8 @@ const menus = computed(() => {
function handleScreenChange(screen: boolean) {
updatePreference({
headerVisible: !screen,
sideVisible: !screen,
headerHidden: !!screen,
sideHidden: !!screen,
});
}
</script>
@@ -27,7 +27,7 @@ function handleScreenChange(screen: boolean) {
<div class="flex-center h-full">
<TabsMore :menus="menus" />
<TabsScreen
:screen="!preference.headerVisible && !preference.sideVisible"
:screen="preference.sideHidden && preference.sideHidden"
@change="handleScreenChange"
@update:screen="handleScreenChange"
/>

View File

@@ -0,0 +1,11 @@
/**
* @zh_CN 登陆页面 url 地址
*/
const LOGIN_PATH = '/auth/login';
/**
* @zh_CN 登陆页面路由名称
*/
const LOGIN_NAME = 'Login';
export { LOGIN_NAME, LOGIN_PATH };

View File

@@ -1 +1,2 @@
export * from './_essential';
export * from './vben';

View File

@@ -1 +1,6 @@
export const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
/**
* @zh_CN GITHUB 仓库地址
*/
const VBEN_GITHUB_URL = 'https://github.com/vbenjs/vue-vben-admin';
export { VBEN_GITHUB_URL };

View File

@@ -38,6 +38,59 @@ search:
no-recent: No recent searches
recent: Recent
authentication:
layout-title: Plug-and-play backend system
layout-desc: Efficient, versatile frontend template
login-success: Login successful
login-success-desc: Welcome back
welcome-back: Welcome Back
login-subtitle: Enter your account details to manage your projects
username: Username
password: Password
username-tip: Username is required
password-tip: Password is required
account-tip: Don't have an account yet?
create-an-account: Create an account
create-account: Create account
already-account: Already have an account?
remember-me: Remember Me
sign-up: Sign Up
sign-up-subtitle: Make managing your applications simple and fun
comfirm-password: Comfirm Password
comfirm-password-tip: The passwords entered twice do not match
sign-up-agree: I agree to
sign-up-privacy-policy: Privacy-policy
sign-up-terms: Terms
sign-up-agree-tip: Please agree to the Privacy Policy and Terms
go-login: Login instead
password-strength: Use 8 or more characters with a mix of letters, numbers & symbols
forget-password: Forget Password?
forget-password-subtitle: Enter your email and we'll send you instructions to reset your password
email-tip: Email is required
send-reset-link: Send Reset Link
email: Email
qrcode-subtitle: Please scan the QR code to log in on your mobile device
qrcode-prompt: Scanning the code to complete the login
qrcode-login: QR Login
code-subtitle: Please enter your phone number to start managing your projects
code: Security code
code-tip: Security code is required
mobile: Mobile
mobile-login: Mobile Login
mobile-tip: Mobile is required
send-code: Get Security code
send-text: "Reacquire in {0}s"
third-party-login: Or continue with
page:
about: About
document: Document
login: Login
register: Register
code-login: Code Login
qrcode-login: Qrcode Login
forget-password: Forget Password
preference:
preferences: Preferences
preferences-subtitle: Customize Preferences & Preview in Real Time
@@ -111,51 +164,3 @@ preference:
footer-visible: Display Footer
logo-visible: Display Logo
reset-tip: The data has changed, click to reset
authentication:
layout-title: Plug-and-play backend system
layout-desc: Efficient, versatile frontend template
login-success: Login successful
login-success-desc: Welcome back
welcome-back: Welcome Back
login-subtitle: Enter your account details to manage your projects
username: Username
password: Password
username-tip: Username is required
password-tip: Password is required
account-tip: Don't have an account yet?
create-an-account: Create an account
create-account: Create account
already-account: Already have an account?
remember-me: Remember Me
sign-up: Sign Up
sign-up-subtitle: Make managing your applications simple and fun
comfirm-password: Comfirm Password
comfirm-password-tip: The passwords entered twice do not match
sign-up-agree: I agree to
sign-up-privacy-policy: Privacy-policy
sign-up-terms: Terms
sign-up-agree-tip: Please agree to the Privacy Policy and Terms
go-login: Login instead
password-strength: Use 8 or more characters with a mix of letters, numbers & symbols
forget-password: Forget Password?
forget-password-subtitle: Enter your email and we'll send you instructions to reset your password
email-tip: Email is required
send-reset-link: Send Reset Link
email: Email
qrcode-subtitle: Please scan the QR code to log in on your mobile device
qrcode-prompt: Scanning the code to complete the login
qrcode-login: QR Login
code-subtitle: Please enter your phone number to start managing your projects
code: Security code
code-tip: Security code is required
mobile: Mobile
mobile-login: Mobile Login
mobile-tip: Mobile is required
send-code: Get Security code
send-text: "Reacquire in {0}s"
third-party-login: Or continue with
page:
about: About
document: Document

View File

@@ -37,6 +37,59 @@ search:
no-recent: 没有搜索历史
recent: 搜索历史
authentication:
layout-title: 开箱即用的大型中后台管理系统
layout-desc: 工程化、高性能、跨组件库的前端模版
login-success: 登录成功
login-success-desc: 欢迎回来
welcome-back: 欢迎回来
login-subtitle: 请输入您的帐户信息以开始管理您的项目
username: 账号
password: 密码
username-tip: 请输入用户名
password-tip: 请输入用户名
remember-me: 记住账号
create-an-account: 创建一个账号
create-account: 创建账号
already-account: 已经有账号了?
account-tip: 还没有账号?
sign-up: 注册
sign-up-subtitle: 让您的应用程序管理变得简单而有趣
comfirm-password: 确认密码
comfirm-password-tip: 两次输入的密码不一致
sign-up-agree: 我同意
sign-up-privacy-policy: 隐私政策
sign-up-terms: 条款
sign-up-agree-tip: 请同意隐私政策和条款
go-login: 去登录
password-strength: 使用 8 个或更多字符,混合字母、数字和符号
forget-password: 忘记密码?
forget-password-subtitle: 输入您的电子邮件,我们将向您发送重置密码的连接
email-tip: 请输入邮箱
send-reset-link: 发送重置链接
email: 邮箱
qrcode-subtitle: 请用手机扫描二维码登录
qrcode-prompt: 扫码后点击 '确认',即可完成登录
qrcode-login: 扫码登录
code-subtitle: 请输入您的手机号码以开始管理您的项目
code: 验证码
code-tip: 请输入验证码
mobile: 手机号码
mobile-login: 手机号登录
mobile-tip: 请输入手机号码
send-code: 获取验证码
send-text: "{0}秒后重新获取"
third-party-login: 其他登录方式
page:
about: 关于
document: 文档
login: 登陆
register: 注册
code-login: 验证码登陆
qrcode-login: 二维码登陆
forget-password: 忘记密码
preference:
preferences: 偏好设置
preferences-subtitle: 自定义偏好设置 & 实时预览
@@ -110,51 +163,3 @@ preference:
footer-fixed: 固定在底部
logo-visible: 显示 Logo
reset-tip: 数据有变化,点击可进行重置
authentication:
layout-title: 开箱即用的大型中后台管理系统
layout-desc: 工程化、高性能、跨组件库的前端模版
login-success: 登录成功
login-success-desc: 欢迎回来
welcome-back: 欢迎回来
login-subtitle: 请输入您的帐户信息以开始管理您的项目
username: 账号
password: 密码
username-tip: 请输入用户名
password-tip: 请输入用户名
remember-me: 记住账号
create-an-account: 创建一个账号
create-account: 创建账号
already-account: 已经有账号了?
account-tip: 还没有账号?
sign-up: 注册
sign-up-subtitle: 让您的应用程序管理变得简单而有趣
comfirm-password: 确认密码
comfirm-password-tip: 两次输入的密码不一致
sign-up-agree: 我同意
sign-up-privacy-policy: 隐私政策
sign-up-terms: 条款
sign-up-agree-tip: 请同意隐私政策和条款
go-login: 去登录
password-strength: 使用 8 个或更多字符,混合字母、数字和符号
forget-password: 忘记密码?
forget-password-subtitle: 输入您的电子邮件,我们将向您发送重置密码的连接
email-tip: 请输入邮箱
send-reset-link: 发送重置链接
email: 邮箱
qrcode-subtitle: 请用手机扫描二维码登录
qrcode-prompt: 扫码后点击 '确认',即可完成登录
qrcode-login: 扫码登录
code-subtitle: 请输入您的手机号码以开始管理您的项目
code: 验证码
code-tip: 请输入验证码
mobile: 手机号码
mobile-login: 手机号登录
mobile-tip: 请输入手机号码
send-code: 获取验证码
send-text: "{0}秒后重新获取"
third-party-login: 其他登录方式
page:
about: 关于
document: 文档

View File

@@ -15,17 +15,18 @@ const defaultPreference: Preference = {
contentCompact: 'wide',
copyright: 'Copyright © 2024 Vben Admin PRO',
defaultAvatar:
'https://cdn.jsdelivr.net/gh/vbenjs/vben-cdn-static@0.1.2/vben-admin/pro-avatar.webp',
'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/avatar-v1.webp',
dynamicTitle: true,
footerFixed: true,
footerVisible: true,
headerHidden: false,
headerMode: 'fixed',
headerVisible: true,
isMobile: false,
keepAlive: true,
layout: 'side-nav',
locale: 'zh-CN',
logo: 'https://cdn.jsdelivr.net/gh/vbenjs/vben-cdn-static@0.1.2/vben-admin/admin-logo.png',
logo: 'https://cdn.jsdelivr.net/npm/@vbenjs/static-source@0.1.0/source/logo-v1.webp',
logoVisible: true,
navigationAccordion: true,
navigationSplit: true,
@@ -40,6 +41,7 @@ const defaultPreference: Preference = {
sideCollapseShowTitle: true,
sideExpandOnHover: true,
sideExtraCollapse: true,
sideHidden: false,
sideVisible: true,
sideWidth: 240,
tabsIcon: true,