bichangxiong/ruoyi-plus-vben5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dap
2025-05-19 21:33:49 +08:00
parent 79d89005b6 2efacb3e5b
commit 4fd68bc083
27 changed files with 476 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
docs/src/en/guide/essentials/settings.md
View File

@@ -186,6 +186,12 @@ const defaultPreferences: Preferences = {
colorWeakMode: false,
compact: false,
contentCompact: 'wide',
contentCompactWidth: 1200,
contentPadding: 16,
contentPaddingBottom: 16,
contentPaddingLeft: 16,
contentPaddingRight: 16,
contentPaddingTop: 16,
defaultAvatar:
'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
defaultHomePath: '/analytics',
@@ -200,6 +206,7 @@ const defaultPreferences: Preferences = {
name: 'Vben Admin',
preferencesButtonPosition: 'auto',
watermark: false,
zIndex: 200,
},
breadcrumb: {
enable: true,
@@ -220,9 +227,11 @@ const defaultPreferences: Preferences = {
footer: {
enable: false,
fixed: false,
height: 32,
},
header: {
enable: true,
height: 50,
hidden: false,
menuAlign: 'start',
mode: 'fixed',
@@ -248,11 +257,14 @@ const defaultPreferences: Preferences = {
collapsed: false,
collapsedButton: true,
collapsedShowTitle: false,
collapseWidth: 60,
enable: true,
expandOnHover: true,
extraCollapse: false,
extraCollapsedWidth: 60,
fixedButton: true,
hidden: false,
mixedWidth: 80,
width: 224,
},
tabbar: {
@@ -319,6 +331,18 @@ interface AppPreferences {
compact: boolean;
/** Whether to enable content compact mode */
contentCompact: ContentCompactType;
/** Content compact width */
contentCompactWidth: number;
/** Content padding */
contentPadding: number;
/** Content bottom padding */
contentPaddingBottom: number;
/** Content left padding */
contentPaddingLeft: number;
/** Content right padding */
contentPaddingRight: number;
/** Content top padding */
contentPaddingTop: number;
// /** Default application avatar */
defaultAvatar: string;
/** Default homepage path */
@@ -349,6 +373,8 @@ interface AppPreferences {
* @zh_CN Whether to enable watermark
*/
watermark: boolean;
/** z-index */
zIndex: number;
}
interface BreadcrumbPreferences {
/** Whether breadcrumbs are enabled */
@@ -385,11 +411,15 @@ interface FooterPreferences {
enable: boolean;
/** Whether the footer is fixed */
fixed: boolean;
/** Footer height */
height: number;
}
interface HeaderPreferences {
/** Whether the header is enabled */
enable: boolean;
/** Header height */
height: number;
/** Whether the header is hidden, css-hidden */
hidden: boolean;
/** Header menu alignment */
@@ -422,16 +452,22 @@ interface SidebarPreferences {
collapsedButton: boolean;
/** Whether to show title when sidebar is collapsed */
collapsedShowTitle: boolean;
/** Sidebar collapse width */
collapseWidth: number;
/** Whether the sidebar is visible */
enable: boolean;
/** Menu auto-expand state */
expandOnHover: boolean;
/** Whether the sidebar extension area is collapsed */
extraCollapse: boolean;
/** Sidebar extension area collapse width */
extraCollapsedWidth: number;
/** Whether the sidebar fixed button is visible */
fixedButton: boolean;
/** Whether the sidebar is hidden - css */
hidden: boolean;
/** Mixed sidebar width */
mixedWidth: number;
/** Sidebar width */
width: number;
}

2
docs/src/guide/essentials/build.md
View File

@@ -214,7 +214,7 @@ server {
使用 nginx 处理项目部署后的跨域问题
1. 配置前端项目接口地址，在项目目录下的``.env.production`文件中配置：
1. 配置前端项目接口地址，在项目目录下的`.env.production`文件中配置：
```bash
VITE_GLOB_API_URL=/api

40
docs/src/guide/essentials/route.md
View File

@@ -339,6 +339,10 @@ interface RouteMeta {
| 'success'
| 'warning'
| string;
/**
* 路由的完整路径作为key（默认true）
*/
fullPathKey?: boolean;
/**
* 当前路由的子级在菜单中不展现
* @default false
@@ -502,6 +506,13 @@ interface RouteMeta {
用于配置页面的徽标颜色。
### fullPathKey
- 类型：`boolean`
- 默认值：`true`
是否将路由的完整路径作为tab key（默认true）
### activePath
- 类型：`string`
@@ -602,3 +613,32 @@ const { refresh } = useRefresh();
refresh();
</script>
```
## 标签页与路由控制
在某些场景下，需要单个路由打开多个标签页，或者修改路由的query不打开新的标签页
每个标签页Tab使用唯一的key标识，设置Tab key有三种方式，优先级由高到低：
- 使用路由query参数pageKey
```vue
<script setup lang="ts">
import { useRouter } from 'vue-router';
// 跳转路由
const router = useRouter();
router.push({
path: 'path',
query: {
pageKey: 'key',
},
});
```
- 路由的完整路径作为key
`meta` 属性中的 `fullPathKey`不为false，则使用路由`fullPath`作为key
- 路由的path作为key
`meta` 属性中的 `fullPathKey`为false，则使用路由`path`作为key

36
docs/src/guide/essentials/settings.md
View File

@@ -185,6 +185,12 @@ const defaultPreferences: Preferences = {
colorWeakMode: false,
compact: false,
contentCompact: 'wide',
contentCompactWidth: 1200,
contentPadding: 16,
contentPaddingBottom: 16,
contentPaddingLeft: 16,
contentPaddingRight: 16,
contentPaddingTop: 16,
defaultAvatar:
'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
defaultHomePath: '/analytics',
@@ -199,6 +205,7 @@ const defaultPreferences: Preferences = {
name: 'Vben Admin',
preferencesButtonPosition: 'auto',
watermark: false,
zIndex: 200,
},
breadcrumb: {
enable: true,
@@ -219,9 +226,11 @@ const defaultPreferences: Preferences = {
footer: {
enable: false,
fixed: false,
height: 32,
},
header: {
enable: true,
height: 50,
hidden: false,
menuAlign: 'start',
mode: 'fixed',
@@ -247,11 +256,14 @@ const defaultPreferences: Preferences = {
collapsed: false,
collapsedButton: true,
collapsedShowTitle: false,
collapseWidth: 60,
enable: true,
expandOnHover: true,
extraCollapse: false,
extraCollapsedWidth: 60,
fixedButton: true,
hidden: false,
mixedWidth: 80,
width: 224,
},
tabbar: {
@@ -318,6 +330,18 @@ interface AppPreferences {
compact: boolean;
/** 是否开启内容紧凑模式 */
contentCompact: ContentCompactType;
/** 内容紧凑宽度 */
contentCompactWidth: number;
/** 内容内边距 */
contentPadding: number;
/** 内容底部内边距 */
contentPaddingBottom: number;
/** 内容左侧内边距 */
contentPaddingLeft: number;
/** 内容右侧内边距 */
contentPaddingRight: number;
/** 内容顶部内边距 */
contentPaddingTop: number;
// /** 应用默认头像 */
defaultAvatar: string;
/** 默认首页地址 */
@@ -348,6 +372,8 @@ interface AppPreferences {
* @zh_CN 是否开启水印
*/
watermark: boolean;
/** z-index */
zIndex: number;
}
interface BreadcrumbPreferences {
@@ -385,11 +411,15 @@ interface FooterPreferences {
enable: boolean;
/** 底栏是否固定 */
fixed: boolean;
/** 底栏高度 */
height: number;
}
interface HeaderPreferences {
/** 顶栏是否启用 */
enable: boolean;
/** 顶栏高度 */
height: number;
/** 顶栏是否隐藏,css-隐藏 */
hidden: boolean;
/** 顶栏菜单位置 */
@@ -423,16 +453,22 @@ interface SidebarPreferences {
collapsedButton: boolean;
/** 侧边栏折叠时，是否显示title */
collapsedShowTitle: boolean;
/** 侧边栏折叠宽度 */
collapseWidth: number;
/** 侧边栏是否可见 */
enable: boolean;
/** 菜单自动展开状态 */
expandOnHover: boolean;
/** 侧边栏扩展区域是否折叠 */
extraCollapse: boolean;
/** 侧边栏扩展区域折叠宽度 */
extraCollapsedWidth: number;
/** 侧边栏固定按钮是否可见 */
fixedButton: boolean;
/** 侧边栏是否隐藏 - css */
hidden: boolean;
/** 混合侧边栏宽度 */
mixedWidth: number;
/** 侧边栏宽度 */
width: number;
}

2
internal/tailwind-config/package.json
View File

@@ -12,7 +12,7 @@
"license": "MIT",
"type": "module",
"scripts": {
"stub": "pnpm unbuild"
"stub": "pnpm unbuild --stub"
},
"files": [
"dist"

7
packages/@core/base/typings/src/tabs.ts
View File

@@ -1,3 +1,8 @@
import type { RouteLocationNormalized } from 'vue-router';
export type TabDefinition = RouteLocationNormalized;
export interface TabDefinition extends RouteLocationNormalized {
/**
* 标签页的key
*/
key?: string;
}

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

@@ -43,6 +43,10 @@ interface RouteMeta {
| 'success'
| 'warning'
| string;
/**
* 路由的完整路径作为key（默认true）
*/
fullPathKey?: boolean;
/**
* 当前路由的子级在菜单中不展现
* @default false

12
packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
View File

@@ -10,6 +10,12 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"colorWeakMode": false,
"compact": false,
"contentCompact": "wide",
"contentCompactWidth": 1200,
"contentPadding": 16,
"contentPaddingBottom": 16,
"contentPaddingLeft": 16,
"contentPaddingRight": 16,
"contentPaddingTop": 16,
"defaultAvatar": "https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp",
"defaultHomePath": "/analytics",
"dynamicTitle": true,
@@ -23,6 +29,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"name": "Vben Admin",
"preferencesButtonPosition": "auto",
"watermark": false,
"zIndex": 200,
},
"breadcrumb": {
"enable": true,
@@ -43,9 +50,11 @@ exports[`defaultPreferences immutability test > should not modify the config obj
"footer": {
"enable": false,
"fixed": false,
"height": 32,
},
"header": {
"enable": true,
"height": 50,
"hidden": false,
"menuAlign": "start",
"mode": "fixed",
@@ -68,14 +77,17 @@ exports[`defaultPreferences immutability test > should not modify the config obj
},
"sidebar": {
"autoActivateChild": false,
"collapseWidth": 60,
"collapsed": false,
"collapsedButton": true,
"collapsedShowTitle": false,
"enable": true,
"expandOnHover": true,
"extraCollapse": false,
"extraCollapsedWidth": 60,
"fixedButton": true,
"hidden": false,
"mixedWidth": 80,
"width": 224,
},
"tabbar": {

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

@@ -9,6 +9,12 @@ const defaultPreferences: Preferences = {
colorWeakMode: false,
compact: false,
contentCompact: 'wide',
contentCompactWidth: 1200,
contentPadding: 16,
contentPaddingBottom: 16,
contentPaddingLeft: 16,
contentPaddingRight: 16,
contentPaddingTop: 16,
defaultAvatar:
'https://unpkg.com/@vbenjs/static-source@0.1.7/source/avatar-v1.webp',
defaultHomePath: '/analytics',
@@ -23,6 +29,7 @@ const defaultPreferences: Preferences = {
name: 'Vben Admin',
preferencesButtonPosition: 'auto',
watermark: false,
zIndex: 200,
},
breadcrumb: {
enable: true,
@@ -43,13 +50,16 @@ const defaultPreferences: Preferences = {
footer: {
enable: false,
fixed: false,
height: 32,
},
header: {
enable: true,
height: 50,
hidden: false,
menuAlign: 'start',
mode: 'fixed',
},
logo: {
enable: true,
source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
@@ -71,11 +81,14 @@ const defaultPreferences: Preferences = {
collapsed: false,
collapsedButton: true,
collapsedShowTitle: false,
collapseWidth: 60,
enable: true,
expandOnHover: true,
extraCollapse: false,
extraCollapsedWidth: 60,
fixedButton: true,
hidden: false,
mixedWidth: 80,
width: 224,
},
tabbar: {

24
packages/@core/preferences/src/types.ts
View File

@@ -33,6 +33,18 @@ interface AppPreferences {
compact: boolean;
/** 是否开启内容紧凑模式 */
contentCompact: ContentCompactType;
/** 内容紧凑宽度 */
contentCompactWidth: number;
/** 内容内边距 */
contentPadding: number;
/** 内容底部内边距 */
contentPaddingBottom: number;
/** 内容左侧内边距 */
contentPaddingLeft: number;
/** 内容右侧内边距 */
contentPaddingRight: number;
/** 内容顶部内边距 */
contentPaddingTop: number;
// /** 应用默认头像 */
defaultAvatar: string;
/** 默认首页地址 */
@@ -63,6 +75,8 @@ interface AppPreferences {
* @zh_CN 是否开启水印
*/
watermark: boolean;
/** z-index */
zIndex: number;
}
interface BreadcrumbPreferences {
@@ -100,11 +114,15 @@ interface FooterPreferences {
enable: boolean;
/** 底栏是否固定 */
fixed: boolean;
/** 底栏高度 */
height: number;
}
interface HeaderPreferences {
/** 顶栏是否启用 */
enable: boolean;
/** 顶栏高度 */
height: number;
/** 顶栏是否隐藏,css-隐藏 */
hidden: boolean;
/** 顶栏菜单位置 */
@@ -138,16 +156,22 @@ interface SidebarPreferences {
collapsedButton: boolean;
/** 侧边栏折叠时，是否显示title */
collapsedShowTitle: boolean;
/** 侧边栏折叠宽度 */
collapseWidth: number;
/** 侧边栏是否可见 */
enable: boolean;
/** 菜单自动展开状态 */
expandOnHover: boolean;
/** 侧边栏扩展区域是否折叠 */
extraCollapse: boolean;
/** 侧边栏扩展区域折叠宽度 */
extraCollapsedWidth: number;
/** 侧边栏固定按钮是否可见 */
fixedButton: boolean;
/** 侧边栏是否隐藏 - css */
hidden: boolean;
/** 混合侧边栏宽度 */
mixedWidth: number;
/** 侧边栏宽度 */
width: number;
}

2
packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
View File

@@ -36,7 +36,7 @@ export interface VbenButtonGroupProps
btnClass?: any;
gap?: number;
multiple?: boolean;
options?: { label: CustomRenderType; value: ValueType }[];
options?: { [key: string]: any; label: CustomRenderType; value: ValueType }[];
showIcon?: boolean;
size?: 'large' | 'middle' | 'small';
}

16
packages/@core/ui-kit/shadcn-ui/src/components/button/check-button-group.vue
View File

@@ -119,7 +119,7 @@ async function onBtnClick(value: ValueType) {
<CircleCheckBig v-else-if="innerValue.includes(btn.value)" />
<Circle v-else />
</div>
<slot name="option" :label="btn.label" :value="btn.value">
<slot name="option" :label="btn.label" :value="btn.value" :data="btn">
<VbenRenderContent :content="btn.label" />
</slot>
</Button>
@@ -127,6 +127,9 @@ async function onBtnClick(value: ValueType) {
</template>
<style lang="scss" scoped>
.vben-check-button-group {
display: flex;
flex-wrap: wrap;
&:deep(.size-large) button {
.icon-wrapper {
margin-right: 0.3rem;
@@ -159,5 +162,16 @@ async function onBtnClick(value: ValueType) {
}
}
}
&.no-gap > :deep(button):nth-of-type(1) {
border-right-width: 0;
}
&.no-gap {
:deep(button + button) {
margin-right: -1px;
border-left-width: 1px;
}
}
}
</style>

16
packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
View File

@@ -224,15 +224,20 @@ defineExpose({
:class="
cn('cursor-pointer', getNodeClass?.(item), {
'data-[selected]:bg-accent': !multiple,
'cursor-not-allowed': disabled,
})
"
v-bind="
Object.assign(item.bind, {
onfocus: disabled ? 'this.blur()' : undefined,
})
"
v-bind="item.bind"
@select="
(event) => {
if (event.detail.originalEvent.type === 'click') {
event.preventDefault();
}
onSelect(item, event.detail.isSelected);
!disabled && onSelect(item, event.detail.isSelected);
}
"
@toggle="
@@ -240,7 +245,7 @@ defineExpose({
if (event.detail.originalEvent.type === 'click') {
event.preventDefault();
}
onToggle(item);
!disabled && onToggle(item);
}
"
class="tree-node focus:ring-grass8 my-0.5 flex items-center rounded px-2 py-1 outline-none focus:ring-2"
@@ -262,10 +267,11 @@ defineExpose({
<Checkbox
v-if="multiple"
:checked="isSelected"
:disabled="disabled"
:indeterminate="isIndeterminate"
@click="
() => {
handleSelect();
!disabled && handleSelect();
// onSelect(item, !isSelected);
}
"
@@ -276,7 +282,7 @@ defineExpose({
(_event) => {
// $event.stopPropagation();
// $event.preventDefault();
handleSelect();
!disabled && handleSelect();
// onSelect(item, !isSelected);
}
"

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

@@ -40,14 +40,14 @@ const style = computed(() => {
const tabsView = computed(() => {
return props.tabs.map((tab) => {
const { fullPath, meta, name, path } = tab || {};
const { fullPath, meta, name, path, key } = tab || {};
const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
return {
affixTab: !!affixTab,
closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
fullPath,
icon: icon as string,
key: fullPath || path,
key,
meta,
name,
path,

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

@@ -47,14 +47,14 @@ const typeWithClass = computed(() => {
const tabsView = computed(() => {
return props.tabs.map((tab) => {
const { fullPath, meta, name, path } = tab || {};
const { fullPath, meta, name, path, key } = tab || {};
const { affixTab, icon, newTabTitle, tabClosable, title } = meta || {};
return {
affixTab: !!affixTab,
closable: Reflect.has(meta, 'tabClosable') ? !!tabClosable : true,
fullPath,
icon: icon as string,
key: fullPath || path,
key,
meta,
name,
path,

100
packages/effects/hooks/src/use-design-tokens.ts
View File

@@ -193,67 +193,107 @@ export function useElementPlusDesignTokens() {
'--el-border-radius-base': getCssVariableValue('--radius', false),
'--el-color-danger': getCssVariableValue('--destructive-500'),
'--el-color-danger-dark-2': getCssVariableValue('--destructive'),
'--el-color-danger-light-3': getCssVariableValue('--destructive-400'),
'--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
'--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
'--el-color-danger-dark-2': isDark.value
? getCssVariableValue('--destructive-400')
: getCssVariableValue('--destructive-600'),
'--el-color-danger-light-3': isDark.value
? getCssVariableValue('--destructive-600')
: getCssVariableValue('--destructive-400'),
'--el-color-danger-light-5': isDark.value
? getCssVariableValue('--destructive-700')
: getCssVariableValue('--destructive-300'),
'--el-color-danger-light-7': isDark.value
? getCssVariableValue('--destructive-800')
: getCssVariableValue('--destructive-200'),
'--el-color-danger-light-8': isDark.value
? border
? getCssVariableValue('--destructive-900')
: getCssVariableValue('--destructive-100'),
'--el-color-danger-light-9': isDark.value
? accent
? getCssVariableValue('--destructive-950')
: getCssVariableValue('--destructive-50'),
'--el-color-error': getCssVariableValue('--destructive-500'),
'--el-color-error-dark-2': getCssVariableValue('--destructive'),
'--el-color-error-light-3': getCssVariableValue('--destructive-400'),
'--el-color-error-light-5': getCssVariableValue('--destructive-300'),
'--el-color-error-light-7': getCssVariableValue('--destructive-200'),
'--el-color-error-dark-2': isDark.value
? getCssVariableValue('--destructive-400')
: getCssVariableValue('--destructive-600'),
'--el-color-error-light-3': isDark.value
? getCssVariableValue('--destructive-600')
: getCssVariableValue('--destructive-400'),
'--el-color-error-light-5': isDark.value
? getCssVariableValue('--destructive-700')
: getCssVariableValue('--destructive-300'),
'--el-color-error-light-7': isDark.value
? getCssVariableValue('--destructive-800')
: getCssVariableValue('--destructive-200'),
'--el-color-error-light-8': isDark.value
? border
? getCssVariableValue('--destructive-900')
: getCssVariableValue('--destructive-100'),
'--el-color-error-light-9': isDark.value
? accent
? getCssVariableValue('--destructive-950')
: getCssVariableValue('--destructive-50'),
'--el-color-info-light-5': border,
'--el-color-info-light-8': border,
'--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
'--el-color-primary': getCssVariableValue('--primary-500'),
'--el-color-primary-dark-2': getCssVariableValue('--primary'),
'--el-color-primary-light-3': getCssVariableValue('--primary-400'),
'--el-color-primary-light-5': getCssVariableValue('--primary-300'),
'--el-color-primary-dark-2': isDark.value
? getCssVariableValue('--primary-400')
: getCssVariableValue('--primary-600'),
'--el-color-primary-light-3': isDark.value
? getCssVariableValue('--primary-600')
: getCssVariableValue('--primary-400'),
'--el-color-primary-light-5': isDark.value
? getCssVariableValue('--primary-700')
: getCssVariableValue('--primary-300'),
'--el-color-primary-light-7': isDark.value
? border
? getCssVariableValue('--primary-800')
: getCssVariableValue('--primary-200'),
'--el-color-primary-light-8': isDark.value
? border
? getCssVariableValue('--primary-900')
: getCssVariableValue('--primary-100'),
'--el-color-primary-light-9': isDark.value
? accent
? getCssVariableValue('--primary-950')
: getCssVariableValue('--primary-50'),
'--el-color-success': getCssVariableValue('--success-500'),
'--el-color-success-dark-2': getCssVariableValue('--success'),
'--el-color-success-light-3': getCssVariableValue('--success-400'),
'--el-color-success-light-5': getCssVariableValue('--success-300'),
'--el-color-success-light-7': getCssVariableValue('--success-200'),
'--el-color-success-dark-2': isDark.value
? getCssVariableValue('--success-400')
: getCssVariableValue('--success-600'),
'--el-color-success-light-3': isDark.value
? getCssVariableValue('--success-600')
: getCssVariableValue('--success-400'),
'--el-color-success-light-5': isDark.value
? getCssVariableValue('--success-700')
: getCssVariableValue('--success-300'),
'--el-color-success-light-7': isDark.value
? getCssVariableValue('--success-800')
: getCssVariableValue('--success-200'),
'--el-color-success-light-8': isDark.value
? border
? getCssVariableValue('--success-900')
: getCssVariableValue('--success-100'),
'--el-color-success-light-9': isDark.value
? accent
? getCssVariableValue('--success-950')
: getCssVariableValue('--success-50'),
'--el-color-warning': getCssVariableValue('--warning-500'),
'--el-color-warning-dark-2': getCssVariableValue('--warning'),
'--el-color-warning-light-3': getCssVariableValue('--warning-400'),
'--el-color-warning-light-5': getCssVariableValue('--warning-300'),
'--el-color-warning-light-7': getCssVariableValue('--warning-200'),
'--el-color-warning-dark-2': isDark.value
? getCssVariableValue('--warning-400')
: getCssVariableValue('--warning-600'),
'--el-color-warning-light-3': isDark.value
? getCssVariableValue('--warning-600')
: getCssVariableValue('--warning-400'),
'--el-color-warning-light-5': isDark.value
? getCssVariableValue('--warning-700')
: getCssVariableValue('--warning-300'),
'--el-color-warning-light-7': isDark.value
? getCssVariableValue('--warning-800')
: getCssVariableValue('--warning-200'),
'--el-color-warning-light-8': isDark.value
? border
? getCssVariableValue('--warning-900')
: getCssVariableValue('--warning-100'),
'--el-color-warning-light-9': isDark.value
? accent
? getCssVariableValue('--warning-950')
: getCssVariableValue('--warning-50'),
'--el-fill-color': getCssVariableValue('--accent'),

20
packages/effects/hooks/src/use-tabs.ts
View File

@@ -1,3 +1,4 @@
import type { ComputedRef } from 'vue';
import type { RouteLocationNormalized } from 'vue-router';
import { useTabbarStore } from '@vben/stores';
@@ -52,7 +53,24 @@ export function useTabs() {
await tabbarStore.closeTabByKey(key, router);
}
async function setTabTitle(title: string) {
/**
* 设置当前标签页的标题
*
* @description 支持设置静态标题字符串或动态计算标题
* @description 动态标题会在每次渲染时重新计算,适用于多语言或状态相关的标题
*
* @param title - 标题内容
* - 静态标题: 直接传入字符串
* - 动态标题: 传入 ComputedRef
*
* @example
* // 静态标题
* setTabTitle('标签页')
*
* // 动态标题(多语言)
* setTabTitle(computed(() => t('page.title')))
*/
async function setTabTitle(title: ComputedRef<string> | string) {
tabbarStore.setUpdateTime();
await tabbarStore.setTabTitle(route, title);
}

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

@@ -38,7 +38,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
<template>
<div
:class="[isDark]"
:class="[isDark ? 'dark' : '']"
class="flex min-h-full flex-1 select-none overflow-x-hidden"
>
<template v-if="toolbar">

1
packages/effects/layouts/src/authentication/index.ts
View File

@@ -1 +1,2 @@
export { default as AuthPageLayout } from './authentication.vue';
export * from './types';

10
packages/effects/layouts/src/basic/content/content.vue
View File

@@ -9,7 +9,7 @@ import { computed } from 'vue';
import { RouterView } from 'vue-router';
import { preferences, usePreferences } from '@vben/preferences';
import { storeToRefs, useTabbarStore } from '@vben/stores';
import { getTabKey, storeToRefs, useTabbarStore } from '@vben/stores';
import { IFrameRouterView } from '../../iframe';
@@ -115,13 +115,13 @@ function transformComponent(
:is="transformComponent(Component, route)"
v-if="renderRouteView"
v-show="!route.meta.iframeSrc"
:key="route.fullPath"
:key="getTabKey(route)"
/>
</KeepAlive>
<component
:is="Component"
v-else-if="renderRouteView"
:key="route.fullPath"
:key="getTabKey(route)"
/>
</Transition>
<template v-else>
@@ -134,13 +134,13 @@ function transformComponent(
:is="transformComponent(Component, route)"
v-if="renderRouteView"
v-show="!route.meta.iframeSrc"
:key="route.fullPath"
:key="getTabKey(route)"
/>
</KeepAlive>
<component
:is="Component"
v-else-if="renderRouteView"
:key="route.fullPath"
:key="getTabKey(route)"
/>
</template>
</RouterView>

12
packages/effects/layouts/src/basic/layout.vue
View File

@@ -180,8 +180,16 @@ const headerSlots = computed(() => {
<VbenAdminLayout
v-model:sidebar-extra-visible="sidebarExtraVisible"
:content-compact="preferences.app.contentCompact"
:content-compact-width="preferences.app.contentCompactWidth"
:content-padding="preferences.app.contentPadding"
:content-padding-bottom="preferences.app.contentPaddingBottom"
:content-padding-left="preferences.app.contentPaddingLeft"
:content-padding-right="preferences.app.contentPaddingRight"
:content-padding-top="preferences.app.contentPaddingTop"
:footer-enable="preferences.footer.enable"
:footer-fixed="preferences.footer.fixed"
:footer-height="preferences.footer.height"
:header-height="preferences.header.height"
:header-hidden="preferences.header.hidden"
:header-mode="preferences.header.mode"
:header-theme="headerTheme"
@@ -196,11 +204,15 @@ const headerSlots = computed(() => {
:sidebar-fixed-button="preferences.sidebar.fixedButton"
:sidebar-expand-on-hover="preferences.sidebar.expandOnHover"
:sidebar-extra-collapse="preferences.sidebar.extraCollapse"
:sidebar-extra-collapsed-width="preferences.sidebar.extraCollapsedWidth"
:sidebar-hidden="preferences.sidebar.hidden"
:sidebar-mixed-width="preferences.sidebar.mixedWidth"
:sidebar-theme="sidebarTheme"
:sidebar-width="preferences.sidebar.width"
:side-collapse-width="preferences.sidebar.collapseWidth"
:tabbar-enable="preferences.tabbar.enable"
:tabbar-height="preferences.tabbar.height"
:z-index="preferences.app.zIndex"
@side-mouse-leave="handleSideMouseLeave"
@toggle-sidebar="toggleSidebar"
@update:sidebar-collapse="

5
packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
View File

@@ -140,7 +140,10 @@ function useMixedMenu() {
watch(
() => route.path,
(path) => {
const currentPath = (route?.meta?.activePath as string) ?? path;
const currentPath = route?.meta?.activePath ?? route?.meta?.link ?? path;
if (willOpenedByWindow(currentPath)) {
return;
}
calcSideMenus(currentPath);
if (rootMenuPath.value)
defaultSubMap.set(rootMenuPath.value, currentPath);

2
packages/effects/layouts/src/basic/tabbar/tabbar.vue
View File

@@ -30,7 +30,7 @@ const {
} = useTabbar();
const menus = computed(() => {
const tab = tabbarStore.getTabByPath(currentActive.value);
const tab = tabbarStore.getTabByKey(currentActive.value);
const menus = createContextMenus(tab);
return menus.map((item) => {
return {

12
packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
View File

@@ -22,7 +22,7 @@ import {
X,
} from '@vben/icons';
import { $t, useI18n } from '@vben/locales';
import { useAccessStore, useTabbarStore } from '@vben/stores';
import { getTabKey, useAccessStore, useTabbarStore } from '@vben/stores';
import { filterTree } from '@vben/utils';
export function useTabbar() {
@@ -44,8 +44,11 @@ export function useTabbar() {
toggleTabPin,
} = useTabs();
/**
* 当前路径对应的tab的key
*/
const currentActive = computed(() => {
return route.fullPath;
return getTabKey(route);
});
const { locale } = useI18n();
@@ -73,7 +76,8 @@ export function useTabbar() {
// 点击tab,跳转路由
const handleClick = (key: string) => {
router.push(key);
const { fullPath, path } = tabbarStore.getTabByKey(key);
router.push(fullPath || path);
};
// 关闭tab
@@ -100,7 +104,7 @@ export function useTabbar() {
);
watch(
() => route.path,
() => route.fullPath,
() => {
const meta = route.matched?.[route.matched.length - 1]?.meta;
tabbarStore.addTab({

39
packages/stores/src/modules/tabbar.test.ts
View File

@@ -22,12 +22,13 @@ describe('useAccessStore', () => {
const tab: any = {
fullPath: '/home',
meta: {},
key: '/home',
name: 'Home',
path: '/home',
};
store.addTab(tab);
const addNewTab = store.addTab(tab);
expect(store.tabs.length).toBe(1);
expect(store.tabs[0]).toEqual(tab);
expect(store.tabs[0]).toEqual(addNewTab);
});
it('adds a new tab if it does not exist', () => {
@@ -38,20 +39,22 @@ describe('useAccessStore', () => {
name: 'New',
path: '/new',
};
store.addTab(newTab);
expect(store.tabs).toContainEqual(newTab);
const addNewTab = store.addTab(newTab);
expect(store.tabs).toContainEqual(addNewTab);
});
it('updates an existing tab instead of adding a new one', () => {
const store = useTabbarStore();
const initialTab: any = {
fullPath: '/existing',
meta: {},
meta: {
fullPathKey: false,
},
name: 'Existing',
path: '/existing',
query: {},
};
store.tabs.push(initialTab);
store.addTab(initialTab);
const updatedTab = { ...initialTab, query: { id: '1' } };
store.addTab(updatedTab);
expect(store.tabs.length).toBe(1);
@@ -60,9 +63,12 @@ describe('useAccessStore', () => {
it('closes all tabs', async () => {
const store = useTabbarStore();
store.tabs = [
{ fullPath: '/home', meta: {}, name: 'Home', path: '/home' },
] as any;
store.addTab({
fullPath: '/home',
meta: {},
name: 'Home',
path: '/home',
} as any);
router.replace = vi.fn();
await store.closeAllTabs(router);
@@ -157,7 +163,7 @@ describe('useAccessStore', () => {
path: '/contact',
} as any);
await store._bulkCloseByPaths(['/home', '/contact']);
await store._bulkCloseByKeys(['/home', '/contact']);
expect(store.tabs).toHaveLength(1);
expect(store.tabs[0]?.name).toBe('About');
@@ -183,9 +189,8 @@ describe('useAccessStore', () => {
name: 'Contact',
path: '/contact',
};
store.addTab(targetTab);
await store.closeLeftTabs(targetTab);
const addTargetTab = store.addTab(targetTab);
await store.closeLeftTabs(addTargetTab);
expect(store.tabs).toHaveLength(1);
expect(store.tabs[0]?.name).toBe('Contact');
@@ -205,7 +210,7 @@ describe('useAccessStore', () => {
name: 'About',
path: '/about',
};
store.addTab(targetTab);
const addTargetTab = store.addTab(targetTab);
store.addTab({
fullPath: '/contact',
meta: {},
@@ -213,7 +218,7 @@ describe('useAccessStore', () => {
path: '/contact',
} as any);
await store.closeOtherTabs(targetTab);
await store.closeOtherTabs(addTargetTab);
expect(store.tabs).toHaveLength(1);
expect(store.tabs[0]?.name).toBe('About');
@@ -227,7 +232,7 @@ describe('useAccessStore', () => {
name: 'Home',
path: '/home',
};
store.addTab(targetTab);
const addTargetTab = store.addTab(targetTab);
store.addTab({
fullPath: '/about',
meta: {},
@@ -241,7 +246,7 @@ describe('useAccessStore', () => {
path: '/contact',
} as any);
await store.closeRightTabs(targetTab);
await store.closeRightTabs(addTargetTab);
expect(store.tabs).toHaveLength(1);
expect(store.tabs[0]?.name).toBe('Home');

201
packages/stores/src/modules/tabbar.ts
View File

@@ -1,4 +1,9 @@
import type { Router, RouteRecordNormalized } from 'vue-router';
import type { ComputedRef } from 'vue';
import type {
RouteLocationNormalized,
Router,
RouteRecordNormalized,
} from 'vue-router';
import type { TabDefinition } from '@vben-core/typings';
@@ -52,23 +57,23 @@ export const useTabbarStore = defineStore('core-tabbar', {
/**
* Close tabs in bulk
*/
async _bulkCloseByPaths(paths: string[]) {
this.tabs = this.tabs.filter((item) => {
return !paths.includes(getTabPath(item));
});
async _bulkCloseByKeys(keys: string[]) {
const keySet = new Set(keys);
this.tabs = this.tabs.filter(
(item) => !keySet.has(getTabKeyFromTab(item)),
);
this.updateCacheTabs();
await this.updateCacheTabs();
},
/**
* @zh_CN 关闭标签页
* @param tab
*/
_close(tab: TabDefinition) {
const { fullPath } = tab;
if (isAffixTab(tab)) {
return;
}
const index = this.tabs.findIndex((item) => item.fullPath === fullPath);
const index = this.tabs.findIndex((item) => equalTab(item, tab));
index !== -1 && this.tabs.splice(index, 1);
},
/**
@@ -101,14 +106,17 @@ export const useTabbarStore = defineStore('core-tabbar', {
* @zh_CN 添加标签页
* @param routeTab
*/
addTab(routeTab: TabDefinition) {
const tab = cloneTab(routeTab);
addTab(routeTab: TabDefinition): TabDefinition {
let tab = cloneTab(routeTab);
if (!tab.key) {
tab.key = getTabKey(routeTab);
}
if (!isTabShown(tab)) {
return;
return tab;
}
const tabIndex = this.tabs.findIndex((tab) => {
return getTabPath(tab) === getTabPath(routeTab);
const tabIndex = this.tabs.findIndex((item) => {
return equalTab(item, tab);
});
if (tabIndex === -1) {
@@ -154,10 +162,11 @@ export const useTabbarStore = defineStore('core-tabbar', {
mergedTab.meta.newTabTitle = curMeta.newTabTitle;
}
}
tab = mergedTab;
this.tabs.splice(tabIndex, 1, mergedTab);
}
this.updateCacheTabs();
return tab;
},
/**
* @zh_CN 关闭所有标签页
@@ -173,65 +182,63 @@ export const useTabbarStore = defineStore('core-tabbar', {
* @param tab
*/
async closeLeftTabs(tab: TabDefinition) {
const index = this.tabs.findIndex(
(item) => getTabPath(item) === getTabPath(tab),
);
const index = this.tabs.findIndex((item) => equalTab(item, tab));
if (index < 1) {
return;
}
const leftTabs = this.tabs.slice(0, index);
const paths: string[] = [];
const keys: string[] = [];
for (const item of leftTabs) {
if (!isAffixTab(item)) {
paths.push(getTabPath(item));
keys.push(item.key as string);
}
}
await this._bulkCloseByPaths(paths);
await this._bulkCloseByKeys(keys);
},
/**
* @zh_CN 关闭其他标签页
* @param tab
*/
async closeOtherTabs(tab: TabDefinition) {
const closePaths = this.tabs.map((item) => getTabPath(item));
const closeKeys = this.tabs.map((item) => getTabKeyFromTab(item));
const paths: string[] = [];
const keys: string[] = [];
for (const path of closePaths) {
if (path !== tab.fullPath) {
const closeTab = this.tabs.find((item) => getTabPath(item) === path);
for (const key of closeKeys) {
if (key !== tab.key) {
const closeTab = this.tabs.find(
(item) => getTabKeyFromTab(item) === key,
);
if (!closeTab) {
continue;
}
if (!isAffixTab(closeTab)) {
paths.push(getTabPath(closeTab));
keys.push(closeTab.key as string);
}
}
}
await this._bulkCloseByPaths(paths);
await this._bulkCloseByKeys(keys);
},
/**
* @zh_CN 关闭右侧标签页
* @param tab
*/
async closeRightTabs(tab: TabDefinition) {
const index = this.tabs.findIndex(
(item) => getTabPath(item) === getTabPath(tab),
);
const index = this.tabs.findIndex((item) => equalTab(item, tab));
if (index !== -1 && index < this.tabs.length - 1) {
const rightTabs = this.tabs.slice(index + 1);
const paths: string[] = [];
const keys: string[] = [];
for (const item of rightTabs) {
if (!isAffixTab(item)) {
paths.push(getTabPath(item));
keys.push(item.key as string);
}
}
await this._bulkCloseByPaths(paths);
await this._bulkCloseByKeys(keys);
}
},
@@ -242,15 +249,14 @@ export const useTabbarStore = defineStore('core-tabbar', {
*/
async closeTab(tab: TabDefinition, router: Router) {
const { currentRoute } = router;
// 关闭不是激活选项卡
if (getTabPath(currentRoute.value) !== getTabPath(tab)) {
if (getTabKey(currentRoute.value) !== getTabKeyFromTab(tab)) {
this._close(tab);
this.updateCacheTabs();
return;
}
const index = this.getTabs.findIndex(
(item) => getTabPath(item) === getTabPath(currentRoute.value),
(item) => getTabKeyFromTab(item) === getTabKey(currentRoute.value),
);
const before = this.getTabs[index - 1];
@@ -277,7 +283,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
async closeTabByKey(key: string, router: Router) {
const originKey = decodeURIComponent(key);
const index = this.tabs.findIndex(
(item) => getTabPath(item) === originKey,
(item) => getTabKeyFromTab(item) === originKey,
);
if (index === -1) {
return;
@@ -290,12 +296,12 @@ export const useTabbarStore = defineStore('core-tabbar', {
},
/**
* 根据路径获取标签页
* @param path
* 根据tab的key获取tab
* @param key
*/
getTabByPath(path: string) {
getTabByKey(key: string) {
return this.getTabs.find(
(item) => getTabPath(item) === path,
(item) => getTabKeyFromTab(item) === key,
) as TabDefinition;
},
/**
@@ -311,22 +317,19 @@ export const useTabbarStore = defineStore('core-tabbar', {
* @param tab
*/
async pinTab(tab: TabDefinition) {
const index = this.tabs.findIndex(
(item) => getTabPath(item) === getTabPath(tab),
);
if (index !== -1) {
const oldTab = this.tabs[index];
tab.meta.affixTab = true;
tab.meta.title = oldTab?.meta?.title as string;
// this.addTab(tab);
this.tabs.splice(index, 1, tab);
const index = this.tabs.findIndex((item) => equalTab(item, tab));
if (index === -1) {
return;
}
const oldTab = this.tabs[index];
tab.meta.affixTab = true;
tab.meta.title = oldTab?.meta?.title as string;
// this.addTab(tab);
this.tabs.splice(index, 1, tab);
// 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
// 获得固定tabs的index
const newIndex = affixTabs.findIndex(
(item) => getTabPath(item) === getTabPath(tab),
);
const newIndex = affixTabs.findIndex((item) => equalTab(item, tab));
// 交换位置重新排序
await this.sortTabs(index, newIndex);
},
@@ -371,9 +374,7 @@ export const useTabbarStore = defineStore('core-tabbar', {
if (tab?.meta?.newTabTitle) {
return;
}
const findTab = this.tabs.find(
(item) => getTabPath(item) === getTabPath(tab),
);
const findTab = this.tabs.find((item) => equalTab(item, tab));
if (findTab) {
findTab.meta.newTabTitle = undefined;
await this.updateCacheTabs();
@@ -401,13 +402,24 @@ export const useTabbarStore = defineStore('core-tabbar', {
/**
* @zh_CN 设置标签页标题
* @param tab
* @param title
*
* @zh_CN 支持设置静态标题字符串或计算属性作为动态标题
* @zh_CN 当标题为计算属性时,标题会随计算属性值变化而自动更新
* @zh_CN 适用于需要根据状态或多语言动态更新标题的场景
*
* @param {TabDefinition} tab - 标签页对象
* @param {ComputedRef<string> | string} title - 标题内容,支持静态字符串或计算属性
*
* @example
* // 设置静态标题
* setTabTitle(tab, '新标签页');
*
* @example
* // 设置动态标题
* setTabTitle(tab, computed(() => t('common.dashboard')));
*/
async setTabTitle(tab: TabDefinition, title: string) {
const findTab = this.tabs.find(
(item) => getTabPath(item) === getTabPath(tab),
);
async setTabTitle(tab: TabDefinition, title: ComputedRef<string> | string) {
const findTab = this.tabs.find((item) => equalTab(item, tab));
if (findTab) {
findTab.meta.newTabTitle = title;
@@ -448,17 +460,15 @@ export const useTabbarStore = defineStore('core-tabbar', {
* @param tab
*/
async unpinTab(tab: TabDefinition) {
const index = this.tabs.findIndex(
(item) => getTabPath(item) === getTabPath(tab),
);
if (index !== -1) {
const oldTab = this.tabs[index];
tab.meta.affixTab = false;
tab.meta.title = oldTab?.meta?.title as string;
// this.addTab(tab);
this.tabs.splice(index, 1, tab);
const index = this.tabs.findIndex((item) => equalTab(item, tab));
if (index === -1) {
return;
}
const oldTab = this.tabs[index];
tab.meta.affixTab = false;
tab.meta.title = oldTab?.meta?.title as string;
// this.addTab(tab);
this.tabs.splice(index, 1, tab);
// 过滤固定tabs，后面更改affixTabOrder的值的话可能会有问题，目前行464排序affixTabs没有设置值
const affixTabs = this.tabs.filter((tab) => isAffixTab(tab));
// 获得固定tabs的index,使用固定tabs的下一个位置也就是活动tabs的第一个位置
@@ -591,11 +601,49 @@ function isTabShown(tab: TabDefinition) {
}
/**
* @zh_CN 获取标签页路径
* 从route获取tab页的key
* @param tab
*/
function getTabPath(tab: RouteRecordNormalized | TabDefinition) {
return decodeURIComponent((tab as TabDefinition).fullPath || tab.path);
function getTabKey(tab: RouteLocationNormalized | RouteRecordNormalized) {
const {
fullPath,
path,
meta: { fullPathKey } = {},
query = {},
} = tab as RouteLocationNormalized;
// pageKey可能是数组（查询参数重复时可能出现）
const pageKey = Array.isArray(query.pageKey)
? query.pageKey[0]
: query.pageKey;
let rawKey;
if (pageKey) {
rawKey = pageKey;
} else {
rawKey = fullPathKey === false ? path : (fullPath ?? path);
}
try {
return decodeURIComponent(rawKey);
} catch {
return rawKey;
}
}
/**
* 从tab获取tab页的key
* 如果tab没有key,那么就从route获取key
* @param tab
*/
function getTabKeyFromTab(tab: TabDefinition): string {
return tab.key ?? getTabKey(tab);
}
/**
* 比较两个tab是否相等
* @param a
* @param b
*/
function equalTab(a: TabDefinition, b: TabDefinition) {
return getTabKeyFromTab(a) === getTabKeyFromTab(b);
}
function routeToTab(route: RouteRecordNormalized) {
@@ -603,5 +651,8 @@ function routeToTab(route: RouteRecordNormalized) {
meta: route.meta,
name: route.name,
path: route.path,
key: getTabKey(route),
} as TabDefinition;
}
export { getTabKey };

5
playground/src/views/examples/button-group/index.vue
View File

@@ -19,7 +19,7 @@ const checkValue = ref(['a', 'b']);
const options = [
{ label: '选项1', value: 'a' },
{ label: '选项2', value: 'b' },
{ label: '选项2', value: 'b', num: 999 },
{ label: '选项3', value: 'c' },
{ label: '选项4', value: 'd' },
{ label: '选项5', value: 'e' },
@@ -168,10 +168,11 @@ function onBtnClick(value: any) {
:options="options"
v-bind="compProps"
>
<template #option="{ label, value }">
<template #option="{ label, value, data }">
<div class="flex items-center">
<span>{{ label }}</span>
<span class="ml-2 text-gray-400">{{ value }}</span>
<span v-if="data.num" class="white ml-2">{{ data.num }}</span>
</div>
</template>
</VbenCheckButtonGroup>