@@ -164,8 +159,7 @@ async function onSendCode(api: () => Promise) {
@@ -176,8 +170,7 @@ async function onSendCode(api: () => PromiseHello Vben Admin
diff --git a/apps/vben5/apps/backend-mock/tsconfig.json b/apps/vben5/apps/backend-mock/tsconfig.json index 43008af1c..4417b73d0 100644 --- a/apps/vben5/apps/backend-mock/tsconfig.json +++ b/apps/vben5/apps/backend-mock/tsconfig.json @@ -1,3 +1,11 @@ { - "extends": "./.nitro/types/tsconfig.json" + "$schema": "https://json.schemastore.org/tsconfig", + "extends": "@vben/tsconfig/node.json", + "compilerOptions": { + "paths": { + "~/*": ["./*"] + } + }, + "include": ["**/*.ts", "**/.*.ts"], + "exclude": ["node_modules", "dist", ".nitro"] } diff --git a/apps/vben5/apps/backend-mock/utils/cookie-utils.ts b/apps/vben5/apps/backend-mock/utils/cookie-utils.ts index 78f3aab73..187ce2f00 100644 --- a/apps/vben5/apps/backend-mock/utils/cookie-utils.ts +++ b/apps/vben5/apps/backend-mock/utils/cookie-utils.ts @@ -1,5 +1,7 @@ import type { EventHandlerRequest, H3Event } from 'h3'; +import { deleteCookie, getCookie, setCookie } from 'h3'; + export function clearRefreshTokenCookie(event: H3Event
-
+
-
+
diff --git a/apps/vben5/apps/web-antd/src/views/dashboard/workspace/index.vue b/apps/vben5/apps/web-antd/src/views/dashboard/workspace/index.vue
index b95d61381..002304aa0 100644
--- a/apps/vben5/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/vben5/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -236,15 +236,14 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+ :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar">
早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
今日晴，20℃ - 32℃！
-
+
+ title="Ant Design Vue组件使用演示">
diff --git a/apps/vben5/apps/web-antd/tailwind.config.mjs b/apps/vben5/apps/web-antd/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/apps/web-antd/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/apps/web-antd/tsconfig.json b/apps/vben5/apps/web-antd/tsconfig.json
index 02c287fe6..858a0ec08 100644
--- a/apps/vben5/apps/web-antd/tsconfig.json
+++ b/apps/vben5/apps/web-antd/tsconfig.json
@@ -2,7 +2,6 @@
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/web-app.json",
"compilerOptions": {
- "baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
}
diff --git a/apps/vben5/apps/web-antd/tsconfig.node.json b/apps/vben5/apps/web-antd/tsconfig.node.json
index c2f0d86cc..36e9fb5fb 100644
--- a/apps/vben5/apps/web-antd/tsconfig.node.json
+++ b/apps/vben5/apps/web-antd/tsconfig.node.json
@@ -6,5 +6,5 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"noEmit": false
},
- "include": ["vite.config.mts"]
+ "include": ["vite.config.ts"]
}
diff --git a/apps/vben5/apps/web-antd/vite.config.mts b/apps/vben5/apps/web-antd/vite.config.ts
similarity index 100%
rename from apps/vben5/apps/web-antd/vite.config.mts
rename to apps/vben5/apps/web-antd/vite.config.ts
diff --git a/apps/vben5/apps/web-antdv-next/index.html b/apps/vben5/apps/web-antdv-next/index.html
index 480eb84de..5199ae0f7 100644
--- a/apps/vben5/apps/web-antdv-next/index.html
+++ b/apps/vben5/apps/web-antdv-next/index.html
@@ -9,10 +9,9 @@
+ content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
- <%= VITE_APP_TITLE %>
+ %VITE_APP_TITLE%
diff --git a/apps/vben5/apps/web-antdv-next/src/layouts/auth.vue b/apps/vben5/apps/web-antdv-next/src/layouts/auth.vue
index 8ba66e85a..3c3162aca 100644
--- a/apps/vben5/apps/web-antdv-next/src/layouts/auth.vue
+++ b/apps/vben5/apps/web-antdv-next/src/layouts/auth.vue
@@ -17,8 +17,7 @@ const logoDark = computed(() => preferences.logo.sourceDark);
:logo="logo"
:logo-dark="logoDark"
:page-description="$t('authentication.pageDesc')"
- :page-title="$t('authentication.pageTitle')"
- >
+ :page-title="$t('authentication.pageTitle')">
diff --git a/apps/vben5/apps/web-antdv-next/src/layouts/basic.vue b/apps/vben5/apps/web-antdv-next/src/layouts/basic.vue
index 2226c68a2..720dc89f0 100644
--- a/apps/vben5/apps/web-antdv-next/src/layouts/basic.vue
+++ b/apps/vben5/apps/web-antdv-next/src/layouts/basic.vue
@@ -14,7 +14,7 @@ import {
Notification,
UserDropdown,
} from '@vben/layouts';
-import { preferences } from '@vben/preferences';
+import { preferences, usePreferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';
@@ -80,6 +80,7 @@ const userStore = useUserStore();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const { destroyWatermark, updateWatermark } = useWatermark();
+const { isDark } = usePreferences();
const showDot = computed(() =>
notifications.value.some((item) => !item.isRead),
);
@@ -147,14 +148,60 @@ function remove(id: number | string) {
function handleMakeAll() {
notifications.value.forEach((item) => (item.isRead = true));
}
+
+const viewAll = () => {};
+
+const handleClick = (item: NotificationItem) => {
+ // 如果通知项有链接，点击时跳转
+ if (item.link) {
+ navigateTo(item.link, item.query, item.state);
+ }
+};
+
+function navigateTo(
+ link: string,
+ query?: Record,
+ state?: Record,
+) {
+ if (link.startsWith('http://') || link.startsWith('https://')) {
+ // 外部链接，在新标签页打开
+ window.open(link, '_blank');
+ } else {
+ // 内部路由链接，支持 query 参数和 state
+ router.push({
+ path: link,
+ query: query || {},
+ state,
+ });
+ }
+}
+
watch(
() => ({
enable: preferences.app.watermark,
content: preferences.app.watermarkContent,
+ isDark: isDark.value,
}),
- async ({ enable, content }) => {
+ async ({ enable, content, isDark: isDarkValue }) => {
if (enable) {
+ const watermarkColor = isDarkValue
+ ? 'rgba(255, 255, 255, 0.12)'
+ : 'rgba(0, 0, 0, 0.12)';
+
await updateWatermark({
+ advancedStyle: {
+ colorStops: [
+ {
+ color: watermarkColor,
+ offset: 0,
+ },
+ {
+ color: watermarkColor,
+ offset: 1,
+ },
+ ],
+ type: 'linear',
+ },
content:
content ||
`${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
@@ -179,7 +226,7 @@ watch(
description="ann.vben@gmail.com"
tag-text="Pro"
@logout="handleLogout"
- />
+ @clear-preferences-and-logout="handleLogout" />
+ :avatar>
diff --git a/apps/vben5/apps/web-antdv-next/src/preferences.ts b/apps/vben5/apps/web-antdv-next/src/preferences.ts
index b2e9ace43..303c496e4 100644
--- a/apps/vben5/apps/web-antdv-next/src/preferences.ts
+++ b/apps/vben5/apps/web-antdv-next/src/preferences.ts
@@ -1,4 +1,7 @@
-import { defineOverridesPreferences } from '@vben/preferences';
+import {
+ appCopyrightPreferences,
+ defineOverridesPreferences,
+} from '@vben/preferences';
/**
* @description 项目配置文件
@@ -10,4 +13,5 @@ export const overridesPreferences = defineOverridesPreferences({
app: {
name: import.meta.env.VITE_APP_TITLE,
},
+ copyright: appCopyrightPreferences,
});
diff --git a/apps/vben5/apps/web-antdv-next/src/store/auth.ts b/apps/vben5/apps/web-antdv-next/src/store/auth.ts
index 6f7a3750c..90af35c8d 100644
--- a/apps/vben5/apps/web-antdv-next/src/store/auth.ts
+++ b/apps/vben5/apps/web-antdv-next/src/store/auth.ts
@@ -98,8 +98,7 @@ export const useAuthStore = defineStore('auth', () => {
}
async function fetchUserInfo() {
- let userInfo: null | UserInfo = null;
- userInfo = await getUserInfoApi();
+ const userInfo = await getUserInfoApi();
userStore.setUserInfo(userInfo);
return userInfo;
}
diff --git a/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/code-login.vue b/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/code-login.vue
index acfd1fd78..0f375895e 100644
--- a/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/code-login.vue
+++ b/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/code-login.vue
@@ -55,8 +55,7 @@ const formSchema = computed((): VbenFormSchema[] => {
* @param values 登录表单数据
*/
async function handleLogin(values: Recordable) {
- // eslint-disable-next-line no-console
- console.log(values);
+ void values;
}
@@ -64,6 +63,5 @@ async function handleLogin(values: Recordable) {
diff --git a/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/forget-password.vue b/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/forget-password.vue
index fef0d4279..5da4c098e 100644
--- a/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/forget-password.vue
+++ b/apps/vben5/apps/web-antdv-next/src/views/_core/authentication/forget-password.vue
@@ -29,8 +29,7 @@ const formSchema = computed((): VbenFormSchema[] => {
});
function handleSubmit(value: Recordable) {
- // eslint-disable-next-line no-console
- console.log('reset email:', value);
+ void value;
}
@@ -38,6 +37,5 @@ function handleSubmit(value: Recordable) {
) {
- // eslint-disable-next-line no-console
- console.log('register submit:', value);
+ void value;
}
@@ -91,6 +90,5 @@ function handleSubmit(value: Recordable) {
-
-
-
-
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
index d7894a177..3986570c4 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -37,7 +37,7 @@ import SubMenu from './sub-menu.vue';
interface Props extends MenuProps {}
-defineOptions({ name: 'Menu' });
+defineOptions({ name: 'MenuUI' });
const props = withDefaults(defineProps(), {
accordion: true,
@@ -212,15 +212,15 @@ const enableScroll = computed(
() => props.scrollToActive && props.mode === 'vertical' && !props.collapse,
);
-const { scrollToActiveItem } = useMenuScroll(activePath, {
+useMenuScroll(activePath, {
enable: enableScroll,
delay: 320,
});
// 监听 activePath 变化，自动滚动到激活项
-watch(activePath, () => {
- scrollToActiveItem();
-});
+// watch(activePath, () => {
+// scrollToActiveItem();
+// });
// 默认展开菜单
function initMenu() {
@@ -348,8 +348,7 @@ function getActivePaths() {
is('menu-align', mode === 'horizontal'),
]"
:style="menuStyle"
- role="menu"
- >
+ role="menu">
+ @mouseenter="() => emit('enter', menu)">
-
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
index 5622d413a..1c8561ea0 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/sub-menu-content.vue
@@ -78,16 +78,14 @@ const iconArrowStyle = computed(() => {
b(),
is('collapse-show-title', getCollapseShowTitle),
is('more', isMenuMore),
- ]"
- >
+ ]">
+ :open-delay="0">
{
:is-top-level-menu-submenu="isTopLevelMenuSubmenu"
:level="currentLevel"
:path="path"
- @click.stop="handleClick"
- >
+ @click.stop="handleClick">
@@ -255,8 +250,7 @@ onBeforeUnmount(() => {
:is-top-level-menu-submenu="isTopLevelMenuSubmenu"
:level="currentLevel"
:path="path"
- @click.stop="handleClick"
- >
+ @click.stop="handleClick">
;
}
interface MenuItemRegistered {
active: boolean;
parentPaths: string[];
path: string;
+ query?: Recordable;
}
interface MenuItemClicked {
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/tailwind.config.mjs b/apps/vben5/packages/@core/ui-kit/menu-ui/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/tsdown.config.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/tsdown.config.ts
new file mode 100644
index 000000000..43e8cf1c5
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/tsdown.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsdown';
+import Vue from 'unplugin-vue/rolldown';
+
+export default defineConfig({
+ clean: true,
+ deps: {
+ skipNodeModulesBundle: true,
+ },
+ dts: {
+ vue: true,
+ },
+ entry: ['src/index.ts'],
+ format: ['esm'],
+ outExtensions: () => ({
+ dts: '.d.ts',
+ js: '.mjs',
+ }),
+ platform: 'neutral',
+ plugins: [Vue({ isProduction: true })],
+ unbundle: true,
+});
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/build.config.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/build.config.ts
deleted file mode 100644
index 18eaa604c..000000000
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/build.config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
- clean: true,
- declaration: true,
- entries: [
- {
- builder: 'mkdist',
- input: './src',
- loaders: ['vue'],
- pattern: ['**/*.vue'],
- },
- {
- builder: 'mkdist',
- format: 'esm',
- input: './src',
- loaders: ['js'],
- pattern: ['**/*.ts'],
- },
- ],
-});
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/package.json b/apps/vben5/packages/@core/ui-kit/popup-ui/package.json
index 338da305f..0114a01be 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@vben-core/popup-ui",
- "version": "5.6.0",
+ "version": "5.7.0",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
@@ -11,7 +11,7 @@
"license": "MIT",
"type": "module",
"scripts": {
- "build": "pnpm unbuild",
+ "build": "pnpm exec tsdown",
"prepublishOnly": "npm run build"
},
"files": [
@@ -22,16 +22,19 @@
],
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
+ "types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./src/index.ts",
"development": "./src/index.ts",
+ "production": "./src/index.ts",
"default": "./dist/index.mjs"
}
},
"publishConfig": {
"exports": {
".": {
+ "types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
}
}
@@ -39,10 +42,14 @@
"dependencies": {
"@vben-core/composables": "workspace:*",
"@vben-core/icons": "workspace:*",
+ "@vben-core/preferences": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/shared": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "catalog:",
"vue": "catalog:"
+ },
+ "devDependencies": {
+ "unplugin-vue": "catalog:"
}
}
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/postcss.config.mjs b/apps/vben5/packages/@core/ui-kit/popup-ui/postcss.config.mjs
deleted file mode 100644
index 3d8070455..000000000
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/postcss.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config/postcss';
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
index 5a214fa2d..ff19830e1 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.ts
@@ -36,6 +36,8 @@ export type AlertProps = {
contentClass?: string;
/** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
contentMasking?: boolean;
+ /** 按下Esc时是否关闭弹窗 */
+ escapeKeyClose?: boolean;
/** 弹窗底部内容（与按钮在同一个容器中） */
footer?: Component | string;
/** 弹窗的图标（在标题的前面） */
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
index 6b52a1121..253a8ab99 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/alert/alert.vue
@@ -14,6 +14,7 @@ import {
Info,
X,
} from '@vben-core/icons';
+import { usePreferences } from '@vben-core/preferences';
import {
AlertDialog,
AlertDialogAction,
@@ -34,8 +35,10 @@ const props = withDefaults(defineProps(), {
bordered: true,
buttonAlign: 'end',
centered: true,
+ escapeKeyClose: true,
});
const emits = defineEmits(['closed', 'confirm', 'opened']);
+const { globalEscapeShortcutKey } = usePreferences();
const open = defineModel('open', { default: false });
const { $t } = useSimpleLocale();
const components = globalShareState.getComponents();
@@ -46,8 +49,14 @@ function onAlertClosed() {
isConfirm.value = false;
}
-function onEscapeKeyDown() {
+function onEscapeKeyDown(e: KeyboardEvent) {
+ // 先标记是按 Esc 触发的（用于后续 isConfirm 判断等）
isConfirm.value = false;
+
+ // 只有当组件参数和全局配置都为false时才阻止关闭，其任意一个为true都需要让esc生效
+ if (!props.escapeKeyClose && !globalEscapeShortcutKey.value) {
+ e.preventDefault();
+ }
}
const getIconRender = computed(() => {
@@ -136,25 +145,25 @@ async function handleOpenChange(val: boolean) {
}
-
+
+ ">
-
-
+
-
+
diff --git a/apps/vben5/apps/web-antdv-next/src/views/dashboard/workspace/index.vue b/apps/vben5/apps/web-antdv-next/src/views/dashboard/workspace/index.vue
index b95d61381..f189349ec 100644
--- a/apps/vben5/apps/web-antdv-next/src/views/dashboard/workspace/index.vue
+++ b/apps/vben5/apps/web-antdv-next/src/views/dashboard/workspace/index.vue
@@ -236,8 +236,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+ :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar">
早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
@@ -254,8 +253,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
:items="quickNavItems"
class="mt-5 lg:mt-0"
title="快捷导航"
- @click="navTo"
- />
+ @click="navTo" />
+ title="Ant Design Vue组件使用演示">
diff --git a/apps/vben5/apps/web-antdv-next/tailwind.config.mjs b/apps/vben5/apps/web-antdv-next/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/apps/web-antdv-next/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/apps/web-antdv-next/tsconfig.json b/apps/vben5/apps/web-antdv-next/tsconfig.json
index 02c287fe6..858a0ec08 100644
--- a/apps/vben5/apps/web-antdv-next/tsconfig.json
+++ b/apps/vben5/apps/web-antdv-next/tsconfig.json
@@ -2,7 +2,6 @@
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/web-app.json",
"compilerOptions": {
- "baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
}
diff --git a/apps/vben5/apps/web-antdv-next/tsconfig.node.json b/apps/vben5/apps/web-antdv-next/tsconfig.node.json
index c2f0d86cc..36e9fb5fb 100644
--- a/apps/vben5/apps/web-antdv-next/tsconfig.node.json
+++ b/apps/vben5/apps/web-antdv-next/tsconfig.node.json
@@ -6,5 +6,5 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"noEmit": false
},
- "include": ["vite.config.mts"]
+ "include": ["vite.config.ts"]
}
diff --git a/apps/vben5/apps/web-antdv-next/vite.config.mts b/apps/vben5/apps/web-antdv-next/vite.config.ts
similarity index 100%
rename from apps/vben5/apps/web-antdv-next/vite.config.mts
rename to apps/vben5/apps/web-antdv-next/vite.config.ts
diff --git a/apps/vben5/apps/web-ele/index.html b/apps/vben5/apps/web-ele/index.html
index 2b59b8d75..3586891ac 100644
--- a/apps/vben5/apps/web-ele/index.html
+++ b/apps/vben5/apps/web-ele/index.html
@@ -9,10 +9,9 @@
+ content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
- <%= VITE_APP_TITLE %>
+ %VITE_APP_TITLE%
+ :page-title="$t('authentication.pageTitle')">
diff --git a/apps/vben5/apps/web-ele/src/layouts/basic.vue b/apps/vben5/apps/web-ele/src/layouts/basic.vue
index 1481dc5a8..720dc89f0 100644
--- a/apps/vben5/apps/web-ele/src/layouts/basic.vue
+++ b/apps/vben5/apps/web-ele/src/layouts/basic.vue
@@ -2,18 +2,19 @@
import type { NotificationItem } from '@vben/layouts';
import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useWatermark } from '@vben/hooks';
-import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
+import { BookOpenText, CircleHelp, SvgGithubIcon } from '@vben/icons';
import {
BasicLayout,
LockScreen,
Notification,
UserDropdown,
} from '@vben/layouts';
-import { preferences } from '@vben/preferences';
+import { preferences, usePreferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';
@@ -23,6 +24,7 @@ import LoginForm from '#/views/_core/authentication/login.vue';
const notifications = ref([
{
+ id: 1,
avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
date: '3小时前',
isRead: true,
@@ -30,6 +32,7 @@ const notifications = ref([
title: '收到了 14 份新周报',
},
{
+ id: 2,
avatar: 'https://avatar.vercel.sh/1',
date: '刚刚',
isRead: false,
@@ -37,6 +40,7 @@ const notifications = ref([
title: '朱偏右 回复了你',
},
{
+ id: 3,
avatar: 'https://avatar.vercel.sh/1',
date: '2024-01-01',
isRead: false,
@@ -44,23 +48,51 @@ const notifications = ref([
title: '曲丽丽 评论了你',
},
{
+ id: 4,
avatar: 'https://avatar.vercel.sh/satori',
date: '1天前',
isRead: false,
message: '描述信息描述信息描述信息',
title: '代办提醒',
},
+ {
+ id: 5,
+ avatar: 'https://avatar.vercel.sh/satori',
+ date: '1天前',
+ isRead: false,
+ message: '描述信息描述信息描述信息',
+ title: '跳转Workspace示例',
+ link: '/workspace',
+ },
+ {
+ id: 6,
+ avatar: 'https://avatar.vercel.sh/satori',
+ date: '1天前',
+ isRead: false,
+ message: '描述信息描述信息描述信息',
+ title: '跳转外部链接示例',
+ link: 'https://doc.vben.pro',
+ },
]);
+const router = useRouter();
const userStore = useUserStore();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const { destroyWatermark, updateWatermark } = useWatermark();
+const { isDark } = usePreferences();
const showDot = computed(() =>
notifications.value.some((item) => !item.isRead),
);
const menus = computed(() => [
+ {
+ handler: () => {
+ router.push({ name: 'Profile' });
+ },
+ icon: 'lucide:user',
+ text: $t('page.auth.profile'),
+ },
{
handler: () => {
openWindow(VBEN_DOC_URL, {
@@ -76,7 +108,7 @@ const menus = computed(() => [
target: '_blank',
});
},
- icon: MdiGithub,
+ icon: SvgGithubIcon,
text: 'GitHub',
},
{
@@ -102,15 +134,77 @@ function handleNoticeClear() {
notifications.value = [];
}
+function markRead(id: number | string) {
+ const item = notifications.value.find((item) => item.id === id);
+ if (item) {
+ item.isRead = true;
+ }
+}
+
+function remove(id: number | string) {
+ notifications.value = notifications.value.filter((item) => item.id !== id);
+}
+
function handleMakeAll() {
notifications.value.forEach((item) => (item.isRead = true));
}
+
+const viewAll = () => {};
+
+const handleClick = (item: NotificationItem) => {
+ // 如果通知项有链接，点击时跳转
+ if (item.link) {
+ navigateTo(item.link, item.query, item.state);
+ }
+};
+
+function navigateTo(
+ link: string,
+ query?: Record,
+ state?: Record,
+) {
+ if (link.startsWith('http://') || link.startsWith('https://')) {
+ // 外部链接，在新标签页打开
+ window.open(link, '_blank');
+ } else {
+ // 内部路由链接，支持 query 参数和 state
+ router.push({
+ path: link,
+ query: query || {},
+ state,
+ });
+ }
+}
+
watch(
- () => preferences.app.watermark,
- async (enable) => {
+ () => ({
+ enable: preferences.app.watermark,
+ content: preferences.app.watermarkContent,
+ isDark: isDark.value,
+ }),
+ async ({ enable, content, isDark: isDarkValue }) => {
if (enable) {
+ const watermarkColor = isDarkValue
+ ? 'rgba(255, 255, 255, 0.12)'
+ : 'rgba(0, 0, 0, 0.12)';
+
await updateWatermark({
- content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
+ advancedStyle: {
+ colorStops: [
+ {
+ color: watermarkColor,
+ offset: 0,
+ },
+ {
+ color: watermarkColor,
+ offset: 1,
+ },
+ ],
+ type: 'linear',
+ },
+ content:
+ content ||
+ `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
});
} else {
destroyWatermark();
@@ -132,21 +226,23 @@ watch(
description="ann.vben@gmail.com"
tag-text="Pro"
@logout="handleLogout"
- />
+ @clear-preferences-and-logout="handleLogout" />
+ :avatar>
diff --git a/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json b/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json
index 6eddebb53..e379d22a6 100644
--- a/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json
+++ b/apps/vben5/apps/web-ele/src/locales/langs/en-US/demos.json
@@ -7,7 +7,9 @@
"about": "About",
"document": "Document",
"antdv": "Ant Design Vue Version",
+ "antdv-next": "Antdv Next Version",
"naive-ui": "Naive UI Version",
- "element-plus": "Element Plus Version"
+ "element-plus": "Element Plus Version",
+ "tdesign": "TDesign Vue Version"
}
}
diff --git a/apps/vben5/apps/web-ele/src/locales/langs/en-US/page.json b/apps/vben5/apps/web-ele/src/locales/langs/en-US/page.json
index 618a258c0..39f1641c8 100644
--- a/apps/vben5/apps/web-ele/src/locales/langs/en-US/page.json
+++ b/apps/vben5/apps/web-ele/src/locales/langs/en-US/page.json
@@ -4,7 +4,8 @@
"register": "Register",
"codeLogin": "Code Login",
"qrcodeLogin": "Qr Code Login",
- "forgetPassword": "Forget Password"
+ "forgetPassword": "Forget Password",
+ "profile": "Profile"
},
"dashboard": {
"title": "Dashboard",
diff --git a/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json b/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json
index ba6d6ccd0..054c447cb 100644
--- a/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json
+++ b/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/demos.json
@@ -7,7 +7,9 @@
"about": "关于",
"document": "文档",
"antdv": "Ant Design Vue 版本",
+ "antdv-next": "Antdv Next 版本",
"naive-ui": "Naive UI 版本",
- "element-plus": "Element Plus 版本"
+ "element-plus": "Element Plus 版本",
+ "tdesign": "TDesign Vue 版本"
}
}
diff --git a/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/page.json b/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/page.json
index 4cb67081c..2192d1d52 100644
--- a/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/page.json
+++ b/apps/vben5/apps/web-ele/src/locales/langs/zh-CN/page.json
@@ -4,7 +4,8 @@
"register": "注册",
"codeLogin": "验证码登录",
"qrcodeLogin": "二维码登录",
- "forgetPassword": "忘记密码"
+ "forgetPassword": "忘记密码",
+ "profile": "个人中心"
},
"dashboard": {
"title": "概览",
diff --git a/apps/vben5/apps/web-ele/src/preferences.ts b/apps/vben5/apps/web-ele/src/preferences.ts
index b2e9ace43..303c496e4 100644
--- a/apps/vben5/apps/web-ele/src/preferences.ts
+++ b/apps/vben5/apps/web-ele/src/preferences.ts
@@ -1,4 +1,7 @@
-import { defineOverridesPreferences } from '@vben/preferences';
+import {
+ appCopyrightPreferences,
+ defineOverridesPreferences,
+} from '@vben/preferences';
/**
* @description 项目配置文件
@@ -10,4 +13,5 @@ export const overridesPreferences = defineOverridesPreferences({
app: {
name: import.meta.env.VITE_APP_TITLE,
},
+ copyright: appCopyrightPreferences,
});
diff --git a/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts b/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts
index 20fbc96c0..1e8176ea0 100644
--- a/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts
+++ b/apps/vben5/apps/web-ele/src/router/routes/modules/vben.ts
@@ -2,12 +2,18 @@ import type { RouteRecordRaw } from 'vue-router';
import {
VBEN_ANT_PREVIEW_URL,
+ VBEN_ANTDV_NEXT_PREVIEW_URL,
VBEN_DOC_URL,
VBEN_GITHUB_URL,
VBEN_LOGO_URL,
VBEN_NAIVE_PREVIEW_URL,
+ VBEN_TD_PREVIEW_URL,
} from '@vben/constants';
-import { SvgAntdvLogoIcon } from '@vben/icons';
+import {
+ SvgAntdvLogoIcon,
+ SvgAntdvNextLogoIcon,
+ SvgTDesignIcon,
+} from '@vben/icons';
import { IFrameView } from '#/layouts';
import { $t } from '#/locales';
@@ -65,6 +71,28 @@ const routes: RouteRecordRaw[] = [
title: $t('demos.vben.antdv'),
},
},
+ {
+ name: 'VbenAntdVNext',
+ path: '/vben-admin/antdv-next',
+ component: IFrameView,
+ meta: {
+ badgeType: 'dot',
+ icon: SvgAntdvNextLogoIcon,
+ link: VBEN_ANTDV_NEXT_PREVIEW_URL,
+ title: $t('demos.vben.antdv-next'),
+ },
+ },
+ {
+ name: 'VbenTDesign',
+ path: '/vben-admin/tdesign',
+ component: IFrameView,
+ meta: {
+ badgeType: 'dot',
+ icon: SvgTDesignIcon,
+ link: VBEN_TD_PREVIEW_URL,
+ title: $t('demos.vben.tdesign'),
+ },
+ },
],
},
{
@@ -77,6 +105,16 @@ const routes: RouteRecordRaw[] = [
order: 9999,
},
},
+ {
+ name: 'Profile',
+ path: '/profile',
+ component: () => import('#/views/_core/profile/index.vue'),
+ meta: {
+ icon: 'lucide:user',
+ hideInMenu: true,
+ title: $t('page.auth.profile'),
+ },
+ },
];
export default routes;
diff --git a/apps/vben5/apps/web-ele/src/store/auth.ts b/apps/vben5/apps/web-ele/src/store/auth.ts
index 74fadfe24..bb37051ad 100644
--- a/apps/vben5/apps/web-ele/src/store/auth.ts
+++ b/apps/vben5/apps/web-ele/src/store/auth.ts
@@ -99,8 +99,7 @@ export const useAuthStore = defineStore('auth', () => {
}
async function fetchUserInfo() {
- let userInfo: null | UserInfo = null;
- userInfo = await getUserInfoApi();
+ const userInfo = await getUserInfoApi();
userStore.setUserInfo(userInfo);
return userInfo;
}
diff --git a/apps/vben5/apps/web-ele/src/types/element-plus-style-css.d.ts b/apps/vben5/apps/web-ele/src/types/element-plus-style-css.d.ts
new file mode 100644
index 000000000..ba7a76672
--- /dev/null
+++ b/apps/vben5/apps/web-ele/src/types/element-plus-style-css.d.ts
@@ -0,0 +1,4 @@
+declare module 'element-plus/es/components/*/style/css' {
+ const sideEffect: undefined;
+ export default sideEffect;
+}
diff --git a/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue b/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue
index acfd1fd78..5dcb13671 100644
--- a/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue
+++ b/apps/vben5/apps/web-ele/src/views/_core/authentication/code-login.vue
@@ -40,6 +40,10 @@ const formSchema = computed((): VbenFormSchema[] => {
return text;
},
placeholder: $t('authentication.code'),
+ handleSendCode: async () => {
+ console.warn('发送验证码前校验等逻辑');
+ throw new Error('手机号校验失败');
+ },
},
fieldName: 'code',
label: $t('authentication.code'),
@@ -55,8 +59,7 @@ const formSchema = computed((): VbenFormSchema[] => {
* @param values 登录表单数据
*/
async function handleLogin(values: Recordable) {
- // eslint-disable-next-line no-console
- console.log(values);
+ void values;
}
@@ -64,6 +67,5 @@ async function handleLogin(values: Recordable) {
diff --git a/apps/vben5/apps/web-ele/src/views/_core/authentication/forget-password.vue b/apps/vben5/apps/web-ele/src/views/_core/authentication/forget-password.vue
index fef0d4279..5da4c098e 100644
--- a/apps/vben5/apps/web-ele/src/views/_core/authentication/forget-password.vue
+++ b/apps/vben5/apps/web-ele/src/views/_core/authentication/forget-password.vue
@@ -29,8 +29,7 @@ const formSchema = computed((): VbenFormSchema[] => {
});
function handleSubmit(value: Recordable) {
- // eslint-disable-next-line no-console
- console.log('reset email:', value);
+ void value;
}
@@ -38,6 +37,5 @@ function handleSubmit(value: Recordable) {
) {
- // eslint-disable-next-line no-console
- console.log('register submit:', value);
+ void value;
}
@@ -91,6 +90,5 @@ function handleSubmit(value: Recordable) {
+
+
+
diff --git a/apps/vben5/apps/web-ele/src/views/_core/profile/notification-setting.vue b/apps/vben5/apps/web-ele/src/views/_core/profile/notification-setting.vue
new file mode 100644
index 000000000..324a4b393
--- /dev/null
+++ b/apps/vben5/apps/web-ele/src/views/_core/profile/notification-setting.vue
@@ -0,0 +1,31 @@
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/tailwind.config.mjs b/apps/vben5/packages/@core/ui-kit/layout-ui/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/tsdown.config.ts b/apps/vben5/packages/@core/ui-kit/layout-ui/tsdown.config.ts
new file mode 100644
index 000000000..43e8cf1c5
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/tsdown.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsdown';
+import Vue from 'unplugin-vue/rolldown';
+
+export default defineConfig({
+ clean: true,
+ deps: {
+ skipNodeModulesBundle: true,
+ },
+ dts: {
+ vue: true,
+ },
+ entry: ['src/index.ts'],
+ format: ['esm'],
+ outExtensions: () => ({
+ dts: '.d.ts',
+ js: '.mjs',
+ }),
+ platform: 'neutral',
+ plugins: [Vue({ isProduction: true })],
+ unbundle: true,
+});
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/build.config.ts b/apps/vben5/packages/@core/ui-kit/menu-ui/build.config.ts
deleted file mode 100644
index 1ff78fabb..000000000
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/build.config.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
- clean: true,
- declaration: true,
- entries: [
- {
- builder: 'mkdist',
- input: './src',
- pattern: ['**/*'],
- },
- {
- builder: 'mkdist',
- input: './src',
- loaders: ['vue'],
- pattern: ['**/*.vue'],
- },
- {
- builder: 'mkdist',
- format: 'esm',
- input: './src',
- loaders: ['js'],
- pattern: ['**/*.ts'],
- },
- ],
-});
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/package.json b/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
index 9f7435200..5290fb1a8 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@vben-core/menu-ui",
- "version": "5.6.0",
+ "version": "5.7.0",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
@@ -11,7 +11,7 @@
"license": "MIT",
"type": "module",
"scripts": {
- "build": "pnpm unbuild",
+ "build": "pnpm exec tsdown",
"prepublishOnly": "npm run build"
},
"files": [
@@ -22,27 +22,36 @@
],
"main": "./dist/index.mjs",
"module": "./dist/index.mjs",
+ "types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./src/index.ts",
"development": "./src/index.ts",
+ "production": "./src/index.ts",
"default": "./dist/index.mjs"
}
},
"publishConfig": {
"exports": {
".": {
+ "types": "./dist/index.d.ts",
"default": "./dist/index.mjs"
}
}
},
"dependencies": {
"@vben-core/composables": "workspace:*",
+ "@vben-core/design": "workspace:*",
"@vben-core/icons": "workspace:*",
"@vben-core/shadcn-ui": "workspace:*",
"@vben-core/shared": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "catalog:",
+ "qs": "catalog:",
"vue": "catalog:"
+ },
+ "devDependencies": {
+ "@types/qs": "catalog:",
+ "unplugin-vue": "catalog:"
}
}
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/postcss.config.mjs b/apps/vben5/packages/@core/ui-kit/menu-ui/postcss.config.mjs
deleted file mode 100644
index 3d8070455..000000000
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/postcss.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config/postcss';
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge-dot.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge-dot.vue
index 823cbd745..97a1ec40d 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge-dot.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge-dot.vue
@@ -16,13 +16,11 @@ withDefaults(defineProps(), {
+ class="absolute inline-flex size-full animate-ping rounded-full opacity-75">
+ class="relative inline-flex size-1.5 rounded-full">
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
index 9a329c50f..b822fca9d 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-badge.vue
@@ -49,8 +49,7 @@ const badgeStyle = computed(() => {
v-else
:class="badgeClass"
:style="badgeStyle"
- class="flex-center rounded-xl px-1.5 py-0.5 text-[10px] text-primary-foreground"
- >
+ class="flex-center rounded-xl px-1.5 py-0.5 text-[10px] text-primary-foreground">
{{ badge }}
diff --git a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
index 691c25cde..193456977 100644
--- a/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
+++ b/apps/vben5/packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
@@ -5,6 +5,9 @@ import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue';
import { useNamespace } from '@vben-core/composables';
import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui';
+import { isHttpUrl } from '@vben-core/shared/utils';
+
+import qs from 'qs';
import { MenuBadge } from '../components';
import { useMenu, useMenuContext, useSubMenuContext } from '../hooks';
@@ -31,8 +34,10 @@ const menuIcon = computed(() =>
active.value ? props.activeIcon || props.icon : props.icon,
);
+const isHttp = computed(() => isHttpUrl(item.parentPaths.at(-1)));
+
const isTopLevelMenuItem = computed(
- () => parentMenu.value?.type.name === 'Menu',
+ () => parentMenu.value?.type.name === 'MenuUI',
);
const collapseShowTitle = computed(
@@ -54,6 +59,7 @@ const item: MenuItemRegistered = reactive({
active,
parentPaths: parentPaths.value,
path: props.path || '',
+ query: props.query,
});
/**
@@ -81,42 +87,48 @@ onBeforeUnmount(() => {
});
-
-
+
-
+
diff --git a/apps/vben5/apps/web-ele/src/views/dashboard/workspace/index.vue b/apps/vben5/apps/web-ele/src/views/dashboard/workspace/index.vue
index b95d61381..f189349ec 100644
--- a/apps/vben5/apps/web-ele/src/views/dashboard/workspace/index.vue
+++ b/apps/vben5/apps/web-ele/src/views/dashboard/workspace/index.vue
@@ -236,8 +236,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+ :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar">
早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
@@ -254,8 +253,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
:items="quickNavItems"
class="mt-5 lg:mt-0"
title="快捷导航"
- @click="navTo"
- />
+ @click="navTo" />
+ title="Element Plus组件使用演示">
按钮
@@ -97,14 +96,11 @@ const segmentedOptions = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
V-Loading
-
diff --git a/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue b/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
index 0ecab5864..66ecda2f6 100644
--- a/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
+++ b/apps/vben5/apps/web-ele/src/views/demos/form/basic.vue
@@ -173,9 +173,8 @@ function setFormValues() {
-
+ title="表单演示">
+
diff --git a/apps/vben5/apps/web-ele/tailwind.config.mjs b/apps/vben5/apps/web-ele/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/apps/web-ele/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/apps/web-ele/tsconfig.json b/apps/vben5/apps/web-ele/tsconfig.json
index 02c287fe6..858a0ec08 100644
--- a/apps/vben5/apps/web-ele/tsconfig.json
+++ b/apps/vben5/apps/web-ele/tsconfig.json
@@ -2,7 +2,6 @@
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/web-app.json",
"compilerOptions": {
- "baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
}
diff --git a/apps/vben5/apps/web-ele/tsconfig.node.json b/apps/vben5/apps/web-ele/tsconfig.node.json
index c2f0d86cc..36e9fb5fb 100644
--- a/apps/vben5/apps/web-ele/tsconfig.node.json
+++ b/apps/vben5/apps/web-ele/tsconfig.node.json
@@ -6,5 +6,5 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"noEmit": false
},
- "include": ["vite.config.mts"]
+ "include": ["vite.config.ts"]
}
diff --git a/apps/vben5/apps/web-ele/vite.config.mts b/apps/vben5/apps/web-ele/vite.config.ts
similarity index 100%
rename from apps/vben5/apps/web-ele/vite.config.mts
rename to apps/vben5/apps/web-ele/vite.config.ts
diff --git a/apps/vben5/apps/web-naive/index.html b/apps/vben5/apps/web-naive/index.html
index 7ea638418..43320df32 100644
--- a/apps/vben5/apps/web-naive/index.html
+++ b/apps/vben5/apps/web-naive/index.html
@@ -9,10 +9,9 @@
+ content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
- <%= VITE_APP_TITLE %>
+ %VITE_APP_TITLE%
+ :page-title="$t('authentication.pageTitle')">
diff --git a/apps/vben5/apps/web-naive/src/layouts/basic.vue b/apps/vben5/apps/web-naive/src/layouts/basic.vue
index 691893841..720dc89f0 100644
--- a/apps/vben5/apps/web-naive/src/layouts/basic.vue
+++ b/apps/vben5/apps/web-naive/src/layouts/basic.vue
@@ -2,18 +2,19 @@
import type { NotificationItem } from '@vben/layouts';
import { computed, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useWatermark } from '@vben/hooks';
-import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
+import { BookOpenText, CircleHelp, SvgGithubIcon } from '@vben/icons';
import {
BasicLayout,
LockScreen,
Notification,
UserDropdown,
} from '@vben/layouts';
-import { preferences } from '@vben/preferences';
+import { preferences, usePreferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';
@@ -23,6 +24,7 @@ import LoginForm from '#/views/_core/authentication/login.vue';
const notifications = ref([
{
+ id: 1,
avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
date: '3小时前',
isRead: true,
@@ -30,6 +32,7 @@ const notifications = ref([
title: '收到了 14 份新周报',
},
{
+ id: 2,
avatar: 'https://avatar.vercel.sh/1',
date: '刚刚',
isRead: false,
@@ -37,6 +40,7 @@ const notifications = ref([
title: '朱偏右 回复了你',
},
{
+ id: 3,
avatar: 'https://avatar.vercel.sh/1',
date: '2024-01-01',
isRead: false,
@@ -44,23 +48,51 @@ const notifications = ref([
title: '曲丽丽 评论了你',
},
{
+ id: 4,
avatar: 'https://avatar.vercel.sh/satori',
date: '1天前',
isRead: false,
message: '描述信息描述信息描述信息',
title: '代办提醒',
},
+ {
+ id: 5,
+ avatar: 'https://avatar.vercel.sh/satori',
+ date: '1天前',
+ isRead: false,
+ message: '描述信息描述信息描述信息',
+ title: '跳转Workspace示例',
+ link: '/workspace',
+ },
+ {
+ id: 6,
+ avatar: 'https://avatar.vercel.sh/satori',
+ date: '1天前',
+ isRead: false,
+ message: '描述信息描述信息描述信息',
+ title: '跳转外部链接示例',
+ link: 'https://doc.vben.pro',
+ },
]);
+const router = useRouter();
const userStore = useUserStore();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const { destroyWatermark, updateWatermark } = useWatermark();
+const { isDark } = usePreferences();
const showDot = computed(() =>
notifications.value.some((item) => !item.isRead),
);
const menus = computed(() => [
+ {
+ handler: () => {
+ router.push({ name: 'Profile' });
+ },
+ icon: 'lucide:user',
+ text: $t('page.auth.profile'),
+ },
{
handler: () => {
openWindow(VBEN_DOC_URL, {
@@ -76,7 +108,7 @@ const menus = computed(() => [
target: '_blank',
});
},
- icon: MdiGithub,
+ icon: SvgGithubIcon,
text: 'GitHub',
},
{
@@ -102,16 +134,77 @@ function handleNoticeClear() {
notifications.value = [];
}
+function markRead(id: number | string) {
+ const item = notifications.value.find((item) => item.id === id);
+ if (item) {
+ item.isRead = true;
+ }
+}
+
+function remove(id: number | string) {
+ notifications.value = notifications.value.filter((item) => item.id !== id);
+}
+
function handleMakeAll() {
notifications.value.forEach((item) => (item.isRead = true));
}
+const viewAll = () => {};
+
+const handleClick = (item: NotificationItem) => {
+ // 如果通知项有链接，点击时跳转
+ if (item.link) {
+ navigateTo(item.link, item.query, item.state);
+ }
+};
+
+function navigateTo(
+ link: string,
+ query?: Record,
+ state?: Record,
+) {
+ if (link.startsWith('http://') || link.startsWith('https://')) {
+ // 外部链接，在新标签页打开
+ window.open(link, '_blank');
+ } else {
+ // 内部路由链接，支持 query 参数和 state
+ router.push({
+ path: link,
+ query: query || {},
+ state,
+ });
+ }
+}
+
watch(
- () => preferences.app.watermark,
- async (enable) => {
+ () => ({
+ enable: preferences.app.watermark,
+ content: preferences.app.watermarkContent,
+ isDark: isDark.value,
+ }),
+ async ({ enable, content, isDark: isDarkValue }) => {
if (enable) {
+ const watermarkColor = isDarkValue
+ ? 'rgba(255, 255, 255, 0.12)'
+ : 'rgba(0, 0, 0, 0.12)';
+
await updateWatermark({
- content: `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
+ advancedStyle: {
+ colorStops: [
+ {
+ color: watermarkColor,
+ offset: 0,
+ },
+ {
+ color: watermarkColor,
+ offset: 1,
+ },
+ ],
+ type: 'linear',
+ },
+ content:
+ content ||
+ `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
});
} else {
destroyWatermark();
@@ -133,21 +226,23 @@ watch(
description="ann.vben@gmail.com"
tag-text="Pro"
@logout="handleLogout"
- />
+ @clear-preferences-and-logout="handleLogout" />
+ :avatar>
diff --git a/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json b/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json
index 839fc2e68..b02a97de3 100644
--- a/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json
+++ b/apps/vben5/apps/web-naive/src/locales/langs/en-US/demos.json
@@ -3,12 +3,15 @@
"naive": "Naive UI",
"table": "Table",
"form": "Form",
+ "arrayForm": "Array Editor",
"vben": {
"title": "Project",
"about": "About",
"document": "Document",
"antdv": "Ant Design Vue Version",
+ "antdv-next": "Antdv Next Version",
"naive-ui": "Naive UI Version",
- "element-plus": "Element Plus Version"
+ "element-plus": "Element Plus Version",
+ "tdesign": "TDesign Vue Version"
}
}
diff --git a/apps/vben5/apps/web-naive/src/locales/langs/en-US/page.json b/apps/vben5/apps/web-naive/src/locales/langs/en-US/page.json
index 618a258c0..39f1641c8 100644
--- a/apps/vben5/apps/web-naive/src/locales/langs/en-US/page.json
+++ b/apps/vben5/apps/web-naive/src/locales/langs/en-US/page.json
@@ -4,7 +4,8 @@
"register": "Register",
"codeLogin": "Code Login",
"qrcodeLogin": "Qr Code Login",
- "forgetPassword": "Forget Password"
+ "forgetPassword": "Forget Password",
+ "profile": "Profile"
},
"dashboard": {
"title": "Dashboard",
diff --git a/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json b/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json
index e0d7e616d..b35cb934f 100644
--- a/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json
+++ b/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/demos.json
@@ -3,12 +3,15 @@
"naive": "Naive UI",
"table": "Table",
"form": "表单",
+ "arrayForm": "数组编辑器",
"vben": {
"title": "项目",
"about": "关于",
"document": "文档",
"antdv": "Ant Design Vue 版本",
+ "antdv-next": "Antdv Next 版本",
"naive-ui": "Naive UI 版本",
- "element-plus": "Element Plus 版本"
+ "element-plus": "Element Plus 版本",
+ "tdesign": "TDesign Vue 版本"
}
}
diff --git a/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/page.json b/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/page.json
index 4cb67081c..2192d1d52 100644
--- a/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/page.json
+++ b/apps/vben5/apps/web-naive/src/locales/langs/zh-CN/page.json
@@ -4,7 +4,8 @@
"register": "注册",
"codeLogin": "验证码登录",
"qrcodeLogin": "二维码登录",
- "forgetPassword": "忘记密码"
+ "forgetPassword": "忘记密码",
+ "profile": "个人中心"
},
"dashboard": {
"title": "概览",
diff --git a/apps/vben5/apps/web-naive/src/preferences.ts b/apps/vben5/apps/web-naive/src/preferences.ts
index b2e9ace43..303c496e4 100644
--- a/apps/vben5/apps/web-naive/src/preferences.ts
+++ b/apps/vben5/apps/web-naive/src/preferences.ts
@@ -1,4 +1,7 @@
-import { defineOverridesPreferences } from '@vben/preferences';
+import {
+ appCopyrightPreferences,
+ defineOverridesPreferences,
+} from '@vben/preferences';
/**
* @description 项目配置文件
@@ -10,4 +13,5 @@ export const overridesPreferences = defineOverridesPreferences({
app: {
name: import.meta.env.VITE_APP_TITLE,
},
+ copyright: appCopyrightPreferences,
});
diff --git a/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts b/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts
index 5e49ffa01..9a4ffeff6 100644
--- a/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts
+++ b/apps/vben5/apps/web-naive/src/router/routes/modules/demos.ts
@@ -37,6 +37,14 @@ const routes: RouteRecordRaw[] = [
path: '/demos/form',
component: () => import('#/views/demos/form/basic.vue'),
},
+ {
+ meta: {
+ title: $t('demos.arrayForm'),
+ },
+ name: 'ArrayForm',
+ path: '/demos/array-form',
+ component: () => import('#/views/demos/naive/array-form/index.vue'),
+ },
],
},
];
diff --git a/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts b/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts
index 169de855b..888ff4cb4 100644
--- a/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts
+++ b/apps/vben5/apps/web-naive/src/router/routes/modules/vben.ts
@@ -2,12 +2,18 @@ import type { RouteRecordRaw } from 'vue-router';
import {
VBEN_ANT_PREVIEW_URL,
+ VBEN_ANTDV_NEXT_PREVIEW_URL,
VBEN_DOC_URL,
VBEN_ELE_PREVIEW_URL,
VBEN_GITHUB_URL,
VBEN_LOGO_URL,
+ VBEN_TD_PREVIEW_URL,
} from '@vben/constants';
-import { SvgAntdvLogoIcon } from '@vben/icons';
+import {
+ SvgAntdvLogoIcon,
+ SvgAntdvNextLogoIcon,
+ SvgTDesignIcon,
+} from '@vben/icons';
import { IFrameView } from '#/layouts';
import { $t } from '#/locales';
@@ -54,6 +60,28 @@ const routes: RouteRecordRaw[] = [
title: $t('demos.vben.antdv'),
},
},
+ {
+ name: 'VbenAntdVNext',
+ path: '/vben-admin/antdv-next',
+ component: IFrameView,
+ meta: {
+ badgeType: 'dot',
+ icon: SvgAntdvNextLogoIcon,
+ link: VBEN_ANTDV_NEXT_PREVIEW_URL,
+ title: $t('demos.vben.antdv-next'),
+ },
+ },
+ {
+ name: 'VbenTDesign',
+ path: '/vben-admin/tdesign',
+ component: IFrameView,
+ meta: {
+ badgeType: 'dot',
+ icon: SvgTDesignIcon,
+ link: VBEN_TD_PREVIEW_URL,
+ title: $t('demos.vben.tdesign'),
+ },
+ },
{
name: 'VbenElementPlus',
path: '/vben-admin/ele',
@@ -77,6 +105,16 @@ const routes: RouteRecordRaw[] = [
order: 9999,
},
},
+ {
+ name: 'Profile',
+ path: '/profile',
+ component: () => import('#/views/_core/profile/index.vue'),
+ meta: {
+ icon: 'lucide:user',
+ hideInMenu: true,
+ title: $t('page.auth.profile'),
+ },
+ },
];
export default routes;
diff --git a/apps/vben5/apps/web-naive/src/store/auth.ts b/apps/vben5/apps/web-naive/src/store/auth.ts
index 0ff050b3b..5e5cf655b 100644
--- a/apps/vben5/apps/web-naive/src/store/auth.ts
+++ b/apps/vben5/apps/web-naive/src/store/auth.ts
@@ -99,8 +99,7 @@ export const useAuthStore = defineStore('auth', () => {
}
async function fetchUserInfo() {
- let userInfo: null | UserInfo = null;
- userInfo = await getUserInfoApi();
+ const userInfo = await getUserInfoApi();
userStore.setUserInfo(userInfo);
return userInfo;
}
diff --git a/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue b/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue
index acfd1fd78..0f375895e 100644
--- a/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue
+++ b/apps/vben5/apps/web-naive/src/views/_core/authentication/code-login.vue
@@ -55,8 +55,7 @@ const formSchema = computed((): VbenFormSchema[] => {
* @param values 登录表单数据
*/
async function handleLogin(values: Recordable) {
- // eslint-disable-next-line no-console
- console.log(values);
+ void values;
}
@@ -64,6 +63,5 @@ async function handleLogin(values: Recordable) {
diff --git a/apps/vben5/apps/web-naive/src/views/_core/authentication/forget-password.vue b/apps/vben5/apps/web-naive/src/views/_core/authentication/forget-password.vue
index fef0d4279..5da4c098e 100644
--- a/apps/vben5/apps/web-naive/src/views/_core/authentication/forget-password.vue
+++ b/apps/vben5/apps/web-naive/src/views/_core/authentication/forget-password.vue
@@ -29,8 +29,7 @@ const formSchema = computed((): VbenFormSchema[] => {
});
function handleSubmit(value: Recordable) {
- // eslint-disable-next-line no-console
- console.log('reset email:', value);
+ void value;
}
@@ -38,6 +37,5 @@ function handleSubmit(value: Recordable) {
) {
- // eslint-disable-next-line no-console
- console.log('register submit:', value);
+ void value;
}
@@ -91,6 +90,5 @@ function handleSubmit(value: Recordable) {
+
+
+
diff --git a/apps/vben5/apps/web-naive/src/views/_core/profile/notification-setting.vue b/apps/vben5/apps/web-naive/src/views/_core/profile/notification-setting.vue
new file mode 100644
index 000000000..324a4b393
--- /dev/null
+++ b/apps/vben5/apps/web-naive/src/views/_core/profile/notification-setting.vue
@@ -0,0 +1,31 @@
+
+
+
+ ">
diff --git a/apps/vben5/packages/@abp/platform/src/components/messages/email/EmailMessageTable.vue b/apps/vben5/packages/@abp/platform/src/components/messages/email/EmailMessageTable.vue
index ca9b8f00d..4da7a0f82 100644
--- a/apps/vben5/packages/@abp/platform/src/components/messages/email/EmailMessageTable.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/messages/email/EmailMessageTable.vue
@@ -304,8 +304,7 @@ async function onMenuClick(row: EmailMessageDto, info: MenuInfo) {
:icon="h(EditOutlined)"
block
type="link"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
@@ -323,8 +321,7 @@ async function onMenuClick(row: EmailMessageDto, info: MenuInfo) {
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
index 148600e13..d7ca57b4a 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/layout-tabbar.vue
@@ -23,8 +23,7 @@ const style = computed((): CSSProperties => {
+ class="flex w-full border-b border-border bg-background transition-all">
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
index fa4abe95a..63bb42c56 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
@@ -10,9 +10,8 @@ function handleCollapsed() {
(), {
const emit = defineEmits<{
sideMouseLeave: [];
toggleSidebar: [];
- 'update:sidebar-width': [value: number];
+ 'update:sidebarWidth': [value: number];
}>();
const sidebarDraggable = defineModel('sidebarDraggable', {
default: true,
@@ -275,7 +275,7 @@ const mainStyle = computed(() => {
// 计算 tabbar 的样式
const tabbarStyle = computed((): CSSProperties => {
- let width = '';
+ let width: string;
let marginLeft = 0;
// 如果不是混合导航，tabbar 的宽度为 100%
@@ -368,6 +368,17 @@ const maskStyle = computed((): CSSProperties => {
return { zIndex: props.zIndex };
});
+/**
+ * 侧边栏 Logo 区域是否显示
+ */
+const sidebarHeaderHeight = computed(() => {
+ if (isMixedNav.value || !props.sidebarLogoVisible) {
+ return 0;
+ }
+
+ return props.headerHeight;
+});
+
const showHeaderToggleButton = computed(() => {
return (
props.isMobile ||
@@ -510,7 +521,10 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
:dom-visible="!isMobile"
:extra-width="sidebarExtraWidth"
:fixed-extra="sidebarExpandOnHover"
- :header-height="isMixedNav ? 0 : headerHeight"
+ :header-height="sidebarHeaderHeight"
+ :extra-title-height="
+ isSidebarMixedNav || isHeaderMixedNav ? sidebarExtraTitleHeight : 0
+ "
:is-sidebar-mixed="isSidebarMixedNav || isHeaderMixedNav"
:margin-top="sidebarMarginTop"
:mixed-width="sidebarMixedWidth"
@@ -520,9 +534,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
:width="getSidebarWidth"
:z-index="sidebarZIndex"
@leave="() => emit('sideMouseLeave')"
- @update:width="(val) => emit('update:sidebar-width', val)"
- >
-
+ @update:width="(val) => emit('update:sidebarWidth', val)">
+
- 一些演示的内容
-
+ 一些演示的内容
-
+
-
+
diff --git a/apps/vben5/apps/web-naive/src/views/dashboard/workspace/index.vue b/apps/vben5/apps/web-naive/src/views/dashboard/workspace/index.vue
index b95d61381..f189349ec 100644
--- a/apps/vben5/apps/web-naive/src/views/dashboard/workspace/index.vue
+++ b/apps/vben5/apps/web-naive/src/views/dashboard/workspace/index.vue
@@ -236,8 +236,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+ :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar">
早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
@@ -254,8 +253,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
:items="quickNavItems"
class="mt-5 lg:mt-0"
title="快捷导航"
- @click="navTo"
- />
+ @click="navTo" />
-
+ title="表单演示">
+
设置表单值
+
+ 打开弹窗
+
+
diff --git a/apps/vben5/apps/web-naive/src/views/demos/form/modal.vue b/apps/vben5/apps/web-naive/src/views/demos/form/modal.vue
new file mode 100644
index 000000000..52e23542d
--- /dev/null
+++ b/apps/vben5/apps/web-naive/src/views/demos/form/modal.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
diff --git a/apps/vben5/apps/web-naive/src/views/demos/naive/array-form/index.vue b/apps/vben5/apps/web-naive/src/views/demos/naive/array-form/index.vue
new file mode 100644
index 000000000..05b5fd5e7
--- /dev/null
+++ b/apps/vben5/apps/web-naive/src/views/demos/naive/array-form/index.vue
@@ -0,0 +1,122 @@
+
+
+
+
+
+
+ 设置表单值
+ 获取表单值
+
+ 提交校验
+
+
+
+
+
+
diff --git a/apps/vben5/apps/web-naive/src/views/demos/table/index.vue b/apps/vben5/apps/web-naive/src/views/demos/table/index.vue
index ddc958bc3..59a0d5837 100644
--- a/apps/vben5/apps/web-naive/src/views/demos/table/index.vue
+++ b/apps/vben5/apps/web-naive/src/views/demos/table/index.vue
@@ -29,8 +29,7 @@ const data = [
+ title="NDataTable">
diff --git a/apps/vben5/apps/web-naive/tailwind.config.mjs b/apps/vben5/apps/web-naive/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/apps/web-naive/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/apps/web-naive/tsconfig.json b/apps/vben5/apps/web-naive/tsconfig.json
index 02c287fe6..858a0ec08 100644
--- a/apps/vben5/apps/web-naive/tsconfig.json
+++ b/apps/vben5/apps/web-naive/tsconfig.json
@@ -2,7 +2,6 @@
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/web-app.json",
"compilerOptions": {
- "baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
}
diff --git a/apps/vben5/apps/web-naive/tsconfig.node.json b/apps/vben5/apps/web-naive/tsconfig.node.json
index c2f0d86cc..36e9fb5fb 100644
--- a/apps/vben5/apps/web-naive/tsconfig.node.json
+++ b/apps/vben5/apps/web-naive/tsconfig.node.json
@@ -6,5 +6,5 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"noEmit": false
},
- "include": ["vite.config.mts"]
+ "include": ["vite.config.ts"]
}
diff --git a/apps/vben5/apps/web-naive/vite.config.mts b/apps/vben5/apps/web-naive/vite.config.ts
similarity index 100%
rename from apps/vben5/apps/web-naive/vite.config.mts
rename to apps/vben5/apps/web-naive/vite.config.ts
diff --git a/apps/vben5/apps/web-tdesign/index.html b/apps/vben5/apps/web-tdesign/index.html
index 480eb84de..5199ae0f7 100644
--- a/apps/vben5/apps/web-tdesign/index.html
+++ b/apps/vben5/apps/web-tdesign/index.html
@@ -9,10 +9,9 @@
+ content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
- <%= VITE_APP_TITLE %>
+ %VITE_APP_TITLE%
@@ -64,6 +63,5 @@ async function handleLogin(values: Recordable) {
) {
- // eslint-disable-next-line no-console
- console.log('reset email:', value);
+ void value;
}
@@ -38,6 +37,5 @@ function handleSubmit(value: Recordable) {
) {
- // eslint-disable-next-line no-console
- console.log('register submit:', value);
+ void value;
}
@@ -91,6 +90,5 @@ async function handleSubmit(value: Recordable) {
+ :title="$t('AbpPermissionManagement.AllPermissions')">
+ @select="onSelectNode">
{{
@@ -376,8 +373,7 @@ async function onDeleteGrand(grantedInfo: PermissionProvider) {
:options="permissionProviders"
:field-names="{ label: 'name', value: 'value' }"
v-model:value="providerName"
- @change="onProviderChange"
- />
+ @change="onProviderChange" />
@@ -390,8 +386,7 @@ async function onDeleteGrand(grantedInfo: PermissionProvider) {
permissionInfo!.displayName ?? permissionInfo!.name,
])
"
- @confirm="onDeleteGrand(row)"
- >
+ @confirm="onDeleteGrand(row)">
diff --git a/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue b/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue
index 30f95862e..a91c48237 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionModal.vue
@@ -237,7 +237,9 @@ function checkChildrenGrant(current: PermissionTree, isGranted: boolean) {
if (!isGranted) {
const childKeys: string[] = [];
children.forEach((node) => {
- !isGranted && (node.isGranted = false);
+ if (!isGranted) {
+ node.isGranted = false;
+ }
childKeys.push(node.name);
});
checkedNodeKeys.value = checkedNodeKeys.value.filter(
@@ -272,7 +274,9 @@ function getChildren(permissions: PermissionTree[]): PermissionTree[] {
const children: PermissionTree[] = [];
permissions.forEach((permission) => {
children.push(permission);
- permission.children && children.push(...getChildren(permission.children));
+ if (permission.children) {
+ children.push(...getChildren(permission.children));
+ }
});
return children;
}
@@ -293,8 +297,7 @@ function onSearchPermissionGrant() {
+ v-bind="getPermissionState">
{{ $t('AbpPermissionManagement.SelectAllInAllTabs') }}
diff --git a/apps/vben5/packages/@abp/permissions/src/types/definitions.ts b/apps/vben5/packages/@abp/permissions/src/types/definitions.ts
index 699929135..c1274f9df 100644
--- a/apps/vben5/packages/@abp/permissions/src/types/definitions.ts
+++ b/apps/vben5/packages/@abp/permissions/src/types/definitions.ts
@@ -13,8 +13,7 @@ interface PermissionDefinitionCreateOrUpdateDto extends IHasExtraProperties {
stateCheckers: string;
}
-interface PermissionDefinitionCreateDto
- extends PermissionDefinitionCreateOrUpdateDto {
+interface PermissionDefinitionCreateDto extends PermissionDefinitionCreateOrUpdateDto {
groupName: string;
name: string;
}
diff --git a/apps/vben5/packages/@abp/permissions/src/types/groups.ts b/apps/vben5/packages/@abp/permissions/src/types/groups.ts
index ed1c5245e..a050ad4eb 100644
--- a/apps/vben5/packages/@abp/permissions/src/types/groups.ts
+++ b/apps/vben5/packages/@abp/permissions/src/types/groups.ts
@@ -1,11 +1,9 @@
import type { IHasExtraProperties } from '@abp/core';
-interface PermissionGroupDefinitionCreateOrUpdateDto
- extends IHasExtraProperties {
+interface PermissionGroupDefinitionCreateOrUpdateDto extends IHasExtraProperties {
displayName: string;
}
-interface PermissionGroupDefinitionCreateDto
- extends PermissionGroupDefinitionCreateOrUpdateDto {
+interface PermissionGroupDefinitionCreateDto extends PermissionGroupDefinitionCreateOrUpdateDto {
name: string;
}
interface PermissionGroupDefinitionDto extends IHasExtraProperties {
diff --git a/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemDrawer.vue b/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemDrawer.vue
index 6c6449a1b..9f47f7eca 100644
--- a/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemDrawer.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemDrawer.vue
@@ -238,8 +238,7 @@ function onDelete(row: DataItemDto) {
:icon="h(EditOutlined)"
block
type="link"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
diff --git a/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemModal.vue b/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemModal.vue
index 2c7eeb55c..98142e87c 100644
--- a/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemModal.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryItemModal.vue
@@ -234,7 +234,7 @@ function mapToDefaultValue(valueType: ValueType, defaultValue?: any) {
return (defaultValue as string[]).join(',');
}
case ValueType.Boolean: {
- return (defaultValue as Boolean).toString();
+ return (defaultValue as boolean).toString();
}
case ValueType.Date: {
return formatToDate(defaultValue);
@@ -243,7 +243,7 @@ function mapToDefaultValue(valueType: ValueType, defaultValue?: any) {
return formatToDateTime(defaultValue);
}
case ValueType.Numeic: {
- return (defaultValue as Number).toString();
+ return (defaultValue as number).toString();
}
}
return defaultValue;
diff --git a/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryTable.vue b/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryTable.vue
index 0c0c29414..a516dc703 100644
--- a/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryTable.vue
+++ b/apps/vben5/packages/@abp/platform/src/components/data-dictionaries/DataDictionaryTable.vue
@@ -244,8 +244,7 @@ onMounted(onGet);
v-if="isGranted([DataDictionaryPermissions.Create])"
:icon="h(PlusOutlined)"
type="primary"
- @click="onCreate"
- >
+ @click="onCreate">
{{ $t('AppPlatform.Data:AddNew') }}
@@ -267,8 +266,7 @@ onMounted(onGet);
:icon="h(EditOutlined)"
block
type="link"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
-
+
-
+
diff --git a/apps/vben5/apps/web-tdesign/src/views/dashboard/workspace/index.vue b/apps/vben5/apps/web-tdesign/src/views/dashboard/workspace/index.vue
index b95d61381..f189349ec 100644
--- a/apps/vben5/apps/web-tdesign/src/views/dashboard/workspace/index.vue
+++ b/apps/vben5/apps/web-tdesign/src/views/dashboard/workspace/index.vue
@@ -236,8 +236,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+ :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar">
早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
@@ -254,8 +253,7 @@ function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
:items="quickNavItems"
class="mt-5 lg:mt-0"
title="快捷导航"
- @click="navTo"
- />
+ @click="navTo" />
-
+ title="TDesign Vue组件使用演示">
+
@@ -46,7 +45,7 @@ function notify(type: NotificationType) {
-
+
@@ -55,7 +54,7 @@ function notify(type: NotificationType) {
-
+
diff --git a/apps/vben5/apps/web-tdesign/tailwind.config.mjs b/apps/vben5/apps/web-tdesign/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/apps/web-tdesign/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/apps/web-tdesign/tsconfig.json b/apps/vben5/apps/web-tdesign/tsconfig.json
index 02c287fe6..858a0ec08 100644
--- a/apps/vben5/apps/web-tdesign/tsconfig.json
+++ b/apps/vben5/apps/web-tdesign/tsconfig.json
@@ -2,7 +2,6 @@
"$schema": "https://json.schemastore.org/tsconfig",
"extends": "@vben/tsconfig/web-app.json",
"compilerOptions": {
- "baseUrl": ".",
"paths": {
"#/*": ["./src/*"]
}
diff --git a/apps/vben5/apps/web-tdesign/tsconfig.node.json b/apps/vben5/apps/web-tdesign/tsconfig.node.json
index c2f0d86cc..36e9fb5fb 100644
--- a/apps/vben5/apps/web-tdesign/tsconfig.node.json
+++ b/apps/vben5/apps/web-tdesign/tsconfig.node.json
@@ -6,5 +6,5 @@
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"noEmit": false
},
- "include": ["vite.config.mts"]
+ "include": ["vite.config.ts"]
}
diff --git a/apps/vben5/apps/web-tdesign/vite.config.mts b/apps/vben5/apps/web-tdesign/vite.config.ts
similarity index 100%
rename from apps/vben5/apps/web-tdesign/vite.config.mts
rename to apps/vben5/apps/web-tdesign/vite.config.ts
diff --git a/apps/vben5/cspell.json b/apps/vben5/cspell.json
index 0c05c512d..982392e14 100644
--- a/apps/vben5/cspell.json
+++ b/apps/vben5/cspell.json
@@ -12,10 +12,13 @@
"axios",
"brotli",
"cascader",
+ "chatcmpl",
"clsx",
+ "dedup",
"defu",
"demi",
"dotenv",
+ "echart",
"echarts",
"ependencies",
"esbuild",
@@ -24,6 +27,7 @@
"execa",
"iconify",
"iconoir",
+ "indexeddb",
"intlify",
"isequal",
"jspm",
@@ -33,6 +37,7 @@
"minw",
"mkdist",
"mockjs",
+ "myapp",
"naiveui",
"napi",
"nocheck",
@@ -41,6 +46,9 @@
"noreferrer",
"nprogress",
"nuxt",
+ "organisation",
+ "oxfmt",
+ "oxlint",
"pinia",
"prefixs",
"publint",
@@ -51,8 +59,12 @@
"sonner",
"sortablejs",
"styl",
+ "tabler",
"taze",
"tdesign",
+ "tsdown",
+ "tsgolint",
+ "turborepo",
"ui-kit",
"uicons",
"unplugin",
diff --git a/apps/vben5/docs/.vitepress/build/dayjs-loader.mjs b/apps/vben5/docs/.vitepress/build/dayjs-loader.mjs
new file mode 100644
index 000000000..623c394ff
--- /dev/null
+++ b/apps/vben5/docs/.vitepress/build/dayjs-loader.mjs
@@ -0,0 +1,2 @@
+import { register } from 'node:module';
+register('./dayjs-resolve-hook.mjs', import.meta.url);
diff --git a/apps/vben5/docs/.vitepress/build/dayjs-resolve-hook.mjs b/apps/vben5/docs/.vitepress/build/dayjs-resolve-hook.mjs
new file mode 100644
index 000000000..f8989044a
--- /dev/null
+++ b/apps/vben5/docs/.vitepress/build/dayjs-resolve-hook.mjs
@@ -0,0 +1,10 @@
+const DAYJS_SUBPATH_RE = /^dayjs\/(plugin|locale)\/([^./]+)$/;
+
+/** @type {import('node:module').ResolveHook} */
+export async function resolve(specifier, context, nextResolve) {
+ const match = specifier.match(DAYJS_SUBPATH_RE);
+ if (match) {
+ return nextResolve(`${specifier}.js`, context);
+ }
+ return nextResolve(specifier, context);
+}
diff --git a/apps/vben5/docs/.vitepress/components/demo-preview.vue b/apps/vben5/docs/.vitepress/components/demo-preview.vue
index 983a95062..b5b0c7ab6 100644
--- a/apps/vben5/docs/.vitepress/components/demo-preview.vue
+++ b/apps/vben5/docs/.vitepress/components/demo-preview.vue
@@ -21,13 +21,12 @@ const parsedFiles = computed(() => {
();
const emits = defineEmits<{
- (event: 'change', data: DisplayNameInfo): void;
- (event: 'delete', data: DisplayNameInfo): void;
+ (event: 'change' | 'delete', data: DisplayNameInfo): void;
}>();
const getDataResource = computed((): DisplayNameInfo[] => {
@@ -77,8 +76,7 @@ function onChange(prop: DisplayNameInfo) {
+ :toolbar-config="{ slots: { tools: 'toolbar_tools' } }">
diff --git a/apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue b/apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue
index 26a2f0734..36e92e1c7 100644
--- a/apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue
+++ b/apps/vben5/packages/@abp/oss/src/components/objects/ObjectPage.vue
@@ -22,8 +22,7 @@ function onFolderChange(val: string) {
();
- name && (await onGet(name));
+ if (name) {
+ await onGet(name);
+ }
} finally {
modalApi.setState({ loading: false });
}
@@ -96,6 +98,7 @@ function onPropChange(prop: PropertyInfo) {
}
function onPropDelete(prop: PropertyInfo) {
formModel.value.extraProperties ??= {};
+ // oxlint-disable-next-line typescript/no-dynamic-delete
delete formModel.value.extraProperties[prop.key];
}
@@ -106,31 +109,26 @@ function onPropDelete(prop: PropertyInfo) {
ref="form"
:label-col="{ span: 6 }"
:model="formModel"
- :wrapper-col="{ span: 18 }"
- >
+ :wrapper-col="{ span: 18 }">
+ required>
+ autocomplete="off" />
+ required>
@@ -139,8 +137,7 @@ function onPropDelete(prop: PropertyInfo) {
:data="formModel.extraProperties"
:disabled="formModel.isStatic"
@change="onPropChange"
- @delete="onPropDelete"
- />
+ @delete="onPropDelete" />
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
index c3a1690b1..e73fa54ac 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/groups/PermissionGroupDefinitionTable.vue
@@ -214,8 +214,7 @@ onMounted(onGet);
:icon="h(PlusOutlined)"
type="primary"
v-access:code="[GroupDefinitionsPermissions.Create]"
- @click="onCreate"
- >
+ @click="onCreate">
{{ $t('AbpPermissionManagement.GroupDefinitions:AddNew') }}
@@ -227,8 +226,7 @@ onMounted(onGet);
block
type="link"
v-access:code="[GroupDefinitionsPermissions.Update]"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
@@ -240,8 +238,7 @@ onMounted(onGet);
danger
type="link"
v-access:code="[GroupDefinitionsPermissions.Delete]"
- @click="onDelete(row)"
- >
+ @click="onDelete(row)">
{{ $t('AbpUi.Delete') }}
@@ -256,8 +253,7 @@ onMounted(onGet);
])
"
key="permissions"
- :icon="h(PermissionsOutlined)"
- >
+ :icon="h(PermissionsOutlined)">
{{
$t('AbpPermissionManagement.PermissionDefinitions:AddNew')
}}
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
index ce8793210..794e6baf0 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionModal.vue
@@ -122,7 +122,9 @@ const [Modal, modalApi] = useVbenModal({
try {
modalApi.setState({ loading: true });
const { groupName, name } = modalApi.getData();
- name && (await onGet(name));
+ if (name) {
+ await onGet(name);
+ }
await Promise.all([onInitGroups(groupName), onInitProviders()]);
} finally {
modalApi.setState({ loading: false });
@@ -184,6 +186,7 @@ function onPropChange(prop: PropertyInfo) {
}
function onPropDelete(prop: PropertyInfo) {
formModel.value.extraProperties ??= {};
+ // oxlint-disable-next-line typescript/no-dynamic-delete
delete formModel.value.extraProperties[prop.key];
}
@@ -194,27 +197,23 @@ function onPropDelete(prop: PropertyInfo) {
ref="form"
:label-col="{ span: 6 }"
:model="formModel"
- :wrapper-col="{ span: 18 }"
- >
+ :wrapper-col="{ span: 18 }">
+ name="isEnabled">
+ :disabled="formModel.isStatic">
{{ $t('AbpPermissionManagement.DisplayName:IsEnabled') }}
+ required>
+ @change="(e) => onGroupChange(e?.toString())" />
+ name="parentName">
+ required>
+ autocomplete="off" />
+ required>
+ name="multiTenancySide">
+ :options="multiTenancySideOptions" />
+ name="providers">
+ mode="multiple" />
+ :tab="$t('AbpPermissionManagement.StateCheckers')">
+ :wrapper-col="{ span: 24 }">
@@ -316,8 +301,7 @@ function onPropDelete(prop: PropertyInfo) {
:data="formModel.extraProperties"
:disabled="formModel.isStatic"
@change="onPropChange"
- @delete="onPropDelete"
- />
+ @delete="onPropDelete" />
diff --git a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
index 8b4316a37..57e8c0c40 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/definitions/permissions/PermissionDefinitionTable.vue
@@ -288,8 +288,7 @@ onMounted(onGet);
:icon="h(PlusOutlined)"
type="primary"
v-access:code="[GroupDefinitionsPermissions.Create]"
- @click="onCreate"
- >
+ @click="onCreate">
{{ $t('AbpPermissionManagement.PermissionDefinitions:AddNew') }}
@@ -301,8 +300,7 @@ onMounted(onGet);
trigger: 'row',
rowField: 'name',
childrenField: 'children',
- }"
- >
+ }">
{{ multiTenancySidesMap[permission.multiTenancySide] }}
@@ -322,8 +320,7 @@ onMounted(onGet);
block
type="link"
v-access:code="[GroupDefinitionsPermissions.Update]"
- @click="onUpdate(permission)"
- >
+ @click="onUpdate(permission)">
{{ $t('AbpUi.Edit') }}
diff --git a/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionGrantedModal.vue b/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionGrantedModal.vue
index f5defeb2a..e66444179 100644
--- a/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionGrantedModal.vue
+++ b/apps/vben5/packages/@abp/permissions/src/components/permissions/PermissionGrantedModal.vue
@@ -317,14 +317,12 @@ async function onDeleteGrand(grantedInfo: PermissionProvider) {
+ class="not-prose relative w-full overflow-x-auto rounded-t-lg px-4 py-6">
@@ -293,8 +290,7 @@ const onMenuClick = (row: OpenIddictApplicationDto, info: MenuInfo) => {
hasAccessByCodes([ApplicationsPermissions.ManageSecret])
"
key="secret"
- :icon="h(SecretIcon)"
- >
+ :icon="h(SecretIcon)">
{{ $t('AbpOpenIddict.GenerateSecret') }}
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue
index 987bea8cd..4d610f39f 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationModal.vue
@@ -144,8 +144,7 @@ async function onGet(id: string) {
v-for="scope in modelValue"
:key="scope"
:title="scope"
- :value="scope"
- />
+ :value="scope" />
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue
index fb2364db5..ce4792485 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/authorizations/AuthorizationTable.vue
@@ -243,8 +243,7 @@ onMounted(onSearchClient);
class="w-full"
show-search
@change="onChangeClient"
- @search="onSearchClient"
- />
+ @search="onSearchClient" />
diff --git a/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue b/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue
index 2ac62bac1..1d7098c9c 100644
--- a/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue
+++ b/apps/vben5/packages/@abp/openiddict/src/components/display-names/DisplayNameTable.vue
@@ -18,8 +18,7 @@ defineOptions({
const props = defineProps
-
+
ERROR:
The preview directory does not exist. Please check the 'dir'
diff --git a/apps/vben5/docs/.vitepress/components/preview-group.vue b/apps/vben5/docs/.vitepress/components/preview-group.vue
index e08e921aa..f22381d1c 100644
--- a/apps/vben5/docs/.vitepress/components/preview-group.vue
+++ b/apps/vben5/docs/.vitepress/components/preview-group.vue
@@ -5,7 +5,7 @@ import { computed, ref, useSlots } from 'vue';
import { VbenTooltip } from '@vben-core/shadcn-ui';
-import { Code } from 'lucide-vue-next';
+import { Code } from '@lucide/vue';
import {
TabsContent,
TabsIndicator,
@@ -49,24 +49,21 @@ const toggleOpen = () => {
+ @update:model-value="open = true">
-
+ class="absolute bottom-0 left-0 h-[2px] w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) rounded-full transition-[width,transform] duration-300">
+
+ class="border-box px-4 py-3 text-foreground data-[state=active]:text-(--vp-c-indigo-1)"
+ tabindex="-1">
{{ tab.label }}
@@ -76,14 +73,12 @@ const toggleOpen = () => {
:class="{
'py-2': !open,
}"
- class="flex items-center"
- >
+ class="flex items-center">
@@ -92,15 +87,13 @@ const toggleOpen = () => {
Open
- modal content
+ modal content
diff --git a/apps/vben5/docs/src/demos/vben-table-action/basic/index.vue b/apps/vben5/docs/src/demos/vben-table-action/basic/index.vue
new file mode 100644
index 000000000..b88cd4a19
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-table-action/basic/index.vue
@@ -0,0 +1,28 @@
+
+
+ ();
- name && (await onGet(name));
+ if (name) {
+ await onGet(name);
+ }
} finally {
modalApi.setState({ loading: false });
}
@@ -97,6 +99,7 @@ function onPropChange(prop: PropertyInfo) {
}
function onPropDelete(prop: PropertyInfo) {
formModel.value.extraProperties ??= {};
+ // oxlint-disable-next-line typescript/no-dynamic-delete
delete formModel.value.extraProperties[prop.key];
}
@@ -107,50 +110,41 @@ function onPropDelete(prop: PropertyInfo) {
ref="form"
:label-col="{ span: 6 }"
:model="formModel"
- :wrapper-col="{ span: 18 }"
- >
+ :wrapper-col="{ span: 18 }">
+ required>
+ autocomplete="off" />
+ required>
+ name="description">
+ :extra="$t('Notifications.Description:AllowSubscriptionToClients')">
+ v-model:checked="formModel.allowSubscriptionToClients">
{{ $t('Notifications.DisplayName:AllowSubscriptionToClients') }}
@@ -161,8 +155,7 @@ function onPropDelete(prop: PropertyInfo) {
:data="formModel.extraProperties"
:disabled="formModel.isStatic"
@change="onPropChange"
- @delete="onPropDelete"
- />
+ @delete="onPropDelete" />
diff --git a/apps/vben5/packages/@abp/notifications/src/components/definitions/groups/NotificationGroupDefinitionTable.vue b/apps/vben5/packages/@abp/notifications/src/components/definitions/groups/NotificationGroupDefinitionTable.vue
index b16553a2e..7246a21df 100644
--- a/apps/vben5/packages/@abp/notifications/src/components/definitions/groups/NotificationGroupDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/notifications/src/components/definitions/groups/NotificationGroupDefinitionTable.vue
@@ -213,8 +213,7 @@ onMounted(onGet);
:icon="h(PlusOutlined)"
type="primary"
v-access:code="[GroupDefinitionsPermissions.Create]"
- @click="onCreate"
- >
+ @click="onCreate">
{{ $t('Notifications.GroupDefinitions:AddNew') }}
@@ -225,8 +224,7 @@ onMounted(onGet);
block
type="link"
v-access:code="[GroupDefinitionsPermissions.Update]"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
@@ -248,8 +245,7 @@ onMounted(onGet);
hasAccessByCodes([NotificationDefinitionsPermissions.Create])
"
key="definitions"
- :icon="h(DefinitionIcon)"
- >
+ :icon="h(DefinitionIcon)">
{{ $t('Notifications.NotificationDefinitions:AddNew') }}
diff --git a/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionModal.vue b/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionModal.vue
index 0f3411654..3a8f8df1e 100644
--- a/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionModal.vue
+++ b/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionModal.vue
@@ -115,7 +115,9 @@ const [Modal, modalApi] = useVbenModal({
const { groupName, name } =
modalApi.getData();
await onInit(groupName);
- name && (await onGet(name));
+ if (name) {
+ await onGet(name);
+ }
} finally {
modalApi.setState({ loading: false });
}
@@ -149,8 +151,8 @@ async function onInit(groupName?: string) {
displayName: Lr(displayName.resourceName, displayName.name),
};
});
- if (getGroupsRes.items.length === 1) {
- formModel.value.groupName = getGroupsRes.items[0]!.name;
+ if (getGroupsRes.items.length === 1 && getGroupsRes.items[0]) {
+ formModel.value.groupName = getGroupsRes.items[0].name;
}
}
function onPropChange(prop: PropertyInfo) {
@@ -159,6 +161,7 @@ function onPropChange(prop: PropertyInfo) {
}
function onPropDelete(prop: PropertyInfo) {
formModel.value.extraProperties ??= {};
+ // oxlint-disable-next-line typescript/no-dynamic-delete
delete formModel.value.extraProperties[prop.key];
}
@@ -169,129 +172,108 @@ function onPropDelete(prop: PropertyInfo) {
ref="form"
:label-col="{ span: 6 }"
:model="formModel"
- :wrapper-col="{ span: 18 }"
- >
+ :wrapper-col="{ span: 18 }">
+ required>
+ :field-names="{ label: 'displayName', value: 'name' }" />
+ required>
+ autocomplete="off" />
+ required>
+ :label="$t('Notifications.DisplayName:Description')">
+ :extra="$t('Notifications.Description:AllowSubscriptionToClients')">
+ v-model:checked="formModel.allowSubscriptionToClients">
{{ $t('Notifications.DisplayName:AllowSubscriptionToClients') }}
+ :extra="$t('Notifications.Description:NotificationType')">
+ :options="notificationTypeOptions" />
+ :extra="$t('Notifications.Description:NotificationLifetime')">
+ :options="notificationLifetimeOptions" />
+ :extra="$t('Notifications.Description:ContentType')">
+ :options="notificationContentTypeOptions" />
+ :extra="$t('Notifications.Description:Providers')">
+ :field-names="{ label: 'name', value: 'name' }" />
+ :extra="$t('Notifications.Description:Template')">
+ :field-names="{ label: 'name', value: 'name' }" />
@@ -300,8 +282,7 @@ function onPropDelete(prop: PropertyInfo) {
:data="formModel.extraProperties"
:disabled="formModel.isStatic"
@change="onPropChange"
- @delete="onPropDelete"
- />
+ @delete="onPropDelete" />
diff --git a/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionTable.vue b/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionTable.vue
index 396ad1bb0..ac0caf624 100644
--- a/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionTable.vue
+++ b/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationDefinitionTable.vue
@@ -365,8 +365,7 @@ onMounted(onGet);
:icon="h(PlusOutlined)"
type="primary"
v-access:code="[NotificationDefinitionsPermissions.Create]"
- @click="onCreate"
- >
+ @click="onCreate">
{{ $t('Notifications.NotificationDefinitions:AddNew') }}
@@ -378,14 +377,12 @@ onMounted(onGet);
trigger: 'row',
rowField: 'name',
childrenField: 'children',
- }"
- >
+ }">
diff --git a/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationSendModal.vue b/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationSendModal.vue
index 601bdb892..d470a2ad7 100644
--- a/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationSendModal.vue
+++ b/apps/vben5/packages/@abp/notifications/src/components/definitions/notifications/NotificationSendModal.vue
@@ -119,8 +119,7 @@ async function onSubmit() {
ref="form"
:label-col="{ span: 6 }"
:model="formModel"
- :wrapper-col="{ span: 18 }"
- >
+ :wrapper-col="{ span: 18 }">
@@ -130,42 +129,36 @@ async function onSubmit() {
v-if="!notification?.template"
name="title"
:label="$t('Notifications.Notifications:Title')"
- required
- >
+ required>
+ required>
+ :label="$t('Notifications.Notifications:Description')">
+ :label="$t('Notifications.Notifications:Severity')">
+ :options="notificationSeverityOptions" />
diff --git a/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationModal.vue b/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationModal.vue
index dc4f42a20..33c32630c 100644
--- a/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationModal.vue
+++ b/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationModal.vue
@@ -23,8 +23,7 @@ const [Modal, modalApi] = useVbenModal({
diff --git a/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationTable.vue b/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationTable.vue
index 4a35f4522..e3f68c0fe 100644
--- a/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationTable.vue
+++ b/apps/vben5/packages/@abp/notifications/src/components/my-notifilers/MyNotificationTable.vue
@@ -211,17 +211,17 @@ const [NotificationModal, modalApi] = useVbenModal({
async function onClickRead(row: Notification) {
modalApi.setData(row);
modalApi.open();
- await _onRead([row.id], NotificationReadState.Read);
+ await onRead([row.id], NotificationReadState.Read);
}
/** 行标记阅读状态 */
async function onRowRead(row: Notification, info: MenuInfo) {
switch (info.key) {
case 'read': {
- return await _onRead([row.id], NotificationReadState.Read);
+ return await onRead([row.id], NotificationReadState.Read);
}
case 'un-read': {
- return await _onRead([row.id], NotificationReadState.UnRead);
+ return await onRead([row.id], NotificationReadState.UnRead);
}
}
}
@@ -230,18 +230,18 @@ async function onRowRead(row: Notification, info: MenuInfo) {
async function onBulkRead(info: MenuInfo) {
switch (info.key) {
case 'read': {
- await _onRead(selectedKeys.value, NotificationReadState.Read);
+ await onRead(selectedKeys.value, NotificationReadState.Read);
break;
}
case 'un-read': {
- await _onRead(selectedKeys.value, NotificationReadState.UnRead);
+ await onRead(selectedKeys.value, NotificationReadState.UnRead);
break;
}
}
selectedKeys.value = [];
}
-async function _onRead(idList: string[], state: NotificationReadState) {
+async function onRead(idList: string[], state: NotificationReadState) {
try {
gridApi.setLoading(true);
await markReadStateApi({
@@ -305,8 +305,7 @@ const onDelete = (row: Notification) => {
@@ -320,8 +319,7 @@ const onDelete = (row: Notification) => {
:icon="h(DeleteOutlined)"
danger
type="link"
- @click="onDelete(row)"
- >
+ @click="onDelete(row)">
{{ $t('AbpUi.Delete') }}
diff --git a/apps/vben5/packages/@abp/notifications/src/components/send-records/NotificationSendRecordTable.vue b/apps/vben5/packages/@abp/notifications/src/components/send-records/NotificationSendRecordTable.vue
index 275f0b0fe..2a472f30d 100644
--- a/apps/vben5/packages/@abp/notifications/src/components/send-records/NotificationSendRecordTable.vue
+++ b/apps/vben5/packages/@abp/notifications/src/components/send-records/NotificationSendRecordTable.vue
@@ -335,8 +335,7 @@ async function onSend(row: NotificationSendRecordDto) {
:icon="h(DeleteOutlined)"
danger
type="link"
- @click="onDelete(row)"
- >
+ @click="onDelete(row)">
{{ $t('AbpUi.Delete') }}
@@ -266,8 +265,7 @@ const onMenuClick = (row: OpenIddictApplicationDto, info: MenuInfo) => {
block
type="link"
v-access:code="[ApplicationsPermissions.Update]"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
@@ -278,8 +276,7 @@ const onMenuClick = (row: OpenIddictApplicationDto, info: MenuInfo) => {
danger
type="link"
v-access:code="[ApplicationsPermissions.Delete]"
- @click="onDelete(row)"
- >
+ @click="onDelete(row)">
{{ $t('AbpUi.Delete') }}
+ class="block overflow-y-scroll bg-(--vp-code-block-bg) transition-all duration-300">
+ class="rounded-xl">
+
-
+
diff --git a/apps/vben5/docs/src/demos/vben-modal/auto-height/modal.vue b/apps/vben5/docs/src/demos/vben-modal/auto-height/modal.vue
index e270df1ae..b3b041164 100644
--- a/apps/vben5/docs/src/demos/vben-modal/auto-height/modal.vue
+++ b/apps/vben5/docs/src/demos/vben-modal/auto-height/modal.vue
@@ -32,8 +32,7 @@ function handleUpdate(len: number) {
+
diff --git a/apps/vben5/docs/package.json b/apps/vben5/docs/package.json
index 0326d87da..674e8ea33 100644
--- a/apps/vben5/docs/package.json
+++ b/apps/vben5/docs/package.json
@@ -1,9 +1,10 @@
{
"name": "@vben/docs",
- "version": "5.6.0",
+ "version": "5.7.0",
"private": true,
+ "type": "module",
"scripts": {
- "build": "vitepress build",
+ "build": "cross-env NODE_OPTIONS=\"--import ./.vitepress/build/dayjs-loader.mjs\" vitepress build",
"dev": "vitepress dev",
"docs:preview": "vitepress preview"
},
@@ -14,19 +15,21 @@
}
},
"dependencies": {
+ "@lucide/vue": "catalog:",
"@vben-core/shadcn-ui": "workspace:*",
"@vben/common-ui": "workspace:*",
"@vben/locales": "workspace:*",
"@vben/plugins": "workspace:*",
"@vben/styles": "workspace:*",
- "ant-design-vue": "catalog:",
- "lucide-vue-next": "catalog:",
+ "antdv-next": "catalog:",
"medium-zoom": "catalog:",
"reka-ui": "catalog:",
"vitepress-plugin-group-icons": "catalog:"
},
"devDependencies": {
"@nolebase/vitepress-plugin-git-changelog": "catalog:",
+ "@tailwindcss/vite": "catalog:",
+ "@vben/tailwind-config": "workspace:*",
"@vben/vite-config": "workspace:*",
"@vite-pwa/vitepress": "catalog:",
"vitepress": "catalog:",
diff --git a/apps/vben5/docs/src/_env/adapter/component.ts b/apps/vben5/docs/src/_env/adapter/component.ts
index ec3d0196c..0fa10f3ff 100644
--- a/apps/vben5/docs/src/_env/adapter/component.ts
+++ b/apps/vben5/docs/src/_env/adapter/component.ts
@@ -26,16 +26,15 @@ import {
notification,
Radio,
RadioGroup,
- RangePicker,
Rate,
Select,
Space,
Switch,
- Textarea,
+ TextArea,
TimePicker,
TreeSelect,
Upload,
-} from 'ant-design-vue';
+} from 'antdv-next';
const withDefaultPlaceholder = (
component: T,
@@ -98,12 +97,12 @@ async function initComponentAdapter() {
},
Radio,
RadioGroup,
- RangePicker,
+ RangePicker: withDefaultPlaceholder(DatePicker.RangePicker, 'select'),
Rate,
Select: withDefaultPlaceholder(Select, 'select'),
Space,
Switch,
- Textarea: withDefaultPlaceholder(Textarea, 'input'),
+ Textarea: withDefaultPlaceholder(TextArea, 'input'),
TimePicker,
TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
Upload,
@@ -118,7 +117,7 @@ async function initComponentAdapter() {
copyPreferencesSuccess: (title, content) => {
notification.success({
description: content,
- message: title,
+ title,
placement: 'bottomRight',
});
},
diff --git a/apps/vben5/docs/src/_env/adapter/form.ts b/apps/vben5/docs/src/_env/adapter/form.ts
index d8b51c254..7ebd4acac 100644
--- a/apps/vben5/docs/src/_env/adapter/form.ts
+++ b/apps/vben5/docs/src/_env/adapter/form.ts
@@ -11,6 +11,7 @@ import { $t } from '@vben/locales';
import { initComponentAdapter } from './component';
initComponentAdapter();
+
setupVbenForm({
config: {
baseModelPropName: 'value',
diff --git a/apps/vben5/docs/src/_env/adapter/vxe-table.ts b/apps/vben5/docs/src/_env/adapter/vxe-table.ts
index 7bc27056e..6d9ed6449 100644
--- a/apps/vben5/docs/src/_env/adapter/vxe-table.ts
+++ b/apps/vben5/docs/src/_env/adapter/vxe-table.ts
@@ -2,7 +2,7 @@ import { h } from 'vue';
import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
-import { Button, Image } from 'ant-design-vue';
+import { Button, Image } from 'antdv-next';
import { useVbenForm } from './form';
diff --git a/apps/vben5/docs/src/components/common-ui/vben-alert.md b/apps/vben5/docs/src/components/common-ui/vben-alert.md
index 6541b665d..eebd1f857 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-alert.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-alert.md
@@ -4,132 +4,90 @@ outline: deep
# Vben Alert 轻量提示框
-框架提供的一些用于轻量提示的弹窗，仅使用js代码即可快速动态创建提示而不需要在template写任何代码。
+`Alert` 提供了一组纯 JavaScript 调用的轻量提示框能力，适合快速创建 `alert`、`confirm`、`prompt` 这类简单交互。
-::: info 应用场景
+::: info 适用场景
-Alert提供的功能与Modal类似，但只适用于简单应用场景。例如临时性、动态地弹出模态确认框、输入框等。如果对弹窗有更复杂的需求，请使用VbenModal
-
-:::
+`Alert` 与 `Modal` 的能力有部分重叠，但更适合临时确认、简单提示和轻量输入场景。复杂弹窗仍然建议使用 `Vben Modal`。:::
::: tip 注意
-Alert提供的快捷方法alert、confirm、prompt动态创建的弹窗在已打开的情况下，不支持HMR（热更新），代码变更后需要关闭这些弹窗后重新打开。
-
-:::
-
-::: tip README
-
-下方示例代码中的，存在一些主题色未适配、样式缺失的问题，这些问题只在文档内会出现，实际使用并不会有这些问题，可忽略，不必纠结。
-
-:::
+通过 `alert`、`confirm`、`prompt` 动态创建的弹窗，在已经打开的情况下不支持 HMR 热更新。修改相关代码后，需要关闭后重新打开。:::
## 基础用法
-使用 `alert` 创建只有一个确认按钮的提示框。
+使用 `alert` 创建只有确认按钮的提示框。
| undefined;
- /** 边框 */
bordered?: boolean;
- /** 按钮对齐方式 */
buttonAlign?: 'center' | 'end' | 'start';
- /** 取消按钮的标题 */
cancelText?: string;
- /** 是否居中显示 */
centered?: boolean;
- /** 确认按钮的标题 */
confirmText?: string;
- /** 弹窗容器的额外样式 */
containerClass?: string;
- /** 弹窗提示内容 */
content: Component | string;
- /** 弹窗内容的额外样式 */
contentClass?: string;
- /** 执行beforeClose回调期间，在内容区域显示一个loading遮罩*/
contentMasking?: boolean;
- /** 弹窗底部内容（与按钮在同一个容器中） */
footer?: Component | string;
- /** 弹窗的图标（在标题的前面） */
icon?: Component | IconType;
- /**
- * 弹窗遮罩模糊效果
- */
overlayBlur?: number;
- /** 是否显示取消按钮 */
showCancel?: boolean;
- /** 弹窗标题 */
title?: string;
};
-/** prompt 属性 */
export type PromptProps = {
- /** 关闭前的回调，如果返回false，则终止关闭 */
beforeClose?: (scope: {
isConfirm: boolean;
value: T | undefined;
}) => boolean | Promise | undefined;
- /** 用于接受用户输入的组件 */
component?: Component;
- /** 输入组件的属性 */
componentProps?: Recordable;
- /** 输入组件的插槽 */
- componentSlots?: Recordable;
- /** 默认值 */
+ componentSlots?:
+ | (() => any)
+ | Recordable
+ | VNode
+ | VNodeArrayChildren;
defaultValue?: T;
- /** 输入组件的值属性名 */
modelPropName?: string;
} & Omit;
-/**
- * 函数签名
- * alert和confirm的函数签名相同。
- * confirm默认会显示取消按钮，而alert默认只有一个按钮
- * */
export function alert(options: AlertProps): Promise;
export function alert(
message: string,
@@ -141,19 +99,10 @@ export function alert(
options?: Partial,
): Promise;
-/**
- * 弹出输入框的函数签名。
- * beforeClose的参数会传入用户当前输入的值
- * component指定接受用户输入的组件，默认为Input
- * componentProps 为输入组件设置的属性数据
- * defaultValue 默认的值
- * modelPropName 输入组件的值属性名称。默认为modelValue
- */
export async function prompt(
options: Omit & {
beforeClose?: (
scope: BeforeCloseScope & {
- /** 输入组件的当前值 */
value: T;
},
) => boolean | Promise | undefined;
diff --git a/apps/vben5/docs/src/components/common-ui/vben-api-component.md b/apps/vben5/docs/src/components/common-ui/vben-api-component.md
index 2c84e56b5..d7ef529a4 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-api-component.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-api-component.md
@@ -14,7 +14,7 @@ outline: deep
## 基础用法
-通过 `component` 传入其它组件的定义，并配置相关的其它属性（主要是一些名称映射）。包装组件将通过`api`获取数据（`beforerFetch`、`afterFetch`将分别在`api`运行前、运行后被调用），使用`resultField`从中提取数组，使用`valueField`、`labelField`等来从数据中提取value和label（如果提供了`childrenField`，会将其作为树形结构递归处理每一级数据），之后将处理好的数据通过`optionsPropName`指定的属性传递给目标组件。
+通过 `component` 传入其它组件的定义，并配置相关的其它属性（主要是一些名称映射）。包装组件将通过 `api` 获取数据（`beforeFetch`、`afterFetch` 将分别在 `api` 运行前、运行后被调用），使用 `resultField` 从中提取数组，使用 `valueField`、`labelField` 等来从数据中提取 value 和 label（如果提供了 `childrenField`，会将其作为树形结构递归处理每一级数据），之后将处理好的数据通过 `optionsPropName` 指定的属性传递给目标组件。
::: details 包装级联选择器,点击下拉时开始加载远程数据
@@ -22,7 +22,7 @@ outline: deep
+```
+
+#### getCropImage
+
+裁剪并获取图片。
+
+```ts
+interface GetCropImageOptions {
+ /** 输出图片格式 */
+ format?: 'image/jpeg' | 'image/png';
+ /** 压缩质量（0-1），仅对 jpeg 格式有效 */
+ quality?: number;
+ /** 输出类型 */
+ outputType?: 'base64' | 'blob';
+ /** 目标宽度（可选，不传则为原始裁剪宽度） */
+ targetWidth?: number;
+ /** 目标高度（可选，不传则为原始裁剪高度） */
+ targetHeight?: number;
+}
+
+getCropImage(
+ format?: 'image/jpeg' | 'image/png',
+ quality?: number,
+ outputType?: 'base64' | 'blob',
+ targetWidth?: number,
+ targetHeight?: number,
+): Promise
+```
+
+**参数说明：**
+
+| 参数 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `format` | `'image/jpeg' \| 'image/png'` | `'image/png'` | 输出图片格式 |
+| `quality` | `number` | `0.92` | 压缩质量（0-1），仅 jpeg 有效 |
+| `outputType` | `'base64' \| 'blob'` | `'blob'` | 输出类型，base64 字符串或 Blob 对象 |
+| `targetWidth` | `number` | - | 目标宽度，不传则使用原始裁剪宽度 |
+| `targetHeight` | `number` | - | 目标高度，不传则使用原始裁剪高度 |
+
+## 功能特性
+
+### 裁剪操作
+
+- **拖拽移动** - 拖拽裁剪框中心区域移动裁剪位置
+- **边角调整** - 拖拽四角调整裁剪框大小
+- **边缘调整** - 拖拽四边中点调整单边
+
+### 比例控制
+
+- **自由比例** - 不设置 `aspectRatio` 时，可自由调整任意比例
+- **固定比例** - 设置 `aspectRatio` 后，裁剪框始终保持设定比例
+
+### 高清屏适配
+
+组件自动适配 Retina 等高清屏幕，保证输出图片清晰无模糊。
+
+### 图片适配
+
+- 图片自动等比缩放以完整显示在容器内
+- 支持本地图片和网络图片
+- 网络图片需目标服务端支持 CORS 才能导出裁剪结果
+
+## 使用示例
+
+```vue
+
+
+
+ >` | `{ xs: 1, sm: 2, md: 3, xxxl: 4 }` |
+| layout | 布局方式 | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| size | 尺寸 | `'small' \| 'middle' \| 'large'` | `'middle'` |
+| colon | 是否显示冒号（仅非边框的水平布局生效） | `boolean` | `true` |
+| title | 标题 | `string` | - |
+| extra | 标题右侧的操作区域 | `string` | - |
+| labelStyle | 统一的标签样式 | `CSSProperties` | - |
+| contentStyle | 统一的内容样式 | `CSSProperties` | - |
+| class | 根节点自定义类名 | `string` | - |
+
+### Descriptions Slots
+
+| 插槽名 | 描述 |
+| ------- | ---------------------------------- |
+| title | 自定义标题 |
+| extra | 自定义标题右侧操作区域 |
+| default | 放置 `VbenDescriptionsItem` 子组件 |
+
+### DescriptionsItem
+
+`items` 数组中的每一项，或子组件 `VbenDescriptionsItem` 的属性。
+
+| 属性名 | 描述 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| label | 标签 | `string \| number \| (() => VNode) \| Component` | - |
+| content | 内容 | `string \| number \| (() => VNode) \| Component` | - |
+| span | 跨列数，`'filled'` 占满当前行剩余 | `number \| 'filled' \| Partial>` | `1` |
+| labelStyle | 标签样式 | `CSSProperties` | - |
+| contentStyle | 内容样式 | `CSSProperties` | - |
+| key | 唯一标识 | `string \| number` | - |
+
+### DescriptionsItem Slots
+
+仅子组件用法可用。
+
+| 插槽名 | 描述 |
+| ------- | ------------------------ |
+| default | 内容（等价于 `content`） |
+| content | 自定义内容 |
+| label | 自定义标签 |
+
+::: tip Breakpoint
+
+响应式断点 `Breakpoint` 取值为 `'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl'`，断点像素与 Ant Design 一致（`sm` 576、`md` 768、`lg` 992、`xl` 1200、`xxl` 1600、`xxxl` 2000）。:::
diff --git a/apps/vben5/docs/src/components/common-ui/vben-drawer.md b/apps/vben5/docs/src/components/common-ui/vben-drawer.md
index 3a28cce79..8214b8554 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-drawer.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-drawer.md
@@ -55,7 +55,7 @@ Drawer 内的内容一般业务中，会比较复杂，所以我们可以将 dra
- `VbenDrawer` 组件对于参数的处理优先级是 `slot` > `props` > `state`(通过api更新的状态以及useVbenDrawer参数)。如果你已经传入了 `slot` 或者 `props`，那么 `setState` 将不会生效，这种情况下你可以通过 `slot` 或者 `props` 来更新状态。
- 如果你使用到了 `connectedComponent` 参数，那么会存在 2 个`useVbenDrawer`, 此时，如果同时设置了相同的参数，那么以内部为准（也就是没有设置 connectedComponent 的代码）。比如 同时设置了 `onConfirm`，那么以内部的 `onConfirm` 为准。`onOpenChange`事件除外，内外都会触发。
- 使用了`connectedComponent`参数时，可以配置`destroyOnClose`属性来决定当关闭弹窗时，是否要销毁`connectedComponent`组件（重新创建`connectedComponent`组件，这将会把其内部所有的变量、状态、数据等恢复到初始状态。）。
-- 如果抽屉的默认行为不符合你的预期，可以在`src\bootstrap.ts`中修改`setDefaultDrawerProps`的参数来设置默认的属性，如默认隐藏全屏按钮，修改默认ZIndex等。
+- 如果抽屉的默认行为不符合你的预期，可以在对应应用的 `apps//src/bootstrap.ts` 中修改 `setDefaultDrawerProps` 的参数来设置默认属性，例如修改默认 `zIndex` 等。
:::
@@ -116,7 +116,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
| 事件名 | 描述 | 类型 | 版本限制 |
| --- | --- | --- | --- |
-| onBeforeClose | 关闭前触发，返回 `false`则禁止关闭 | `()=>boolean` | --- |
+| onBeforeClose | 关闭前触发，返回 `false` 或 Promise reject 则禁止关闭 | `()=>Promise\|boolean\|undefined` | >5.5.2 支持 Promise |
| onCancel | 点击取消按钮触发 | `()=>void` | --- |
| onClosed | 关闭动画播放完毕时触发 | `()=>void` | >5.5.2 |
| onConfirm | 点击确认按钮触发 | `()=>void` | --- |
@@ -140,7 +140,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
| 方法 | 描述 | 类型 | 版本限制 |
| --- | --- | --- | --- |
-| setState | 动态设置弹窗状态属性 | `(((prev: ModalState) => Partial)\| Partial)=>drawerApi` |
+| setState | 动态设置抽屉状态属性 | `(((prev: DrawerState) => Partial)\| Partial)=>drawerApi` |
| open | 打开弹窗 | `()=>void` | --- |
| close | 关闭弹窗 | `()=>void` | --- |
| setData | 设置共享数据 | `(data:T)=>drawerApi` | --- |
diff --git a/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md b/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
index ce6c0334a..32a8fa58e 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-ellipsis-text.md
@@ -4,31 +4,31 @@ outline: deep
# Vben EllipsisText 省略文本
-框架提供的文本展示组件，可配置超长省略、tooltip提示、展开收起等功能。
+`EllipsisText` 用于展示超长文本，支持省略、Tooltip 提示以及点击展开收起。
-> 如果文档内没有参数说明，可以尝试在在线示例内寻找
+> 如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。
## 基础用法
-通过默认插槽设置文本内容，`maxWidth`属性设置最大宽度。
+通过默认插槽提供文本内容，`maxWidth` 用于限制文本区域宽度。
({
config: {
// ant design vue组件库默认都是 v-model:value
baseModelPropName: 'value',
+ // 一些组件库空值为 null，重置表单时需要和实际组件行为保持一致
+ emptyStateValue: null,
// 一些组件是 v-model:checked 或者 v-model:fileList
modelPropNameMap: {
Checkbox: 'checked',
@@ -87,55 +92,32 @@ import type { BaseFormComponentType } from '@vben/common-ui';
import type { Component, SetupContext } from 'vue';
import { h } from 'vue';
-import { globalShareState, IconPicker } from '@vben/common-ui';
+import { globalShareState } from '@vben/common-ui';
import { $t } from '@vben/locales';
-
-const AutoComplete = defineAsyncComponent(
- () => import('ant-design-vue/es/auto-complete'),
-);
-const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
-const Checkbox = defineAsyncComponent(
- () => import('ant-design-vue/es/checkbox'),
-);
-const CheckboxGroup = defineAsyncComponent(() =>
- import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
-);
-const DatePicker = defineAsyncComponent(
- () => import('ant-design-vue/es/date-picker'),
-);
-const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
-const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
-const InputNumber = defineAsyncComponent(
- () => import('ant-design-vue/es/input-number'),
-);
-const InputPassword = defineAsyncComponent(() =>
- import('ant-design-vue/es/input').then((res) => res.InputPassword),
-);
-const Mentions = defineAsyncComponent(
- () => import('ant-design-vue/es/mentions'),
-);
-const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
-const RadioGroup = defineAsyncComponent(() =>
- import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
-);
-const RangePicker = defineAsyncComponent(() =>
- import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
-);
-const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
-const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
-const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
-const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
-const Textarea = defineAsyncComponent(() =>
- import('ant-design-vue/es/input').then((res) => res.Textarea),
-);
-const TimePicker = defineAsyncComponent(
- () => import('ant-design-vue/es/time-picker'),
-);
-const TreeSelect = defineAsyncComponent(
- () => import('ant-design-vue/es/tree-select'),
-);
-const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
-
+import {
+ AutoComplete,
+ Button,
+ Checkbox,
+ CheckboxGroup,
+ DatePicker,
+ Divider,
+ Input,
+ InputNumber,
+ InputPassword,
+ Mentions,
+ notification,
+ Radio,
+ RadioGroup,
+ RangePicker,
+ Rate,
+ Select,
+ Space,
+ Switch,
+ Textarea,
+ TimePicker,
+ TreeSelect,
+ Upload,
+} from 'antdv-next';
const withDefaultPlaceholder = (
component: T,
@@ -171,7 +153,6 @@ export type ComponentType =
| 'TimePicker'
| 'TreeSelect'
| 'Upload'
- | 'IconPicker';
| BaseFormComponentType;
async function initComponentAdapter() {
@@ -189,7 +170,6 @@ async function initComponentAdapter() {
return h(Button, { ...props, attrs, type: 'default' }, slots);
},
Divider,
- IconPicker,
Input: withDefaultPlaceholder(Input, 'input'),
InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
@@ -250,6 +230,16 @@ export { initComponentAdapter };
,
+) => any;
+```
+
+- 返回 `undefined`：保持当前字段已被移除
+- 返回其他值：将当前字段恢复/写回为该值
+- `setValue(fieldName, value)`：用于把一个字段拆分写入其他字段
+
+:::
+
### 表单联动
表单联动需要通过 schema 内的 `dependencies` 属性进行联动，允许您添加字段之间的依赖项，以根据其他字段的值控制字段。
diff --git a/apps/vben5/docs/src/components/common-ui/vben-modal.md b/apps/vben5/docs/src/components/common-ui/vben-modal.md
index fc714e279..65c2912d4 100644
--- a/apps/vben5/docs/src/components/common-ui/vben-modal.md
+++ b/apps/vben5/docs/src/components/common-ui/vben-modal.md
@@ -34,7 +34,7 @@ Modal 内的内容一般业务中，会比较复杂，所以我们可以将 moda
## 开启拖拽
-通过 `draggable` 参数，可开启拖拽功能。
+通过 `draggable` 参数，可开启拖拽功能。若需要拖动范围超出可视区，可设置 `overflow: true`（需已开启 `draggable`）。
/src/bootstrap.ts` 中修改 `setDefaultModalProps` 的参数来设置默认属性，例如默认隐藏全屏按钮、修改默认 `zIndex` 等。
:::
@@ -101,6 +101,7 @@ const [Modal, modalApi] = useVbenModal({
| fullscreen | 全屏显示 | `boolean` | `false` |
| fullscreenButton | 显示全屏按钮 | `boolean` | `true` |
| draggable | 可拖拽 | `boolean` | `false` |
+| overflow | 拖动范围可以超出可视区 | `boolean` | `false` |
| closable | 显示关闭按钮 | `boolean` | `true` |
| centered | 居中显示 | `boolean` | `false` |
| modal | 显示遮罩 | `boolean` | `true` |
diff --git a/apps/vben5/docs/src/components/common-ui/vben-table-action.md b/apps/vben5/docs/src/components/common-ui/vben-table-action.md
new file mode 100644
index 000000000..b250921eb
--- /dev/null
+++ b/apps/vben5/docs/src/components/common-ui/vben-table-action.md
@@ -0,0 +1,163 @@
+---
+outline: deep
+---
+
+# Vben TableAction 表格操作
+
+`TableAction` 用于在表格操作列中渲染一组操作按钮，参考 vben2 的 TableAction 设计。基于 shadcn-ui 构建，支持权限控制、气泡确认、提示、下拉「更多」、分割线等能力，可在表格内外任意场景复用。
+
+> 如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。
+
+::: info 写在前面
+
+组件本身不依赖任何业务逻辑（不直接读取权限 store），权限通过注入 `hasPermission` 实现，从而保持核心层零耦合、可跨框架复用。在 vxe-table 中推荐通过列插槽（`slots: { default: 'action' }`）在页面里渲染，不改变表格原有的渲染机制。:::
+
+## 基础用法
+
+通过 `actions` 传入操作项数组，每项包含 `text`、`onClick` 等；`danger` 标记危险操作，`divider` 显示按钮间分割线。
+
+
+
+
+
+
+```
+
+若直接从 `@vben/common-ui` 引入核心组件（不经过适配器），组件不依赖任何业务逻辑，需自行注入 `hasPermission`：
+
+```vue
+
+
+
+ ;
+}
+```
+
+### VbenTiptapPreview Props
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ----------- | ------------------ | ------------------ | ------ |
+| `content` | 要预览的 HTML 内容 | `string` | `''` |
+| `minHeight` | 最小高度 | `number \| string` | `160` |
+| `class` | 自定义类名 | `any` | - |
+
+## 工具栏功能
+
+编辑器工具栏提供以下功能：
+
+### 格式化
+
+- **撤销/重做** - 撤销或重做编辑操作
+- **清除格式** - 清除选中文本的所有格式
+- **粗体** - 加粗文本
+- **斜体** - 斜体文本
+- **下划线** - 下划线文本
+- **删除线** - 删除线文本
+- **行内代码** - 行内代码标记
+
+### 结构
+
+- **标题** - 段落、H1-H4 标题切换
+- **有序列表** - 有序编号列表
+- **无序列表** - 无序符号列表
+- **引用块** - 引用块样式
+- **代码块** - 多行代码块
+
+### 链接与图片
+
+- **插入链接** - 插入或编辑超链接
+- **移除链接** - 移除选中文本的链接
+- **插入图片** - 通过 URL 插入图片
+
+### 样式
+
+- **文字颜色** - 设置文字颜色（预设色板）
+- **背景颜色** - 设置文字背景高亮颜色
+
+### 对齐
+
+- **左对齐** - 文本左对齐
+- **居中对齐** - 文本居中对齐
+- **右对齐** - 文本右对齐
+
+### 其他
+
+- **预览** - 在弹窗中预览编辑内容
+
+## 图片上传
+
+void` | - |
-| reload | 重载表格，会进行初始化 | `(params:any)=>void` | - |
-| query | 重载表格，会保留当前分页 | `(params:any)=>void` | - |
-| grid | vxe-table grid实例 | `VxeGridInstance` | - |
-| formApi | vbenForm api实例 | `FormApi` | - |
-| toggleSearchForm | 设置搜索表单显示状态 | `(show?: boolean)=>boolean` | 当省略参数时，则将表单在显示和隐藏两种状态之间切换 |
+| setLoading | 设置 loading 状态 | `(loading: boolean) => void` | - |
+| setGridOptions | 更新 `gridOptions` | `(options: Partial) => void` | - |
+| reload | 重新加载表格，并重置到初始分页 | `(params?: Record) => void` | - |
+| query | 重新查询表格，保留当前分页 | `(params?: Record) => void` | - |
+| grid | `vxe-grid` 实例 | `VxeGridInstance` | - |
+| formApi | 搜索表单 API 实例 | `FormApi` | - |
+| toggleSearchForm | 切换或指定搜索表单显示状态 | `(show?: boolean) => boolean` | 传入参数时强制设置；不传参数时在显示和隐藏之间切换，并返回当前状态 |
## Props
-所有属性都可以传入 `useVbenVxeGrid` 的第一个参数中。
+所有属性都通过 `useVbenVxeGrid` 的第一个参数传入。
| 属性名 | 描述 | 类型 | 版本要求 |
| --- | --- | --- | --- |
| tableTitle | 表格标题 | `string` | - |
| tableTitleHelp | 表格标题帮助信息 | `string` | - |
-| gridClass | grid组件的class | `string` | - |
-| gridOptions | grid组件的参数 | `VxeTableGridProps` | - |
-| gridEvents | grid组件的触发的事件 | `VxeGridListeners` | - |
-| formOptions | 表单参数 | `VbenFormProps` | - |
+| class | 外层容器的 class | `string` | - |
+| gridClass | `vxe-grid` 的 class | `string` | - |
+| gridOptions | `vxe-grid` 配置 | `DeepPartial` | - |
+| gridEvents | `vxe-grid` 事件 | `DeepPartial` | - |
+| formOptions | 搜索表单配置 | `VbenFormProps` | - |
| showSearchForm | 是否显示搜索表单 | `boolean` | - |
-| separator | 搜索表单与表格主体之间的分隔条 | `boolean\|SeparatorOptions` | >5.5.4 |
+| separator | 搜索表单与表格主体之间的分隔条 | `boolean \| SeparatorOptions` | `>5.5.4` |
## Slots
-大部分插槽的说明请参考 [vxe-table 官方文档](https://vxetable.cn/v4/#/grid/api)，但工具栏部分由于做了一些定制封装，需使用以下插槽定制表格的工具栏：
+大部分插槽说明可参考 [vxe-table 官方文档](https://vxetable.cn/v4/#/grid/api)，这里列出封装层新增或约定的部分。
-| 插槽名 | 描述 |
-| --------------- | -------------------------------------------- |
-| toolbar-actions | 工具栏左侧部分（表格标题附近） |
-| toolbar-tools | 工具栏右侧部分（vxeTable原生工具按钮的左侧） |
-| table-title | 表格标题插槽 |
+| 插槽名 | 描述 |
+| --------------- | ------------------------------------ |
+| toolbar-actions | 工具栏左侧区域，位于标题附近 |
+| toolbar-tools | 工具栏右侧区域，位于内置工具按钮左侧 |
+| table-title | 自定义表格标题 |
-::: info 搜索表单的插槽
+::: info 搜索表单插槽
-对于使用了搜索表单的表格来说，所有以`form-`开头的命名插槽都会传递给表单。
-
-:::
+当启用了搜索表单时，所有以 `form-` 开头的具名插槽都会被转发给表单。:::
diff --git a/apps/vben5/docs/src/components/layout-ui/page.md b/apps/vben5/docs/src/components/layout-ui/page.md
index 29fbdd40f..8f21fae19 100644
--- a/apps/vben5/docs/src/components/layout-ui/page.md
+++ b/apps/vben5/docs/src/components/layout-ui/page.md
@@ -4,41 +4,38 @@ outline: deep
# Page 常规页面组件
-提供一个常规页面布局的组件，包括头部、内容区域、底部三个部分。
+`Page` 是页面内容区最常用的顶层布局容器，内置了标题区、内容区和底部区三部分结构。
::: info 写在前面
-本组件是一个基本布局组件。如果有更多的通用页面布局需求（比如双列布局等），可以根据实际需求自行封装。
-
-:::
+这是一个基础页面容器。如果你的业务页面需要更复杂的布局，例如双列、侧边操作区或自定义滚动区域，建议在 `Page` 之上继续封装。:::
## 基础用法
-将`Page`作为你的业务页面的根组件即可。
+直接将 `Page` 作为业务页面的根组件使用即可。
### Props
| 属性名 | 描述 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
-| title | 页面标题 | `string\|slot` | - | - |
-| description | 页面描述（标题下的内容） | `string\|slot` | - | - |
-| contentClass | 内容区域的class | `string` | - | - |
-| headerClass | 头部区域的class | `string` | - | - |
-| footerClass | 底部区域的class | `string` | - | - |
-| autoContentHeight | 自动调整内容区域的高度 | `boolean` | `false` | - |
+| title | 页面标题 | `string \| slot` | - | - |
+| description | 页面描述 | `string \| slot` | - | - |
+| contentClass | 内容区域的 class | `string` | - | - |
+| headerClass | 头部区域的 class | `string` | - | - |
+| footerClass | 底部区域的 class | `string` | - | - |
+| autoContentHeight | 根据可视内容高度自动计算内容区高度 | `boolean` | `false` | 开启后内容区会根据布局可视高度自动扣减头部和底部高度 |
+| heightOffset | 额外扣减的内容区高度偏移量 | `number` | `0` | 仅在 `autoContentHeight` 开启时生效，单位为 `px` |
::: tip 注意
-如果`title`、`description`、`extra`三者均未提供有效内容（通过`props`或者`slots`均可），则页面头部区域不会渲染。
-
-:::
+如果 `title`、`description`、`extra` 三者都没有提供有效内容，无论是通过 `props` 还是 `slots`，头部区域都不会渲染。:::
### Slots
-| 插槽名称 | 描述 |
-| ----------- | ------------ |
-| default | 页面内容 |
-| title | 页面标题 |
-| description | 页面描述 |
-| extra | 页面头部右侧 |
-| footer | 页面底部 |
+| 插槽名称 | 描述 |
+| ----------- | ---------------- |
+| default | 页面内容 |
+| title | 页面标题 |
+| description | 页面描述 |
+| extra | 页面头部右侧内容 |
+| footer | 页面底部内容 |
diff --git a/apps/vben5/docs/src/demos/vben-alert/alert/index.vue b/apps/vben5/docs/src/demos/vben-alert/alert/index.vue
index 9ba18a4da..89ae16087 100644
--- a/apps/vben5/docs/src/demos/vben-alert/alert/index.vue
+++ b/apps/vben5/docs/src/demos/vben-alert/alert/index.vue
@@ -3,7 +3,7 @@ import { h } from 'vue';
import { alert, VbenButton } from '@vben/common-ui';
-import { Result } from 'ant-design-vue';
+import { Result } from 'antdv-next';
function showAlert() {
alert('This is an alert message');
diff --git a/apps/vben5/docs/src/demos/vben-alert/confirm/index.vue b/apps/vben5/docs/src/demos/vben-alert/confirm/index.vue
index 723445d96..4264f9dc9 100644
--- a/apps/vben5/docs/src/demos/vben-alert/confirm/index.vue
+++ b/apps/vben5/docs/src/demos/vben-alert/confirm/index.vue
@@ -3,7 +3,7 @@ import { h, ref } from 'vue';
import { alert, confirm, VbenButton } from '@vben/common-ui';
-import { Checkbox, message } from 'ant-design-vue';
+import { Checkbox, message } from 'antdv-next';
function showConfirm() {
confirm('This is an alert message')
diff --git a/apps/vben5/docs/src/demos/vben-alert/prompt/index.vue b/apps/vben5/docs/src/demos/vben-alert/prompt/index.vue
index a19221347..7e807d065 100644
--- a/apps/vben5/docs/src/demos/vben-alert/prompt/index.vue
+++ b/apps/vben5/docs/src/demos/vben-alert/prompt/index.vue
@@ -3,8 +3,8 @@ import { h } from 'vue';
import { alert, prompt, useAlertContext, VbenButton } from '@vben/common-ui';
-import { Input, RadioGroup, Select } from 'ant-design-vue';
-import { BadgeJapaneseYen } from 'lucide-vue-next';
+import { BadgeJapaneseYen } from '@lucide/vue';
+import { Input, RadioGroup, Select } from 'antdv-next';
function showPrompt() {
prompt({
diff --git a/apps/vben5/docs/src/demos/vben-api-component/cascader/index.vue b/apps/vben5/docs/src/demos/vben-api-component/cascader/index.vue
index 957964cd3..cb3716d94 100644
--- a/apps/vben5/docs/src/demos/vben-api-component/cascader/index.vue
+++ b/apps/vben5/docs/src/demos/vben-api-component/cascader/index.vue
@@ -1,7 +1,7 @@
+
+
+
+
+ 编辑
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-descriptions/custom/index.vue b/apps/vben5/docs/src/demos/vben-descriptions/custom/index.vue
new file mode 100644
index 000000000..cd93ea0fc
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-descriptions/custom/index.vue
@@ -0,0 +1,17 @@
+
+
+
+
+ Vben
+
+ ● 正常
+
+
+
+ 通过 #content 插槽自定义内容
+
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-descriptions/size/index.vue b/apps/vben5/docs/src/demos/vben-descriptions/size/index.vue
new file mode 100644
index 000000000..bc0db2e2a
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-descriptions/size/index.vue
@@ -0,0 +1,32 @@
+
+
+ Open
- drawer content
+ drawer content
diff --git a/apps/vben5/docs/src/demos/vben-form/api/index.vue b/apps/vben5/docs/src/demos/vben-form/api/index.vue
index 786dc89e5..543f20dbf 100644
--- a/apps/vben5/docs/src/demos/vben-form/api/index.vue
+++ b/apps/vben5/docs/src/demos/vben-form/api/index.vue
@@ -1,5 +1,5 @@
+
+
+ 缩放动画
- 
+ src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+ ![]()
+
+
+```
diff --git a/apps/vben5/docs/src/components/common-ui/vben-descriptions.md b/apps/vben5/docs/src/components/common-ui/vben-descriptions.md
new file mode 100644
index 000000000..fa48c7257
--- /dev/null
+++ b/apps/vben5/docs/src/components/common-ui/vben-descriptions.md
@@ -0,0 +1,102 @@
+---
+outline: deep
+---
+
+# Vben Descriptions 描述列表
+
+`Descriptions` 用于成组展示只读的字段信息，常用于详情页、信息预览等场景。组件基于 shadcn-ui 构建，API 参考 Ant Design Vue 的 Descriptions，支持响应式列数、跨列、边框、垂直布局等能力。
+
+> 如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。
+
+::: info 写在前面
+
+组件提供两种使用方式：通过 `items` 数据驱动（推荐），或通过子组件 `VbenDescriptionsItem` 声明列表项。两者可按需选择，`items` 优先级更高。:::
+
+## 基础用法
+
+通过 `items` 传入字段数组，每项包含 `label` 与 `content`。默认按断点自适应列数（`xs` 1 列、`sm` 2 列、`md` 及以上 3 列）。
+
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-cropper/basic/index.vue b/apps/vben5/docs/src/demos/vben-cropper/basic/index.vue
new file mode 100644
index 000000000..c9a65ee48
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-cropper/basic/index.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+ + 裁剪结果 (比例: {{ aspectRatio }}): +
+
+
+ 提示:
+-
+
- 设置固定比例后，裁剪框始终维持该比例 +
- 切换比例会自动重新计算裁剪框大小 +
- 比例格式为 "宽:高"，如 "16:9" +
+
+
diff --git a/apps/vben5/docs/src/demos/vben-descriptions/basic/index.vue b/apps/vben5/docs/src/demos/vben-descriptions/basic/index.vue
new file mode 100644
index 000000000..8b73fe637
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-descriptions/basic/index.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+ ![]()
+
+ 裁剪结果:
+
+
+ 提示:
+-
+
- 拖拽裁剪框中心区域可移动裁剪位置 +
- 拖拽四角或四边可调整裁剪框大小 +
- 默认为自由比例，可调整为任意比例 +
+
+
diff --git a/apps/vben5/docs/src/demos/vben-descriptions/span/index.vue b/apps/vben5/docs/src/demos/vben-descriptions/span/index.vue
new file mode 100644
index 000000000..1cde5fea0
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-descriptions/span/index.vue
@@ -0,0 +1,15 @@
+
+
+
+
+ class="flex-center h-55 w-full bg-muted even:bg-heavy">
{{ item }}
diff --git a/apps/vben5/docs/src/demos/vben-drawer/basic/index.vue b/apps/vben5/docs/src/demos/vben-drawer/basic/index.vue
index bd7d92750..70b5fd3e7 100644
--- a/apps/vben5/docs/src/demos/vben-drawer/basic/index.vue
+++ b/apps/vben5/docs/src/demos/vben-drawer/basic/index.vue
@@ -6,6 +6,6 @@ const [Drawer, drawerApi] = useVbenDrawer();
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-modal/animation-type/index.vue b/apps/vben5/docs/src/demos/vben-modal/animation-type/index.vue
index 79ba9d33a..f364687b7 100644
--- a/apps/vben5/docs/src/demos/vben-modal/animation-type/index.vue
+++ b/apps/vben5/docs/src/demos/vben-modal/animation-type/index.vue
@@ -25,11 +25,11 @@ function openScaleModal() {
+ return 值：回写当前字段
+ setValue：拆分写入其他字段
+ return undefined：保持原字段删除
+
+
+
+
+
+
+
+
+ {{
+ liveValuesPreview
+ }}
+ {{
+ transformedValuesPreview
+ }}
+ 这是使用滑动动画的弹窗，从顶部向下滑动进入。
这是使用缩放动画的弹窗，以缩放淡入淡出的方式显示。
+ class="flex-center h-55 w-full bg-muted even:bg-heavy">
{{ item }}
diff --git a/apps/vben5/docs/src/demos/vben-modal/basic/index.vue b/apps/vben5/docs/src/demos/vben-modal/basic/index.vue
index 9f8997085..99f5e0804 100644
--- a/apps/vben5/docs/src/demos/vben-modal/basic/index.vue
+++ b/apps/vben5/docs/src/demos/vben-modal/basic/index.vue
@@ -6,6 +6,6 @@ const [Modal, modalApi] = useVbenModal();
+
+
diff --git a/apps/vben5/docs/src/demos/vben-table-action/dropdown/index.vue b/apps/vben5/docs/src/demos/vben-table-action/dropdown/index.vue
new file mode 100644
index 000000000..2d5261e5d
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-table-action/dropdown/index.vue
@@ -0,0 +1,43 @@
+
+
+ + 最近点击：{{ last }} +
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-table-action/permission/index.vue b/apps/vben5/docs/src/demos/vben-table-action/permission/index.vue
new file mode 100644
index 000000000..28dde3963
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-table-action/permission/index.vue
@@ -0,0 +1,27 @@
+
+
+ + 最近点击：{{ last }} +
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-table-action/tooltip/index.vue b/apps/vben5/docs/src/demos/vben-table-action/tooltip/index.vue
new file mode 100644
index 000000000..2bd75e28b
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-table-action/tooltip/index.vue
@@ -0,0 +1,17 @@
+
+
+ + 最近操作：{{ last }} +
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-tiptap/image-upload/index.vue b/apps/vben5/docs/src/demos/vben-tiptap/image-upload/index.vue
new file mode 100644
index 000000000..e72d02ba7
--- /dev/null
+++ b/apps/vben5/docs/src/demos/vben-tiptap/image-upload/index.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+ 当前内容:
+
+ {{ content }}
+
+
+
+
diff --git a/apps/vben5/docs/src/demos/vben-vxe-table/basic/index.vue b/apps/vben5/docs/src/demos/vben-vxe-table/basic/index.vue
index 4b6b5a632..5480f9945 100644
--- a/apps/vben5/docs/src/demos/vben-vxe-table/basic/index.vue
+++ b/apps/vben5/docs/src/demos/vben-vxe-table/basic/index.vue
@@ -1,7 +1,7 @@
-
+
+ 提示:
+-
+
- 点击工具栏图片按钮可选择本地上传或 URL 插入 +
- 拖拽图片到编辑器区域可直接上传 +
- 粘贴图片也会触发上传 +
- 上传过程中会显示进度条 +
+
@@ -169,8 +170,7 @@ async function onChange() {
block
type="link"
v-access:code="[ResourcesPermissions.Update]"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
diff --git a/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextModal.vue b/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextModal.vue
index a7b5cffcf..37690ad9c 100644
--- a/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextModal.vue
+++ b/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextModal.vue
@@ -133,53 +133,44 @@ async function onSubmit() {
ref="form"
:label-col="{ span: 6 }"
:model="formModel"
- :wrapper-col="{ span: 18 }"
- >
+ :wrapper-col="{ span: 18 }">
+ required>
+ @change="(value) => onLanguageChange(value!.toString())" />
+ required>
+ :field-names="{ label: 'displayName', value: 'name' }" />
+ required>
+ autocomplete="off" />
+ required>
+ autocomplete="off" />
diff --git a/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextTable.vue b/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextTable.vue
index 07b9acf2e..e1283bcd6 100644
--- a/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextTable.vue
+++ b/apps/vben5/packages/@abp/localization/src/components/texts/LocalizationTextTable.vue
@@ -265,14 +265,16 @@ function onDelete(row: TextDifferenceDto) {
async function onChange(data: TextDto) {
const input = await gridApi.formApi.getValues();
onGet(input);
- // 资源变化刷新本地多语言缓存
- const cultureName =
- abpStore.application!.localization.currentCulture.cultureName;
- if (data.cultureName === cultureName) {
- const localization = await getLocalizationApi({
- cultureName,
- });
- abpStore.setLocalization(localization);
+ if (abpStore.localization?.currentCulture) {
+ // 资源变化刷新本地多语言缓存
+ const cultureName =
+ abpStore.application!.localization.currentCulture.cultureName;
+ if (data.cultureName === cultureName) {
+ const localization = await getLocalizationApi({
+ cultureName,
+ });
+ abpStore.setLocalization(localization);
+ }
}
}
@@ -291,8 +293,7 @@ onMounted(onInit);
:value="modelValue"
:field-names="{ label: 'displayName', value: 'cultureName' }"
@change="(value) => onFieldChange('cultureName', value?.toString())"
- @search="onSearchLanguages"
- />
+ @search="onSearchLanguages" />
+ @search="onSearchLanguages" />
+ @search="onSearchResources" />
+ @change="(value) => onFieldChange('onlyNull', value?.toString())" />
@@ -348,8 +345,7 @@ onMounted(onInit);
block
type="link"
v-access:code="[TextsPermissions.Update]"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
@@ -368,8 +363,7 @@ onMounted(onInit);
@@ -265,8 +264,7 @@ onMounted(onSearchClient);
:icon="h(EditOutlined)"
block
type="link"
- @click="onUpdate(row)"
- >
+ @click="onUpdate(row)">
{{ $t('AbpUi.Edit') }}
@@ -277,8 +275,7 @@ onMounted(onSearchClient);
danger
type="link"
v-access:code="[AuthorizationsPermissions.Delete]"
- @click="onDelete(row)"
- >
+ @click="onDelete(row)">
{{ $t('AbpUi.Delete') }}
+ class="absolute bottom-2 left-3 z-10 flex-center cursor-pointer rounded-sm bg-accent p-1 text-foreground/60 hover:bg-accent-hover hover:text-foreground"
+ @click.stop="handleCollapsed">
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
index 5cfd89b63..500808665 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
@@ -10,9 +10,8 @@ function toggleFixed() {
+ class="absolute right-3 bottom-2 z-10 flex-center cursor-pointer rounded-sm bg-accent p-1.25 text-foreground/60 transition-all duration-300 hover:bg-accent-hover hover:text-foreground"
+ @click="toggleFixed">
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts b/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts
index c72468891..2138877ce 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/hooks/use-sidebar-drag.ts
@@ -1,9 +1,8 @@
-import { onUnmounted } from 'vue';
+import { ref } from 'vue';
interface DragOptions {
max: number;
min: number;
- startWidth: number;
}
interface DragElements {
@@ -14,35 +13,9 @@ interface DragElements {
type DragCallback = (newWidth: number) => void;
export function useSidebarDrag() {
- const state: {
- cleanup: (() => void) | null;
- isDragging: boolean;
- originalStyles: {
- bodyCursor: string;
- bodyUserSelect: string;
- dragBarLeft: string;
- dragBarRight: string;
- dragBarTransition: string;
- targetTransition: string;
- };
- startLeft: number;
- startWidth: number;
- startX: number;
- } = {
- cleanup: null,
- isDragging: false,
- startLeft: 0,
- startWidth: 0,
- startX: 0,
- originalStyles: {
- bodyCursor: '',
- bodyUserSelect: '',
- dragBarLeft: '',
- dragBarRight: '',
- dragBarTransition: '',
- targetTransition: '',
- },
- };
+ const isDragging = ref(false);
+ let cleanup: (() => void) | null = null;
+ let dragOverlay: HTMLElement | null = null;
const startDrag = (
e: MouseEvent,
@@ -50,108 +23,130 @@ export function useSidebarDrag() {
elements: DragElements,
onDrag: DragCallback,
) => {
- const { min, max, startWidth } = options;
+ const { min, max } = options;
const { dragBar, target } = elements;
- if (state.isDragging || !dragBar || !target) return;
+ if (isDragging.value || !dragBar || !target) return;
e.preventDefault();
e.stopPropagation();
- state.isDragging = true;
+ isDragging.value = true;
- state.startX = e.clientX;
- state.startWidth = startWidth;
- state.startLeft = dragBar.offsetLeft;
+ const startX = e.clientX;
+ const startWidth = target.getBoundingClientRect().width;
+ const startLeft = dragBar.offsetLeft;
- state.originalStyles = {
- bodyCursor: document.body.style.cursor,
- bodyUserSelect: document.body.style.userSelect,
- dragBarLeft: dragBar.style.left,
- dragBarRight: dragBar.style.right,
- dragBarTransition: dragBar.style.transition,
- targetTransition: target.style.transition,
- };
+ dragBar.classList.add('bg-primary');
+ dragBar.classList.remove('bg-primary/30');
- document.body.style.cursor = 'col-resize';
- document.body.style.userSelect = 'none';
+ const dragBarTransition = dragBar.style.transition;
+ const targetTransition = target.style.transition;
- dragBar.style.left = `${state.startLeft}px`;
- dragBar.style.right = 'auto';
dragBar.style.transition = 'none';
target.style.transition = 'none';
+ dragOverlay = document.createElement('div');
+ dragOverlay.style.position = 'fixed';
+ dragOverlay.style.inset = '0';
+ dragOverlay.style.zIndex = '9999';
+ dragOverlay.style.cursor = 'col-resize';
+ dragOverlay.style.userSelect = 'none';
+ dragOverlay.style.outline = 'none';
+ dragOverlay.tabIndex = -1;
+ dragOverlay.style.background = 'rgba(0,0,0,0)';
+ document.body.append(dragOverlay);
+
const onMouseMove = (moveEvent: MouseEvent) => {
- if (!state.isDragging || !dragBar) return;
+ if (!isDragging.value || !dragBar || !target) {
+ endDrag();
+ return;
+ }
- const deltaX = moveEvent.clientX - state.startX;
- let newLeft = state.startLeft + deltaX;
+ const deltaX = moveEvent.clientX - startX;
+ let currentWidth = startWidth + deltaX;
- if (newLeft < min) newLeft = min;
- if (newLeft > max) newLeft = max;
+ const isOutOfMin = currentWidth < min;
+ const isOutOfMax = currentWidth > max;
+ const isOutOfBounds = isOutOfMin || isOutOfMax;
+
+ if (isOutOfMin) currentWidth = min;
+ if (isOutOfMax) currentWidth = max;
+
+ const newLeft = startLeft + (currentWidth - startWidth);
+
+ if (dragOverlay)
+ dragOverlay.style.cursor = isOutOfBounds ? 'not-allowed' : 'col-resize';
dragBar.style.left = `${newLeft}px`;
- dragBar.classList.add('bg-primary');
+
+ if (isOutOfBounds) {
+ dragBar.classList.add('bg-primary/30');
+ dragBar.classList.remove('bg-primary');
+ } else {
+ dragBar.classList.add('bg-primary');
+ dragBar.classList.remove('bg-primary/30');
+ }
};
const onMouseUp = (upEvent: MouseEvent) => {
- if (!state.isDragging || !dragBar || !target) return;
+ if (!isDragging.value || !dragBar || !target) {
+ endDrag();
+ return;
+ }
- const deltaX = upEvent.clientX - state.startX;
- let newWidth = state.startWidth + deltaX;
+ const deltaX = upEvent.clientX - startX;
+ let newWidth = startWidth + deltaX;
newWidth = Math.min(max, Math.max(min, newWidth));
- dragBar.classList.remove('bg-primary');
-
- onDrag?.(newWidth);
+ dragBar.classList.remove('bg-primary', 'bg-primary/30');
- endDrag();
+ try {
+ onDrag?.(Math.round(newWidth));
+ } finally {
+ endDrag();
+ }
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
- const cleanup = () => {
- if (!state.cleanup) return;
+ cleanup = () => {
+ if (!cleanup) return;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
- document.body.style.cursor = state.originalStyles.bodyCursor;
- document.body.style.userSelect = state.originalStyles.bodyUserSelect;
-
if (dragBar) {
- dragBar.style.left = state.originalStyles.dragBarLeft;
- dragBar.style.right = state.originalStyles.dragBarRight;
- dragBar.style.transition = state.originalStyles.dragBarTransition;
- dragBar.classList.remove('bg-primary');
+ dragBar.style.transition = dragBarTransition;
+ dragBar.style.left = '';
+ dragBar.classList.remove('bg-primary', 'bg-primary/30');
}
if (target) {
- target.style.transition = state.originalStyles.targetTransition;
+ target.style.transition = targetTransition;
}
- state.isDragging = false;
- state.cleanup = null;
- };
+ if (dragOverlay) {
+ dragOverlay.remove();
+ dragOverlay = null;
+ }
- state.cleanup = cleanup;
+ isDragging.value = false;
+ cleanup = null;
+ };
};
const endDrag = () => {
- state.cleanup?.();
+ cleanup?.();
};
- onUnmounted(() => {
- endDrag();
- });
-
return {
startDrag,
endDrag,
get isDragging() {
- return state.isDragging;
+ return isDragging.value;
},
};
}
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
index b6b413751..6cbe54f5b 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.ts
@@ -126,6 +126,10 @@ interface VbenLayoutProps {
* @default 48
*/
sidebarExtraCollapsedWidth?: number;
+ /**
+ * 扩展区域extra-title的高度
+ */
+ sidebarExtraTitleHeight?: number;
/**
* 侧边菜单折叠按钮是否固定
* @default true
@@ -136,6 +140,10 @@ interface VbenLayoutProps {
* @default false
*/
sidebarHidden?: boolean;
+ /**
+ * 侧边栏 Logo 区域是否显示
+ */
+ sidebarLogoVisible: boolean;
/**
* 混合侧边栏宽度
* @default 80
diff --git a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index 7e444068f..e4b3a1438 100644
--- a/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/apps/vben5/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -67,7 +67,7 @@ const props = withDefaults(defineProps
+ class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in">
@@ -627,8 +634,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
+ class="fixed top-0 left-0 size-full bg-overlay transition-[background-color] duration-200"
+ @click="handleClickMask">
+ class="overflow-hidden transition-all duration-200">
+ :logo-visible="sidebarLogoVisible">
+ @click="handleHeaderToggle">
@@ -586,8 +596,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
+ :style="tabbarStyle">
@@ -603,8 +612,7 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
:padding-right="contentPaddingRight"
:padding-top="contentPaddingTop"
:style="contentStyle"
- class="transition-[margin-top] duration-200"
- >
+ class="transition-[margin-top] duration-200">
-
-
-
-
-
+
+
+
+
+
+ -
+ :style="subMenuStyle">
-
+ :style="subMenuStyle">
@@ -166,31 +175,28 @@ async function handleOpenChange(val: boolean) {
size="icon"
class="rounded-full"
:disabled="loading"
- @click="handleCancel"
- >
+ @click="handleCancel">
+
+ @click="() => modalApi?.onCancel()">
{{ cancelText || $t('cancel') }}
@@ -359,8 +355,7 @@ function handleClosed() {
v-if="showConfirmButton"
:disabled="confirmDisabled"
:loading="confirmLoading || submitting"
- @click="() => modalApi?.onConfirm()"
- >
+ @click="() => modalApi?.onConfirm()">
{{ confirmText || $t('confirm') }}
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
index 84910b744..a7bcba555 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal-draggable.ts
@@ -15,6 +15,7 @@ export function useModalDraggable(
draggable: ComputedRef,
containerSelector?: ComputedRef,
centered?: ComputedRef,
+ overflow?: ComputedRef,
) {
const transform = reactive({
offsetX: 0,
@@ -67,8 +68,10 @@ export function useModalDraggable(
let moveX = offsetX + e.clientX - downX;
let moveY = offsetY + e.clientY - downY;
- moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
- moveY = Math.min(Math.max(moveY, minTop), maxTop);
+ if (!overflow?.value) {
+ moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
+ moveY = Math.min(Math.max(moveY, minTop), maxTop);
+ }
transform.offsetX = moveX;
transform.offsetY = moveY;
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
index 2decdffdf..87456a16d 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/use-modal.ts
@@ -10,13 +10,18 @@ import {
ref,
} from 'vue';
-import { useStore } from '@vben-core/shared/store';
+import { usePreferences } from '@vben-core/preferences';
+import { useSelector } from '@vben-core/shared/store';
import { ModalApi } from './modal-api';
import VbenModal from './modal.vue';
const USER_MODAL_INJECT_KEY = Symbol('VBEN_MODAL_INJECT');
+const { globalEscapeShortcutKey } = usePreferences();
+/**
+ * 默认配置
+ */
const DEFAULT_MODAL_PROPS: Partial = {};
export function setDefaultModalProps(props: Partial) {
@@ -29,6 +34,10 @@ export function useVbenModal(
// Modal一般会抽离出来，所以如果有传入 connectedComponent，则表示为外部调用，与内部组件进行连接
// 外部的Modal通过provide/inject传递api
+ const defaultOptions = {
+ closeOnPressEscape: globalEscapeShortcutKey.value, // 全局Esc快捷键配置
+ ...options,
+ };
const { connectedComponent } = options;
if (connectedComponent) {
const extendedApi = reactive({});
@@ -42,7 +51,7 @@ export function useVbenModal(
Object.setPrototypeOf(extendedApi, api);
},
consumed: false,
- options,
+ options: defaultOptions,
async reCreateModal() {
isModalReady.value = false;
await nextTick();
@@ -85,7 +94,7 @@ export function useVbenModal(
const mergedOptions = {
...DEFAULT_MODAL_PROPS,
...injectData.options,
- ...options,
+ ...defaultOptions,
} as ModalApiOptions;
mergedOptions.onOpenChange = (isOpen: boolean) => {
@@ -107,7 +116,7 @@ export function useVbenModal(
const extendedApi: ExtendedModalApi = api as never;
extendedApi.useStore = (selector) => {
- return useStore(api.store, selector);
+ return useSelector(api.store, selector);
};
const Modal = defineComponent(
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/tailwind.config.mjs b/apps/vben5/packages/@core/ui-kit/popup-ui/tailwind.config.mjs
deleted file mode 100644
index f17f556fa..000000000
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/tailwind.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config';
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/tsdown.config.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/tsdown.config.ts
new file mode 100644
index 000000000..43e8cf1c5
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/tsdown.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsdown';
+import Vue from 'unplugin-vue/rolldown';
+
+export default defineConfig({
+ clean: true,
+ deps: {
+ skipNodeModulesBundle: true,
+ },
+ dts: {
+ vue: true,
+ },
+ entry: ['src/index.ts'],
+ format: ['esm'],
+ outExtensions: () => ({
+ dts: '.d.ts',
+ js: '.mjs',
+ }),
+ platform: 'neutral',
+ plugins: [Vue({ isProduction: true })],
+ unbundle: true,
+});
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/build.config.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/build.config.ts
deleted file mode 100644
index aec93408a..000000000
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/build.config.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
- clean: true,
- declaration: true,
- entries: [
- {
- builder: 'mkdist',
- input: './src',
-
- pattern: ['**/*'],
- },
- {
- builder: 'mkdist',
- input: './src',
- loaders: ['vue'],
- pattern: ['**/*.vue'],
- },
- {
- builder: 'mkdist',
- format: 'esm',
- input: './src',
- loaders: ['js'],
- pattern: ['**/*.ts'],
- },
- ],
-});
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/components.json b/apps/vben5/packages/@core/ui-kit/shadcn-ui/components.json
index b497f43c3..dcb1940fb 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/components.json
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/components.json
@@ -3,12 +3,11 @@
"style": "new-york",
"typescript": true,
"tailwind": {
- "config": "tailwind.config.mjs",
+ "config": "",
"css": "src/assets/index.css",
"baseColor": "slate",
"cssVariables": true
},
- "framework": "vite",
"aliases": {
"components": "@vben-core/shadcn-ui/components",
"utils": "@vben-core/shared/utils"
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json b/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
index dacb41abf..49513aa34 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/package.json
@@ -1,8 +1,6 @@
{
"name": "@vben-core/shadcn-ui",
- "version": "5.6.0",
- "#main": "./dist/index.mjs",
- "#module": "./dist/index.mjs",
+ "version": "5.7.0",
"homepage": "https://github.com/vbenjs/vue-vben-admin",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": {
@@ -12,41 +10,41 @@
},
"license": "MIT",
"type": "module",
- "scripts": {
- "#build": "pnpm unbuild",
- "#prepublishOnly": "npm run build"
- },
"files": [
- "dist"
+ "components.json",
+ "src"
],
"sideEffects": [
"**/*.css"
],
"main": "./src/index.ts",
"module": "./src/index.ts",
+ "types": "./src/index.ts",
"exports": {
".": {
"types": "./src/index.ts",
"development": "./src/index.ts",
- "default": "./src/index.ts",
- "//default": "./dist/index.mjs"
+ "default": "./src/index.ts"
}
},
"publishConfig": {
"exports": {
".": {
+ "types": "./src/index.ts",
+ "development": "./src/index.ts",
"default": "./src/index.ts"
}
}
},
"dependencies": {
+ "@lucide/vue": "catalog:",
"@vben-core/composables": "workspace:*",
+ "@vben-core/design": "workspace:*",
"@vben-core/icons": "workspace:*",
"@vben-core/shared": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "catalog:",
"class-variance-authority": "catalog:",
- "lucide-vue-next": "catalog:",
"reka-ui": "catalog:",
"vee-validate": "catalog:",
"vue": "catalog:"
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/postcss.config.mjs b/apps/vben5/packages/@core/ui-kit/shadcn-ui/postcss.config.mjs
deleted file mode 100644
index 3d8070455..000000000
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/postcss.config.mjs
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from '@vben/tailwind-config/postcss';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/assets/index.css b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/assets/index.css
new file mode 100644
index 000000000..cbd9be68b
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/assets/index.css
@@ -0,0 +1 @@
+@reference "@vben/tailwind-config/theme";
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index 2b2ed2f2f..651376df7 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -60,8 +60,7 @@ const rootStyle = computed(() => {
+ variant="ghost"
+ @click="handleClick">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
index 5659ec8f3..f161b0393 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@@ -22,22 +22,19 @@ function handleClick(index: number, path?: string) {
+ :key="`${item.path}-${item.title}-${index}`">
+ @click.stop="handleClick(index, item.path)">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible.vue
new file mode 100644
index 000000000..237eb5b1d
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible.vue
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/index.ts
new file mode 100644
index 000000000..8563a7e59
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/index.ts
@@ -0,0 +1,4 @@
+export { default as VbenCollapsibleParams } from './collapsible-params.vue';
+export { default as VbenCollapsible } from './collapsible.vue';
+
+export * from './type';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/type.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/type.ts
new file mode 100644
index 000000000..f2fcffdf3
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/collapsible/type.ts
@@ -0,0 +1,22 @@
+export interface CollapsibleParamsProps {
+ defaultOpen?: boolean;
+ maxHeight?: number | string;
+ params: CollapsibleParamSchema[];
+ visibleCount?: number;
+}
+
+export interface CollapsibleParamOption {
+ [key: string]: any;
+ max?: number;
+ min?: number;
+ precision?: number;
+ step?: number;
+ type?: 'exponential' | 'number' | 'select' | 'string';
+}
+
+export interface CollapsibleParamSchema {
+ defaultValue?: number | number[] | string | string[];
+ description: string;
+ key: string;
+ option: CollapsibleParamOption;
+}
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
index 009f267ef..d44c5bb66 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -9,7 +9,7 @@ import type { ClassType } from '@vben-core/typings';
import type { IContextMenuItem } from './interface';
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useForwardPropsEmits } from 'reka-ui';
@@ -35,6 +35,14 @@ const props = defineProps<
const emits = defineEmits();
+const NATIVE_CONTEXT_SELECTORS = [
+ 'input',
+ 'textarea',
+ 'select',
+ '[contenteditable]:not([contenteditable="false"])',
+ '.allow-native-context',
+].join(', ');
+
const delegatedProps = computed(() => {
const {
class: _cls,
@@ -59,18 +67,39 @@ function handleClick(menu: IContextMenuItem) {
}
menu?.handler?.(props.handlerData);
}
+
+const triggerRef = ref(null);
+
+function onContextMenuCapture(e: MouseEvent) {
+ if ((e.target as HTMLElement).closest(NATIVE_CONTEXT_SELECTORS)) {
+ e.stopPropagation();
+ }
+}
+
+onMounted(() => {
+ triggerRef.value?.addEventListener('contextmenu', onContextMenuCapture, {
+ capture: true,
+ });
+});
+
+onUnmounted(() => {
+ triggerRef.value?.removeEventListener('contextmenu', onContextMenuCapture, {
+ capture: true,
+ });
+});
-
+ class="side-content z-popup">
+ @click="handleClick(menu)">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-cell.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-cell.vue
new file mode 100644
index 000000000..bfa7c53e8
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-cell.vue
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-item.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-item.vue
new file mode 100644
index 000000000..677bb16c4
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-item.vue
@@ -0,0 +1,57 @@
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-row.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-row.vue
new file mode 100644
index 000000000..e236b1080
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions-row.vue
@@ -0,0 +1,107 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions.vue
new file mode 100644
index 000000000..5238d896c
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/descriptions.vue
@@ -0,0 +1,90 @@
+
+
+
+ >;
+
+export type DescriptionsLayout = 'horizontal' | 'vertical';
+
+export type DescriptionsSize = 'large' | 'middle' | 'small';
+
+/** 列数，可为固定数字或按断点配置 */
+export type DescriptionsColumn =
+ | number
+ | Partial>;
+
+/** 单项跨列，支持固定数字、'filled'（占满当前行剩余）或按断点配置 */
+export type DescriptionsItemSpan =
+ | 'filled'
+ | number
+ | Partial>;
+
+/** 可渲染内容：字符串/数字/渲染函数/组件 */
+export type DescriptionsRenderNode = (() => any) | Component | number | string;
+
+export interface DescriptionsItemType {
+ /** 内容 */
+ content?: DescriptionsRenderNode;
+ /** 内容样式 */
+ contentStyle?: CSSProperties;
+ /** 唯一 key */
+ key?: number | string;
+ /** 标签 */
+ label?: DescriptionsRenderNode;
+ /** 标签样式 */
+ labelStyle?: CSSProperties;
+ /** 跨列 */
+ span?: DescriptionsItemSpan;
+}
+
+export interface DescriptionsProps {
+ /** 是否展示边框 */
+ bordered?: boolean;
+ class?: any;
+ /** 是否显示冒号（仅非 bordered 的水平布局生效） */
+ colon?: boolean;
+ /** 一行的列数 */
+ column?: DescriptionsColumn;
+ /** 统一的内容样式 */
+ contentStyle?: CSSProperties;
+ /** 操作区域，位于标题右侧 */
+ extra?: string;
+ /** 数据驱动的列表项；不传则读取默认插槽中的 VbenDescriptionsItem */
+ items?: DescriptionsItemType[];
+ /** 统一的标签样式 */
+ labelStyle?: CSSProperties;
+ /** 布局方式 */
+ layout?: DescriptionsLayout;
+ /** 尺寸 */
+ size?: DescriptionsSize;
+ /** 标题 */
+ title?: string;
+}
+
+export interface DescriptionsItemProps {
+ content?: DescriptionsRenderNode;
+ contentStyle?: CSSProperties;
+ label?: DescriptionsRenderNode;
+ labelStyle?: CSSProperties;
+ span?: DescriptionsItemSpan;
+}
+
+/** 归一化后的内部项，span 已解析为数字 */
+export interface InternalDescriptionsItem {
+ _index?: number;
+ class?: string;
+ content?: DescriptionsRenderNode;
+ contentStyle?: CSSProperties;
+ filled?: boolean;
+ key?: number | string;
+ label?: DescriptionsRenderNode;
+ labelStyle?: CSSProperties;
+ span?: number;
+ style?: CSSProperties;
+}
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/use-descriptions.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/use-descriptions.ts
new file mode 100644
index 000000000..2c1f04f41
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/use-descriptions.ts
@@ -0,0 +1,216 @@
+import type { VNode } from 'vue';
+
+import type {
+ DescriptionsBreakpoint,
+ DescriptionsColumn,
+ DescriptionsItemType,
+ InternalDescriptionsItem,
+ ScreenMap,
+} from './types';
+
+import { Comment, computed, Fragment } from 'vue';
+
+import { useBreakpoints } from '@vueuse/core';
+
+/** 默认列数映射 */
+export const DEFAULT_COLUMN_MAP: Record = {
+ lg: 3,
+ md: 3,
+ sm: 2,
+ xl: 3,
+ xs: 1,
+ xxl: 3,
+ xxxl: 4,
+};
+
+/** 由大到小的断点顺序，matchScreen 按此顺序取第一个命中的值 */
+const RESPONSIVE_ARRAY: DescriptionsBreakpoint[] = [
+ 'xxxl',
+ 'xxl',
+ 'xl',
+ 'lg',
+ 'md',
+ 'sm',
+ 'xs',
+];
+
+/** 断点像素值 */
+const BREAKPOINT_PX = {
+ sm: 576,
+ md: 768,
+ lg: 992,
+ xl: 1200,
+ xxl: 1600,
+ xxxl: 2000,
+};
+
+/**
+ * 在给定的断点配置中，按由大到小的顺序取第一个命中的值
+ */
+export function matchScreen(
+ screens: ScreenMap,
+ screenSizes?: Partial>,
+): number | undefined {
+ if (!screenSizes) return undefined;
+ for (const breakpoint of RESPONSIVE_ARRAY) {
+ if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) {
+ return screenSizes[breakpoint];
+ }
+ }
+ return undefined;
+}
+
+/**
+ * 监听视口宽度，返回当前命中的断点集合
+ */
+export function useScreens() {
+ const breakpoints = useBreakpoints(BREAKPOINT_PX);
+ return computed(() => ({
+ lg: breakpoints.lg.value,
+ md: breakpoints.md.value,
+ sm: breakpoints.sm.value,
+ xl: breakpoints.xl.value,
+ xs: !breakpoints.sm.value,
+ xxl: breakpoints.xxl.value,
+ xxxl: breakpoints.xxxl.value,
+ }));
+}
+
+/**
+ * 计算最终列数：固定数字直接返回，否则按断点解析
+ */
+export function resolveColumn(
+ column: DescriptionsColumn | undefined,
+ screens: ScreenMap,
+): number {
+ if (typeof column === 'number') return column;
+ return matchScreen(screens, { ...DEFAULT_COLUMN_MAP, ...column }) ?? 3;
+}
+
+/**
+ * 归一化列表项：将 span 解析为数字，'filled' 标记为 filled
+ */
+export function normalizeItems(
+ items: DescriptionsItemType[],
+ screens: ScreenMap,
+): InternalDescriptionsItem[] {
+ return items.map((item, index) => {
+ const { span, ...rest } = item;
+ if (span === 'filled') {
+ return { ...rest, _index: index, filled: true };
+ }
+ return {
+ ...rest,
+ _index: index,
+ span: typeof span === 'number' ? span : matchScreen(screens, span),
+ };
+ });
+}
+
+/**
+ * 行装箱算法：根据列数与各项 span 将列表项拆分为多行，
+ * 并补齐每行最后一项以占满列数。移植自 antdv-next useRow。
+ */
+export function calcRows(
+ items: InternalDescriptionsItem[],
+ column: number,
+): InternalDescriptionsItem[][] {
+ let rows: InternalDescriptionsItem[][] = [];
+ let tmpRow: InternalDescriptionsItem[] = [];
+ let count = 0;
+
+ items.filter(Boolean).forEach((item) => {
+ const { filled, ...rest } = item;
+ // filled：占满当前行剩余，并立即换行
+ if (filled) {
+ tmpRow.push(rest);
+ rows.push(tmpRow);
+ tmpRow = [];
+ count = 0;
+ return;
+ }
+
+ const restSpan = column - count;
+ count += item.span || 1;
+
+ if (count >= column) {
+ // 超出列数时，将当前项 span 收敛为剩余列数，避免溢出
+ tmpRow.push(count > column ? { ...rest, span: restSpan } : rest);
+ rows.push(tmpRow);
+ tmpRow = [];
+ count = 0;
+ } else {
+ tmpRow.push(rest);
+ }
+ });
+
+ if (tmpRow.length > 0) rows.push(tmpRow);
+
+ // 补齐：若一行总 span 不足列数，扩展最后一项
+ rows = rows.map((row) => {
+ const total = row.reduce((acc, item) => acc + (item.span || 1), 0);
+ if (total < column) {
+ const last = row[row.length - 1];
+ if (last) {
+ last.span = column - (total - (last.span || 1));
+ }
+ }
+ return row;
+ });
+
+ return rows;
+}
+
+/** 标记组件类型为 DescriptionsItem，便于从插槽 vnode 中识别 */
+export const DESCRIPTIONS_ITEM_NAME = 'VbenDescriptionsItem';
+
+function isItemVNode(node: VNode): boolean {
+ const type = node.type as any;
+ return (
+ !!type &&
+ (type.__isDescriptionsItem === true || type.name === DESCRIPTIONS_ITEM_NAME)
+ );
+}
+
+function flattenVNodes(nodes: VNode[]): VNode[] {
+ const result: VNode[] = [];
+ for (const node of nodes) {
+ if (node.type === Fragment && Array.isArray(node.children)) {
+ result.push(...flattenVNodes(node.children as VNode[]));
+ } else if (node.type !== Comment) {
+ result.push(node);
+ }
+ }
+ return result;
+}
+
+/**
+ * 从默认插槽的 vnode 中解析出列表项，支持
+ * content 写法
+ */
+export function parseItemsFromSlot(nodes: VNode[]): DescriptionsItemType[] {
+ return flattenVNodes(nodes)
+ .filter((node) => isItemVNode(node))
+ .map((node) => {
+ const props = (node.props ?? {}) as Record;
+ const children = (node.children ?? {}) as Record;
+ const labelSlot =
+ typeof children.label === 'function' ? children.label : undefined;
+ const contentDefaultSlot =
+ typeof children.default === 'function' ? children.default : undefined;
+ const contentSlot =
+ typeof children.content === 'function'
+ ? children.content
+ : contentDefaultSlot;
+ return {
+ class: props.class,
+ content: contentSlot ?? props.content,
+ contentStyle: props.contentStyle ?? props['content-style'],
+ key: node.key ?? undefined,
+ label: labelSlot ?? props.label,
+ labelStyle: props.labelStyle ?? props['label-style'],
+ span: props.span,
+ style: props.style,
+ } as DescriptionsItemType;
+ });
+}
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
index b59c8176f..3a24dd8b3 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
@@ -35,9 +35,8 @@ function handleItemClick(menu: IDropdownMenuItem) {
+ class="text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground mb-1 cursor-pointer"
+ @click="handleItemClick(menu)">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
index 6382426e5..b6694c851 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
@@ -34,15 +34,13 @@ function handleItemClick(value: string) {
? 'bg-accent text-accent-foreground'
: ''
"
- class="mb-1 cursor-pointer text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground"
- @click="handleItemClick(menu.value)"
- >
+ class="text-foreground/80 data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground mb-1 cursor-pointer"
+ @click="handleItemClick(menu.value)">
({ default: false });
+ class="bg-accent outline-heavy! relative grid outline!">
- {{ tab.label }}
+ class="hover:text-primary z-20 size-full inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap disabled:pointer-events-none disabled:opacity-50">
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
index 80e4c9ddb..4c9c45142 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -23,14 +23,12 @@ const forwardedProps = useForwardProps(delegatedProps);
v-bind="forwardedProps"
:class="
cn(
- 'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--reka-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
+ 'absolute bottom-0 left-0 z-10 size-full translate-x-(--reka-tabs-indicator-position) rounded-full py-1 transition-[width,transform] duration-300',
props.class,
)
- "
- >
+ ">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
index 238a9f426..dfc63d4f8 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spine-text/spine-text.vue
@@ -16,7 +16,7 @@ const style = computed(() => {
});
-
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/action-item.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/action-item.vue
new file mode 100644
index 000000000..a6c9d7fc9
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/action-item.vue
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/index.ts
new file mode 100644
index 000000000..bf8950294
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/index.ts
@@ -0,0 +1,3 @@
+export { default as VbenTableAction } from './table-action.vue';
+
+export type * from './types';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue
new file mode 100644
index 000000000..4e264ec91
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/table-action.vue
@@ -0,0 +1,206 @@
+
+
+
+
-
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
index 537b75f1b..b7a9f6c43 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
@@ -1,27 +1,26 @@
-
+ :class="`justify-${buttonAlign}`">
+ variant="outline"
+ @click="handleCancel">
{{ cancelText || $t('cancel') }}
@@ -198,8 +204,7 @@ async function handleOpenChange(val: boolean) {
+ @click="handleConfirm">
{{ confirmText || $t('confirm') }}
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
index 365a2e4a0..8420bb9cb 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/__tests__/drawer-api.test.ts
@@ -13,21 +13,20 @@ vi.mock('@vben-core/shared/store', () => {
return this._state;
}
private _state: DrawerState;
+ private subscribers: Array<(state: DrawerState) => void> = [];
- private options: any;
-
- constructor(initialState: DrawerState, options: any) {
+ constructor(initialState: DrawerState) {
this._state = initialState;
- this.options = options;
- }
-
- batch(cb: () => void) {
- cb();
}
setState(fn: (prev: DrawerState) => DrawerState) {
this._state = fn(this._state);
- this.options.onUpdate();
+ this.subscribers.forEach((sub) => sub(this._state));
+ }
+
+ subscribe(fn: (state: DrawerState) => void) {
+ this.subscribers.push(fn);
+ return { unsubscribe: () => {} };
}
},
};
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
index a4a3ac4aa..f5d9f3365 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer-api.ts
@@ -56,23 +56,18 @@ export class DrawerApi {
title: '',
};
- this.store = new Store(
- {
- ...defaultState,
- ...storeState,
- },
- {
- onUpdate: () => {
- const state = this.store.state;
- if (state?.isOpen === this.state?.isOpen) {
- this.state = state;
- } else {
- this.state = state;
- this.api.onOpenChange?.(!!state?.isOpen);
- }
- },
- },
- );
+ this.store = new Store({
+ ...defaultState,
+ ...storeState,
+ });
+
+ this.store.subscribe((state) => {
+ const prevIsOpen = this.state?.isOpen;
+ this.state = state;
+ if (state?.isOpen !== prevIsOpen) {
+ this.api.onOpenChange?.(!!state?.isOpen);
+ }
+ });
this.state = this.store.state;
this.api = {
onBeforeClose,
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
index 89cd3b5f8..1b2ba4e39 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.ts
@@ -75,7 +75,7 @@ export interface DrawerProps {
*/
headerClass?: ClassType;
/**
- * 弹窗是否显示
+ * 抽屉加载状态
* @default false
*/
loading?: boolean;
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
index ceca51e77..d76933e98 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/drawer.vue
@@ -180,16 +180,20 @@ const getForceMount = computed(() => {
+ @update:open="() => drawerApi?.close()">
{
@interact-outside="interactOutside"
@open-auto-focus="handerOpenAutoFocus"
@opened="() => drawerApi?.onOpened()"
- @pointer-down-outside="pointerDownOutside"
- >
+ @pointer-down-outside="pointerDownOutside">
+ ">
+ class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
{{ title }}
@@ -265,8 +265,7 @@ const getForceMount = computed(() => {
v-if="closable && closeIconPlacement === 'right'"
as-child
:disabled="submitting"
- class="ml-[2px] cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary"
- >
+ class="ml-0.5 cursor-pointer rounded-full opacity-80 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
{
v-if="showCancelButton"
variant="ghost"
:disabled="submitting"
- @click="() => drawerApi?.onCancel()"
- >
+ @click="() => drawerApi?.onCancel()">
{{ cancelText || $t('cancel') }}
@@ -319,8 +315,7 @@ const getForceMount = computed(() => {
:is="components.PrimaryButton || VbenButton"
v-if="showConfirmButton"
:loading="confirmLoading || submitting"
- @click="() => drawerApi?.onConfirm()"
- >
+ @click="() => drawerApi?.onConfirm()">
{{ confirmText || $t('confirm') }}
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
index 86555e3a1..46ae4fd58 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/drawer/use-drawer.ts
@@ -14,13 +14,19 @@ import {
ref,
} from 'vue';
-import { useStore } from '@vben-core/shared/store';
+import { usePreferences } from '@vben-core/preferences';
+import { useSelector } from '@vben-core/shared/store';
import { DrawerApi } from './drawer-api';
import VbenDrawer from './drawer.vue';
const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
+const { globalEscapeShortcutKey } = usePreferences();
+
+/**
+ * 默认配置
+ */
const DEFAULT_DRAWER_PROPS: Partial = {};
export function setDefaultDrawerProps(props: Partial) {
@@ -33,6 +39,10 @@ export function useVbenDrawer<
// Drawer一般会抽离出来，所以如果有传入 connectedComponent，则表示为外部调用，与内部组件进行连接
// 外部的Drawer通过provide/inject传递api
+ const defaultOptions = {
+ closeOnPressEscape: globalEscapeShortcutKey.value, // 全局Esc快捷键配置
+ ...options,
+ };
const { connectedComponent } = options;
if (connectedComponent) {
const extendedApi = reactive({});
@@ -45,7 +55,7 @@ export function useVbenDrawer<
// 不能用 Object.assign,会丢失 api 的原型函数
Object.setPrototypeOf(extendedApi, api);
},
- options,
+ options: defaultOptions,
async reCreateDrawer() {
isDrawerReady.value = false;
await nextTick();
@@ -79,7 +89,7 @@ export function useVbenDrawer<
const mergedOptions = {
...DEFAULT_DRAWER_PROPS,
...injectData.options,
- ...options,
+ ...defaultOptions,
} as DrawerApiOptions;
mergedOptions.onOpenChange = (isOpen: boolean) => {
@@ -99,7 +109,7 @@ export function useVbenDrawer<
const extendedApi: ExtendedDrawerApi = api as never;
extendedApi.useStore = (selector) => {
- return useStore(api.store, selector);
+ return useSelector(api.store, selector);
};
const Drawer = defineComponent(
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
index 1edd477e7..5067f5fa5 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/__tests__/modal-api.test.ts
@@ -12,21 +12,20 @@ vi.mock('@vben-core/shared/store', () => {
return this._state;
}
private _state: ModalState;
+ private subscribers: Array<(state: ModalState) => void> = [];
- private options: any;
-
- constructor(initialState: ModalState, options: any) {
+ constructor(initialState: ModalState) {
this._state = initialState;
- this.options = options;
- }
-
- batch(cb: () => void) {
- cb();
}
setState(fn: (prev: ModalState) => ModalState) {
this._state = fn(this._state);
- this.options.onUpdate();
+ this.subscribers.forEach((sub) => sub(this._state));
+ }
+
+ subscribe(fn: (state: ModalState) => void) {
+ this.subscribers.push(fn);
+ return { unsubscribe: () => {} };
}
},
};
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
index f60870b3f..9bfda4e90 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -46,6 +46,7 @@ export class ModalApi {
contentClass: '',
destroyOnClose: true,
draggable: false,
+ overflow: false,
footer: true,
footerClass: '',
fullscreen: false,
@@ -62,25 +63,19 @@ export class ModalApi {
animationType: 'slide',
};
- this.store = new Store(
- {
- ...defaultState,
- ...storeState,
- },
- {
- onUpdate: () => {
- const state = this.store.state;
-
- // 每次更新状态时，都会调用 onOpenChange 回调函数
- if (state?.isOpen === this.state?.isOpen) {
- this.state = state;
- } else {
- this.state = state;
- this.api.onOpenChange?.(!!state?.isOpen);
- }
- },
- },
- );
+ this.store = new Store({
+ ...defaultState,
+ ...storeState,
+ });
+
+ this.store.subscribe((state) => {
+ // 每次更新状态时，都会调用 onOpenChange 回调函数
+ const prevIsOpen = this.state?.isOpen;
+ this.state = state;
+ if (state?.isOpen !== prevIsOpen) {
+ this.api.onOpenChange?.(!!state?.isOpen);
+ }
+ });
this.state = this.store.state;
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
index fa41344ee..5a7a50286 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -1,6 +1,6 @@
import type { Component, Ref } from 'vue';
-import type { MaybePromise } from '@vben-core/typings';
+import type { ClassType, MaybePromise } from '@vben-core/typings';
import type { ModalApi } from './modal-api';
@@ -30,7 +30,7 @@ export interface ModalProps {
*/
centered?: boolean;
- class?: string;
+ class?: ClassType;
/**
* 是否显示右上角的关闭按钮
@@ -60,7 +60,7 @@ export interface ModalProps {
* 确定按钮文字
*/
confirmText?: string;
- contentClass?: string;
+ contentClass?: ClassType;
/**
* 弹窗描述
*/
@@ -79,7 +79,7 @@ export interface ModalProps {
* @default true
*/
footer?: boolean;
- footerClass?: string;
+ footerClass?: ClassType;
/**
* 是否全屏
* @default false
@@ -95,9 +95,9 @@ export interface ModalProps {
* @default true
*/
header?: boolean;
- headerClass?: string;
+ headerClass?: ClassType;
/**
- * 弹窗是否显示
+ * 弹窗加载状态
* @default false
*/
loading?: boolean;
@@ -110,6 +110,11 @@ export interface ModalProps {
* 是否自动聚焦
*/
openAutoFocus?: boolean;
+ /**
+ * 拖动范围是否可以超出可视区
+ * @default false
+ */
+ overflow?: boolean;
/**
* 弹窗遮罩模糊效果
*/
diff --git a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index e93e4c12d..e36d9f15b 100644
--- a/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/apps/vben5/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -12,11 +12,7 @@ import {
watch,
} from 'vue';
-import {
- useIsMobile,
- usePriorityValues,
- useSimpleLocale,
-} from '@vben-core/composables';
+import { usePriorityValues, useSimpleLocale } from '@vben-core/composables';
import { Expand, Shrink } from '@vben-core/icons';
import {
Dialog,
@@ -57,14 +53,13 @@ const headerRef = ref();
// @ts-expect-error unused
const footerRef = ref();
-const id = useId();
-
-provide('DISMISSABLE_MODAL_ID', id);
-
const { $t } = useSimpleLocale();
-const { isMobile } = useIsMobile();
const state = props.modalApi?.useStore?.();
+const id = useId();
+// 遮罩层通过该 id 标记，仅当点击发生在当前 Modal 的遮罩上时才允许关闭
+provide('DISMISSABLE_MODAL_ID', id);
+
const {
appendToMain,
bordered,
@@ -81,6 +76,7 @@ const {
description,
destroyOnClose,
draggable,
+ overflow,
footer: showFooter,
footerClass,
fullscreen,
@@ -100,7 +96,7 @@ const {
zIndex,
} = usePriorityValues(props, state);
-const shouldFullscreen = computed(() => fullscreen.value || isMobile.value);
+const shouldFullscreen = computed(() => fullscreen.value);
const shouldDraggable = computed(
() => draggable.value && !shouldFullscreen.value && header.value,
@@ -122,6 +118,7 @@ const { dragging, transform } = useModalDraggable(
shouldDraggable,
getAppendTo,
shouldCentered,
+ overflow,
);
const firstOpened = ref(false);
@@ -214,6 +211,10 @@ function handleFocusOutside(e: Event) {
e.stopPropagation();
}
+function handleCloseAutoFocus(_e: Event) {
+ // allow reka-ui to return focus to the trigger element on close
+}
+
const getForceMount = computed(() => {
return !unref(destroyOnClose) && unref(firstOpened);
});
@@ -233,36 +234,37 @@ function handleClosed() {
+ class="relative flex shrink-0 items-center">
{{ text }}
@@ -69,8 +68,7 @@ const rootStyle = computed(() => {
+ class="border-background absolute right-0 bottom-0 size-3 rounded-full border-2">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
index 8da6cde42..2035952de 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
@@ -32,11 +32,10 @@ const { handleClick, visible } = useBackTop(props);
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/index.ts
new file mode 100644
index 000000000..1003a73a3
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/index.ts
@@ -0,0 +1,4 @@
+export { default as VbenDescriptionsItem } from './descriptions-item.vue';
+export { default as VbenDescriptions } from './descriptions.vue';
+
+export * from './types';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/types.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/types.ts
new file mode 100644
index 000000000..0dd11c697
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/descriptions/types.ts
@@ -0,0 +1,93 @@
+import type { Component, CSSProperties } from 'vue';
+
+/** 响应式断点，与 antdv-next 保持一致 */
+export type DescriptionsBreakpoint =
+ | 'lg'
+ | 'md'
+ | 'sm'
+ | 'xl'
+ | 'xs'
+ | 'xxl'
+ | 'xxxl';
+
+/** 当前命中的断点集合 */
+export type ScreenMap = Partial
+
+
+
+ {{ title }}
+
+
+ {{ extra }}
+
+
+ @click="collapsed = !collapsed">
{{ collapsed }}
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
index 0bca09193..ee73576f4 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -5,21 +5,33 @@ import { VbenAvatar } from '../avatar';
interface Props {
/**
- * @zh_CN 是否收起文本
+ * @zh_CN 是否收起文本；布局状态，侧边栏收起时隐藏文字。
*/
collapsed?: boolean;
/**
* @zh_CN Logo 图片适应方式
*/
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+ /**
+ * @zh_CN logo高度， 只在 logoMode=full时失效
+ */
+ fullLogoHeight?: number | string;
/**
* @zh_CN Logo 跳转地址
*/
href?: string;
+ /**
+ * @zh_CN logo 展示类型，icon 图标模式， full 铺满logo区域
+ */
+ logoMode?: 'full' | 'icon';
/**
* @zh_CN Logo 图片大小
*/
logoSize?: number;
+ /**
+ * @zh_CN Logo 是否展示文本
+ */
+ showText?: boolean;
/**
* @zh_CN Logo 图标
*/
@@ -45,11 +57,14 @@ defineOptions({
const props = withDefaults(defineProps(), {
collapsed: false,
href: 'javascript:void 0',
+ logoMode: 'icon',
logoSize: 32,
+ fullLogoHeight: 42,
src: '',
srcDark: '',
theme: 'light',
fit: 'cover',
+ showText: true,
});
/**
@@ -63,26 +78,65 @@ const logoSrc = computed(() => {
// 否则使用默认的 src
return props.src;
});
+
+/**
+ * @zh_CN 是否铺满容器显示log
+ */
+const shouldUseFullLogo = computed(() => {
+ return props.logoMode === 'full' && !props.collapsed;
+});
+
+/**
+ * @zh_CN 根据配置展示 logo text
+ */
+const shouldShowText = computed(() => {
+ return (
+ props.showText &&
+ !props.collapsed &&
+ !shouldUseFullLogo.value &&
+ !!props.text
+ );
+});
+
+/**
+ * @zh_CN full 模式下logo的样式
+ */
+const fullLogoStyle = computed(() => ({
+ height:
+ typeof props.fullLogoHeight === 'number'
+ ? `${props.fullLogoHeight}px`
+ : props.fullLogoHeight,
+ objectFit: props.fit,
+}));
+ class="transition-transform duration-300">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
index 524b55753..54f51883b 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/full-screen/full-screen.vue
@@ -12,20 +12,19 @@ const { isFullscreen, toggle } = useFullscreen();
// 重新检查全屏状态
isFullscreen.value = !!(
document.fullscreenElement ||
- // @ts-ignore
+ // @ts-expect-error - vendor fullscreen APIs are not included in the standard DOM typings
document.webkitFullscreenElement ||
- // @ts-ignore
+ // @ts-expect-error - vendor fullscreen APIs are not included in the standard DOM typings
document.mozFullScreenElement ||
- // @ts-ignore
+ // @ts-expect-error - vendor fullscreen APIs are not included in the standard DOM typings
document.msFullscreenElement
);
-
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
index 47ddad84c..35730203d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -47,8 +47,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
+ class="side-content z-popup">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
index 6b2c7fc17..7e90a2b3e 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/index.ts
@@ -3,8 +3,10 @@ export * from './back-top';
export * from './breadcrumb';
export * from './button';
export * from './checkbox';
+export * from './collapsible';
export * from './context-menu';
export * from './count-to-animator';
+export * from './descriptions';
export * from './dropdown-menu';
export * from './expandable-arrow';
export * from './full-screen';
@@ -20,4 +22,5 @@ export * from './segmented';
export * from './select';
export * from './spine-text';
export * from './spinner';
+export * from './table-action';
export * from './tooltip';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
index e9ff3fbf0..d7be867cf 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@@ -34,11 +34,10 @@ const show = ref(false);
v-bind="$attrs"
v-model="modelValue"
:class="cn(props.class)"
- :type="show ? 'text' : 'password'"
- />
+ :type="show ? 'text' : 'password'" />
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
index 4b0be2019..7b993a2ac 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/input-password/password-strength.vue
@@ -51,15 +51,13 @@ function checkPasswordStrength(password: string) {
+
+ class="bg-heavy dark:bg-input-background relative mr-1 h-1.5 w-1/5 rounded-sm last:mr-0">
+ class="absolute left-0 h-full w-0 rounded-sm transition-all duration-500">
+ {{ tab.label }}
+
+
+ {{ tab.label }}
+
+ class="bg-background text-foreground inline-flex size-full items-center justify-center rounded-md text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
index 24b8ea2a9..46c7efa10 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/select/select.vue
@@ -35,8 +35,7 @@ function handleClear() {
@click.stop.prevent="handleClear"
v-if="allowClear && modelValue"
data-clear-button
- class="mr-1 size-4 cursor-pointer opacity-50 hover:opacity-100"
- />
+ class="mr-1 size-4 cursor-pointer opacity-50 hover:opacity-100" />
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/action-dropdown-item.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/action-dropdown-item.vue
new file mode 100644
index 000000000..4b1653516
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/action-dropdown-item.vue
@@ -0,0 +1,112 @@
+
+
+
+
+
+ @transitionend="onTransitionEnd">
+ class="bg-primary absolute block size-4 origin-[50%_50%] scale-75 rounded-full opacity-30">
-
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
index 7e5ce3bcb..7272c39ae 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/spinner/spinner.vue
@@ -63,20 +63,18 @@ function onTransitionEnd() {
{{ text }}
+ {{ text }}
+ @transitionend="onTransitionEnd">
+ class="loader before:bg-primary/50 after:bg-primary relative size-12 before:absolute before:top-15 before:left-0 before:h-1.25 before:w-12 before:rounded-full before:content-[''] after:absolute after:top-0 after:left-0 after:h-full after:w-full after:rounded after:content-['']">
+
+
+ {{ action.popConfirm.title ?? $t('confirmTitle') }}
+
+
+
+ {{ action.popConfirm.cancelText ?? $t('cancel') }}
+
+
+ {{ action.popConfirm.okText ?? $t('confirm') }}
+
+
+
+ {{ action.popConfirm.title ?? 'Are you sure?' }}
+
+
+
+ {{ action.popConfirm.cancelText ?? 'Cancel' }}
+
+
+ {{ action.popConfirm.okText ?? 'OK' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.tooltipContent }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/types.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/types.ts
new file mode 100644
index 000000000..428961c88
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/table-action/types.ts
@@ -0,0 +1,75 @@
+import type { ButtonVariants } from '../../ui';
+
+import { VbenIcon } from '../icon';
+
+/** 权限码：单个或多个，配合注入的 hasPermission 判断 */
+export type TableActionAuth = string | string[];
+
+/** 操作按钮提示 */
+export interface TableActionTooltip {
+ content: string;
+ side?: 'bottom' | 'left' | 'right' | 'top';
+}
+
+/** 气泡确认框配置 */
+export interface TableActionPopConfirm {
+ /** 取消按钮文案 */
+ cancelText?: string;
+ /** 确认回调；未提供时回退到 action.onClick */
+ confirm?: () => void;
+ /** 确认按钮文案 */
+ okText?: string;
+ /** 提示标题 */
+ title?: string;
+}
+
+export interface ActionItem {
+ /** 权限码，配合注入的 hasPermission 过滤 */
+ auth?: TableActionAuth;
+ /** 自定义类名 */
+ class?: any;
+ /** 危险操作（红色文字） */
+ danger?: boolean;
+ /** 是否禁用 */
+ disabled?: boolean;
+ /** 图标组件 */
+ icon?: typeof VbenIcon.icon;
+ /** 是否显示：布尔或返回布尔的函数 */
+ ifShow?: (() => boolean) | boolean;
+ /** 唯一标识，点击回调可据此区分 */
+ key?: number | string;
+ /** 加载状态 */
+ loading?: boolean;
+ /** 点击回调 */
+ onClick?: () => void;
+ /** 气泡确认框 */
+ popConfirm?: TableActionPopConfirm;
+ /** 尺寸 */
+ size?: ButtonVariants['size'];
+ /** 文本 */
+ text?: string;
+ /** 提示：字符串或配置对象 */
+ tooltip?: string | TableActionTooltip;
+ /** 按钮样式变体 */
+ variant?: ButtonVariants['variant'];
+}
+
+export interface TableActionProps {
+ /** 主操作按钮 */
+ actions?: ActionItem[];
+ /** 对齐方式 */
+ align?: 'center' | 'end' | 'start';
+ /** 自定义类名 */
+ class?: any;
+ /** 按钮之间是否显示分割线 */
+ divider?: boolean;
+ /** “更多”下拉中的操作 */
+ dropdownActions?: ActionItem[];
+ /**
+ * 权限判断函数，返回 false 则隐藏对应 auth 的操作。
+ * 核心组件不依赖业务，由使用方注入（如 useAccess().hasAccessByCodes）。
+ */
+ hasPermission?: (auth?: TableActionAuth) => boolean;
+ /** “更多”按钮文案（提供时显示在图标右侧） */
+ moreText?: string;
+}
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
index d410a6e0a..0ee2dd5d9 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/help-tooltip.vue
@@ -1,7 +1,7 @@
-
+ class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm">
+
-
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
index 4752bac79..6d261f155 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
@@ -1,38 +1,36 @@
+ ">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
index f8033f5a8..165c7b92d 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
@@ -10,7 +10,10 @@ const forwarded = useForwardPropsEmits(props, emits);
-
-
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
index 42fb028b7..4c1799a65 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -3,10 +3,11 @@ import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
import type { ClassType } from '@vben-core/typings';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
import { cn } from '@vben-core/shared/utils';
+import { reactiveOmit } from '@vueuse/core';
import {
AlertDialogContent,
AlertDialogPortal,
@@ -15,6 +16,10 @@ import {
import AlertDialogOverlay from './AlertDialogOverlay.vue';
+defineOptions({
+ inheritAttrs: false,
+});
+
const props = withDefaults(
defineProps<
AlertDialogContentProps & {
@@ -32,11 +37,13 @@ const emits = defineEmits<
AlertDialogContentEmits & { close: []; closed: []; opened: [] }
>();
-const delegatedProps = computed(() => {
- const { class: _, modal: _modal, open: _open, ...delegated } = props;
+// reka-ui 的 AlertDialog 在 modal=true 时会将 body 设置 pointer-events:none，
+// 弹出层（如 Select 下拉框）会因此无法点击。这里通过在上层传入 :modal="false" 来
+// 避免该问题，同时通过 AlertDialogOverlay 组件自行渲染遮罩并锁定滚动。
+// AlertDialogOverlay 通过 v-if 控制挂载/卸载，其内部的 useScrollLock 会在组件
+// 卸载时自动解锁滚动。
- return delegated;
-});
+const delegatedProps = reactiveOmit(props, 'class');
const forwarded = useForwardPropsEmits(delegatedProps, emits);
@@ -61,25 +68,20 @@ defineExpose({
+ ">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
index 1aed44387..d928aa251 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,28 +1,27 @@
-
+ :class="cn('text-muted-foreground text-sm', props.class)">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogFooter.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 000000000..4c1128a99
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,19 @@
+
+
+
+
+ data-slot="alert-dialog-title"
+ v-bind="delegatedProps"
+ :class="cn('text-lg font-semibold', props.class)">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTrigger.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 000000000..fd535bfd3
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts
index ef14f2d58..88770f1ed 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/index.ts
@@ -3,4 +3,7 @@ export { default as AlertDialogAction } from './AlertDialogAction.vue';
export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
export { default as AlertDialogContent } from './AlertDialogContent.vue';
export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
index 0ea0ac052..aafe48a5a 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
@@ -1,27 +1,24 @@
-
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
index 9aac9312e..a37dbf27e 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
@@ -1,13 +1,30 @@
-
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
index bdf2df5d9..32a3d628c 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
@@ -7,5 +7,10 @@ const props = defineProps();
-
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
deleted file mode 100644
index 8aae81f49..000000000
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/avatar.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type { VariantProps } from 'class-variance-authority';
-
-import { cva } from 'class-variance-authority';
-
-export const avatarVariant = cva(
- 'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
- {
- variants: {
- shape: {
- circle: 'rounded-full',
- square: 'rounded-md',
- },
- size: {
- base: 'h-16 w-16 text-2xl',
- lg: 'h-32 w-32 text-5xl',
- sm: 'h-10 w-10 text-xs',
- },
- },
- },
-);
-
-export type AvatarVariants = VariantProps;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/index.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/index.ts
index fef6b019e..16705adce 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/index.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/index.ts
@@ -1,4 +1,3 @@
-export * from './avatar';
export { default as Avatar } from './Avatar.vue';
export { default as AvatarFallback } from './AvatarFallback.vue';
export { default as AvatarImage } from './AvatarImage.vue';
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
index 818d40452..6900afeaa 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/Badge.vue
@@ -1,18 +1,32 @@
- ;
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/Breadcrumb.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/Breadcrumb.vue
index eb065de9e..a018dde12 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/Breadcrumb.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/Breadcrumb.vue
@@ -1,11 +1,13 @@
-
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbEllipsis.vue
index b98f99e8b..c230a8f7a 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,21 +1,23 @@
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
index dff320419..80e960024 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbItem.vue
@@ -1,17 +1,17 @@
+ data-slot="breadcrumb-item"
+ :class="cn('inline-flex items-center gap-1.5', props.class)">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
index 30e68a8c7..7fc68b576 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,21 +1,26 @@
+ :class="cn('hover:text-foreground transition-colors', props.class)">
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
index 06a6eddd5..7b7e0b38c 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbList.vue
@@ -1,20 +1,22 @@
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogHeader.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 000000000..b475f6af0
--- /dev/null
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
index 6abf86c12..97e0ec27c 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
@@ -1,8 +1,30 @@
+
-
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
index fff8a21bd..7ab0fc255 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,30 +1,25 @@
+
+
diff --git a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
index cf6bff813..edd548b01 100644
--- a/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
+++ b/apps/vben5/packages/@core/ui-kit/shadcn-ui/src/ui/badge/badge.ts
@@ -3,23 +3,23 @@ import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
export const badgeVariants = cva(
- 'inline-flex items-center rounded-md border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+ 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
{
- defaultVariants: {
- variant: 'default',
- },
variants: {
variant: {
default:
- 'border-transparent bg-accent hover:bg-accent text-primary-foreground shadow',
- destructive:
- 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive-hover',
- outline: 'text-foreground',
+ 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
secondary:
- 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+ destructive:
+ 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+ outline:
+ 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
},
},
+ defaultVariants: {
+ variant: 'default',
+ },
},
);
-
export type BadgeVariants = VariantProps-
+ ">