perf(组件:SmartLayoutSeparate): 支持设置第二元素宽度

src/components/LayoutSeparate/index.ts

@@ -1,3 +0,0 @@
-import LayoutSeparate from './src/LayoutSeparate';
-
-export { LayoutSeparate };

src/components/SmartLayoutSeparate/index.ts

@@ -0,0 +1,3 @@
+import SmartLayoutSeparate from './src/SmartLayoutSeparate';
+
+export { SmartLayoutSeparate };

src/components/LayoutSeparate/src/LayoutSeparate.tsx → src/components/SmartLayoutSeparate/src/SmartLayoutSeparate.tsx

@@ -1,22 +1,33 @@
-import { defineComponent, computed, toRefs, ref, watch } from 'vue';
+import { defineComponent, computed, toRefs, ref, watch, unref } from 'vue';
 import type { PropType, Ref, StyleValue } from 'vue';
 
 import { Divider } from 'ant-design-vue';
 import { isFinite, endsWith, replace, parseInt, toNumber } from 'lodash-es';
 
-import './LayoutSeparate.less';
+import './SmartLayoutSeparate.less';
 
 enum Layout {
   'LEFT_RIGHT_LAYOUT' = 'leftRight',
   'TOP_BOTTOM_LAYOUT' = 'topBottom',
 }
 
