@jzt-packages/components 1.0.0

package/src/JztSearchForm/index.vue

@@ -0,0 +1,530 @@
+<template>
+  <div v-if="queryItemList.length" class="table-search" :class="[isCard ? 'spd-card' : 'noCardGap',validQuery ? 'validQueryForm' : '']">
+    <slot name="formTopSlot"></slot>
+    <el-form ref="formRef" :model="searchParam" label-width="auto">
+      <div v-if="customForm" style="display: flex; flex-wrap: wrap">
+        <div
+          v-for="(item, index) in queryItemList"
+          :key="item.prop"
+          v-bind="getResponsive(item)"
+          :index="index"
+          :style="{
+            display: 'inline-block',
+            width: item.search?.width ?? '350px',
+            marginRight:'15px',
+            ...item?.search?.style
+          }"
+        >
+          <el-form-item
+            :prop="item.prop"
+            :rules="item.rules"
+            :label-width="item.search?.labelWidth"
+          >
+            <template #label>
+              <el-space :size="4" style="height: 100%;">
+                <component v-if="item?.labelRender" :is="item?.labelRender" />
+                <span
+                  v-else
+                  style="line-height: 20px; text-align: right"
+                  :style="{
+                    'max-width': item.search?.labelWidth
+                      ? item.search?.labelWidth
+                      : '106px',
+                    width: item.search?.labelWidth
+                      ? item.search?.labelWidth
+                      : '',
+                  }"
+                  >{{ `${item.label}` }}</span
+                >
+                <!-- <span v-if="item?.label">:</span> -->
+                <el-tooltip
+                  v-if="item.search?.tooltip"
+                  effect="dark"
+                  :content="item.search?.tooltip"
+                  placement="top"
+                >
+                  <el-icon><Warning /></el-icon>
+                </el-tooltip>
+              </el-space>
+            </template>
+            <SearchFormItem
+              :query-item="item"
+              :search-param="searchParam"
+              :show-param="showParam"
+              @getCascaderValue="getCascaderValue"
+              @handleItemClear="handleItemClear"
+              :teleported="false"
+              @handle-search="handleSearch"
+            />
+          </el-form-item>
+        </div>
+        <div class="mb8">
+          <slot name="rightBtn" class="rightBtn">
+            <div v-if="showQueryBtn || showResetBtn" class="operation mr5">
+              <el-button v-if="showQueryBtn" type="primary" @click="search">
+              查询
+              </el-button>
+              <el-button v-if="showResetBtn" plain @click="reset">重置</el-button>
+            </div>
+          </slot>
+        </div>
+      </div>
+      <JztGrid
+        v-else
+        ref="gridRef"
+        :collapsed="allowCollapsed && isCollapsed"
+        :gap="[15, 0]"
+        :cols="searchCol"
+        @hiddenIndex="hiddenIndex"
+      >
+   
+        <GridItem
+          v-for="(item, index) in queryItemList"
+          :key="item.prop"
+          v-bind="getResponsive(item)"
+          :index="index"
+        >
+     
+          <el-form-item
+            :prop="item.prop"
+            :rules="item.rules"
+            :label-width="item.search?.labelWidth"
+          >
+       
+            <template #label v-if="item.search?.isShowLabel!==false">
+              <el-space :size="4" style="height: 100%">
+                <component v-if="item?.labelRender" :is="item?.labelRender" />
+                <span
+                  v-else
+                  style="line-height: 20px; text-align: right"
+                  :style="{
+                    'max-width': item.search?.labelWidth
+                      ? item.search?.labelWidth
+                      : '106px',
+                    width: item.search?.labelWidth
+                      ? item.search?.labelWidth
+                      : '',
+                  }"
+                  >{{ `${item.label}` }}</span
+                >
+                <el-tooltip
+                  v-if="item.search?.tooltip"
+                  effect="dark"
+                  :content="item.search?.tooltip"
+                  placement="top"
+                >
+                  <el-icon><Warning /></el-icon>
+                </el-tooltip>
+              </el-space>
+            </template>
+            <SearchFormItem
+              :query-item="item"
+              :search-param="searchParam"
+              :show-param="showParam"
+              @getCascaderValue="getCascaderValue"
+              @handleItemClear="handleItemClear"
+              @handle-search="handleSearch"
+            />
+          </el-form-item>
+        </GridItem>
+        <GridItem v-if="showQueryBtn || showResetBtn" :suffix="suffix">
+          <div class="operation mb8" :class="{ 'follow-btn': !suffix }">
+            <el-button v-if="showQueryBtn" type="primary" @click="search">查询</el-button>
+            <el-button v-if="showResetBtn" type="primary" plain @click="reset">重置</el-button>
+            <div v-if="slots.rightBtn" class="ml12">
+              <slot name="rightBtn"></slot>
+            </div>
+            <el-button
+              v-if="allowCollapsed && showCollapse"
+              type="primary"
+              link
+              class="search-isOpen"
+              @click="isCollapsed = !isCollapsed"
+            >
+              {{ isCollapsed ? "展开" : "收起" }}
+              <el-icon class="el-icon--right">
+                <component :is="isCollapsed ? ArrowDown : ArrowUp"></component>
+              </el-icon>
+            </el-button>
+          </div>
+        </GridItem>
+      </JztGrid>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { computed, ref, unref, provide, useSlots } from "vue";
+import { QueryItemsProps } from "./interface";
+import { BreakPoint } from "../JztGrid/interface";
+import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+import SearchFormItem from "./components/SearchFormItem.vue";
+import JztGrid from "../JztGrid/index.vue";
+import GridItem from "../JztGrid/components/GridItem.vue";
+import type { FormInstance } from "element-plus";
+import { debounce } from 'lodash-es';
+import {
+  useSetEnumMap,
+  useSetCascaderEnumMap,
+} from "../hooks/useFormByUserType";
+
+interface ProTableProps {
+  queryItems?: QueryItemsProps[]; // 搜索配置列
+  searchParam?: { [key: string]: any }; // 搜索参数
+  showParam?: { [key: string]: any }; // 查看参数
+  searchInitParam?: { [key: string]: any }; // 搜索默认参数
+  searchCol: number | Record<BreakPoint, number>;
+  search: () => void; // 搜索方法
+  reset: (params: any) => void; // 重置方法
+  allowCollapsed?: boolean; // 是否允许折叠
+  collapsed?: boolean; // 是否默认折叠
+  showQueryBtn?: boolean; // 是否展示查询重构按钮
+  showResetBtn?: boolean; // 是否展示重置按钮
+  customForm?: boolean;
+  suffix?: boolean; // 按钮是否总是在最后（不跟随）
+  isCard?: boolean // 是否需要card样式，某下弹框不需要的话 设置false
+  validQuery?: boolean // 是否需要校验表单
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  queryItems: () => [],
+  searchParam: () => ({}),
+  searchInitParam: () => ({}),
+  allowCollapsed: true,
+  collapsed: true,
+  showQueryBtn: true,
+  showResetBtn: true,
+  customForm: false,
+  suffix: false,
+  isCard: true,
+  validQuery: false,
+});
+const slots = useSlots()
+// 查询列表项
+const queryItemList = computed(() => {
+  const list = [] as QueryItemsProps[];
+  props.queryItems.forEach(async (item: QueryItemsProps) => {
+    if (item.isShow !== false) {
+      list.push(item);
+    } else {
+      // 动态隐藏时 清空搜索参数
+      // props.searchParam[item.prop as keyof typeof props.searchParam] = null
+      // emit('update:searchParam', props.searchParam)
+    }
+    if (item.enum)
+      // 设置 enumMap  处理字典数据
+      // await setEnumMap(item)
+      await useSetEnumMap({
+        queryItem: item,
+        enumMap,
+        callBack: setSelectFirstValue,
+        isShow: false,
+      });
+  });
+  return list;
+});
+
+const isCollapsed = ref(props.collapsed);
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>());
+// 扁平化 columns 的方法 处理字典数据
+// const flatColumnsFunc = (queryItems: QueryItemsProps[]) => {
+//   queryItems.forEach(async item => {
+//     if (item.enum) {
+//       // 设置 enumMap
+//       await setEnumMap(item)
+//     }
+//   })
+// }
+
+// const setEnumMap = async ({ prop, isAwait, enum: enumValue, isSetFirstValue, fieldNames }: QueryItemsProps) => {
+//   if (!enumValue) return
+//   // 是否接口等待
+//   if (isAwait) return
+//   // 如果当前 enumMap 存在相同的值 return
+//   if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return
+//   // 当前 enum 为静态数据，则直接存储到 enumMap
+//   if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))
+//   // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+//   enumMap.value.set(prop!, [])
+//   // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+//   const { data, result } = await enumValue()
+//   let list = data || result || []
+//   enumMap.value.set(prop!, list)
+//   if (useFormSetByUserType(isSetFirstValue, prop)) {
+//     setSelectFirstValue(prop, list[0], fieldNames)
+//   }
+// }
+// change 获取接口数据
+// const setCascaderEnumMap = async (
+//   prop,
+//   { enum: enumValue, isSetFirstValue, fieldNames }: QueryItemsProps,
+//   val: string
+// ) => {
+//   if (!enumValue) return
+
+//   // 如果当前 enumMap 存在相同的值  也不return  根据change实时获取
+//   // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+//   if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))
+//   enumMap.value.set(prop!, [])
+//   // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+//   const { data, result } = await enumValue(val, props.searchParam)
+//   let list = data || result || []
+//   enumMap.value.set(prop!, list)
+//   if (useFormSetByUserType(isSetFirstValue, prop)) {
+//     setSelectFirstValue(prop, list[0], fieldNames)
+//   }
+// }
+// 注入 enumMap
+provide("enumMap", enumMap);
+
+const waitFirstValueCount = ref<number>(0) //需要等待的次数
+// 处理默认选中第一条数据
+const setSelectFirstValue = (prop, firstItem, fieldNames, queryItem) => {
+  if (prop && firstItem) {
+    const itemValue = fieldNames?.value || 'value'
+    if (queryItem.search?.props?.multiple) {
+      props.searchParam[prop] = [firstItem[itemValue]]
+      props.searchInitParam[prop] = [firstItem[itemValue]]
+    }else{
+      props.searchParam[prop] = firstItem[itemValue]
+      props.searchInitParam[prop] = firstItem[itemValue]
+    }
+    if (queryItem) {
+      if (queryItem.search?.props?.multiple) {
+        queryItem['defaultValue'] = queryItem?.['defaultValue'] || [firstItem[itemValue]]
+      } else {
+        queryItem['defaultValue'] = queryItem?.['defaultValue'] || firstItem[itemValue]
+      }
+    }
+    emit("update:searchParam", props.searchParam);
+    emit("update:searchInitParam", props.searchInitParam);
+  }
+  waitFirstValueCount.value++;
+  emit("setFirstValue", waitFirstValueCount.value);
+};
+const emit = defineEmits(["update:searchParam", "setFirstValue",'update:searchInitParam']);
+// 获取getCascader数据
+const getCascaderValue = (val, isClear: boolean = false) => {
+  const allFlatQuery = props.queryItems;
+  if (val.cascader && val.cascader.length) {
+    val.cascader.forEach((cascader) => {
+      if (isClear) {
+        // 递归处理需要清除的数据
+        clearNextItem(cascader, val)
+        // const index = allFlatQuery.findIndex(item => item.prop === cascader)
+        // if (index === -1) return
+        // const queryItem = allFlatQuery[index]
+        // props.searchParam[queryItem.prop] = null // 让下一级的表单数据为空
+        // enumMap.value.set(queryItem.prop, []) // 让下一级的下拉数据清空
+      } else if (props.searchParam[val.prop]) {
+        const index = allFlatQuery.findIndex((item) => item.prop === cascader);
+        if (index === -1) return;
+        const queryItem = allFlatQuery[index];
+        // 为了解决 在SearchFormItem中 监听也会触发，导致多次接口调用的问题
+        // if (queryItem.isAwait) {
+        // 有值才会去掉接口，处理clearable 不清空问题
+        useSetCascaderEnumMap({
+          prevProp: val.prop,
+          queryItem,
+          enumMap,
+          searchParam: props.searchParam,
+          callBack: setSelectFirstValue,
+        });
+        // setCascaderEnumMap(queryItem.prop, queryItem, props.searchParam[val.prop])
+        // }
+      }
+    });
+  }
+  emit("update:searchParam", props.searchParam);
+};
+// 递归处理需要清除的数据（例如省市区三级的情况，清空/更改省->清空：市与区）
+const clearNextItem = (cascader) => {
+  if (!cascader || !cascader.length) return;
+  const allFlatQuery = props.queryItems;
+  const index = allFlatQuery.findIndex((item) => item.prop === cascader);
+  if (index === -1) return;
+  const queryItem = allFlatQuery[index];
+  props.searchParam[queryItem.prop] = null; // 让下一级的表单数据为空
+  enumMap.value.set(queryItem.prop, []); // 让下一级的下拉数据清空
+  if (queryItem.cascader && queryItem.cascader.length) {
+    queryItem.cascader.forEach(item => {
+      clearNextItem(item)
+    })
+  }
+  if (!queryItem.isAwait && queryItem.isClearSearch) {
+    // 说明 清空后 也需要查询，清空是空值查询
+    useSetCascaderEnumMap({
+      prevProp: val.prop,
+      queryItem,
+      enumMap,
+      searchParam: props.searchParam,
+      callBack: setSelectFirstValue
+    })
+  }
+};
+// flatColumnsFunc(props.queryItems);
+
+// 清空也触发接口
+const handleItemClear = val => {
+  const allFlatQuery = props.queryItems
+  val.cascader?.forEach(cascader => {
+    const index = allFlatQuery.findIndex(item => item.prop === cascader)
+    if (index === -1) return
+    const queryItem = allFlatQuery[index]
+    if (queryItem?.isClearSearch) {
+      useSetCascaderEnumMap({
+        prevProp: val.prop,
+        queryItem,
+        enumMap,
+        searchParam: props.searchParam,
+        callBack: setSelectFirstValue
+      })
+    }
+  })
+}
+// 获取响应式设置
+const getResponsive = (item: QueryItemsProps) => {
+  return {
+    span: item.search?.span,
+    offset: item.search?.offset ?? 0,
+    xs: item.search?.xs,
+    sm: item.search?.sm,
+    md: item.search?.md,
+    lg: item.search?.lg,
+    xl: item.search?.xl,
+  };
+};
+// 查询表单实例
+const formRef = ref();
+// const searchHandler = async () => {
+// const valid = await validateForm;
+// if (!valid) return;
+// props.search(props.searchParam);
+// };
+
+const validateForm = async () => {
+  // if (!props.queryItems || !props.queryItems.length) return true;
+  const formEl = formRef.value as FormInstance | undefined;
+  if (!formEl) return true;
+  try {
+    await formEl.validate();
+    return true;
+  } catch (error) {
+    console.log(error);
+    return false;
+  }
+};
+
+// 是否默认折叠搜索项
+// const collapsed = ref(true);
+
+// 获取响应式断点
+const gridRef = ref();
+// const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
+
+const showCollapse = ref(false);
+
+const hiddenIndex = (hiddenIndex) => {
+  showCollapse.value = hiddenIndex !== -1;
+};
+const handleSearch = debounce(() => {
+    props.search()
+  },
+  500,
+  { leading: true }
+)
+
+// 判断是否显示 展开/合并 按钮
+// const showCollapse = computed(() => {
+//   let show = false;
+//   props.queryItems.reduce((prev, current) => {
+//     prev +=
+//       (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
+//       (current.search![breakPoint.value]?.offset ??
+//         current.search?.offset ??
+//         0);
+//     if (typeof props.searchCol !== "number") {
+//       if (prev >= props.searchCol[breakPoint.value]) show = true;
+//     } else {
+//       if (prev >= props.searchCol) show = true;
+//     }
+//     return prev;
+//   }, 0);
+//   return show;
+// });
+
+defineExpose({
+  validateForm,
+});
+</script>
+
+<style lang="scss" scoped>
+// :deep(.el-form-item__label) {
+// text-align: center;
+//   height: 100%;
+// }
+.spd-card{
+  box-shadow: none !important;
+}
+/* // table-search 表格搜索样式 */
+.table-search.validQueryForm {
+    .el-form  .el-form-item {
+    margin-bottom: 13px;
+  }
+}
+.table-search {
+  padding: 12px 12px 4px;
+  margin-bottom: 10px;
+  .el-form {
+    .el-form-item__content > * {
+      width: 100%;
+    }
+    .el-form-item {
+      margin-bottom: 11px;
+      :deep(.el-form-item__label) {
+        .el-select__wrapper {
+          padding: 2px 6px;
+          .el-select__placeholder {
+            color: #333 !important;
+          }
+        }
+      }
+
+      // &.is-error {
+      // }
+      // &.is-required {
+      //   [class*='__wrapper'] {
+      //     background-color: #ffebea !important;
+      //   }
+      // }
+      // .el-form-item__error {
+      //   display: none;
+      // }
+      :deep(.el-form-item__error) {
+        display: none;
+        padding-top: 1px;
+        font-size: 12px;
+      }
+    }
+
+    // 去除时间选择器上下 padding
+    .el-range-editor.el-input__wrapper {
+      padding: 0 10px;
+    }
+  }
+  .operation {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    &.follow-btn{
+      justify-content: flex-start;
+    }
+  }
+}
+
+.noCardGap{
+  margin-bottom: 0;
+}
+</style>

