@oinone/kunlun-vue-admin-base 6.3.9 → 6.4.0

package/src/view/search/DefaultSearch.vue

@@ -16,14 +16,15 @@ import {
   OioFormProps,
   OioIcon,
   PropRecordHelper,
+  StableSlotProp,
   StringHelper,
+  useInjectOioDefaultFormContext,
+  useProviderOioDefaultFormContext,
   ValidateTrigger
 } from '@oinone/kunlun-vue-ui-antd';
-import { StableSlotProp } from '@oinone/kunlun-vue-ui-common';
 import { DslRender, DslRenderDefinition } from '@oinone/kunlun-vue-widget';
 import { cloneDeep } from 'lodash-es';
 import { computed, createVNode, defineComponent, ref, VNode, vShow, withDirectives, withKeys } from 'vue';
-import { useInjectOioDefaultFormContext, useProviderOioDefaultFormContext } from '../../basic';
 import { InternalWidget, ResolveMode } from '../../tags';
 import { UserSearchPrefer } from '../../typing';
 import { useProviderSearchPreferContext } from './context';
@@ -42,7 +43,7 @@ function appendFieldDslDefinition(
     switch (dslNodeType as DslDefinitionType) {
       case DslDefinitionType.FIELD:
       case DslDefinitionType.ELEMENT: {
-        if (BooleanHelper.isTrue(widget.invisible) || (cateFields?.length && cateFields.includes(widget.name))) {
+        if (BooleanHelper.isTrue(widget.invisible) || cateFields?.includes(widget.name)) {
           break;
         }
         const cloneWidget = cloneDeep(widget);
@@ -72,11 +73,8 @@ function appendFieldDslDefinition(
 function appendCateFieldDslDefinition(
   targets: DslDefinition[],
   widgets: DslDefinition[],
-  cateFields?: string[]
+  cateFields: string[]
 ): boolean {
-  if (!cateFields?.length) {
-    return false;
-  }
   for (const widget of widgets) {
     const { dslNodeType } = widget;
     switch (dslNodeType as DslDefinitionType) {
@@ -237,170 +235,200 @@ export default defineComponent({
       options: computed(() => props.searchPreferOptions)
     });
 
-    const defaultChildrenAndStyle = computed(() => {
-      const defaultChildren: VNode[] = [];
-      let invisible = false;
-      let hasExpandButton = false;
+    return {
+      origin,
+      onExpand,
+      onSearch,
+      onReset
+    };
+  },
+  render() {
+    const {
+      $slots,
+
+      template,
+      cateFields,
+      showTopCateAll,
+      showSecondCateAll,
+      topCateJustify,
+      disabledExpand,
+      invisibleSearch,
+      foldSize,
+      showSearchPrefer,
+      isExpand,
+
+      translate,
+      selectedPrefer,
+      searchPreferOptions,
+      onLoadSearchPreferOptions,
+      onCreateSearchPrefer,
+      onUpdateSearchPrefer,
+      onRemoveSearchPrefer,
+      onSelectSearchPrefer,
+      onUnselectSearchPrefer,
 
-      if (props.template) {
-        const { widgets } = props.template;
-        if (widgets && widgets.length) {
-          let fields: DslDefinition[] = [];
-          const cateWidgets = [] as DslDefinition[];
-          appendCateFieldDslDefinition(cateWidgets, widgets, props.cateFields);
+      onSearch,
+      onReset,
+      onExpand
+    } = this;
+
+    const defaultChildren: VNode[] = [];
+    let invisible = false;
+    let hasExpandButton = false;
+
+    if (template) {
+      const { widgets } = template;
+      if (widgets && widgets.length) {
+        const cateWidgets = [] as DslDefinition[];
+        if (cateFields?.length) {
+          appendCateFieldDslDefinition(cateWidgets, widgets, cateFields);
           if (cateWidgets.length) {
             defaultChildren.push(
               DslRender.render({
-                cateFields: props.cateFields,
+                cateFields,
                 dslNodeType: DslDefinitionType.ELEMENT,
                 widget: 'SearchTab',
                 widgets: cateWidgets,
-                showTopCateAll: props.showTopCateAll,
-                showSecondCateAll: props.showSecondCateAll,
-                topCateJustify: props.topCateJustify
+                showTopCateAll,
+                showSecondCateAll,
+                topCateJustify
               })!
             );
           }
+        }
 
-          if (!props.disabledExpand) {
-            const finalExpandSize = props.invisibleSearch ? props.foldSize + 1 : props.foldSize;
-            appendFieldDslDefinition(fields, widgets, finalExpandSize, props.foldSize, props.cateFields);
+        let fields: DslDefinition[] = [];
+        if (!disabledExpand) {
+          const finalExpandSize = invisibleSearch ? foldSize + 1 : foldSize;
+          appendFieldDslDefinition(fields, widgets, finalExpandSize, foldSize, cateFields);
+          if (fields.length) {
             hasExpandButton = fields.length > finalExpandSize;
             if (hasExpandButton) {
               fields = fields.slice(0, finalExpandSize);
             }
-
-            if (!props.invisibleSearch) {
+            if (!invisibleSearch) {
               const searchActionBar: VNode[] = createSearchBar(false, {
                 hasExpandButton,
-                showSearchPrefer: props.showSearchPrefer,
+                showSearchPrefer,
                 onSearch,
                 onReset,
                 onExpand,
-                translate: props.translate,
+                translate,
                 preferProps: {
-                  selected: props.selectedPrefer,
-                  options: props.searchPreferOptions,
-                  onLoad: props.onLoadSearchPreferOptions,
-                  onCreate: props.onCreateSearchPrefer,
-                  onUpdate: props.onUpdateSearchPrefer,
-                  onRemove: props.onRemoveSearchPrefer,
-                  onSelect: props.onSelectSearchPrefer,
-                  onUnselect: props.onUnselectSearchPrefer
+                  selected: selectedPrefer,
+                  options: searchPreferOptions,
+                  onLoad: onLoadSearchPreferOptions,
+                  onCreate: onCreateSearchPrefer,
+                  onUpdate: onUpdateSearchPrefer,
+                  onRemove: onRemoveSearchPrefer,
+                  onSelect: onSelectSearchPrefer,
+                  onUnselect: onUnselectSearchPrefer
                 }
               });
               invisible = !fields.length;
 
               const searchBarCol = createSearchBarCol(
                 searchActionBar,
-                (props.foldSize - fields.length) * (DEFAULT_COLS / (props.foldSize + 1)),
+                (foldSize - fields.length) * (DEFAULT_COLS / (foldSize + 1)),
                 invisible,
-                props.foldSize
+                foldSize
               );
               fields.push(searchBarCol);
             }
-            defaultChildren.push(
-              withDirectives(
-                DslRender.render({
-                  internal: true,
-                  dslNodeType: DslDefinitionType.PACK,
-                  widgets: fields,
-                  widget: InternalWidget.Row,
-                  cols: DEFAULT_COLS,
-                  resolveOptions: {
-                    mode: ResolveMode.NORMAL
-                  }
-                })!,
-                [[vShow, !props.isExpand]]
-              )
-            );
+          } else {
+            hasExpandButton = false;
+            fields = widgets;
           }
+          defaultChildren.push(
+            withDirectives(
+              DslRender.render({
+                internal: true,
+                dslNodeType: DslDefinitionType.PACK,
+                widgets: fields,
+                widget: InternalWidget.Row,
+                cols: DEFAULT_COLS,
+                resolveOptions: {
+                  mode: ResolveMode.NORMAL
+                }
+              })!,
+              [[vShow, !isExpand]]
+            )
+          );
         }
       }
+    }
 
-      if (hasExpandButton || props.disabledExpand) {
-        const foldChildren = PropRecordHelper.collectionSlots(context.slots, [
+    if (hasExpandButton || disabledExpand) {
+      const foldChildren = PropRecordHelper.collectionSlots($slots, [
+        {
+          origin: 'default',
+          isNotNull: true
+        }
+      ])
+        .default()
+        .filter((VNode) => !cateFields?.includes(VNode.props?.dslDefinition?.name));
+
+      const foldVNodes: VNode[] = [
+        DslRender.render(
           {
-            origin: 'default',
-            isNotNull: true
+            ...(template || {}),
+            internal: true,
+            dslNodeType: DslDefinitionType.PACK,
+            widgets: [],
+            widget: InternalWidget.Row,
+            resolveOptions: {
+              mode: ResolveMode.NORMAL
+            }
+          },
+          undefined,
+          { default: () => foldChildren }
+        )!
+      ];
+      if (!invisibleSearch) {
+        const searchActionBar: VNode[] = createSearchBar(true, {
+          hasExpandButton,
+          showSearchPrefer,
+          onSearch,
+          onReset,
+          onExpand,
+          translate,
+          preferProps: {
+            selected: selectedPrefer,
+            options: searchPreferOptions,
+            onLoad: onLoadSearchPreferOptions,
+            onCreate: onCreateSearchPrefer,
+            onUpdate: onUpdateSearchPrefer,
+            onRemove: onRemoveSearchPrefer,
+            onSelect: onSelectSearchPrefer,
+            onUnselect: onUnselectSearchPrefer
           }
-        ])
-          .default()
-          .filter((VNode) => !props.cateFields?.includes(VNode.props?.dslDefinition?.name));
-
-        const foldVNodes: VNode[] = [
-          DslRender.render(
-            {
-              ...(props.template || {}),
-              internal: true,
-              dslNodeType: DslDefinitionType.PACK,
-              widgets: [],
-              widget: InternalWidget.Row,
-              resolveOptions: {
-                mode: ResolveMode.NORMAL
-              }
-            },
-            undefined,
-            { default: () => foldChildren }
-          )!
-        ];
-        if (!props.invisibleSearch) {
-          const searchActionBar: VNode[] = createSearchBar(true, {
-            hasExpandButton,
-            showSearchPrefer: props.showSearchPrefer,
-            onSearch,
-            onReset,
-            onExpand,
-            translate: props.translate,
-            preferProps: {
-              selected: props.selectedPrefer,
-              options: props.searchPreferOptions,
-              onLoad: props.onLoadSearchPreferOptions,
-              onCreate: props.onCreateSearchPrefer,
-              onUpdate: props.onUpdateSearchPrefer,
-              onRemove: props.onRemoveSearchPrefer,
-              onSelect: props.onSelectSearchPrefer,
-              onUnselect: props.onUnselectSearchPrefer
+        });
+        const searchBarCol = createSearchBarCol(
+          searchActionBar,
+          foldSize * (DEFAULT_COLS / (foldSize + 1)), // 预留高级搜索区域
+          invisible,
+          foldSize
+        );
+        foldVNodes.push(
+          DslRender.render({
+            internal: true,
+            dslNodeType: DslDefinitionType.PACK,
+            widgets: [searchBarCol],
+            widget: InternalWidget.Row,
+            cols: DEFAULT_COLS,
+            resolveOptions: {
+              mode: ResolveMode.NORMAL
             }
-          });
-          const searchBarCol = createSearchBarCol(
-            searchActionBar,
-            props.foldSize * (DEFAULT_COLS / (props.foldSize + 1)), // 预留高级搜索区域
-            invisible,
-            props.foldSize
-          );
-          foldVNodes.push(
-            DslRender.render({
-              internal: true,
-              dslNodeType: DslDefinitionType.PACK,
-              widgets: [searchBarCol],
-              widget: InternalWidget.Row,
-              cols: DEFAULT_COLS,
-              resolveOptions: {
-                mode: ResolveMode.NORMAL
-              }
-            })!
-          );
-        }
-        let foldContent = createVNode('div', { class: `${DEFAULT_PREFIX}-default-search-fold-content` }, foldVNodes);
-        if (!props.disabledExpand) {
-          foldContent = withDirectives(foldContent, [[vShow, props.isExpand]]);
-        }
-        defaultChildren.push(foldContent);
+          })!
+        );
       }
+      let foldContent = createVNode('div', { class: `${DEFAULT_PREFIX}-default-search-fold-content` }, foldVNodes);
+      if (!disabledExpand) {
+        foldContent = withDirectives(foldContent, [[vShow, isExpand]]);
+      }
+      defaultChildren.push(foldContent);
+    }
 
-      return { defaultChildren };
-    });
-
-    return {
-      origin,
-      onExpand,
-      onSearch,
-      onReset,
-      defaultChildrenAndStyle
-    };
-  },
-  render() {
     const classList = [`${DEFAULT_PREFIX}-default-form`, `${DEFAULT_PREFIX}-default-search`];
     if (this.isExpand) {
       classList.push(`${DEFAULT_PREFIX}-default-search-expand`);
@@ -410,8 +438,7 @@ export default defineComponent({
       createVNode(
         'div',
         {
-          class: StringHelper.append(classList, CastHelper.cast(this.$attrs.class)),
-          style: this.$attrs.style,
+          ...PropRecordHelper.collectionBasicProps(this.$attrs, classList),
           ref: 'origin'
         },
         [
@@ -429,7 +456,7 @@ export default defineComponent({
               onKeyup: withKeys(this.onSearch, ['enter'])
             },
             {
-              default: () => this.defaultChildrenAndStyle.defaultChildren,
+              default: () => defaultChildren,
               ...StableSlotProp
             }
           )

package/src/view/system-style/SystemStyle.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="system-style system-setting-page-view">
     <div class="system-style-left">
+      <!-- 主题风格 -->
+      <div class="oio-group oio-default-group">
+        <div class="oio-group-title-wrapper">
+          <div class="oio-group-title">{{ translateValueByKey('主题风格') }}</div>
+        </div>
+        <a-radio-group v-model:value="style">
+          <a-radio style="color: var(--oio-text-color)" value="minimalism">{{ translateValueByKey('极简') }}</a-radio>
+          <a-radio style="color: var(--oio-text-color)" value="classic">{{ translateValueByKey('经典') }}</a-radio>
+        </a-radio-group>
+      </div>
+
       <!-- 主题模式 -->
       <div class="oio-group oio-default-group">
         <div class="oio-group-title-wrapper">
@@ -100,7 +111,7 @@
           <div class="oio-group-title">{{ translateValueByKey('多tab栏样式') }}</div>
         </div>
         <a-form>
-          <a-row>
+          <a-row class="enable-multitab-config">
             <a-col :span="24">
               <a-form-item :label="$translate('标签页')">
                 <a-switch class="oio-switch" v-model:checked="enabled" @change="onEnabledChange" />
@@ -219,6 +230,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, computed, defineProps, watchEffect, watch } from 'vue';
+import { kebabCase } from 'lodash-es';
 import { getTheme } from '@oinone/kunlun-theme';
 import { OioIcon, OioButton } from '@oinone/kunlun-vue-ui-antd';
 import {
@@ -245,6 +257,7 @@ const loginPageRef = ref<HTMLElement>('' as any);
 const hostRef = ref();
 const mode = ref('default');
 const size = ref('medium');
+const style = ref();
 const currentMenuColor = ref(SideBarThemeColor.default);
 const currentSidebar = ref(SideBarTheme.side1);
 
@@ -260,38 +273,53 @@ const inline = ref(false); // 多 tab 是否内联
 /**
  * 数据回填
  */
-watchEffect(() => {
-  const { mode: m, size: s, multiTabTheme, sideBarTheme, extend } = props.systemConfig;
+watchEffect(
+  () => {
+    const { mode: m, size: s, multiTabTheme, sideBarTheme, extend, style: sysStyle } = props.systemConfig;
 
-  if (m) {
-    mode.value = m.toLocaleLowerCase();
-  }
+    if (m) {
+      mode.value = kebabCase(m);
+    }
 
-  if (s) {
-    size.value = s.toLocaleLowerCase();
-  }
+    if (sysStyle) {
+      style.value = sysStyle.toLocaleLowerCase();
+    }
 
-  const extendMultiTabTheme = extend?.systemStyleConfig?.multiTabConfig;
-  if (extendMultiTabTheme || multiTabTheme) {
-    inline.value = extendMultiTabTheme?.inline ?? multiTabTheme?.inline! ?? false;
-    theme.value = extendMultiTabTheme?.theme ?? multiTabTheme?.theme! ?? MultiTabTheme.tab1;
-    enabled.value = extendMultiTabTheme?.enabled ?? true;
-    draggable.value = extendMultiTabTheme?.draggable ?? true;
-    showModuleLogo.value = extendMultiTabTheme?.showModuleLogo ?? true;
-    homepageEnabled.value = (extendMultiTabTheme?.homepage as MultiTabsApplicationHomepageConfig)?.enabled ?? true;
-    homepageAutoInvisible.value =
-      (extendMultiTabTheme?.homepage as MultiTabsApplicationHomepageConfig)?.autoInvisible ?? !inline.value;
-  }
+    if (s) {
+      size.value = s.toLocaleLowerCase();
+    }
+
+    const extendMultiTabTheme = extend?.systemStyleConfig?.multiTabConfig;
+    if (extendMultiTabTheme || multiTabTheme) {
+      inline.value = extendMultiTabTheme?.inline ?? multiTabTheme?.inline! ?? false;
+      theme.value = extendMultiTabTheme?.theme ?? multiTabTheme?.theme! ?? MultiTabTheme.tab1;
+      enabled.value = extendMultiTabTheme?.enabled ?? true;
+      draggable.value = extendMultiTabTheme?.draggable ?? true;
+      showModuleLogo.value = extendMultiTabTheme?.showModuleLogo ?? true;
+      homepageEnabled.value = (extendMultiTabTheme?.homepage as MultiTabsApplicationHomepageConfig)?.enabled ?? true;
+      homepageAutoInvisible.value =
+        (extendMultiTabTheme?.homepage as MultiTabsApplicationHomepageConfig)?.autoInvisible ?? !inline.value;
+    }
 
-  const extendSideBarTheme = extend?.systemStyleConfig?.sideBarConfig;
-  if (extendSideBarTheme || sideBarTheme) {
-    currentMenuColor.value =
-      extendSideBarTheme?.mode?.toLocaleLowerCase() ??
-      (sideBarTheme?.mode?.toLocaleLowerCase() as any) ??
-      SideBarThemeColor.default;
-    currentSidebar.value = extendSideBarTheme?.theme ?? sideBarTheme?.theme! ?? SideBarTheme.side1;
+    const extendSideBarTheme = extend?.systemStyleConfig?.sideBarConfig;
+    if (extendSideBarTheme || sideBarTheme) {
+      currentMenuColor.value =
+        extendSideBarTheme?.mode?.toLocaleLowerCase() ??
+        (sideBarTheme?.mode?.toLocaleLowerCase() as any) ??
+        SideBarThemeColor.default;
+      currentSidebar.value = extendSideBarTheme?.theme ?? sideBarTheme?.theme! ?? SideBarTheme.side1;
+    }
+  },
+  {
+    /**
+     * 这个 watchEffect 依赖 inline.value，下面还有一个 watch 同样依赖 inline.value
+     * 响应式更新时，通常 watchEffect 会先于 watch 执行
+     * 这就导致 inline.value 先走了遍数据回填的逻辑，值被恢复了，内外部多 tab 切换失败
+     * 所以这里指定 flush:'post'，让 watchEffect 晚于 watch 执行，先改值，再回填
+     */
+    flush: 'post'
   }
-});
+);
 
 const currentThemeImage = computed(() => {
   const theme = `${mode.value}-${size.value}`;
@@ -362,11 +390,12 @@ const onHomepageAutoInvisibleChange = (value: any) => {
 };
 
 watch(
-  () => [mode.value, size.value, currentMenuColor.value, currentSidebar.value, theme.value, inline.value],
+  () => [mode.value, size.value, currentMenuColor.value, currentSidebar.value, theme.value, inline.value, style.value],
   (arr) => {
-    const [m, s, menuColor, menuTheme, theme, inline] = arr;
+    const [m, s, menuColor, menuTheme, theme, inline, style] = arr;
     props.systemConfig.mode = (m as string).toLocaleUpperCase();
     props.systemConfig.size = (s as string).toLocaleUpperCase();
+    props.systemConfig.style = (style as string)?.toLocaleUpperCase();
     props.systemConfig.sideBarTheme = {
       mode: (menuColor as string).toLocaleUpperCase() as SideBarThemeColor,
       theme: menuTheme as SideBarTheme
@@ -469,12 +498,22 @@ const onDownloadTheme = () => {
       }
     }
 
+    .enable-multitab-config {
+      label {
+        color: var(--oio-text-color);
+      }
+    }
+
     .multitab-config {
       margin-bottom: 24px;
 
+      label {
+        color: var(--oio-text-color);
+      }
+
       .multitab-config-container {
         padding: 12px;
-        background-color: #f5f6f8;
+        background-color: var(--oio-body-background);
         border-radius: var(--oio-border-radius);
 
         .checkbox-center {

package/src/view/system-style/SystemStyleWidget.ts

@@ -6,7 +6,7 @@ import { CheckCircleOutlined } from '@ant-design/icons-vue';
 import { initOioComponentTheme } from '@oinone/kunlun-theme';
 import { HttpClient } from '@oinone/kunlun-request';
 import { customMutation } from '@oinone/kunlun-service';
-import { OioProvider, translateValueByKey } from '@oinone/kunlun-engine';
+import { MajorConfig, OioProvider, translateValueByKey } from '@oinone/kunlun-engine';
 import { Matched, Router, useMatched } from '@oinone/kunlun-router';
 import { useRouter } from '@oinone/kunlun-vue-router';
 
@@ -59,7 +59,7 @@ export class SystemStyleWidget extends BaseElementWidget {
       }),
       onOk: async () => {
         const systemConfig = await OioProvider.refreshSystemMajorConfig();
-        initOioComponentTheme(systemConfig);
+        initOioComponentTheme(systemConfig as any);
         OioProvider.setTheme([`${mode}-${size}`]);
       },
       onCancel() {}
@@ -76,7 +76,8 @@ export class SystemStyleWidget extends BaseElementWidget {
             code
             mode
             size
-            extend 
+            extend
+            style
             sideBarTheme {
               mode
               theme