feat(frontend): 工具箱支持资源池协议变更 #8076

dbm-ui/frontend/src/components/editable-table/Index.vue

@@ -29,8 +29,11 @@
 
     <div class="bk-edit-table-scroll">
       <div
-        ref="scrollX"
+        ref="scrollXRef"
         class="bk-edit-table-scroll-x"
+        :class="{
+          'is-show': isShowScrollX,
+        }"
         @scroll="handleScrollX">
         <div
           class="bk-edit-table-scroll-x-inner"
@@ -46,54 +49,70 @@
 </template>
 <script lang="ts">
   import _ from 'lodash';
-  import { type ComponentInternalInstance, type InjectionKey, provide, ref, shallowRef, type VNode, watch } from 'vue';
+  import {
+    type ComponentInternalInstance,
+    type InjectionKey,
+    provide,
+    type Ref,
+    ref,
+    shallowRef,
+    type VNode,
+    watch,
+  } from 'vue';
 
   import Column, { type IContext as IColumnContext } from './Column.vue';
   import RenderHeader from './component/render-header/Index.vue';
+  import Block from './edit/Block.vue';
   import DatePicker from './edit/DatePicker.vue';
   import Input from './edit/Input.vue';
   import Select from './edit/Select.vue';
   import TagInput from './edit/TagInput.vue';
-  import Text from './edit/Text.vue';
   import Textarea from './edit/Textarea.vue';
   import TimePicker from './edit/TimePicker.vue';
   import useResize from './hooks/use-resize';
   import useScroll from './hooks/use-scroll';
   import Row from './Row.vue';
   import { type IRule } from './types';
+  import useColumn from './useColumn';
+  import useTable from './useTable';
 
   /* eslint-disable vue/no-unused-properties */
-  interface Props {
+  export interface Props {
     model: Record<string, any>[];
     rules?: Record<string, IRule[]>;
+    validateDelay?: number;
   }
 
-  interface Emits {
+  export interface Emits {
     (e: 'validate', property: string, result: boolean, message: string): boolean;
   }
 
   interface Slots {
     default: () => VNode;
   }
 
-  interface Expose {
+  export interface Expose {
     validate: () => Promise<boolean>;
     validateByRowIndex: (row: number | number[]) => Promise<boolean>;
     validateByColumnIndex: (row: number | number[]) => Promise<boolean>;
     validateByField: (row: string | string[]) => Promise<boolean>;
   }
 
-  export const tableInjectKey: InjectionKey<{
-    props: Props;
-    emits: Emits;
-    registerRow: (rowColumnList: IColumnContext[]) => void;
-    updateRow: () => void;
-    unregisterRow: (rowColumnList: IColumnContext[]) => void;
-    getAllColumnList: () => IColumnContext[][];
-    getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
-  }> = Symbol.for('bk-editable-table');
-
-  export { Column, DatePicker, Input, Row, Select, TagInput, Text, Textarea, TimePicker };
+  export const tableInjectKey: InjectionKey<
+    {
+      props: Props;
+      emits: Emits;
+      fixedRight: Ref<boolean>;
+      fixedLeft: Ref<boolean>;
+      registerRow: (rowColumnList: IColumnContext[]) => void;
+      updateRow: () => void;
+      unregisterRow: (rowColumnList: IColumnContext[]) => void;
+      getAllColumnList: () => IColumnContext[][];
+      getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
+    } & Expose
+  > = Symbol.for('bk-editable-table');
+
+  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn, useTable };
 </script>
 <script setup lang="ts">
   const props = defineProps<Props>();
@@ -107,19 +126,17 @@
   });
 
   const tableRef = ref<HTMLElement>();
-  const scrollX = ref<HTMLElement>();
+  const scrollXRef = ref<HTMLElement>();
   const resizePlaceholderRef = ref<HTMLElement>();
   const tableWidth = ref<'auto' | number>('auto');
 
   const columnList = shallowRef<IColumnContext[]>([]);
   const rowList = shallowRef<IColumnContext[][]>([]);
 
