Merge branch 'main' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev

2024-12-05 08:06:55 +08:00
parent da512f166c eeba7b50f9
commit e89c9c1c6a
101 changed files with 878 additions and 1170 deletions
--- a/apps/web-antd/src/adapter/component/index.ts
+++ b/apps/web-antd/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';

-import { globalShareState } from '@vben/common-ui';
+import { ApiSelect, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';

 import {
@@ -51,6 +51,7 @@ const withDefaultPlaceholder = <T extends Component>(

 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
  | 'AutoComplete'
  | 'Checkbox'
  | 'CheckboxGroup'
@@ -58,6 +59,7 @@ export type ComponentType =
  | 'DefaultButton'
  | 'Divider'
  | 'FileUpload'
+  | 'IconPicker'
  | 'ImageUpload'
  | 'Input'
  | 'InputNumber'
@@ -83,7 +85,20 @@ async function initComponentAdapter() {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
-
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiSelect,
+        {
+          ...props,
+          ...attrs,
+          component: Select,
+          loadingSlot: 'suffixIcon',
+          visibleEvent: 'onDropdownVisibleChange',
+          modelField: 'value',
+        },
+        slots,
+      );
+    },
    AutoComplete,
    Checkbox,
    CheckboxGroup,
@@ -93,6 +108,7 @@ 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'),
--- a/apps/web-antd/src/components/tree/src/tree-select-panel.vue
+++ b/apps/web-antd/src/components/tree/src/tree-select-panel.vue
@@ -8,6 +8,7 @@ import { computed, nextTick, onMounted, type PropType, ref, watch } from 'vue';
 import { findGroupParentIds, treeToList } from '@vben/utils';

 import { Checkbox, Tree } from 'ant-design-vue';
+import { uniq } from 'lodash-es';

 /** 需要禁止透传 */
 defineOptions({ inheritAttrs: false });
@@ -73,6 +74,8 @@ const checkedRealKeys = ref<(number | string)[]>([]);
 /**
 * 取第一次的menuTree id 设置到checkedMenuKeys
 * 主要为了解决没有任何修改 直接点击保存的情况
+ *
+ * length为0情况(即新增时候没有勾选节点) 勾选这里会延迟触发 节点会拼接上父节点 导致ID重复
 */
 const stop = watch([checkedKeys, () => props.treeData], () => {
  if (
@@ -86,7 +89,10 @@ const stop = watch([checkedKeys, () => props.treeData], () => {
      checkedKeys.value as any,
      { id: props.fieldNames.key },
    );
-    checkedRealKeys.value = [...parentIds, ...checkedKeys.value];
+    /**
+     * uniq 解决上面的id重复问题
+     */
+    checkedRealKeys.value = uniq([...parentIds, ...checkedKeys.value]);
    stop();
  }
  if (!props.checkStrictly && checkedKeys.value.length > 0) {
@@ -98,19 +104,21 @@ const stop = watch([checkedKeys, () => props.treeData], () => {

 /**
 *
- * @param checkedKeys 已经选中的子节点的ID
+ * @param checkedStateKeys 已经选中的子节点的ID
 * @param info info.halfCheckedKeys为父节点的ID
 */
 type CheckedState<T = number | string> =
  | { checked: T[]; halfChecked: T[] }
  | T[];
-function handleChecked(checkedKeys: CheckedState, info: CheckInfo) {
+function handleChecked(checkedStateKeys: CheckedState, info: CheckInfo) {
  // 数组的话为节点关联
-  if (Array.isArray(checkedKeys)) {
+  if (Array.isArray(checkedStateKeys)) {
    const halfCheckedKeys: number[] = (info.halfCheckedKeys || []) as number[];
-    checkedRealKeys.value = [...halfCheckedKeys, ...checkedKeys];
+    checkedRealKeys.value = [...halfCheckedKeys, ...checkedStateKeys];
  } else {
-    checkedRealKeys.value = [...checkedKeys.checked];
+    checkedRealKeys.value = [...checkedStateKeys.checked];
+    // fix: Invalid prop: type check failed for prop "value". Expected Array, got Object
+    checkedKeys.value = [...checkedStateKeys.checked];
  }
 }

@@ -137,9 +145,10 @@ function handleCheckStrictlyChange(e: CheckboxChangeEvent) {

 /**
 * 暴露方法来获取用于提交的全部节点
+ * uniq去重(保险方案)
 */
 defineExpose({
-  getCheckedKeys: () => checkedRealKeys.value,
+  getCheckedKeys: () => uniq(checkedRealKeys.value),
 });

 onMounted(async () => {
--- a/apps/web-antd/src/router/access.ts
+++ b/apps/web-antd/src/router/access.ts
@@ -207,7 +207,7 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
      const vbenMenuList = backMenuToVbenMenu(backMenuList);
      // 特别注意 这里要深拷贝
      const menuList = [...cloneDeep(localMenuList), ...vbenMenuList];
-      console.log('menuList', menuList);
+      // console.log('menuList', menuList);
      return menuList;
    },
    // 可以指定没有权限跳转403页面
--- a/apps/web-antd/src/views/system/client/client-drawer.vue
+++ b/apps/web-antd/src/views/system/client/client-drawer.vue
@@ -21,6 +21,9 @@ const title = computed(() => {
 const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    formItemClass: 'col-span-2',
+    componentProps: {
+      class: 'w-full',
+    },
  },
  layout: 'vertical',
  schema: drawerSchema(),
--- a/apps/web-antd/src/views/system/client/data.tsx
+++ b/apps/web-antd/src/views/system/client/data.tsx
@@ -134,7 +134,6 @@ export const drawerSchema: FormSchemaGetter = () => [
  {
    component: 'Select',
    componentProps: {
-      class: 'w-full',
      getPopupContainer,
      mode: 'multiple',
      optionFilterProp: 'label',
@@ -148,7 +147,6 @@ export const drawerSchema: FormSchemaGetter = () => [
    component: 'Select',
    componentProps: {
      allowClear: false,
-      class: 'w-full',
      getPopupContainer,
      options: getDictOptions(DictEnum.SYS_DEVICE_TYPE),
    },
--- a/apps/web-antd/src/views/system/oss-config/data.tsx
+++ b/apps/web-antd/src/views/system/oss-config/data.tsx
@@ -99,7 +99,7 @@ export const drawerSchema: FormSchemaGetter = () => [
      orientation: 'center',
    },
    fieldName: 'divider1',
-    labelClass: 'w-0',
+    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '基本信息',
    }),
@@ -134,7 +134,7 @@ export const drawerSchema: FormSchemaGetter = () => [
      orientation: 'center',
    },
    fieldName: 'divider2',
-    labelClass: 'w-0',
+    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '认证信息',
    }),
@@ -157,7 +157,7 @@ export const drawerSchema: FormSchemaGetter = () => [
      orientation: 'center',
    },
    fieldName: 'divider3',
-    labelClass: 'w-0',
+    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '其他信息',
    }),
--- a/apps/web-antd/src/views/system/post/data.ts
+++ b/apps/web-antd/src/views/system/post/data.ts
@@ -82,7 +82,6 @@ export const drawerSchema: FormSchemaGetter = () => [
  {
    component: 'TreeSelect',
    componentProps: {
-      class: 'w-full',
      getPopupContainer,
    },
    fieldName: 'deptId',
--- a/apps/web-antd/src/views/system/role/data.tsx
+++ b/apps/web-antd/src/views/system/role/data.tsx
@@ -154,12 +154,13 @@ export const drawerSchema: FormSchemaGetter = () => [
    defaultValue: [],
    fieldName: 'menuIds',
    label: '菜单权限',
+    formItemClass: 'col-span-2',
  },
  {
    component: 'Textarea',
    defaultValue: '',
    fieldName: 'remark',
-    formItemClass: 'items-baseline',
+    formItemClass: 'items-baseline col-span-2',
    label: '备注',
  },
 ];
--- a/apps/web-antd/src/views/system/role/role-drawer.vue
+++ b/apps/web-antd/src/views/system/role/role-drawer.vue
@@ -24,12 +24,12 @@ const [BasicForm, formApi] = useVbenForm({
    componentProps: {
      class: 'w-full',
    },
-    formItemClass: 'col-span-2',
+    formItemClass: 'col-span-1',
  },
  layout: 'vertical',
  schema: drawerSchema(),
  showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
+  wrapperClass: 'grid-cols-2 gap-x-4',
 });

 const menuTree = ref<any[]>([]);
--- a/apps/web-antd/src/views/system/tenant/data.tsx
+++ b/apps/web-antd/src/views/system/tenant/data.tsx
@@ -101,7 +101,7 @@ export const drawerSchema: FormSchemaGetter = () => [
      orientation: 'center',
    },
    fieldName: 'divider1',
-    labelClass: 'w-0',
+    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '基本信息',
    }),
@@ -132,7 +132,7 @@ export const drawerSchema: FormSchemaGetter = () => [
      orientation: 'center',
    },
    fieldName: 'divider2',
-    labelClass: 'w-0',
+    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '管理员信息',
    }),
@@ -167,7 +167,7 @@ export const drawerSchema: FormSchemaGetter = () => [
      orientation: 'center',
    },
    fieldName: 'divider3',
-    labelClass: 'w-0',
+    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '租户设置',
    }),
@@ -175,7 +175,6 @@ export const drawerSchema: FormSchemaGetter = () => [
  {
    component: 'Select',
    componentProps: {
-      class: 'w-full',
      getPopupContainer,
    },
    fieldName: 'packageId',
@@ -237,7 +236,7 @@ export const drawerSchema: FormSchemaGetter = () => [
      orientation: 'center',
    },
    fieldName: 'divider4',
-    labelClass: 'w-0',
+    hideLabel: true,
    renderComponentContent: () => ({
      default: () => '企业信息',
    }),
--- a/apps/web-antd/src/views/system/tenant/tenant-drawer.vue
+++ b/apps/web-antd/src/views/system/tenant/tenant-drawer.vue
@@ -23,6 +23,9 @@ const [BasicForm, formApi] = useVbenForm({
  commonConfig: {
    formItemClass: 'col-span-2',
    labelWidth: 100,
+    componentProps: {
+      class: 'w-full',
+    },
  },
  schema: drawerSchema(),
  showDefaultActions: false,
--- a/apps/web-antd/src/views/system/user/dept-tree.vue
+++ b/apps/web-antd/src/views/system/user/dept-tree.vue
@@ -71,7 +71,7 @@ onMounted(loadTree);
        <div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
          <InputSearch
            v-model:value="searchValue"
-            placeholder="Search"
+            :placeholder="$t('pages.common.search')"
            size="small"
          >
            <template #enterButton>
--- a/apps/web-antd/vite.config.mts
+++ b/apps/web-antd/vite.config.mts
@@ -20,6 +20,8 @@ export default defineConfig(async () => {
        //   dts: './types/components.d.ts', // 输出类型文件
        //   resolvers: [
        //     AntDesignVueResolver({
+        //       // 需要排除Button组件 全局已经默认导入了
+        //       exclude: ['Button'],
        //       importStyle: false, // css in js
        //     }),
        //   ],
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-ele",
-  "version": "5.4.8",
+  "version": "5.5.0",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/apps/web-ele/src/adapter/component/index.ts
+++ b/apps/web-ele/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';

-import { globalShareState } from '@vben/common-ui';
+import { ApiSelect, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';

 import {
@@ -22,6 +22,7 @@ import {
  ElNotification,
  ElRadioGroup,
  ElSelect,
+  ElSelectV2,
  ElSpace,
  ElSwitch,
  ElTimePicker,
@@ -41,10 +42,12 @@ const withDefaultPlaceholder = <T extends Component>(

 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
  | 'Checkbox'
  | 'CheckboxGroup'
  | 'DatePicker'
  | 'Divider'
+  | 'IconPicker'
  | 'Input'
  | 'InputNumber'
  | 'RadioGroup'
@@ -61,7 +64,19 @@ async function initComponentAdapter() {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
-
+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiSelect,
+        {
+          ...props,
+          ...attrs,
+          component: ElSelectV2,
+          loadingSlot: 'loading',
+          visibleEvent: 'onDropdownVisibleChange',
+        },
+        slots,
+      );
+    },
    Checkbox: ElCheckbox,
    CheckboxGroup: ElCheckboxGroup,
    // 自定义默认按钮
@@ -73,6 +88,7 @@ async function initComponentAdapter() {
      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
    },
    Divider: ElDivider,
+    IconPicker,
    Input: withDefaultPlaceholder(ElInput, 'input'),
    InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
    RadioGroup: ElRadioGroup,
--- a/apps/web-ele/src/bootstrap.ts
+++ b/apps/web-ele/src/bootstrap.ts
@@ -7,6 +7,7 @@ import '@vben/styles';
 import '@vben/styles/ele';

 import { useTitle } from '@vueuse/core';
+import { ElLoading } from 'element-plus';

 import { $t, setupI18n } from '#/locales';

@@ -19,6 +20,9 @@ async function bootstrap(namespace: string) {
  await initComponentAdapter();
  const app = createApp(App);

+  // 注册Element Plus提供的v-loading指令
+  app.directive('loading', ElLoading.directive);
+
  // 国际化 i18n 配置
  await setupI18n(app);

--- 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>
@@ -54,41 +61,57 @@ const tableData = [
    description="支持多语言，主题功能集成切换等"
    title="Element Plus组件使用演示"
  >
-    <ElCard class="mb-5">
-      <template #header> 按钮 </template>
-      <ElSpace>
-        <ElButton text>Text</ElButton>
-        <ElButton>Default</ElButton>
-        <ElButton type="primary"> Primary </ElButton>
-        <ElButton type="info"> Info </ElButton>
-        <ElButton type="success"> Success </ElButton>
-        <ElButton type="warning"> Warning </ElButton>
-        <ElButton type="danger"> Error </ElButton>
-      </ElSpace>
-    </ElCard>
-    <ElCard class="mb-5">
-      <template #header> Message </template>
-      <ElSpace>
-        <ElButton type="info" @click="info"> 信息 </ElButton>
-        <ElButton type="danger" @click="error"> 错误 </ElButton>
-        <ElButton type="warning" @click="warning"> 警告 </ElButton>
-        <ElButton type="success" @click="success"> 成功 </ElButton>
-      </ElSpace>
-    </ElCard>
-    <ElCard class="mb-5">
-      <template #header> Notification </template>
-      <ElSpace>
-        <ElButton type="info" @click="notify('info')"> 信息 </ElButton>
-        <ElButton type="danger" @click="notify('error')"> 错误 </ElButton>
-        <ElButton type="warning" @click="notify('warning')"> 警告 </ElButton>
-        <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
-      </ElSpace>
-    </ElCard>
-    <ElCard class="mb-5">
-      <ElTable :data="tableData" stripe>
-        <ElTable.TableColumn label="测试列1" prop="prop1" />
-        <ElTable.TableColumn label="测试列2" prop="prop2" />
-      </ElTable>
-    </ElCard>
+    <div class="flex flex-wrap gap-5">
+      <ElCard class="mb-5 w-auto">
+        <template #header> 按钮 </template>
+        <ElSpace>
+          <ElButton text>Text</ElButton>
+          <ElButton>Default</ElButton>
+          <ElButton type="primary"> Primary </ElButton>
+          <ElButton type="info"> Info </ElButton>
+          <ElButton type="success"> Success </ElButton>
+          <ElButton type="warning"> Warning </ElButton>
+          <ElButton type="danger"> Error </ElButton>
+        </ElSpace>
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <template #header> Message </template>
+        <ElSpace>
+          <ElButton type="info" @click="info"> 信息 </ElButton>
+          <ElButton type="danger" @click="error"> 错误 </ElButton>
+          <ElButton type="warning" @click="warning"> 警告 </ElButton>
+          <ElButton type="success" @click="success"> 成功 </ElButton>
+        </ElSpace>
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <template #header> Notification </template>
+        <ElSpace>
+          <ElButton type="info" @click="notify('info')"> 信息 </ElButton>
+          <ElButton type="danger" @click="notify('error')"> 错误 </ElButton>
+          <ElButton type="warning" @click="notify('warning')"> 警告 </ElButton>
+          <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
+        </ElSpace>
+      </ElCard>
+      <ElCard class="mb-5 w-auto">
+        <template #header> Segmented </template>
+        <ElSegmented
+          v-model="segmentedValue"
+          :options="segmentedOptions"
+          size="large"
+        />
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <template #header> V-Loading </template>
+        <div class="flex size-72 items-center justify-center" v-loading="true">
+          一些演示的内容
+        </div>
+      </ElCard>
+      <ElCard class="mb-5 w-80">
+        <ElTable :data="tableData" stripe>
+          <ElTable.TableColumn label="测试列1" prop="prop1" />
+          <ElTable.TableColumn label="测试列2" prop="prop2" />
+        </ElTable>
+      </ElCard>
+    </div>
  </Page>
 </template>
--- a/apps/web-naive/package.json
+++ b/apps/web-naive/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@vben/web-naive",
-  "version": "5.4.8",
+  "version": "5.5.0",
  "homepage": "https://vben.pro",
  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
  "repository": {
--- a/apps/web-naive/src/adapter/component/index.ts
+++ b/apps/web-naive/src/adapter/component/index.ts
@@ -8,7 +8,7 @@ import type { BaseFormComponentType } from '@vben/common-ui';
 import type { Component, SetupContext } from 'vue';
 import { h } from 'vue';

-import { globalShareState } from '@vben/common-ui';
+import { ApiSelect, globalShareState, IconPicker } from '@vben/common-ui';
 import { $t } from '@vben/locales';

 import {
@@ -42,10 +42,12 @@ const withDefaultPlaceholder = <T extends Component>(

 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type ComponentType =
+  | 'ApiSelect'
  | 'Checkbox'
  | 'CheckboxGroup'
  | 'DatePicker'
  | 'Divider'
+  | 'IconPicker'
  | 'Input'
  | 'InputNumber'
  | 'RadioGroup'
@@ -63,6 +65,18 @@ async function initComponentAdapter() {
    // Button: () =>
    // import('xxx').then((res) => res.Button),

+    ApiSelect: (props, { attrs, slots }) => {
+      return h(
+        ApiSelect,
+        {
+          ...props,
+          ...attrs,
+          component: NSelect,
+          modelField: 'value',
+        },
+        slots,
+      );
+    },
    Checkbox: NCheckbox,
    CheckboxGroup: NCheckboxGroup,
    DatePicker: NDatePicker,
@@ -75,6 +89,7 @@ async function initComponentAdapter() {
      return h(NButton, { ...props, attrs, type: 'primary' }, slots);
    },
    Divider: NDivider,
+    IconPicker,
    Input: withDefaultPlaceholder(NInput, 'input'),
    InputNumber: withDefaultPlaceholder(NInputNumber, 'input'),
    RadioGroup: NRadioGroup,