chore: 升级 shadcn-vue 组件到v4最新版 (#7972)

* fix: useStore is deprecated

* chore: update deps

* feat: 升级shadcn-ui v4

* fix: workbench style

* feat: 升级shadcn-ui v4 step2

* feat: 升级shadcn-ui v4 step3

* chore: 升级shadcn v4

* fix: pagination

* fix: dark style

* fix: doc import

* feat: 增加详情组件，参考 antdv-next

* docs: descriptions docs

* docs: Browser Support

* feat: add table action

* feat: icon use vbenIcon

* fix: type error

* fix: dropdown popConfirm

* feat: 使用默认的文字交互

* feat: 优化渲染性能

playground/src/adapter/vxe-table.ts

@@ -1,10 +1,13 @@
+import type { TableActionProps } from '@vben/common-ui';
 import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
 import type { Recordable } from '@vben/types';
 
 import type { ComponentPropsMap, ComponentType } from './component';
 
-import { h } from 'vue';
+import { defineComponent, h } from 'vue';
 
+import { useAccess } from '@vben/access';
+import { VbenTableAction as VbenTableActionCore } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { $te } from '@vben/locales';
 import {
@@ -156,9 +159,12 @@ setupVbenVxeTable({
           edit: {
             text: $t('common.edit'),
           },
+          detail: {
+            text: $t('common.detail'),
+          },
         };
         const operations: Array<Recordable<any>> = (
-          options || ['edit', 'delete']
+          options || ['edit', 'detail', 'delete']
         )
           .map((opt) => {
             if (isString(opt)) {
@@ -285,6 +291,29 @@ export const useVbenVxeGrid = <T extends Record<string, any>>(
   ...rest: Parameters<typeof useGrid<T, ComponentType, ComponentPropsMap>>
 ) => useGrid<T, ComponentType, ComponentPropsMap>(...rest);
 
+/**
+ * 表格操作按钮组件
+ *
+ * 在适配器内部统一注入权限判断（hasPermission），使用方无需再传入 `:has-permission`。
+ * 通过 action 的 `auth` 字段声明权限码，结合 `useAccess().hasAccessByCodes` 判断是否展示。
+ * 如需自定义权限逻辑，仍可显式传入 `:has-permission` 覆盖默认行为。
+ */
+export const VbenTableAction = defineComponent(
+  (props: TableActionProps, { attrs, slots }) => {
+    const { hasAccessByCodes } = useAccess();
+    function hasPermission(auth?: string | string[]) {
+      if (!auth) return true;
+      return hasAccessByCodes(Array.isArray(auth) ? auth : [auth]);
+    }
+    return () =>
+      h(VbenTableActionCore, { hasPermission, ...props, ...attrs }, slots);
+  },
+  {
+    name: 'VbenTableAction',
+    inheritAttrs: false,
+  },
+);
+
 export type OnActionClickParams<T = Recordable<any>> = {
   code: string;
   row: T;