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

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

Browse Source
This commit is contained in:
dap
2024-08-13 22:12:15 +08:00
parent 895b5bc8d0 3b0f72330a
commit abf863dcda
44 changed files with 150 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/@core/base/design/src/css/global.css
View File

@@ -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,

9
packages/@core/base/design/src/design-tokens/dark/index.css
View File

@@ -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%;

3
packages/@core/base/design/src/design-tokens/default/index.css
View File

@@ -85,9 +85,6 @@
/* 主体内容背景色 */
--content: 240 11% 96%;
/* 登录背景色 */
--authentication: 231deg 61% 44%;
/* =============component & UI============= */
/* menu */

1
packages/@core/base/icons/src/lucide.ts
View File

@@ -38,6 +38,7 @@ export {
RotateCw,
Search,
SearchX,
Settings2,
Sun,
SunMoon,
SwatchBook,

2
packages/@core/base/shared/src/constants/vben.ts
View File

@@ -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 首页地址

4
packages/@core/base/typings/src/menu-record.ts
View File

@@ -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;
/**
* 菜单名
*/

2
packages/@core/base/typings/src/vue-router.d.ts vendored
View File

@@ -68,7 +68,7 @@ interface RouteMeta {
/**
* 图标（菜单/tab）
*/
icon?: string;
icon?: Component | string;
/**
* iframe 地址
*/

4
packages/@core/preferences/src/config.ts
View File

@@ -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,

39
packages/@core/preferences/src/constants.ts
View File

@@ -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%)',

12
packages/@core/ui-kit/layout-ui/src/vben-layout.vue
View File

@@ -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

13
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -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);
}
}
}

10
packages/@core/ui-kit/menu-ui/src/interface/index.ts
View File

@@ -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;

6
packages/@core/ui-kit/menu-ui/src/sub-menu.vue
View File

@@ -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>

6
packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
View File

@@ -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"

4
packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
View File

@@ -1,5 +1,7 @@
import type { Component } from 'vue';
interface IBreadcrumb {
icon?: string;
icon?: Component | string;
isHome?: boolean;
items?: IBreadcrumb[];
path?: string;

2
packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
View File

@@ -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"

6
packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
View File

@@ -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"

9
packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
View File

@@ -31,9 +31,16 @@ describe('ellipsis-text.vue', () => {
default: 'This is a very long text that should be truncated.',
},
});
const ellipsis = wrapper.find('.truncate');
// 点击 ellipsis，应该触发 expandChange，参数为 false
await ellipsis.trigger('click');
expect(wrapper.emitted('expandChange')).toBeTruthy();
expect(wrapper.emitted('expandChange')?.[0]).toEqual([true]);
// 再次点击，应该触发 expandChange，参数为 false
await ellipsis.trigger('click');
expect(wrapper.emitted('expandChange')?.length).toBe(2);
expect(wrapper.emitted('expandChange')?.[1]).toEqual([false]);
});
});