-  const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
-  const { leftFixedStyles, rightFixedStyles, initalScroll } = useScroll(tableRef);
+  const isShowScrollX = ref(true);
 
-  watch(columnList, () => {
-    initalScroll();
-  });
+  const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
+  const { leftFixedStyles, rightFixedStyles, initalScroll, fixedLeft, fixedRight } = useScroll(tableRef);
 
   watch(
     columnSizeConfig,
@@ -129,7 +146,13 @@
           return;
         }
         tableWidth.value = tableRef.value.scrollWidth;
-        scrollX.value!.scrollLeft = tableRef.value!.scrollLeft;
+        scrollXRef.value!.scrollLeft = tableRef.value!.scrollLeft;
+        // 重新计算滚动显示状态
+        isShowScrollX.value = false;
+        setTimeout(() => {
+          isShowScrollX.value = scrollXRef.value!.offsetWidth + 2 < scrollXRef.value!.scrollWidth;
+        });
+        initalScroll();
       });
     },
     {
@@ -155,33 +178,25 @@
       _.some(rowColumnList, (column) => column.instance === columnInstance),
     );
 
-  provide(tableInjectKey, {
-    props,
-    emits,
-    registerRow,
-    updateRow,
-    unregisterRow,
-    getAllColumnList: () => rowList.value,
-    getColumnRelateRowIndexByInstance,
-  });
-
   const handleScrollX = _.throttle((event: Event) => {
     tableRef.value!.scrollLeft = (event.target as Element)!.scrollLeft;
   }, 30);
 
   const handleContentScroll = _.throttle((event: Event) => {
-    scrollX.value!.scrollLeft = (event.target as Element)!.scrollLeft;
+    scrollXRef.value!.scrollLeft = (event.target as Element)!.scrollLeft;
     tableRef.value?.click();
   }, 30);
 
