@funcho/ui 1.1.21 → 1.1.22

package/dist/esm/business/DataTable/DataTable.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, onMounted, resolveDirective, createElementBlock, openBlock, normalizeClass, unref, createCommentVNode, withDirectives, normalizeStyle, createVNode, createElementVNode, createBlock, withCtx, createTextVNode, toDisplayString, mergeProps, Fragment, renderList, createSlots, resolveDynamicComponent, h } from 'vue';
+import { defineComponent, ref, computed, onMounted, resolveDirective, createElementBlock, openBlock, normalizeClass, unref, createVNode, withDirectives, createCommentVNode, withCtx, renderSlot, createBlock, mergeProps, Fragment, renderList, createSlots, resolveDynamicComponent, h } from 'vue';
 import { useNamespace } from '../../hooks/use-namespace.mjs';
-import { FcButton, FcDangerButton, FcLinkButton } from '../../components/Button/index.mjs';
+import { FcDangerButton, FcLinkButton } from '../../components/Button/index.mjs';
 import '../../components/Dialog/index.mjs';
 import '../../components/ConfigProvider/index.mjs';
 import '../../components/Input/index.mjs';
@@ -57,7 +57,7 @@ import '../../components/Breadcrumb/index.mjs';
 import '../../components/BreadcrumbItem/index.mjs';
 import '../../components/Drawer/index.mjs';
 import '../../components/Popconfirm/index.mjs';
-import { FcIconComponent } from '../../components/IconComponent/index.mjs';
+import '../../components/IconComponent/index.mjs';
 import '../../components/Popover/index.mjs';
 import '../../components/Result/index.mjs';
 import '../../components/Progress/index.mjs';
@@ -77,10 +77,10 @@ import '../../components/CodeEditor/index.mjs';
 import '../../components/RichEditor/index.mjs';
 import '../../components/LovText/index.mjs';
 import '../../components/DotStatus/index.mjs';
-import _sfc_main$1 from '../ProForm/ProForm.vue.mjs';
-/* empty css                       */
 import { useElementSize } from '@vueuse/core';
 import _sfc_main$2 from '../../components/VNodeRenderer/index.vue.mjs';
+import _sfc_main$1 from '../QueryForm/QueryForm.vue.mjs';
+/* empty css                           */
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -101,12 +101,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const ns = useNamespace("data-table");
-    const formRef = ref();
-    const { height: formHeight } = useElementSize(formRef);
-    const hasMoreContent = computed(() => {
-      return formHeight.value > 28;
-    });
-    const isExpanded = ref(false);
     const props = __props;
     const renderActions = (actions, row, index) => {
       return h(
@@ -138,31 +132,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]
       );
     };