34
packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, type CSSProperties, nextTick, ref, watchEffect } from 'vue';
import { computed, type CSSProperties, ref, watchEffect } from 'vue';
import { VbenTooltip } from '@vben-core/shadcn-ui';
@@ -72,12 +72,10 @@ const textMaxWidth = computed(() => {
}
return props.maxWidth;
});
const showTooltip = ref(false);
const ellipsis = ref();
const isExpand = ref(false);
const defaultTooltipMaxWidth = ref();
watchEffect(() => {
showTooltip.value = props.tooltip;
});
watchEffect(
() => {
if (props.tooltip && ellipsis.value) {
@@ -88,25 +86,12 @@ watchEffect(
{ flush: 'post' },
);
function onExpand() {
const { style } = ellipsis.value;
const isExpanded = !style['-webkit-line-clamp'];
if (props.tooltip) {
showTooltip.value = !isExpanded;
}
nextTick(() => {
style['-webkit-line-clamp'] = isExpanded ? props.line : '';
});
emit('expandChange', !isExpanded);
isExpand.value = !isExpand.value;
emit('expandChange', isExpand.value);
}
function handleExpand() {
if (props.expand) {
onExpand();
} else {
return false;
}
props.expand && onExpand();
}
</script>
<template>
@@ -118,7 +103,7 @@ function handleExpand() {
color: tooltipColor,
backgroundColor: tooltipBackgroundColor,
}"
:disabled="!showTooltip"
:disabled="!props.tooltip || isExpand"
:side="placement"
>
<slot name="tooltip">
@@ -133,7 +118,10 @@ function handleExpand() {
['inline-block truncate']: line === 1,
[$style.ellipsisMultiLine]: line > 1,
}"
:style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
:style="{
'-webkit-line-clamp': isExpand ? '' : line,
'max-width': textMaxWidth,
}"
class="cursor-text overflow-hidden"
@click="handleExpand"
v-bind="$attrs"

22
packages/effects/layouts/src/authentication/authentication.vue
View File

@@ -26,7 +26,7 @@ const logoSource = computed(() => preferences.logo.source);
<!-- 头部 Logo 和应用名称 -->
<div class="absolute left-0 top-0 z-10 flex flex-1">
<div
:class="authPanelLeft ? 'lg:text-foreground' : 'lg:text-white'"
:class="authPanelRight ? 'lg:text-white' : 'lg:text-foreground'"
class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
>
<img :alt="appName" :src="logoSource" class="mr-2" width="42" />
@@ -38,7 +38,8 @@ const logoSource = computed(() => preferences.logo.source);
<!-- 中间内容 -->
<div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
<div class="bg-authentication absolute inset-0 h-full w-full">
<div class="absolute inset-0 h-full w-full bg-[#070709]">
<div class="login-background absolute left-0 top-0 size-full"></div>
<div class="flex-col-center -enter-x mr-20 h-full">
<SloganIcon :alt="appName" class="animate-float h-64 w-2/5" />
<div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
@@ -52,9 +53,10 @@ const logoSource = computed(() => preferences.logo.source);
</div>
<!-- 中心认证面板 -->
<div v-if="authPanelCenter" class="flex-center bg-authentication w-full">
<div v-if="authPanelCenter" class="flex-center relative w-full">
<div class="login-background absolute left-0 top-0 size-full"></div>
<AuthenticationFormView
class="md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
class="md:bg-background shadow-primary/10 w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-[36%]"
/>
</div>
@@ -65,3 +67,15 @@ const logoSource = computed(() => preferences.logo.source);
/>
</div>
</template>
<style scoped>
.login-background {
background: linear-gradient(
154deg,
#07070915 30%,
hsl(var(--primary) / 15%) 48%,
#07070915 64%
);
filter: blur(100px);
}
</style>

13
packages/effects/layouts/src/widgets/breadcrumb.vue
View File

@@ -30,11 +30,7 @@ const breadcrumbs = computed((): IBreadcrumb[] => {
const resultBreadcrumb: IBreadcrumb[] = [];
for (const match of matched) {
const {
meta,
path,
// children = []
} = match;
const { meta, path } = match;
const { hideChildrenInMenu, hideInBreadcrumb, icon, name, title } =
meta || {};
if (hideInBreadcrumb || hideChildrenInMenu || !path) {
@@ -45,13 +41,6 @@ const breadcrumbs = computed((): IBreadcrumb[] => {
icon,
path: path || route.path,
title: title ? $t((title || name) as string) : '',
// items: children.map((child) => {
// return {
// icon: child?.meta?.icon as string,
// path: child.path,
// title: child?.meta?.title as string,
// };
// }),
});
}
if (props.showHome) {

4
packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue
View File

@@ -13,7 +13,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
import { computed, ref } from 'vue';
import { Copy, RotateCw, SwatchBook } from '@vben/icons';
import { Copy, RotateCw, Settings2 } from '@vben/icons';
import { $t, loadLocaleMessages } from '@vben/locales';
import {
clearPreferencesCache,
@@ -230,7 +230,7 @@ async function handleReset() {
:title="$t('preferences.title')"
class="bg-primary flex-col-center h-10 w-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
>
<SwatchBook class="size-5" />
<Settings2 class="size-5" />
</VbenButton>
</template>
<template #extra>

4
packages/effects/layouts/src/widgets/preferences/preferences.vue
View File

@@ -5,7 +5,7 @@ import { loadLocaleMessages } from '@vben/locales';
import { preferences, updatePreferences } from '@vben/preferences';
import { capitalizeFirstLetter } from '@vben/utils';
import Preferences from './preferences-sheet.vue';
import PreferencesSheet from './preferences-sheet.vue';
/**
* preferences 转成 vue props
@@ -47,5 +47,5 @@ const listen = computed(() => {
});
</script>
<template>
<Preferences v-bind="attrs" v-on="listen" />
<PreferencesSheet v-bind="attrs" v-on="listen" />
</template>