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/views/examples/form/scroll-to-error-test.vue

@@ -141,7 +141,7 @@ async function fillPartialData() {
       </template>
 
       <div class="space-y-4">
-        <div class="rounded-sm bg-blue-50 p-4">
+        <div class="rounded-sm bg-blue-50 dark:bg-blue-900 p-4">
           <h3 class="mb-2 font-medium">测试说明：</h3>
           <ul class="list-inside list-disc space-y-1 text-sm">
             <li>所有验证方法在验证失败时都会自动滚动到第一个错误字段</li>

playground/src/views/examples/layout/col-page.vue

@@ -64,10 +64,12 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
     <Card class="ml-2" title="基本使用">
       <div class="flex flex-col gap-2">
         <div class="flex gap-2">
-          <Checkbox v-model="props.resizable">可拖动调整宽度</Checkbox>
-          <Checkbox v-model="props.splitLine">显示拖动分隔线</Checkbox>
-          <Checkbox v-model="props.splitHandle">显示拖动手柄</Checkbox>
-          <Checkbox v-model="props.leftCollapsible"> 左侧可折叠 </Checkbox>
+          <Checkbox v-model:checked="props.resizable">可拖动调整宽度</Checkbox>
+          <Checkbox v-model:checked="props.splitLine">显示拖动分隔线</Checkbox>
+          <Checkbox v-model:checked="props.splitHandle">显示拖动手柄</Checkbox>
+          <Checkbox v-model:checked="props.leftCollapsible">
+            左侧可折叠
+          </Checkbox>
         </div>
         <div class="flex items-center gap-2">
           <span>左侧最小宽度百分比：</span>