package/src/JztSearchForm/interface/index.ts

@@ -0,0 +1,100 @@
+import { VNode, Ref } from "vue";
+import { BreakPoint, Responsive } from "../../JztGrid/interface";
+import { EnumProps } from "../../JztQueryTable/interface/index";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+
+export type SearchProps = {
+  el?: SearchType; // 当前项搜索框的类型
+  label?: string; // 当前项搜索框的 label
+  props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  events?:any; // 搜索项事件，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  tooltip?: string; // 搜索提示
+  order?: number; // 搜索项排序（从大到小）
+  span?: number; // 搜索项所占用的列数，默认为 1 列
+  offset?: number; // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[] | Ref<any>; // 搜索项默认值
+  render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+  dictType?: string | number; // 字典ID
+  isSetEmptyData?: boolean; // 是否设置空数据  适用场景例如：供应商 不选择时：页面为空，实际接口需要默认传 GUIDNoneValue：  00000000-0000-0000-0000-000000000000
+  emptyNullValue?: any; // 空数据默认值，默认值是GUIDNoneValue
+  startField?: string; // 数组开始字段
+  endField?: string; // 数组结束字段
+  labelWidth?: string | number; // label宽度  --  仅仅在特殊情况才建议使用
+  width?: string; // 当前项搜索框的宽度  --  仅仅在特殊情况下才生效
+  allowCheckLevel?: number;  // 允许都选的长度层级，未达到的话，就说明此条数没有固定的子节点，场景： 医疗机构->仓库->科室，只允许选择科室，但是没有科室的医疗机构仓库 会正常返回，此时就不允许选择 第一层，第二层
+  hasCheckbox?: boolean;   // 是否显示全选反选
+  style?: object // 样式
+  isEnter?: boolean; // 是否开启回车搜索  
+} & Partial<Record<BreakPoint, Responsive>>;
+
+export type appendSlotProps = {
+  show?: boolean; // 是否显示
+  type?: string; // 按钮类型 primary border
+} 
+export interface QueryItemsProps<T = any> {
+  label?: string;
+  labelRender?: () => VNode | string; // 自定义单元格标题渲染（tsx语法）
+  rightRender?: () => VNode | string // 自定义单元格标题渲染（tsx语法）
+    prop: keyof T;
+  enumKey?: keyof T;
+  el?: string; // 组件
+  // type?: TypeProps; // 列类型
+  isShow?: boolean | Ref<boolean>; // 是否显示在表格当中
+  // isHide?: boolean | Ref<boolean>; // 是否隐藏
+  search?: SearchProps | undefined; // 搜索项配置
+  enum?:
+    | EnumProps[]
+    | Ref<EnumProps[]>
+    | ((val?: any, params?: any) => Promise<any>); // 枚举字典
+  fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+  // render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+  rules?: any[];
+  // options?: any[];
+  cascader?: string[];
+  isAwait?: boolean; // 是否需要等待请求接口
+  change?: (scope: any) => any; // change事件事件
+  isSetFirstValue?: boolean; // 是否需要默认选中第一个数据
+  appendProps?: appendSlotProps // 输入框插槽
+  isOnlySetValue?: boolean; // 是否只有一个数据时，默认选中
+  isClearSearch?: boolean; // 是否为空时也请求接口（和cascader）搭配使用，一般用于不设置isAwait的场景，前一个参数为非必填
+}
+
+export type FieldNamesProps = {
+  label: string;
+  value: string;
+  children?: string;
+};
+
+export type SearchType =
+  | "el-input"
+  | "el-input-number"
+  | "el-select"
+  | "el-select-v2"
+  | "el-tree-select"
+  | "el-cascader"
+  | "el-date-picker"
+  | "el-time-picker"
+  | "el-time-select"
+  | "el-switch"
+  | "el-slider"
+  | "el-radio-group"
+  | "el-checkbox-group"
+  | "JztDictionary"
+  | 'JztDateType'
+  | 'JztDateSelect';
+
+export type SearchRenderScope = {
+  searchParam: { [key: string]: any };
+  placeholder: string;
+  clearable: boolean;
+  options: EnumProps[];
+  data: EnumProps[];
+};
+
+export type RenderScope<T> = {
+  row: T;
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};