-    const renderTools = (tools) => {
-      return tools.filter((tool) => {
-        return typeof tool.hidden === "function" ? !tool.hidden() : !tool.hidden;
-      }).map((tool) => {
-        const vnode = h(
-          FcButton,
-          {
-            type: tool.type || "primary",
-            disabled: typeof tool.disabled === "function" ? tool.disabled() : tool.disabled,
-            onClick: () => tool.onClick(null, 0)
-          },
-          { default: () => tool.label }
-        );
-        const dirs = (tool.directives || []).map((dir) => {
-          const directiveInstance = resolveDirective(dir.name);
-          if (!directiveInstance) return null;
-          return [directiveInstance, dir.value, dir.arg, dir.modifiers];
-        }).filter(Boolean);
-        return dirs.length > 0 ? withDirectives(vnode, dirs) : vnode;
-      });
-    };
-    const queryBoxRef = ref(null);
-    const { height: queryBoxHeight } = useElementSize(queryBoxRef, void 0, {
-      box: "border-box"
-    });
+    const queryBoxRef = ref();
+    const queryBoxHeight = ref(0);
     const paginationBoxRef = ref(null);
     const { height: paginationBoxHeight } = useElementSize(paginationBoxRef, void 0, {
       box: "border-box"
@@ -172,30 +143,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const maxTableHeight = computed(() => {
       return (props.height || containerHeight.value) - ((queryBoxHeight.value > 0 ? queryBoxHeight.value + 8 : 0) + paginationBoxHeight.value);
     });
-    const searchFormFields = computed(() => {
-      return props.fields.map((field) => {
-        const { type, attrs = {} } = field;
-        if (!type || type === "" || type.includes("Input")) {
-          attrs.onClear = handleSearchClick;
-          attrs.onKeyup = (event) => {
-            if (event.key === "Enter") {
-              handleSearchClick();
-            }
-          };
-        }
-        if (type?.includes("Select") || type?.includes("Cascader") || type?.includes("DatePicker")) {
-          attrs.onClear = handleSearchClick;
-          attrs.onChange = handleSearchClick;
-        }
-        if (type?.includes("Radio") || type?.includes("Checkbox")) {
-          attrs.onChange = handleSearchClick;
-        }
-        return {
-          ...field,
-          attrs
-        };
-      });
-    });
     const pagination = ref({
       currentPage: 1,
       pageSize: 20,
@@ -211,7 +158,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (tableLoading.value) {
           return;
         }
-        const params = formRef.value?.model || {};
+        const params = queryBoxRef.value?.model || {};
         try {
           tableLoading.value = true;
           const { data } = await props.request(
@@ -230,7 +177,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       loadData();
     });
     const handleResetClick = () => {
-      formRef.value?.resetFields();
       pagination.value.currentPage = 1;
       loadData();
     };
@@ -254,65 +200,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: containerRef,
         class: normalizeClass(unref(ns).b())
       }, [
-        __props.fields && __props.fields.length > 0 ? (openBlock(), createElementBlock("div", {
-          key: 0,
+        createVNode(_sfc_main$1, {
           ref_key: "queryBoxRef",
           ref: queryBoxRef,
-          class: normalizeClass({ [unref(ns).e("query-box")]: true, [unref(ns).is("expanded")]: isExpanded.value }),
-          style: normalizeStyle({ "--query-box-max-height": unref(formHeight) + 16 + "px" })
-        }, [
-          createVNode(_sfc_main$1, {
-            ref_key: "formRef",
-            ref: formRef,
-            inline: "",
-            fields: searchFormFields.value,
-            class: normalizeClass(unref(ns).e("query-form")),
-            "label-position": "right",
-            "label-width": hasMoreContent.value && isExpanded.value ? "auto" : "fit-content"
-          }, null, 8, ["fields", "class", "label-width"]),
-          createElementVNode("div", {
-            class: normalizeClass(unref(ns).e("tools"))
-          }, [
-            hasMoreContent.value ? (openBlock(), createBlock(unref(FcButton), {
-              key: 0,
-              link: "",
-              type: "primary",
-              onClick: _cache[0] || (_cache[0] = ($event) => isExpanded.value = !isExpanded.value)
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(isExpanded.value ? "收起" : "展开"), 1),
-                createVNode(unref(FcIconComponent), {
-                  name: isExpanded.value ? "ArrowUp" : "ArrowDown",
-                  size: 14
-                }, null, 8, ["name"])
-              ]),
-              _: 1
-            })) : createCommentVNode("", true),
-            __props.fields && __props.fields.length > 2 ? (openBlock(), createBlock(unref(FcButton), {
-              key: 1,
-              disabled: tableLoading.value,
-              onClick: handleResetClick
-            }, {
-              default: withCtx(() => [..._cache[3] || (_cache[3] = [
-                createTextVNode(" 重置 ", -1)
-              ])]),
-              _: 1
-            }, 8, ["disabled"])) : createCommentVNode("", true),
-            createVNode(unref(FcButton), {
-              type: "primary",
-              disabled: tableLoading.value,
-              onClick: handleSearchClick
-            }, {
-              default: withCtx(() => [..._cache[4] || (_cache[4] = [
-                createTextVNode("查询", -1)
-              ])]),
-              _: 1
-            }, 8, ["disabled"]),
-            createVNode(_sfc_main$2, {
-              content: () => renderTools(__props.tools)
-            }, null, 8, ["content"])
-          ], 2)
-        ], 6)) : createCommentVNode("", true),
+          fields: __props.fields,
+          tools: __props.actions,
+          "btn-disabled": tableLoading.value,
+          onSearch: handleSearchClick,
+          onReset: handleResetClick,
+          onResize: _cache[0] || (_cache[0] = (e) => queryBoxHeight.value = e.height)
+        }, {
+          default: withCtx(() => [
+            !_ctx.$slots.tools ? renderSlot(_ctx.$slots, "tools", { key: 0 }) : createCommentVNode("", true)
+          ]),
+          _: 3
+        }, 8, ["fields", "tools", "btn-disabled"]),
         withDirectives((openBlock(), createBlock(unref(FcTable), mergeProps(_ctx.$attrs, {
           data: tableData.value,
           border: "",
@@ -364,7 +266,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           [_directive_loading, tableLoading.value]
         ]),
         __props.isPagination ? (openBlock(), createElementBlock("div", {
-          key: 1,
+          key: 0,
           ref_key: "paginationBoxRef",
           ref: paginationBoxRef,
           class: normalizeClass(unref(ns).e("pagination-box"))

package/dist/esm/business/QueryForm/QueryForm.vue.mjs

@@ -0,0 +1,244 @@
+import { defineComponent, ref, watch, computed, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeClass, unref, createVNode, createElementVNode, createBlock, renderSlot, withCtx, createTextVNode, toDisplayString, h, resolveDirective, withDirectives } from 'vue';
+import { useNamespace } from '../../hooks/use-namespace.mjs';
+import { FcButton } from '../../components/Button/index.mjs';
+import '../../components/Dialog/index.mjs';
+import '../../components/ConfigProvider/index.mjs';
+import '../../components/Input/index.mjs';
+import '../../components/Tree/index.mjs';
+import '../../components/Tabs/index.mjs';
+import '../../components/TabPane/index.mjs';
+import '../../components/Steps/index.mjs';
+import '../../components/Step/index.mjs';
+import '../../components/InputNumber/index.mjs';
+import '../../components/Select/index.mjs';
+import '../../components/Option/index.mjs';
+import '../../components/DatePicker/index.mjs';
+import '../../components/DatePickerPanel/index.mjs';
+import '../../components/Tooltip/index.mjs';
+import '../../components/Icon/index.mjs';
+import '../../components/Notification/index.mjs';
+import '../../components/Link/index.mjs';
+import '../../components/Text/index.mjs';
+import '../../components/Scrollbar/index.mjs';
+import '../../components/Splitter/index.mjs';
+import '../../components/SplitterPanel/index.mjs';
+import '../../components/Autocomplete/index.mjs';
+import '../../components/Cascader/index.mjs';
+import '../../components/CascaderPanel/index.mjs';
+import '../../components/Checkbox/index.mjs';
+import '../../components/CheckboxGroup/index.mjs';
+import '../../components/CheckboxButton/index.mjs';
+import '../../components/Form/index.mjs';
+import '../../components/FormItem/index.mjs';
+import '../../components/InputTag/index.mjs';
+import '../../components/Radio/index.mjs';
+import '../../components/RadioGroup/index.mjs';
+import '../../components/SelectV2/index.mjs';
+import '../../components/Switch/index.mjs';
+import '../../components/TimePicker/index.mjs';
+import '../../components/TimeSelect/index.mjs';
+import '../../components/TreeSelect/index.mjs';
+import '../../components/Upload/index.mjs';
+import '../../components/Avatar/index.mjs';
+import '../../components/AvatarGroup/index.mjs';
+import '../../components/Badge/index.mjs';
+import '../../components/Card/index.mjs';
+import '../../components/Descriptions/index.mjs';
+import '../../components/DescriptionsItem/index.mjs';
+import '../../components/Empty/index.mjs';
+import '../../components/Image/index.mjs';
+import '../../components/ImageViewer/index.mjs';
+import '../../components/Pagination/index.mjs';
+import '../../components/Table/index.mjs';
+import '../../components/TableColumn/index.mjs';
+import '../../components/TableV2/index.mjs';
+import '../../components/Tag/index.mjs';
+import '../../components/Breadcrumb/index.mjs';
+import '../../components/BreadcrumbItem/index.mjs';
+import '../../components/Drawer/index.mjs';
+import '../../components/Popconfirm/index.mjs';
+import { FcIconComponent } from '../../components/IconComponent/index.mjs';
+import '../../components/Popover/index.mjs';
+import '../../components/Result/index.mjs';
+import '../../components/Progress/index.mjs';
+import '../../components/Divider/index.mjs';
+import '../../components/Dropdown/index.mjs';
+import '../../components/DropdownMenu/index.mjs';
+import '../../components/DropdownItem/index.mjs';
+import '../../components/Menu/index.mjs';
+import '../../components/SubMenu/index.mjs';
+import '../../components/MenuItem/index.mjs';
+import '../../components/RadioButton/index.mjs';
+import '../../components/MenuItemGroup/index.mjs';
+import '../../components/Collapse/index.mjs';
+import '../../components/CollapseItem/index.mjs';
+import '../../components/ContextMenu/index.mjs';
+import '../../components/CodeEditor/index.mjs';
+import '../../components/RichEditor/index.mjs';
+import '../../components/LovText/index.mjs';
+import '../../components/DotStatus/index.mjs';
+import _sfc_main$1 from '../ProForm/ProForm.vue.mjs';
+/* empty css                       */
+import { useElementSize } from '@vueuse/core';
+import _sfc_main$2 from '../../components/VNodeRenderer/index.vue.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "FcProQueryForm",
+    inheritAttrs: false
+  },
+  __name: "QueryForm",
+  props: {
+    fields: { default: () => [] },
+    tools: { default: () => [] },
+    btnDisabled: { type: Boolean, default: false }
+  },
+  emits: ["search", "reset", "resize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = useNamespace("query-form");
+    const queryBoxRef = ref();
+    const { height: queryBoxHeight } = useElementSize(queryBoxRef, void 0, {
+      box: "border-box"
+    });
+    const emits = __emit;
+    watch(queryBoxHeight, (newHeight) => {
+      emits("resize", { height: newHeight });
+    });
+    const formRef = ref();
+    const { height: formHeight } = useElementSize(formRef);
+    const hasMoreContent = computed(() => {
+      return formHeight.value > 28;
+    });
+    const isExpanded = ref(false);
+    const props = __props;
+    const renderTools = (tools) => {
+      return tools.filter((tool) => {
+        return typeof tool.hidden === "function" ? !tool.hidden() : !tool.hidden;
+      }).map((tool) => {
+        const vnode = h(
+          FcButton,
+          {
+            type: tool.type || "primary",
+            disabled: typeof tool.disabled === "function" ? tool.disabled() : tool.disabled,
+            onClick: () => tool.onClick(null, 0)
+          },
+          { default: () => tool.label }
+        );
+        const dirs = (tool.directives || []).map((dir) => {
+          const directiveInstance = resolveDirective(dir.name);
+          if (!directiveInstance) return null;
+          return [directiveInstance, dir.value, dir.arg, dir.modifiers];
+        }).filter(Boolean);
+        return dirs.length > 0 ? withDirectives(vnode, dirs) : vnode;
+      });
+    };
+    const searchFormFields = computed(() => {
+      return props.fields.map((field) => {
+        const { type, attrs = {} } = field;
+        if (!type || type === "" || type.includes("Input")) {
+          attrs.onClear = handleSearchClick;
+          attrs.onKeyup = (event) => {
+            if (event.key === "Enter") {
+              handleSearchClick();
+            }
+          };
+        }
+        if (type?.includes("Select") || type?.includes("Cascader") || type?.includes("DatePicker")) {
+          attrs.onClear = handleSearchClick;
+          attrs.onChange = handleSearchClick;
+        }
+        if (type?.includes("Radio") || type?.includes("Checkbox")) {
+          attrs.onChange = handleSearchClick;
+        }
+        return {
+          ...field,
+          attrs
+        };
+      });
+    });
+    const handleResetClick = () => {
+      formRef.value?.resetFields();
+      emits("reset", formRef.value?.model || {});
+    };
+    const handleSearchClick = () => {
+      emits("search", formRef.value?.model || {});
+    };
+    __expose(
+      new Proxy(
+        {},
+        {
+          get(_, key) {
+            return formRef.value?.[key];
+          },
+          has(_, key) {
+            return key in formRef.value;
+          }
+        }
+      )
+    );
+    return (_ctx, _cache) => {
+      return __props.fields && __props.fields.length > 0 ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref_key: "queryBoxRef",
+        ref: queryBoxRef,
+        class: normalizeClass({ [unref(ns).e("query-box")]: true, [unref(ns).is("expanded")]: isExpanded.value }),
+        style: normalizeStyle({ "--query-box-max-height": unref(formHeight) + 16 + "px" })
+      }, [
+        createVNode(_sfc_main$1, {
+          ref_key: "formRef",
+          ref: formRef,
+          inline: "",
+          fields: searchFormFields.value,
+          class: normalizeClass(unref(ns).e("query-form")),
+          "label-position": "right",
+          "label-width": hasMoreContent.value && isExpanded.value ? "auto" : "fit-content"
+        }, null, 8, ["fields", "class", "label-width"]),
+        createElementVNode("div", {
+          class: normalizeClass(unref(ns).e("tools"))
+        }, [
+          hasMoreContent.value ? (openBlock(), createBlock(unref(FcButton), {
+            key: 0,
+            link: "",
+            type: "primary",
+            onClick: _cache[0] || (_cache[0] = ($event) => isExpanded.value = !isExpanded.value)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(isExpanded.value ? "收起" : "展开"), 1),
+              createVNode(unref(FcIconComponent), {
+                name: isExpanded.value ? "ArrowUp" : "ArrowDown",
+                size: 14
+              }, null, 8, ["name"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          __props.fields && __props.fields.length > 2 ? (openBlock(), createBlock(unref(FcButton), {
+            key: 1,
+            disabled: __props.btnDisabled,
+            onClick: handleResetClick
+          }, {
+            default: withCtx(() => [..._cache[1] || (_cache[1] = [
+              createTextVNode(" 重置 ", -1)
+            ])]),
+            _: 1
+          }, 8, ["disabled"])) : createCommentVNode("", true),
+          createVNode(unref(FcButton), {
+            type: "primary",
+            disabled: __props.btnDisabled,
+            onClick: handleSearchClick
+          }, {
+            default: withCtx(() => [..._cache[2] || (_cache[2] = [
+              createTextVNode("查询", -1)
+            ])]),
+            _: 1
+          }, 8, ["disabled"]),
+          createVNode(_sfc_main$2, {
+            content: () => renderTools(__props.tools)
+          }, null, 8, ["content"]),
+          renderSlot(_ctx.$slots, "tools")
+        ], 2)
+      ], 6)) : createCommentVNode("", true);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/dist/esm/business/QueryForm/QueryForm.vue3.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './QueryForm.vue.mjs';
+/* empty css                */
+
+
+
+export { _sfc_main as default };

package/dist/esm/business/QueryForm/index.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './QueryForm.vue.mjs';
+/* empty css                */
+import { withInstall } from '../../_utils/with-install.mjs';
+
+const FcProQueryForm = withInstall(_sfc_main);
+
+export { FcProQueryForm, FcProQueryForm as default };

package/dist/esm/business/index.mjs

@@ -5,3 +5,4 @@ export { FcProTreeCheckFilter } from './TreeCheckFilter/index.mjs';
 export { FcProTreeTransfer } from './TreeTransfer/index.mjs';
 export { FcProEditFormCard } from './EditFormCard/index.mjs';
 export { FcProFormDialog } from './FormDialog/index.mjs';
+export { FcProQueryForm } from './QueryForm/index.mjs';

package/dist/esm/components/ContextMenu/ContextMenu.vue.mjs

@@ -1,6 +1,7 @@
-import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createVNode, createElementBlock, Fragment, renderList, mergeProps, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, ref, createBlock, openBlock, unref, normalizeClass, withCtx, createVNode, createElementBlock, Fragment, renderList, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import { ElDropdown, ElDropdownMenu, ElDropdownItem } from '../../node_modules/.pnpm/element-plus@2.13.5_patch_hash_415fe9eaeb4c26121ef1304c7dfbfaa75441fcd0d7ca1a8beb1acd12_87ac520f28bb40f5a8b03aa48269c150/node_modules/element-plus/es/components/dropdown/index.mjs';
 import '../../_virtual/dayjs.min.mjs';
+import { useNamespace } from '../../hooks/use-namespace.mjs';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -12,6 +13,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["command"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const ns = useNamespace("context-menu");
     const props = __props;
     const position = ref({
       top: 0,
@@ -58,6 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ref: elRef,
         "virtual-ref": triggerRef.value,
         "show-arrow": false,
+        class: normalizeClass(unref(ns).b()),
         "popper-options": {
           modifiers: [{ name: "offset", options: { offset: [0, 0] } }]
         },
@@ -85,7 +88,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 1
-      }, 8, ["virtual-ref"]);
+      }, 8, ["virtual-ref", "class"]);
     };
   }
 });

package/dist/esm/index.mjs

@@ -93,6 +93,7 @@ export { FcProTreeCheckFilter } from './business/TreeCheckFilter/index.mjs';
 export { FcProTreeTransfer } from './business/TreeTransfer/index.mjs';
 export { FcProEditFormCard } from './business/EditFormCard/index.mjs';
 export { FcProFormDialog } from './business/FormDialog/index.mjs';
+export { FcProQueryForm } from './business/QueryForm/index.mjs';
 
 const components = Object.keys(index$1).map((key) => {
   return index$1[key];

package/dist/esm/packages/ui/package.json.mjs

@@ -1,3 +1,3 @@
-const version = "1.1.21";
+const version = "1.1.22";
 
 export { version };

package/dist/style.css

@@ -16863,6 +16863,10 @@ to {
 }
 .fc-mkui-dropdown__arrow.is-active {
   transform: rotateZ(180deg);
+}.fc-mkui-context-menu {
+  display: block;
+  height: 0;
+  width: 0;
 }.fc-mkui-ace-editor {
   height: 100%;
   width: 100%;
@@ -17086,62 +17090,67 @@ to {
 .fc-mkui-pro-form__container .fc-mkui-pro-form__label-with-tooltip .fc-ui-icon {
   color: #7a7a7a;
   cursor: pointer;
-}.fc-mkui-data-table {
-  height: 100%;
-}
-.fc-mkui-data-table .fc-ui-table {
-  border-radius: 2px;
-}
-.fc-mkui-data-table .fc-ui-table__inner-wrapper .fc-ui-table__cell {
-  border-right: none;
-}
-.fc-mkui-data-table .fc-ui-table__inner-wrapper::before {
-  background-color: #c5d6ff;
-}
-.fc-mkui-data-table .fc-ui-table__inner-wrapper::after {
-  background-color: #c5d6ff;
-}
-.fc-mkui-data-table .fc-ui-table--border::after {
-  background-color: #c5d6ff;
-}
-.fc-mkui-data-table .fc-ui-table__border-left-patch {
-  background-color: #c5d6ff;
-}
-.fc-mkui-data-table__query-box {
+}.fc-mkui-query-form__query-box {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   background-color: #e8efff;
   border-radius: 2px;
   margin-bottom: 8px;
-  padding: 8px 16px;
+  padding: 8px;
   max-height: 44px;
   overflow: hidden;
   transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }
-.fc-mkui-data-table__query-box.is-expanded {
+.fc-mkui-query-form__query-box.is-expanded {
   max-height: var(--query-box-max-height);
 }
-.fc-mkui-data-table .fc-mkui-data-table__query-form {
+.fc-mkui-query-form__query-form {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 8px 24px;
 }
-.fc-mkui-data-table .fc-mkui-data-table__query-form .fc-ui-form-item {
+.fc-mkui-query-form__query-form .fc-ui-form-item {
   margin: 0;
 }
-.fc-mkui-data-table .fc-mkui-data-table__query-form .fc-ui-form-item .fc-ui-cascader .fc-ui-cascader__tags {
+.fc-mkui-query-form__query-form .fc-ui-form-item .fc-ui-cascader .fc-ui-cascader__tags {
   display: inline-flex;
   flex-wrap: nowrap;
 }
-.fc-mkui-data-table .fc-mkui-data-table__query-form .fc-ui-form-item .fc-ui-cascader .fc-ui-cascader__tags .fc-ui-tag {
+.fc-mkui-query-form__query-form .fc-ui-form-item .fc-ui-cascader .fc-ui-cascader__tags .fc-ui-tag {
   max-width: calc(100% - 109px);
 }
-.fc-mkui-data-table__tools {
+.fc-mkui-query-form__tools {
   margin-top: auto;
   flex-shrink: 0;
   padding-left: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.fc-mkui-query-form__tools .fc-ui-button {
+  margin: 0;
+}.fc-mkui-data-table {
+  height: 100%;
+}
+.fc-mkui-data-table .fc-ui-table {
+  border-radius: 2px;
+}
+.fc-mkui-data-table .fc-ui-table__inner-wrapper .fc-ui-table__cell {
+  border-right: none;
+}
+.fc-mkui-data-table .fc-ui-table__inner-wrapper::before {
+  background-color: #c5d6ff;
+}
+.fc-mkui-data-table .fc-ui-table__inner-wrapper::after {
+  background-color: #c5d6ff;
+}
+.fc-mkui-data-table .fc-ui-table--border::after {
+  background-color: #c5d6ff;
+}
+.fc-mkui-data-table .fc-ui-table__border-left-patch {
+  background-color: #c5d6ff;
 }
 .fc-mkui-data-table__pagination-box {
   padding-top: 8px;