+const sizeType = {
+  type: [Number, String] as PropType<number | string>,
+  validator(value: string | number) {
+    if (!isFinite(value)) {
+      // @ts-ignore
+      return endsWith(value, '%') || endsWith(value, 'px');
+    }
+    return true;
+  },
+};
+
 /**
  * 支持分隔拖拽的layout
  * @author shizhongming
  */
 export default defineComponent({
-  name: 'LayoutSeparate',
+  name: 'SmartLayoutSeparate',
   props: {
     //布局，默认左右布局
     layout: {
@@ -33,17 +44,8 @@ export default defineComponent({
       default: false,
     },
     // 尺寸，如果是number类型，按照百分比分隔
-    firstSize: {
+    firstSize: sizeType,
-      type: [Number, String] as PropType<number | string>,
+    secondSize: sizeType,
-      default: 50,
-      validator(value: string | number) {
-        if (!isFinite(value)) {
-          // @ts-ignore
-          return endsWith(value, '%') || endsWith(value, 'px');
-        }
-        return true;
-      },
-    },
     showLine: {
       type: Boolean as PropType<boolean>,
       default: true,
@@ -66,7 +68,15 @@ export default defineComponent({
     },
   },
   setup(props, { slots }) {
-    const { layout, draggable, firstSize, showLine } = toRefs(props);
+    const { layout, draggable, firstSize, secondSize, showLine } = toRefs(props);
+    if (unref(firstSize) && unref(secondSize)) {
+      throw new Error('firstSize和secondSize不能同时设置');
+    }
+    if (!unref(firstSize) && !unref(secondSize)) {
+      firstSize.value = 50;
+    }
+    // 是否是设置了第一尺寸
+    const computedIsFirstSize = computed(() => unref(firstSize) !== undefined);
     // 是否是左右布局
     const isLeftRight = computed(() => layout.value === Layout.LEFT_RIGHT_LAYOUT);
     // 拖拽是否初始化
@@ -109,28 +119,46 @@ export default defineComponent({
       const { xLength, yLength } = dragVue;
       const firstStyle: StyleValue = {};
       const firstSizeValue = firstSize.value;
+      const secondSizeValue = unref(secondSize);
+      const sizeValue = firstSizeValue || secondSizeValue;
+      const isFirstSize = unref(computedIsFirstSize);
       let firstValue = '';
       let secondValue = '';
       const addValue = isLeftRight.value ? xLength.value : yLength.value;
-      if (isFinite(firstSizeValue) || isFinite(toNumber(firstSizeValue))) {
+      if (isFinite(sizeValue) || isFinite(toNumber(sizeValue))) {
         // 按照百分比处理
-        firstValue = toNumber(firstSizeValue) + addValue + 'px';
+        if (isFirstSize) {
-        secondValue = `calc(100% - ${firstValue})`;
+          firstValue = toNumber(sizeValue) + addValue + 'px';
+          secondValue = `calc(100% - ${firstValue})`;
+        } else {
+          secondValue = toNumber(sizeValue) - addValue + 'px';
+          firstValue = `calc(100% - ${secondValue})`;
+        }
       } else {
         // @ts-ignore
-        if (endsWith(firstSizeValue, '%')) {
+        if (endsWith(sizeValue, '%')) {
           // @ts-ignore
-          const firstSize = parseInt(replace(firstSizeValue, '%'));
+          const size = parseInt(replace(sizeValue, '%'));
-          firstValue = `calc(${firstSize}% ${addValue > 0 ? '+' : '-'} ${Math.abs(addValue)}px)`;
+          if (isFirstSize) {
-          secondValue = `calc(${100 - firstSize}% ${addValue < 0 ? '+' : '-'} ${Math.abs(
+            firstValue = `calc(${size}% ${addValue > 0 ? '+' : '-'} ${Math.abs(addValue)}px)`;
-            addValue,
+            secondValue = `calc(${100 - size}% ${addValue < 0 ? '+' : '-'} ${Math.abs(
-          )}px)`;
+              addValue,
+            )}px)`;
+          } else {
+            secondValue = `calc(${size}% ${addValue < 0 ? '+' : '-'} ${Math.abs(addValue)}px)`;
+            firstValue = `calc(${100 - size}% ${addValue > 0 ? '+' : '-'} ${Math.abs(addValue)}px)`;
+          }
           // @ts-ignore
-        } else if (endsWith(firstSizeValue, 'px')) {
+        } else if (endsWith(sizeValue, 'px')) {
           // @ts-ignore
-          const firstSize = parseInt(replace(firstSizeValue, 'px'));
+          const size = parseInt(replace(sizeValue, 'px'));
-          firstValue = firstSize + addValue + 'px';
+          if (isFirstSize) {
-          secondValue = `calc(100% - ${firstValue})`;
+            firstValue = size + addValue + 'px';
+            secondValue = `calc(100% - ${firstValue})`;
+          } else {
+            secondValue = size - addValue + 'px';
+            firstValue = `calc(100% - ${secondValue})`;
+          }
         }
       }
       const secondStyle: any = {};

src/modules/smart-code/views/codeList/CodeListView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-height page-container">
-    <LayoutSeparate first-size="240px" :show-line="false" class="full-height">
+    <SmartLayoutSeparate first-size="240px" :show-line="false" class="full-height">
       <template #first>
         <div class="full-height system-container">
           <SystemSimpleList
@@ -17,7 +17,7 @@
           </template>
         </SmartTable>
       </template>
-    </LayoutSeparate>
+    </SmartLayoutSeparate>
     <CodeCreateModal @register="registerCodeCreateModal" />
   </div>
 </template>
@@ -35,7 +35,7 @@
 
   import { SmartVxeTableAction, SmartTable, useSmartTable } from '@/components/SmartTable';
   import CodeCreateModal from './components/CodeCreateModal.vue';
-  import { LayoutSeparate } from '@/components/LayoutSeparate';
+  import { SmartLayoutSeparate } from '@/components/SmartLayoutSeparate';
   import SystemSimpleList from '@/modules/smart-system/components/system/SystemSimpleList.vue';
   import { errorMessage } from '@/utils/message/SystemNotice';
 

src/modules/smart-code/views/codeList/components/TemplateSelectTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutSeparate first-size="200px" :show-line="false" class="full-height">
+  <SmartLayoutSeparate first-size="200px" :show-line="false" class="full-height">
     <template #first>
       <TemplateGroup class="full-height" @change="handleCurrentChange" :editable="false" />
     </template>
@@ -11,7 +11,7 @@
         @checkbox-all="handleCheckboxAll"
       />
     </template>
-  </LayoutSeparate>
+  </SmartLayoutSeparate>
 </template>
 
 <script lang="ts" setup>
@@ -19,7 +19,7 @@
   import { ApiServiceEnum, defHttp } from '@/utils/http/axios';
 
   import { SmartTable, useSmartTable } from '@/components/SmartTable';
-  import { LayoutSeparate } from '@/components/LayoutSeparate';
+  import { SmartLayoutSeparate } from '@/components/SmartLayoutSeparate';
   import { TemplateType as templateTypeConstants } from '@/modules/smart-code/constants/DatabaseConstants';
   import TemplateGroup from '@/modules/smart-code/components/template/TemplateGroup.vue';
   import { watch } from 'vue';

src/modules/smart-code/views/database/DatabaseListView.vue

@@ -4,7 +4,7 @@
 -->
 <template>
   <div class="full-height page-container">
-    <LayoutSeparate first-size="240px" :show-line="false" class="full-height layout-container">
+    <SmartLayoutSeparate first-size="240px" :show-line="false" class="full-height layout-container">
       <template #first>
         <div class="full-height system-container">
           <SystemSimpleList
@@ -24,7 +24,7 @@
           </template>
         </SmartTable>
       </template>
-    </LayoutSeparate>
+    </SmartLayoutSeparate>
     <TemplateSelectedModal template-type="template_db_dict" @register="registerModal" />
   </div>
 </template>
@@ -41,7 +41,7 @@
 
   import TemplateSelectedModal from './components/TemplateSelectedModal.vue';
   import { useModal } from '@/components/Modal';
-  import { LayoutSeparate } from '@/components/LayoutSeparate';
+  import { SmartLayoutSeparate } from '@/components/SmartLayoutSeparate';
   import SystemSimpleList from '@/modules/smart-system/components/system/SystemSimpleList.vue';
   import { useSizeSetting } from '@/hooks/setting/UseSizeSetting';
 

src/modules/smart-code/views/template/CodeTemplateList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-height page-container" id="codeTemplateContainer">
-    <LayoutSeparate :show-line="false" first-size="240px" class="full-height">
+    <SmartLayoutSeparate :show-line="false" first-size="240px" class="full-height">
       <template #first>
         <div class="full-height" style="margin-right: 5px; background: white">
           <TemplateGroup @change="handleGroupChange" />
@@ -18,7 +18,7 @@
           </template>
         </SmartTable>
       </template>
-    </LayoutSeparate>
+    </SmartLayoutSeparate>
   </div>
 </template>
 
@@ -30,7 +30,7 @@
   import { message } from 'ant-design-vue';
 
   import { SmartTable, SmartVxeTableAction, useSmartTable } from '@/components/SmartTable';
-  import { LayoutSeparate } from '@/components/LayoutSeparate';
+  import { SmartLayoutSeparate } from '@/components/SmartLayoutSeparate';
   import TemplateGroup from '../../components/template/TemplateGroup.vue';
   import { CodeEditor } from '@/components/CodeEditor';
 

src/modules/smart-system/views/authSecret/SmartAuthSecretKeyListView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-height page-container">
-    <LayoutSeparate first-size="240px" :show-line="false" class="full-height">
+    <SmartLayoutSeparate first-size="240px" :show-line="false" class="full-height">
       <template #first>
         <div class="full-height system-container">
           <SystemSimpleList
@@ -37,7 +37,7 @@
           </template>
         </SmartTable>
       </template>
-    </LayoutSeparate>
+    </SmartLayoutSeparate>
   </div>
 </template>
 
@@ -52,7 +52,7 @@
     SmartVxeTableAction,
     useSmartTable,
   } from '@/components/SmartTable';
-  import LayoutSeparate from '@/components/LayoutSeparate/src/LayoutSeparate';
+  import SmartLayoutSeparate from '@/components/SmartLayoutSeparate/src/SmartLayoutSeparate';
   import SystemSimpleList from '@/modules/smart-system/components/system/SystemSimpleList.vue';
   import { hasPermission } from '@/utils/auth';
 

src/modules/smart-system/views/dataDict/DataDictListView.vue

@@ -1,20 +1,20 @@
 <template>
   <div class="full-height page-container">
-    <LayoutSeparate :show-line="false" first-size="60%" class="full-height">
+    <SmartLayoutSeparate :show-line="false" first-size="60%" class="full-height">
       <template #first>
         <DataDictGroup @code-change="handleCodeChange" />
       </template>
       <template #second>
         <DataDictItem :dict-id="dictId" />
       </template>
-    </LayoutSeparate>
+    </SmartLayoutSeparate>
   </div>
 </template>
 
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
 
-  import { LayoutSeparate } from '@/components/LayoutSeparate';
+  import { SmartLayoutSeparate } from '@/components/SmartLayoutSeparate';
 
   import DataDictGroup from './DataDictGroup.vue';
   import DataDictItem from './DataDictItem.vue';
@@ -25,7 +25,7 @@
   export default defineComponent({
     name: 'DataDictListView',
     components: {
-      LayoutSeparate,
+      SmartLayoutSeparate,
       DataDictGroup,
       DataDictItem,
     },

src/modules/smart-system/views/license/LicenseListView.vue

@@ -3,7 +3,7 @@ license管理页面
 -->
 <template>
   <div class="full-height page-container">
-    <LayoutSeparate first-size="240px" :show-line="false" class="full-height">
+    <SmartLayoutSeparate first-size="240px" :show-line="false" class="full-height">
       <template #first>
         <div class="full-height system-container">
           <SystemSimpleList
@@ -33,7 +33,7 @@ license管理页面
           </template>
         </SmartTable>
       </template>
-    </LayoutSeparate>
+    </SmartLayoutSeparate>
   </div>
 </template>
 
@@ -41,7 +41,7 @@ license管理页面
   import type { ActionItem } from '@/components/SmartTable';
 
   import { computed, ref, unref } from 'vue';
-  import { LayoutSeparate } from '@/components/LayoutSeparate';
+  import { SmartLayoutSeparate } from '@/components/SmartLayoutSeparate';
   import SystemSimpleList from '@/modules/smart-system/components/system/SystemSimpleList.vue';
   import { useSmartTable, SmartTable, SmartVxeTableAction } from '@/components/SmartTable';
   import { useI18n } from '@/hooks/web/useI18n';

src/modules/smart-system/views/user/UserListView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full-height page-container">
-    <LayoutSeparate :show-line="false" first-size="280px" class="full-height">
+    <SmartLayoutSeparate :show-line="false" first-size="280px" class="full-height">
       <template #first>
         <div class="full-height dept-container">
           <SysDeptTree async show-search @select="handleDeptSelected" />
@@ -41,7 +41,7 @@
           </template>
         </SmartTable>
       </template>
-    </LayoutSeparate>
+    </SmartLayoutSeparate>
     <UserAccountUpdateModal @register="registerAccountModal" />
     <UserSetRole @register="registerSetRoleModal" />
   </div>
@@ -56,7 +56,7 @@
   import { hasPermission } from '@/utils/auth';
   import { useModal } from '@/components/Modal';
 
-  import { LayoutSeparate } from '@/components/LayoutSeparate';
+  import { SmartLayoutSeparate } from '@/components/SmartLayoutSeparate';
   import SysDeptTree from '@/modules/smart-system/components/SysDept/SysDeptTree.vue';
   import { useMessage } from '@/hooks/web/useMessage';