908705107/ai-agent-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: restore original admin shell quality

Browse Source
This commit is contained in:
cls_宁波本机
2026-06-11 20:10:19 +08:00
parent 1fba0aafb2
commit ff024af5b5
8 changed files with 211 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/apps/web-ele/src/layouts/basic.vue
+7 -1
View File
@@ -27,6 +27,9 @@ const UserDropdown = defineAsyncComponent(() =>
(module) => module.UserDropdown,
),
);
const LockScreen = defineAsyncComponent(() =>
import('@vben/layouts/es/lock-screen').then((module) => module.LockScreen),
);
const NotificationPopup = defineAsyncComponent(
() => import('#/components/notification/NotificationPopup.vue'),
);
@@ -227,7 +230,7 @@ watch(
</script>
<template>
<BasicLayout>
<BasicLayout @clear-preferences-and-logout="handleLogout">
<template #user-dropdown>
<UserDropdown
:avatar
@@ -286,5 +289,8 @@ watch(
<LoginForm />
</AuthenticationLoginExpiredModal>
</template>
<template #lock-screen>
<LockScreen :avatar @to-login="handleLogout" />
</template>
</BasicLayout>
</template>
web/apps/web-ele/src/preferences.ts
+5 -2
View File
@@ -20,11 +20,11 @@ export const overridesPreferences = defineOverridesPreferences({
layout: 'header-sidebar-nav',
},
shortcutKeys: {
enable: false,
enable: true,
globalLockScreen: false,
globalLogout: true,
globalPreferences: false,
globalSearch: false,
globalSearch: true,
},
theme: {
mode: 'light',
@@ -46,6 +46,9 @@ export const overridesPreferences = defineOverridesPreferences({
fit: 'contain',
source: Logo,
},
tabbar: {
persist: false,
},
widget: {
fullscreen: true,
globalSearch: true,
web/apps/web-ele/src/router/guard.ts
+19 -6
View File
@@ -12,6 +12,16 @@ import { useAppContextStore } from '#/store/app-context';
import { normalizeHomePath } from '#/utils/legacy-home';
import { generateAccess } from './access';
import { isLightTabRoute } from './light-menu';
function filterLightTabHistory<T extends { tabs?: unknown[] }>(history: T) {
const tabs = Array.isArray(history.tabs) ? history.tabs : [];
return {
...history,
cachedTabs: [],
tabs: tabs.filter((tab) => isLightTabRoute(tab as any)),
};
}
/**
* 通用守卫配置
@@ -39,10 +49,10 @@ function setupCommonGuard(router: Router) {
// 保存当前应用的 tab 历史到内存
const currentAppKey = currentAppCode || 'main';
tabHistoryByApp.set(currentAppKey, {
tabHistoryByApp.set(currentAppKey, filterLightTabHistory({
tabs: [...tabbarStore.tabs],
cachedTabs: new Set(tabbarStore.cachedTabs),
});
}));
// 从 sessionStorage 加载新应用的 tab 历史
const storageKey = `vben-admin-tabs-${appKey}`;
@@ -51,8 +61,9 @@ function setupCommonGuard(router: Router) {
if (savedHistory) {
try {
const parsed = JSON.parse(savedHistory);
tabbarStore.tabs = parsed.tabs || [];
tabbarStore.cachedTabs = new Set(parsed.cachedTabs || []);
const lightHistory = filterLightTabHistory(parsed);
tabbarStore.tabs = lightHistory.tabs || [];
tabbarStore.cachedTabs = new Set(lightHistory.cachedTabs || []);
} catch (error) {
console.error('Failed to parse tab history:', error);
tabbarStore.tabs = [];
@@ -87,10 +98,12 @@ function setupCommonGuard(router: Router) {
const storageKey = `vben-admin-tabs-${appKey}`;
const tabbarStore = useTabbarStore();
const tabHistory = {
const tabHistory = filterLightTabHistory({
tabs: tabbarStore.tabs,
cachedTabs: [...tabbarStore.cachedTabs],
};
});
tabbarStore.tabs = tabHistory.tabs as any;
tabbarStore.cachedTabs = new Set(tabHistory.cachedTabs as string[]);
sessionStorage.setItem(storageKey, JSON.stringify(tabHistory));
// 关闭页面加载进度条
web/apps/web-ele/src/router/light-menu.ts
+55
View File
@@ -31,10 +31,65 @@ export const LIGHT_MENU_NAMES = new Set([
'userSettings',
]);
const LIGHT_ROUTE_PATH_PREFIXES = [
'/account-settings',
'/ai-platform/agent',
'/ai-platform/knowledge',
'/ai-platform/model',
'/ai-platform/workflow',
'/ai-platform/workflow-runs',
'/announcement',
'/codex',
'/dept',
'/dict',
'/file-manager',
'/login-log',
'/menu',
'/message',
'/page-render/main_home',
'/permission',
'/post',
'/role',
'/server-monitor',
'/system-config',
'/ui-config',
'/user',
];
export function isLightMenuName(name?: string) {
return !name || LIGHT_MENU_NAMES.has(name);
}
function normalizePath(path?: string) {
if (!path) return '';
return path.split('?')[0]?.replace(/\/$/, '') || '';
}
export function isLightTabRoute(route: {
fullPath?: string;
matched?: Array<{ name?: unknown; path?: string }>;
name?: unknown;
path?: string;
}) {
if (typeof route.name === 'string' && LIGHT_MENU_NAMES.has(route.name)) {
return true;
}
if (
route.matched?.some(
(item) =>
typeof item.name === 'string' && LIGHT_MENU_NAMES.has(item.name),
)
) {
return true;
}
const path = normalizePath(route.fullPath || route.path);
return LIGHT_ROUTE_PATH_PREFIXES.some(
(prefix) => path === prefix || path.startsWith(`${prefix}/`),
);
}
export function filterLightMenuTree<
T extends { children?: T[]; name?: string },
>(routes: T[]): T[] {
web/packages/@core/preferences/src/preferences.ts
+7
View File
@@ -111,6 +111,13 @@ class PreferenceManager {
mergedPreference.widget,
);
}
if (overrides?.tabbar) {
mergedPreference.tabbar = merge(
{},
overrides.tabbar,
mergedPreference.tabbar,
);
}
if (overrides?.logo?.source) {
mergedPreference.logo.source = overrides.logo.source;
}
web/packages/effects/layouts/src/basic/header/header.vue
+88 -6
View File
@@ -1,11 +1,20 @@
<script lang="ts" setup>
import { computed, defineAsyncComponent, useSlots } from 'vue';
import { computed, useSlots } from 'vue';
import { preferences } from '@vben/preferences';
import { useRefresh } from '@vben/hooks';
import { RotateCw } from '@vben/icons';
import { preferences, usePreferences } from '@vben/preferences';
import { useAccessStore } from '@vben/stores';
const ThemeToggle = defineAsyncComponent(
() => import('../../widgets/theme-toggle/theme-toggle.vue'),
);
import { VbenFullScreen, VbenIconButton } from '@vben-core/shadcn-ui';
import {
GlobalSearch,
LanguageToggle,
PreferencesButton,
ThemeToggle,
TimezoneButton,
} from '../../widgets';
interface Props {
/**
@@ -22,19 +31,55 @@ withDefaults(defineProps<Props>(), {
theme: 'light',
});
const emit = defineEmits<{ clearPreferencesAndLogout: [] }>();
const REFERENCE_VALUE = 50;
const accessStore = useAccessStore();
const slots = useSlots();
const { refresh } = useRefresh();
const { globalSearchShortcutKey, preferencesButtonPosition } =
usePreferences();
const rightSlots = computed(() => {
const list = [{ index: REFERENCE_VALUE + 100, name: 'user-dropdown' }];
if (preferences.widget.globalSearch) {
list.push({
index: REFERENCE_VALUE,
name: 'global-search',
});
}
if (preferencesButtonPosition.value.header) {
list.push({
index: REFERENCE_VALUE + 10,
name: 'preferences',
});
}
if (preferences.widget.themeToggle) {
list.push({
index: REFERENCE_VALUE + 20,
name: 'theme-toggle',
});
}
if (preferences.widget.languageToggle) {
list.push({
index: REFERENCE_VALUE + 30,
name: 'language-toggle',
});
}
if (preferences.widget.timezone) {
list.push({
index: REFERENCE_VALUE + 40,
name: 'timezone',
});
}
if (preferences.widget.fullscreen) {
list.push({
index: REFERENCE_VALUE + 50,
name: 'fullscreen',
});
}
if (preferences.widget.notification) {
list.push({
index: REFERENCE_VALUE + 60,
@@ -54,6 +99,13 @@ const rightSlots = computed(() => {
const leftSlots = computed(() => {
const list: Array<{ index: number; name: string }> = [];
if (preferences.widget.refresh) {
list.push({
index: 0,
name: 'refresh',
});
}
Object.keys(slots).forEach((key) => {
const name = key.split('-');
if (key.startsWith('header-left')) {
@@ -63,6 +115,9 @@ const leftSlots = computed(() => {
return list.sort((a, b) => a.index - b.index);
});
function clearPreferencesAndLogout() {
emit('clearPreferencesAndLogout');
}
</script>
<template>
@@ -71,6 +126,11 @@ const leftSlots = computed(() => {
:key="slot.name"
>
<slot :name="slot.name">
<template v-if="slot.name === 'refresh'">
<VbenIconButton class="my-0 mr-1 rounded-md" @click="refresh">
<RotateCw class="size-4" />
</VbenIconButton>
</template>
</slot>
</template>
<div class="flex-center hidden lg:block">
@@ -91,9 +151,31 @@ const leftSlots = computed(() => {
<div class="flex h-full min-w-0 flex-shrink-0 items-center">
<template v-for="slot in rightSlots" :key="slot.name">
<slot :name="slot.name">
<template v-if="slot.name === 'theme-toggle'">
<template v-if="slot.name === 'global-search'">
<GlobalSearch
:enable-shortcut-key="globalSearchShortcutKey"
:menus="accessStore.accessMenus"
class="mr-1 sm:mr-4"
/>
</template>
<template v-else-if="slot.name === 'preferences'">
<PreferencesButton
class="mr-1"
@clear-preferences-and-logout="clearPreferencesAndLogout"
/>
</template>
<template v-else-if="slot.name === 'theme-toggle'">
<ThemeToggle class="mr-1 mt-[2px]" />
</template>
<template v-else-if="slot.name === 'language-toggle'">
<LanguageToggle class="mr-1" />
</template>
<template v-else-if="slot.name === 'fullscreen'">
<VbenFullScreen class="mr-1" />
</template>
<template v-else-if="slot.name === 'timezone'">
<TimezoneButton class="mr-1 mt-[2px]" />
</template>
</slot>
</template>
</div>
web/packages/effects/layouts/src/basic/layout.vue
+28 -3
View File
@@ -14,12 +14,13 @@ import {
updatePreferences,
usePreferences,
} from '@vben/preferences';
import { useAccessStore } from '@vben/stores';
import { cloneDeep, mapTree } from '@vben/utils';
import { VbenAdminLayout } from '@vben-core/layout-ui';
import { VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
import Breadcrumb from '../widgets/breadcrumb.vue';
import { Breadcrumb, CheckUpdates, Preferences } from '../widgets';
import { LayoutContent, LayoutContentSpinner } from './content';
import { Copyright } from './copyright';
import { LayoutFooter } from './footer';
@@ -35,7 +36,7 @@ import { LayoutTabbar } from './tabbar';
defineOptions({ name: 'BasicLayout' });
const emit = defineEmits<{ clickLogo: [] }>();
const emit = defineEmits<{ clearPreferencesAndLogout: []; clickLogo: [] }>();
const {
isDark,
@@ -46,9 +47,11 @@ const {
isHeaderMixedNav,
isHeaderSidebarNav,
layout,
preferencesButtonPosition,
sidebarCollapsed,
theme,
} = usePreferences();
const accessStore = useAccessStore();
const { refresh } = useRefresh();
const sidebarTheme = computed(() => {
@@ -144,6 +147,10 @@ function toggleSidebar() {
});
}
function clearPreferencesAndLogout() {
emit('clearPreferencesAndLogout');
}
function clickLogo() {
emit('clickLogo');
}
@@ -264,7 +271,10 @@ const headerSlots = computed(() => {
</template>
<!-- 头部区域 -->
<template #header>
<LayoutHeader :theme="theme">
<LayoutHeader
:theme="theme"
@clear-preferences-and-logout="clearPreferencesAndLogout"
>
<template
v-if="!showHeaderNav && preferences.breadcrumb.enable"
#breadcrumb
@@ -382,6 +392,21 @@ const headerSlots = computed(() => {
<template #extra>
<slot name="extra"></slot>
<CheckUpdates
v-if="preferences.app.enableCheckUpdates"
:check-updates-interval="preferences.app.checkUpdatesInterval"
/>
<Transition v-if="preferences.widget.lockScreen" name="slide-up">
<slot v-if="accessStore.isLockScreen" name="lock-screen"></slot>
</Transition>
<template v-if="preferencesButtonPosition.fixed">
<Preferences
class="z-100 fixed bottom-20 right-0"
@clear-preferences-and-logout="clearPreferencesAndLogout"
/>
</template>
<VbenBackTop />
</template>
</VbenAdminLayout>
web/packages/effects/layouts/src/basic/tabbar/tabbar.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { useContentMaximize, useTabs } from '@vben/hooks';
@@ -43,7 +43,7 @@ const menus = computed(() => {
// 刷新后如果不保持tab状态，关闭其他tab
if (!preferences.tabbar.persist) {
tabbarStore.closeOtherTabs(route);
nextTick(() => tabbarStore.closeOtherTabs(route));
}
</script>