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

2024-12-02 10:28:59 +08:00 · 2024-12-02 10:28:59 +08:00 · 4753f52101
parent 5e22a00da7 014e6d38a0
commit 4753f52101
20 changed files with 884 additions and 480 deletions
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@ -62,7 +62,7 @@ body:
      description: Before submitting the issue, please make sure you do the following
      # description: By submitting this issue, you agree to follow our [Code of Conduct](https://example.com).
      options:
-        - label: Read the [docs](https://anncwb.github.io/vue-vben-admin-doc/)
+        - label: Read the [docs](https://doc.vben.pro/)
          required: true
        - label: Ensure the code is up to date. (Some issues have been fixed in the latest version)
          required: true
--- a/.github/ISSUE_TEMPLATE/feature-request.yml
+++ b/.github/ISSUE_TEMPLATE/feature-request.yml
@ -62,7 +62,7 @@ body:
      label: Validations
      description: Before submitting the issue, please make sure you do the following
      options:
-        - label: Read the [docs](https://anncwb.github.io/vue-vben-admin-doc/)
+        - label: Read the [docs](https://doc.vben.pro/)
          required: true
        - label: Ensure the code is up to date. (Some issues have been fixed in the latest version)
          required: true
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/web-ele/src/views/demos/element/index.vue
@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { ref } from 'vue';
+
 import { Page } from '@vben/common-ui';

 import {
@ -6,6 +8,7 @@ import {
  ElCard,
  ElMessage,
  ElNotification,
+  ElSegmented,
  ElSpace,
  ElTable,
 } from 'element-plus';
@ -47,6 +50,10 @@ const tableData = [
  { prop1: '5', prop2: 'E' },
  { prop1: '6', prop2: 'F' },
 ];
+
+const segmentedValue = ref('Mon');
+
+const segmentedOptions = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 </script>

 <template>
@ -84,6 +91,14 @@ const tableData = [
        <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
      </ElSpace>
    </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Segmented </template>
+      <ElSegmented
+        v-model="segmentedValue"
+        :options="segmentedOptions"
+        size="large"
+      />
+    </ElCard>
    <ElCard class="mb-5">
      <ElTable :data="tableData" stripe>
        <ElTable.TableColumn label="测试列1" prop="prop1" />
--- a/docs/src/components/common-ui/vben-form.md
+++ b/docs/src/components/common-ui/vben-form.md
@ -419,7 +419,7 @@ export interface FormSchema<
  help?: string;
  /** 表单项 */
  label?: string;
-  // 自定义组件内部渲染
+  /** 自定义组件内部渲染  */
  renderComponentContent?: RenderComponentContentType;
  /** 字段规则 */
  rules?: FormSchemaRuleType;
@ -500,3 +500,20 @@ import { z } from '#/adapter/form';
            });
 }
 ```
+
+## Slots
+
+可以使用以下插槽在表单中插入自定义的内容
+
+| 插槽名        | 描述               |
+| ------------- | ------------------ |
+| reset-before  | 重置按钮之前的位置 |
+| submit-before | 提交按钮之前的位置 |
+| expand-before | 展开按钮之前的位置 |
+| expand-after  | 展开按钮之后的位置 |
+
+::: tip 字段插槽
+
+除了以上内置插槽之外，`schema`属性中每个字段的`fieldName`都可以作为插槽名称，这些字段插槽的优先级高于`component`定义的组件。也就是说，当提供了与`fieldName`同名的插槽时，这些插槽的内容将会作为这些字段的组件，此时`component`的值将会被忽略。
+
+:::
--- a/package.json
+++ b/package.json
@ -99,7 +99,7 @@
    "node": ">=20.10.0",
    "pnpm": ">=9.12.0"
  },
-  "packageManager": "pnpm@9.14.2",
+  "packageManager": "pnpm@9.14.4",
  "pnpm": {
    "peerDependencyRules": {
      "allowedVersions": {
--- a/packages/@core/base/design/src/design-tokens/dark.css
+++ b/packages/@core/base/design/src/design-tokens/dark.css
@ -58,6 +58,8 @@

  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
  --accent: 216 5% 19%;
+  --accent-dark: 240 0% 22%;
+  --accent-darker: 240 0% 26%;
  --accent-lighter: 216 5% 12%;
  --accent-hover: 216 5% 24%;
  --accent-foreground: 0 0% 98%;
--- a/packages/@core/base/design/src/design-tokens/default.css
+++ b/packages/@core/base/design/src/design-tokens/default.css
@ -58,6 +58,8 @@

  /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
  --accent: 240 5% 96%;
+  --accent-dark: 216 14% 93%;
+  --accent-darker: 216 11% 91%;
  --accent-lighter: 240 0% 98%;
  --accent-hover: 200deg 10% 90%;
  --accent-foreground: 240 6% 10%;
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@ -86,12 +86,14 @@
    "dayjs": "catalog:",
    "defu": "catalog:",
    "lodash.clonedeep": "catalog:",
+    "lodash.set": "catalog:",
    "nprogress": "catalog:",
    "tailwind-merge": "catalog:",
    "theme-colors": "catalog:"
  },
  "devDependencies": {
    "@types/lodash.clonedeep": "catalog:",
+    "@types/lodash.set": "catalog:",
    "@types/nprogress": "catalog:"
  }
 }
--- a/packages/@core/base/shared/src/utils/index.ts
+++ b/packages/@core/base/shared/src/utils/index.ts
@ -15,3 +15,4 @@ export * from './update-css-variables';
 export * from './util';
 export * from './window';
 export { default as cloneDeep } from 'lodash.clonedeep';
+export { default as set } from 'lodash.set';
--- a/packages/@core/ui-kit/form-ui/src/form-api.ts
+++ b/packages/@core/ui-kit/form-ui/src/form-api.ts
@ -185,7 +185,7 @@ export class FormApi {
    const fieldSet = new Set(fields);
    const schema = this.state?.schema ?? [];

-    const filterSchema = schema.filter((item) => fieldSet.has(item.fieldName));
+    const filterSchema = schema.filter((item) => !fieldSet.has(item.fieldName));

    this.setState({
      schema: filterSchema,
--- a/packages/@core/ui-kit/form-ui/src/use-form-context.ts
+++ b/packages/@core/ui-kit/form-ui/src/use-form-context.ts
@ -3,7 +3,7 @@ import type { FormActions, VbenFormProps } from './types';
 import { computed, type ComputedRef, unref, useSlots } from 'vue';

 import { createContext } from '@vben-core/shadcn-ui';
-import { isString } from '@vben-core/shared/utils';
+import { isString, set } from '@vben-core/shared/utils';

 import { useForm } from 'vee-validate';
 import { object, type ZodRawShape } from 'zod';
@ -41,9 +41,9 @@ export function useFormInitial(
    const zodObject: ZodRawShape = {};
    (unref(props).schema || []).forEach((item) => {
      if (Reflect.has(item, 'defaultValue')) {
-        initialValues[item.fieldName] = item.defaultValue;
+        set(initialValues, item.fieldName, item.defaultValue);
      } else if (item.rules && !isString(item.rules)) {
-        zodObject[item.fieldName] = item.rules;
+        set(zodObject, item.fieldName, item.defaultValue);
      }
    });

--- a/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
+++ b/packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
@ -191,7 +191,10 @@ watchEffect(() => {
 function calcMenuWidthStyle(isHiddenDom: boolean): CSSProperties {
  const { extraWidth, fixedExtra, isSidebarMixed, show, width } = props;

-  let widthValue = `${width + (isSidebarMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;
+  let widthValue =
+    width === 0
+      ? '0px'
+      : `${width + (isSidebarMixed && fixedExtra && extraVisible.value ? extraWidth : 0)}px`;

  const { collapseWidth } = props;

--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@ -192,7 +192,7 @@ const headerFixed = computed(() => {
 });

 const showSidebar = computed(() => {
-  return isSideMode.value && sidebarEnable.value;
+  return isSideMode.value && sidebarEnable.value && !props.sidebarHidden;
 });

 /**
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@ -236,7 +236,7 @@ function handleFocusOutside(e: Event) {
        ref="wrapperRef"
        :class="
          cn('relative min-h-40 flex-1 overflow-y-auto p-3', contentClass, {
-            'overflow-hidden': showLoading,
+            'pointer-events-none overflow-hidden': showLoading,
          })
        "
      >
--- a/packages/effects/hooks/src/use-design-tokens.ts
+++ b/packages/effects/hooks/src/use-design-tokens.ts
@ -260,6 +260,9 @@ export function useElementPlusDesignTokens() {
        '--el-fill-color-light': getCssVariableValue('--accent'),
        '--el-fill-color-lighter': getCssVariableValue('--accent-lighter'),

+        '--el-fill-color-dark': getCssVariableValue('--accent-dark'),
+        '--el-fill-color-darker': getCssVariableValue('--accent-darker'),
+
        // 解决ElLoading背景色问题
        '--el-mask-color': isDark.value
          ? 'rgba(0,0,0,.8)'
--- a/packages/effects/plugins/src/vxe-table/extends.ts
+++ b/packages/effects/plugins/src/vxe-table/extends.ts
@ -43,7 +43,11 @@ function extendProxyOption(
    const data = await configFn(
      params,
      {
-        ...customValues,
+        /**
+         * 开启toolbarConfig.refresh功能
+         * 点击刷新按钮 这里的值为PointerEvent 会携带错误参数
+         */
+        ...(customValues instanceof PointerEvent ? {} : customValues),
        ...formValues,
      },
      ...args,
--- a/playground/src/views/demos/features/icons/index.vue
+++ b/playground/src/views/demos/features/icons/index.vue
@ -60,6 +60,17 @@ import IconPicker from './icon-picker.vue';
      </div>
    </Card>

+    <Card class="mb-5" title="Tailwind CSS">
+      <div class="flex items-center gap-5 text-3xl">
+        <span class="icon-[ant-design--alipay-circle-outlined]"></span>
+        <span class="icon-[ant-design--account-book-filled]"></span>
+        <span class="icon-[ant-design--container-outlined]"></span>
+        <span class="icon-[svg-spinners--wind-toy]"></span>
+        <span class="icon-[svg-spinners--blocks-wave]"></span>
+        <span class="icon-[line-md--compass-filled-loop]"></span>
+      </div>
+    </Card>
+
    <Card class="mb-5" title="图标选择器(Iconify)">
      <div class="flex items-center gap-5">
        <IconPicker width="300px" />
--- a/playground/src/views/examples/form/basic.vue
+++ b/playground/src/views/examples/form/basic.vue
@ -291,6 +291,12 @@ const [CustomLayoutForm] = useVbenForm({
      formItemClass: 'col-start-1',
      label: '字符串',
    },
+    {
+      component: 'Input',
+      defaultValue: 'field4.path',
+      fieldName: 'field4.path',
+      label: 'field4.path',
+    },
  ],
  // 一共三列
  wrapperClass: 'grid-cols-3',
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -21,22 +21,22 @@ catalog:
  '@commitlint/cli': ^19.6.0
  '@commitlint/config-conventional': ^19.6.0
  '@ctrl/tinycolor': ^4.1.0
-  '@eslint/js': ^9.15.0
+  '@eslint/js': ^9.16.0
  '@faker-js/faker': ^9.2.0
-  '@iconify/json': ^2.2.276
+  '@iconify/json': ^2.2.278
  '@iconify/tailwind': ^1.1.3
  '@iconify/vue': ^4.1.2
-  '@intlify/core-base': ^10.0.4
+  '@intlify/core-base': ^10.0.5
  '@intlify/unplugin-vue-i18n': ^6.0.0
  '@jspm/generator': ^2.4.1
  '@manypkg/get-packages': ^2.2.2
-  '@nolebase/vitepress-plugin-git-changelog': ^2.10.0
+  '@nolebase/vitepress-plugin-git-changelog': ^2.11.1
  '@playwright/test': ^1.49.0
-  '@pnpm/workspace.read-manifest': ^2.2.1
+  '@pnpm/workspace.read-manifest': ^1000.0.0
  '@stylistic/stylelint-plugin': ^3.1.1
  '@tailwindcss/nesting': 0.0.0-insiders.565cd3e
  '@tailwindcss/typography': ^0.5.15
-  '@tanstack/vue-query': ^5.61.4
+  '@tanstack/vue-query': ^5.62.0
  '@tanstack/vue-store': ^0.6.0
  '@types/archiver': ^6.0.3
  '@types/crypto-js': ^4.2.2
@ -44,7 +44,8 @@ catalog:
  '@types/html-minifier-terser': ^7.0.2
  '@types/jsonwebtoken': ^9.0.7
  '@types/lodash.clonedeep': ^4.5.9
-  '@types/node': ^22.10.0
+  '@types/node': ^22.10.1
+  '@types/lodash.set': ^4.3.9
  '@types/nprogress': ^0.2.3
  '@types/postcss-import': ^14.0.3
  '@types/qrcode': ^1.5.5
@ -59,8 +60,8 @@ catalog:
  '@vue/reactivity': ^3.5.13
  '@vue/shared': ^3.5.13
  '@vue/test-utils': ^2.4.6
-  '@vueuse/core': ^11.3.0
-  '@vueuse/integrations': ^11.3.0
+  '@vueuse/core': ^12.0.0
+  '@vueuse/integrations': ^12.0.0
  ant-design-vue: ^4.2.6
  archiver: ^7.0.1
  autoprefixer: ^10.4.20
@ -85,8 +86,8 @@ catalog:
  depcheck: ^1.4.7
  dotenv: ^16.4.5
  echarts: ^5.5.1
-  element-plus: ^2.8.8
-  eslint: ^9.15.0
+  element-plus: ^2.9.0
+  eslint: ^9.16.0
  eslint-config-turbo: ^2.3.3
  eslint-plugin-command: ^0.2.6
  eslint-plugin-eslint-comments: ^3.2.0
@ -101,7 +102,7 @@ catalog:
  eslint-plugin-unicorn: ^56.0.1
  eslint-plugin-unused-imports: ^4.1.4
  eslint-plugin-vitest: ^0.5.4
-  eslint-plugin-vue: ^9.31.0
+  eslint-plugin-vue: ^9.32.0
  execa: ^9.5.1
  find-up: ^7.0.0
  get-port: ^7.1.0
@ -116,7 +117,8 @@ catalog:
  jsonwebtoken: ^9.0.2
  lint-staged: ^15.2.10
  lodash.clonedeep: ^4.5.0
-  lucide-vue-next: ^0.461.0
+  lucide-vue-next: ^0.462.0
+  lodash.set: ^4.3.2
  medium-zoom: ^1.1.0
  naive-ui: ^2.40.2
  nitropack: ^2.10.4
@ -140,11 +142,11 @@ catalog:
  radix-vue: ^1.9.10
  resolve.exports: ^2.0.2
  rimraf: ^6.0.1
-  rollup: ^4.27.4
+  rollup: ^4.28.0
  rollup-plugin-visualizer: ^5.12.0
  sass: 1.80.6
-  sortablejs: ^1.15.4
-  stylelint: ^16.10.0
+  sortablejs: ^1.15.6
+  stylelint: ^16.11.0
  stylelint-config-recess-order: ^5.1.1
  stylelint-config-recommended: ^14.0.1
  stylelint-config-recommended-scss: ^14.1.0
@ -167,19 +169,19 @@ catalog:
  vite-plugin-dts: 4.2.1
  vite-plugin-html: ^3.2.2
  vite-plugin-lazy-import: ^1.0.7
-  vite-plugin-pwa: ^0.21.0
-  vite-plugin-vue-devtools: ^7.6.4
+  vite-plugin-pwa: ^0.21.1
+  vite-plugin-vue-devtools: ^7.6.7
  vitepress: ^1.5.0
  vitepress-plugin-group-icons: ^1.3.0
  vitest: ^2.1.6
  vue: ^3.5.13
  vue-dompurify-html: ^5.2.0
  vue-eslint-parser: ^9.4.3
-  vue-i18n: ^10.0.4
+  vue-i18n: ^10.0.5
  vue-router: ^4.5.0
  vue-tsc: ^2.1.10
-  vxe-pc-ui: ^4.3.6
-  vxe-table: ^4.9.8
+  vxe-pc-ui: ^4.3.10
+  vxe-table: ^4.9.10
  watermark-js-plus: ^1.5.7
  zod: ^3.23.8
  zod-defaults: ^0.1.3