package/src/JztSelectFilter/index.scss

@@ -0,0 +1,63 @@
+.select-filter {
+  width: 100%;
+  .select-filter-item {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px dashed var(--el-border-color-light);
+    &:last-child {
+      border-bottom: none;
+    }
+    .select-filter-item-title {
+      margin-top: -2px;
+      span {
+        font-size: 14px;
+        color: var(--el-text-color-regular);
+        white-space: nowrap;
+      }
+    }
+    .select-filter-notData {
+      margin: 18px 0;
+      font-size: 14px;
+      color: var(--el-text-color-regular);
+    }
+    .select-filter-list {
+      display: flex;
+      flex: 1;
+      padding: 0;
+      margin: 13px 0;
+      li {
+        display: flex;
+        align-items: center;
+        padding: 5px 15px;
+        margin-right: 16px;
+        font-size: 13px;
+        color: var(--el-color-primary);
+        list-style: none;
+        cursor: pointer;
+        background: var(--el-color-primary-light-9);
+        border: 1px solid var(--el-color-primary-light-5);
+        border-radius: 32px;
+        &:hover {
+          color: #ffffff;
+          background: var(--el-color-primary);
+          border-color: var(--el-color-primary);
+          transition: 0.1s;
+        }
+        &.active {
+          font-weight: bold;
+          color: #ffffff;
+          background: var(--el-color-primary);
+          border-color: var(--el-color-primary);
+        }
+        .el-icon {
+          margin-right: 4px;
+          font-size: 16px;
+          font-weight: bold;
+        }
+        span {
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}