Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
This commit is contained in:
@@ -36,8 +36,9 @@
|
||||
|
||||
/* overflow: overlay; */
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* -webkit-font-smoothing: antialiased; */
|
||||
|
||||
/* -moz-osx-font-smoothing: grayscale; */
|
||||
}
|
||||
|
||||
a,
|
||||
|
@@ -52,12 +52,12 @@
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
/* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
|
||||
--accent: 0deg 0% 100% / 8%;
|
||||
--accent-hover: 0deg 0% 100% / 12%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-hover: 240 3.7% 20.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
/* Darker color */
|
||||
--heavy: 0deg 0% 100% / 12%;
|
||||
--heavy: 240 3.7% 20.9%;
|
||||
--heavy-foreground: var(--accent-foreground);
|
||||
|
||||
/* Default border color */
|
||||
@@ -85,9 +85,6 @@
|
||||
/* 主体内容背景色 */
|
||||
--content: 240 11% 96%;
|
||||
|
||||
/* 登录背景色 */
|
||||
--authentication: 220deg 13.06% 3.04%;
|
||||
|
||||
/* =============component & UI============= */
|
||||
|
||||
--sidebar: 222.34deg 10.43% 12.27%;
|
||||
|
@@ -85,9 +85,6 @@
|
||||
/* 主体内容背景色 */
|
||||
--content: 240 11% 96%;
|
||||
|
||||
/* 登录背景色 */
|
||||
--authentication: 231deg 61% 44%;
|
||||
|
||||
/* =============component & UI============= */
|
||||
|
||||
/* menu */
|
||||
|
@@ -38,6 +38,7 @@ export {
|
||||
RotateCw,
|
||||
Search,
|
||||
SearchX,
|
||||
Settings2,
|
||||
Sun,
|
||||
SunMoon,
|
||||
SwatchBook,
|
||||
|
@@ -12,7 +12,7 @@ export const VBEN_DOC_URL = 'https://doc.vben.pro';
|
||||
* @zh_CN Vben Logo
|
||||
*/
|
||||
export const VBEN_LOGO_URL =
|
||||
'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp';
|
||||
'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp';
|
||||
|
||||
/**
|
||||
* @zh_CN Vben Admin 首页地址
|
||||
|
@@ -1,5 +1,7 @@
|
||||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
import type { Component } from 'vue';
|
||||
|
||||
/**
|
||||
* 扩展路由原始对象
|
||||
*/
|
||||
@@ -44,7 +46,7 @@ interface MenuRecordRaw extends MenuRecordBadgeRaw {
|
||||
/**
|
||||
* 图标名
|
||||
*/
|
||||
icon?: string;
|
||||
icon?: Component | string;
|
||||
/**
|
||||
* 菜单名
|
||||
*/
|
||||
|
@@ -68,7 +68,7 @@ interface RouteMeta {
|
||||
/**
|
||||
* 图标(菜单/tab)
|
||||
*/
|
||||
icon?: string;
|
||||
icon?: Component | string;
|
||||
/**
|
||||
* iframe 地址
|
||||
*/
|
||||
|
@@ -10,7 +10,7 @@ const defaultPreferences: Preferences = {
|
||||
compact: false,
|
||||
contentCompact: 'wide',
|
||||
defaultAvatar:
|
||||
'https://unpkg.com/@vbenjs/static-source@0.1.5/source/avatar-v1.webp',
|
||||
'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
|
||||
dynamicTitle: true,
|
||||
enableCheckUpdates: true,
|
||||
enablePreferences: true,
|
||||
@@ -47,7 +47,7 @@ const defaultPreferences: Preferences = {
|
||||
},
|
||||
logo: {
|
||||
enable: true,
|
||||
source: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp',
|
||||
source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
|
||||
},
|
||||
navigation: {
|
||||
accordion: true,
|
||||
|
@@ -21,39 +21,42 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
|
||||
type: 'pink',
|
||||
},
|
||||
{
|
||||
color: 'hsl(0 75% 42%)',
|
||||
type: 'rose',
|
||||
color: 'hsl(42 84% 61%)',
|
||||
type: 'yellow',
|
||||
},
|
||||
{
|
||||
color: 'hsl(212 100% 45%)',
|
||||
type: 'sky-blue',
|
||||
},
|
||||
{
|
||||
color: 'hsl(211 91% 39%)',
|
||||
type: 'deep-blue',
|
||||
},
|
||||
{
|
||||
color: 'hsl(161 90% 43%)',
|
||||
type: 'green',
|
||||
},
|
||||
{
|
||||
color: 'hsl(181 84% 32%)',
|
||||
type: 'deep-green',
|
||||
},
|
||||
{
|
||||
color: 'hsl(18 89% 40%)',
|
||||
type: 'orange',
|
||||
},
|
||||
{
|
||||
color: 'hsl(42 84% 61%)',
|
||||
type: 'yellow',
|
||||
},
|
||||
{
|
||||
color: 'hsl(240 5% 26%)',
|
||||
darkPrimaryColor: 'hsl(0 0% 98%)',
|
||||
primaryColor: 'hsl(240 5.9% 10%)',
|
||||
type: 'zinc',
|
||||
},
|
||||
|
||||
{
|
||||
color: 'hsl(181 84% 32%)',
|
||||
type: 'deep-green',
|
||||
},
|
||||
|
||||
{
|
||||
color: 'hsl(211 91% 39%)',
|
||||
type: 'deep-blue',
|
||||
},
|
||||
{
|
||||
color: 'hsl(18 89% 40%)',
|
||||
type: 'orange',
|
||||
},
|
||||
{
|
||||
color: 'hsl(0 75% 42%)',
|
||||
type: 'rose',
|
||||
},
|
||||
|
||||
{
|
||||
color: 'hsl(0 0% 25%)',
|
||||
darkPrimaryColor: 'hsl(0 0% 98%)',
|
||||
|
@@ -59,6 +59,11 @@ const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse');
|
||||
const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
|
||||
const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
|
||||
|
||||
// side是否处于hover状态展开菜单中
|
||||
const sidebarExpandOnHovering = ref(false);
|
||||
const headerIsHidden = ref(false);
|
||||
const contentRef = ref();
|
||||
|
||||
const {
|
||||
arrivedState,
|
||||
directions,
|
||||
@@ -66,11 +71,7 @@ const {
|
||||
y: scrollY,
|
||||
} = useScroll(document);
|
||||
|
||||
const { y: mouseY } = useMouse({ type: 'client' });
|
||||
|
||||
// side是否处于hover状态展开菜单中
|
||||
const sidebarExpandOnHovering = ref(false);
|
||||
const headerIsHidden = ref(false);
|
||||
const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
|
||||
|
||||
const realLayout = computed(() =>
|
||||
props.isMobile ? 'sidebar-nav' : props.layout,
|
||||
@@ -507,6 +508,7 @@ function handleOpenMenu() {
|
||||
</LayoutSidebar>
|
||||
|
||||
<div
|
||||
ref="contentRef"
|
||||
class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
|
||||
>
|
||||
<div
|
||||
|
@@ -542,15 +542,6 @@ $namespace: vben;
|
||||
}
|
||||
|
||||
& > .#{$namespace}-sub-menu {
|
||||
// .#{$namespace}-menu {
|
||||
// background: var(--menu-submenu-opened-background-color);
|
||||
|
||||
// .#{$namespace}-sub-menu,
|
||||
// .#{$namespace}-menu-item:not(.is-active),
|
||||
// .#{$namespace}-sub-menu-content:not(.is-active) {
|
||||
// background: var(--menu-submenu-opened-background-color);
|
||||
// }
|
||||
// }
|
||||
& > .#{$namespace}-menu {
|
||||
& > .#{$namespace}-menu-item {
|
||||
padding-left: calc(
|
||||
@@ -713,13 +704,11 @@ $namespace: vben;
|
||||
|
||||
.#{$namespace}-menu-item {
|
||||
fill: var(--menu-item-color);
|
||||
stroke: var(--menu-item-color);
|
||||
|
||||
@include menu-item;
|
||||
|
||||
&.is-active {
|
||||
fill: var(--menu-item-active-color);
|
||||
stroke: var(--menu-item-active-color);
|
||||
|
||||
@include menu-item-active;
|
||||
}
|
||||
@@ -783,7 +772,6 @@ $namespace: vben;
|
||||
list-style: none;
|
||||
background: var(--menu-submenu-background-color);
|
||||
fill: var(--menu-item-color);
|
||||
stroke: var(--menu-item-color);
|
||||
|
||||
&.is-active {
|
||||
div[data-state='open'] > .#{$namespace}-sub-menu-content,
|
||||
@@ -794,7 +782,6 @@ $namespace: vben;
|
||||
cursor: pointer;
|
||||
background: var(--menu-submenu-active-background-color);
|
||||
fill: var(--menu-submenu-active-color);
|
||||
stroke: var(--menu-submenu-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -1,6 +1,6 @@
|
||||
import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
|
||||
|
||||
import type { Ref } from 'vue';
|
||||
import type { Component, Ref } from 'vue';
|
||||
|
||||
interface MenuProps {
|
||||
/**
|
||||
@@ -61,7 +61,7 @@ interface SubMenuProps extends MenuRecordBadgeRaw {
|
||||
/**
|
||||
* @zh_CN 图标
|
||||
*/
|
||||
icon?: string;
|
||||
icon?: Component | string;
|
||||
/**
|
||||
* @zh_CN submenu 名称
|
||||
*/
|
||||
@@ -80,7 +80,7 @@ interface MenuItemProps extends MenuRecordBadgeRaw {
|
||||
/**
|
||||
* @zh_CN 图标
|
||||
*/
|
||||
icon?: string;
|
||||
icon?: Component | string;
|
||||
/**
|
||||
* @zh_CN menuitem 名称
|
||||
*/
|
||||
@@ -93,10 +93,6 @@ interface MenuItemRegistered {
|
||||
path: string;
|
||||
}
|
||||
|
||||
// export interface MenuItemClicked {
|
||||
// name: string;
|
||||
// }
|
||||
|
||||
interface MenuItemClicked {
|
||||
parentPaths: string[];
|
||||
path: string;
|
||||
|
@@ -31,12 +31,6 @@ const hasChildren = computed(() => {
|
||||
Reflect.has(menu, 'children') && !!menu.children && menu.children.length > 0
|
||||
);
|
||||
});
|
||||
|
||||
// function menuIcon(menu: MenuRecordRaw) {
|
||||
// return props.activePath === menu.path
|
||||
// ? menu.activeIcon || menu.icon
|
||||
// : menu.icon;
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
@@ -13,9 +13,9 @@ interface Props extends BacktopProps {}
|
||||
defineOptions({ name: 'BackTop' });
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
bottom: 24,
|
||||
bottom: 20,
|
||||
isGroup: false,
|
||||
right: 40,
|
||||
right: 24,
|
||||
target: '',
|
||||
visibilityHeight: 200,
|
||||
});
|
||||
@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
|
||||
<VbenButton
|
||||
v-if="visible"
|
||||
:style="backTopStyle"
|
||||
class="bg-accent hover:bg-heavy data fixed bottom-10 right-5 z-[1000] h-10 w-10 rounded-full"
|
||||
class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] h-10 w-10 rounded-full duration-500"
|
||||
size="icon"
|
||||
variant="icon"
|
||||
@click="handleClick"
|
||||
|
@@ -1,5 +1,7 @@
|
||||
import type { Component } from 'vue';
|
||||
|
||||
interface IBreadcrumb {
|
||||
icon?: string;
|
||||
icon?: Component | string;
|
||||
isHome?: boolean;
|
||||
items?: IBreadcrumb[];
|
||||
path?: string;
|
||||
|
@@ -33,7 +33,7 @@ const inputClass = computed(() => {
|
||||
v-model="modelValue"
|
||||
:class="[props.class, inputClass]"
|
||||
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"
|
||||
class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground/60 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"
|
||||
|
@@ -108,9 +108,6 @@ function scrollIntoView() {
|
||||
<div
|
||||
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
|
||||
>
|
||||
<!-- <div
|
||||
class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
|
||||
> -->
|
||||
<!-- close-icon -->
|
||||
<X
|
||||
v-show="
|
||||
@@ -130,9 +127,6 @@ function scrollIntoView() {
|
||||
<div
|
||||
class="text-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
|
||||
>
|
||||
<!-- <div
|
||||
class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"
|
||||
> -->
|
||||
<VbenIcon
|
||||
v-if="showIcon"
|
||||
:icon="tab.icon"
|
||||
|
Reference in New Issue
Block a user