-  defineExpose<Expose>({
-    validate() {
-      return Promise.all(_.flatten(rowList.value).map((column) => column.validate())).then(
+  const validate = () =>
+    Promise.resolve().then(() =>
+      Promise.all(_.flatten(rowList.value).map((column) => column.validate())).then(
         () => true,
         () => false,
-      );
-    },
-    validateByRowIndex(rowIndex: number | number[]) {
+      ),
+    );
+
+  const validateByRowIndex = (rowIndex: number | number[]) =>
+    Promise.resolve().then(() => {
       const rowIndexList = Array.isArray(rowIndex) ? rowIndex : [rowIndex];
 
       const columnList = rowIndexList.reduce<IColumnContext[]>((result, index) => {
@@ -193,8 +208,10 @@
         () => true,
         () => false,
       );
-    },
-    validateByColumnIndex(columnIndex: number | number[]) {
+    });
+
+  const validateByColumnIndex = (columnIndex: number | number[]) =>
+    Promise.resolve().then(() => {
       const columnIndexList = Array.isArray(columnIndex) ? columnIndex : [columnIndex];
 
       const columnList = rowList.value.reduce((result, rowItem) => {
@@ -208,8 +225,10 @@
         () => true,
         () => false,
       );
-    },
-    validateByField(field: string | string[]) {
+    });
+
+  const validateByField = (field: string | string[]) =>
+    Promise.resolve().then(() => {
       const fieldList = Array.isArray(field) ? field : [field];
 
       const columnList = rowList.value.reduce((result, rowItem) => {
@@ -227,10 +246,36 @@
         () => true,
         () => false,
       );
-    },
+    });
+
+  provide(tableInjectKey, {
+    props,
+    emits,
+    fixedLeft,
+    fixedRight,
+    registerRow,
+    updateRow,
+    unregisterRow,
+    getAllColumnList: () => rowList.value,
+    getColumnRelateRowIndexByInstance,
+    validate,
+    validateByRowIndex,
+    validateByColumnIndex,
+    validateByField,
+  });
+
+  defineExpose<Expose>({
+    validate,
+    validateByRowIndex,
+    validateByColumnIndex,
+    validateByField,
   });
 </script>
 <style lang="less">
+  @fixed-column-z-index: 111;
+  @scroll-z-index: 200;
+  @fixed-wrapper-z-index: 300;
+
   .bk-editable-table {
     position: relative;
     background: #fff;
@@ -293,17 +338,14 @@
         }
       }
 
-      &.is-column-fixed-left {
+      &.fixed-left-column {
         position: sticky;
         left: 0;
-        z-index: 9;
-        background: #fff;
       }
 
-      &.is-column-fixed-right {
+      &.fixed-right-column {
         position: sticky;
         right: 0;
-        background: #fff;
       }
     }
 
@@ -312,8 +354,9 @@
       color: #313238;
       background-color: #fafbfd;
 
-      &.is-column-fixed-left,
-      &.is-column-fixed-right {
+      &.fixed-left-column,
+      &.fixed-right-column {
+        z-index: 9;
         background-color: #fafbfd;
       }
 
@@ -325,8 +368,8 @@
     td {
       padding: 0;
 
-      &.is-column-fixed-left,
-      &.is-column-fixed-right {
+      &.is-fixed {
+        z-index: @fixed-column-z-index;
         background: #fff;
       }
     }
@@ -350,6 +393,7 @@
     top: 0;
     bottom: 0;
     left: 0;
+    z-index: @fixed-wrapper-z-index;
     overflow-x: hidden;
     pointer-events: none;
     box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
@@ -360,8 +404,9 @@
     top: 0;
     right: 0;
     bottom: 0;
+    z-index: @fixed-wrapper-z-index;
     pointer-events: none;
-    box-shadow: 8px 0 10px -5px rgb(0 0 0 / 12%);
+    box-shadow: -8px 0 10px -5px rgb(0 0 0 / 12%);
   }
 
   .bk-editable-column-resize {
@@ -378,13 +423,18 @@
     right: 1px;
     bottom: 0;
     left: 1px;
-    z-index: 99999999;
+    z-index: @scroll-z-index;
     height: 14px;
     overflow: scroll hidden;
     cursor: pointer;
     opacity: 0%;
+    visibility: hidden;
     transition: 0.15s;
 
+    &.is-show {
+      visibility: visible;
+    }
+
     &::-webkit-scrollbar {
       height: 6px;
       transition: 0.15s;

dbm-ui/frontend/src/components/editable-table/Row.vue

@@ -5,7 +5,7 @@
 </template>
 <script lang="ts">
   import _ from 'lodash';
-  import { inject, type InjectionKey, onBeforeMount, onMounted, provide } from 'vue';
+  import { inject, type InjectionKey, onBeforeUnmount, onMounted, provide } from 'vue';
 
   import type { IContext as IColumnContext } from './Column.vue';
   import { tableInjectKey } from './Index.vue';
@@ -14,6 +14,7 @@
     registerColumn: (column: IColumnContext) => void;
     unregisterColumn: (columnKey: string) => void;
     getColumnIndex: () => number;
+    getRowIndex: () => number;
   }> = Symbol.for('bk-editable-table-row');
 </script>
 <script setup lang="ts">
@@ -47,17 +48,20 @@
     };
   })();
 
+  const getRowIndex = () => tableContext?.getAllColumnList().findIndex((item) => item === columnList) as number;
+
   provide(injectKey, {
     registerColumn,
     unregisterColumn,
     getColumnIndex,
+    getRowIndex,
   });
 
   onMounted(() => {
     tableContext?.registerRow(columnList);
   });
 
-  onBeforeMount(() => {
+  onBeforeUnmount(() => {
     tableContext?.unregisterRow(columnList);
   });
 </script>

dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue

@@ -5,7 +5,8 @@
         v-for="(columnItem, index) in columnList"
         :key="`#${index}}#${columnItem.key}`"
         :class="{
-          [`is-column-fixed-${columnItem.props.fixed}`]: columnItem.props.fixed,
+          'fixed-left-column': columnItem.props.fixed === 'left',
+          'fixed-right-column': columnItem.props.fixed === 'right',
         }"
         :column="columnItem"
         :style="{