@liujitcn/kratos-admin-core 0.0.1

package/dist/package/src/components/ProTable/interface/index.ts

@@ -0,0 +1,223 @@
+import { Ref, VNode } from "vue";
+import { BreakPoint, Responsive } from "../../../components/Grid/interface";
+import type { Table } from "../../../hooks/interface";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+
+/** ProTable 默认行数据结构。 */
+type DefaultRow = Record<string, any>;
+
+/** 表格枚举选项结构，供搜索项、字典和状态列复用。 */
+export interface EnumProps {
+  label?: string; // 选项框显示的文字
+  value?: string | number | boolean | any[]; // 选项框值
+  disabled?: boolean; // 是否禁用此选项
+  tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
+  children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
+  [key: string]: any;
+}
+
+/** Element Plus 表格内置列类型。 */
+export type TypeProps = "index" | "selection" | "radio" | "expand" | "sort";
+
+/** ProTable 搜索表单支持的控件类型。 */
+export type SearchType =
+  | "input"
+  | "input-number"
+  | "select"
+  | "select-v2"
+  | "tree-select"
+  | "cascader"
+  | "date-picker"
+  | "time-picker"
+  | "time-select"
+  | "switch"
+  | "slider";
+
+/** ProTable 组件属性。 */
+export interface ProTableProps {
+  columns: ColumnProps[];
+  headerActions?: HeaderActionProps[];
+  data?: any[];
+  requestApi?: (params: any) => Promise<any>;
+  requestAuto?: boolean;
+  requestError?: (params: any) => void;
+  dataCallback?: (data: any) => any;
+  title?: string;
+  pagination?: boolean;
+  initParam?: any;
+  border?: boolean;
+  toolButton?: ("refresh" | "setting" | "search")[] | boolean;
+  rowKey?: string;
+  restoreSelectedRowKeys?: Array<string | number>;
+  searchCol?: number | Record<BreakPoint, number>;
+}
+
+/** 字典值在表格枚举中的目标类型。 */
+export type DictValueType = "string" | "number";
+
+/** 自定义搜索控件渲染时暴露的上下文。 */
+export type SearchRenderScope = {
+  searchParam: { [key: string]: any };
+  placeholder: string;
+  clearable: boolean;
+  options: EnumProps[];
+  data: EnumProps[];
+};
+
+/** ProTable 单列搜索配置。 */
+export type SearchProps = {
+  el?: SearchType; // 当前项搜索框的类型
+  label?: string; // 当前项搜索框的 label
+  props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  tooltip?: string; // 搜索提示
+  order?: number; // 搜索项排序（从大到小）
+  span?: number; // 搜索项所占用的列数，默认为 1 列
+  offset?: number; // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[] | Ref<any>; // 搜索项默认值
+  dictCode?: string; // 搜索项独立使用的字典编码
+  dictValueType?: DictValueType; // 搜索项字典值类型
+  enum?: EnumProps[] | Ref<EnumProps[]>; // 搜索项独立使用的枚举字典
+  render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>;
+
+/** 枚举或树形数据字段映射配置。 */
+export type FieldNamesProps = {
+  label: string;
+  value: string;
+  children?: string;
+};
+
+/** 单元格渲染和行内操作共享的上下文。 */
+export type RenderScope<T extends DefaultRow = DefaultRow> = {
+  row: T;
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+/** 表头自定义渲染上下文。 */
+export type HeaderRenderScope<T extends DefaultRow = DefaultRow> = {
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+/** ProTable 预置单元格渲染类型。 */
+export type CellType = "image" | "status" | "actions" | "money";
+
+/** 行内操作附加参数，支持静态对象或按行动态生成。 */
+export type ColumnActionParams<T extends DefaultRow = DefaultRow> =
+  | Record<string, any>
+  | ((scope: RenderScope<T>) => Record<string, any>);
+
+/** 表头操作按钮渲染和点击时的选择态上下文。 */
+export type HeaderActionScope<T extends DefaultRow = DefaultRow> = {
+  selectedList: T[];
+  selectedListIds: Array<string | number>;
+  isSelected: boolean;
+};
+
+/** 表头操作附加参数，支持静态对象或按选择态动态生成。 */
+export type HeaderActionParams<T extends DefaultRow = DefaultRow> =
+  | Record<string, any>
+  | ((scope: HeaderActionScope<T>) => Record<string, any>);
+
+/** 图片列预置渲染配置。 */
+export interface ImageCellProps<T extends DefaultRow = DefaultRow> {
+  src?: string | ((scope: RenderScope<T>) => string);
+  previewSrc?: string | ((scope: RenderScope<T>) => string);
+  width?: number | string;
+  height?: number | string;
+  previewWidth?: number | string;
+  previewHeight?: number | string;
+}
+
+/** 状态列预置渲染和变更配置。 */
+export interface StatusCellProps<T extends DefaultRow = DefaultRow> {
+  activeValue: string | number | boolean;
+  inactiveValue: string | number | boolean;
+  activeText?: string;
+  inactiveText?: string;
+  disabled?: boolean | ((scope: RenderScope<T>) => boolean);
+  beforeChange?: (scope: RenderScope<T>, params?: Record<string, any>) => boolean | Promise<boolean>;
+  onChange?: (value: string | number | boolean, scope: RenderScope<T>, params?: Record<string, any>) => void | Promise<void>;
+  params?: ColumnActionParams<T>;
+}
+
+/** 金额列预置格式化配置。 */
+export interface MoneyCellProps<T extends DefaultRow = DefaultRow> {
+  value?: number | string | ((scope: RenderScope<T>) => number | string | undefined | null);
+  prefix?: string;
+  suffix?: string;
+}
+
+/** 行内操作按钮配置。 */
+export interface TableActionProps<T extends DefaultRow = DefaultRow> {
+  label: string;
+  icon?: any;
+  type?: "primary" | "success" | "warning" | "danger" | "info";
+  link?: boolean;
+  disabled?: boolean | ((scope: RenderScope<T>) => boolean);
+  hidden?: boolean | ((scope: RenderScope<T>) => boolean);
+  params?: ColumnActionParams<T>;
+  onClick: (scope: RenderScope<T>, params?: Record<string, any>) => void | Promise<void>;
+}
+
+/** 表头操作按钮配置。 */
+export interface HeaderActionProps<T extends DefaultRow = DefaultRow> {
+  label: string;
+  icon?: any;
+  type?: "primary" | "success" | "warning" | "danger" | "info";
+  disabled?: boolean | ((scope: HeaderActionScope<T>) => boolean);
+  hidden?: boolean | ((scope: HeaderActionScope<T>) => boolean);
+  params?: HeaderActionParams<T>;
+  onClick: (scope: HeaderActionScope<T>, params?: Record<string, any>) => void | Promise<void>;
+}
+
+/** ProTable 列配置，扩展 Element Plus 表格列能力。 */
+export interface ColumnProps<T extends DefaultRow = DefaultRow> extends Partial<
+  Omit<TableColumnCtx<T>, "type" | "children" | "renderCell" | "renderHeader">
+> {
+  type?: TypeProps; // 列类型
+  cellType?: CellType; // 预置单元格类型
+  tag?: boolean | Ref<boolean>; // 是否是标签展示
+  isShow?: boolean | Ref<boolean>; // 是否显示在表格当中
+  isSetting?: boolean | Ref<boolean>; // 是否在 ColSetting 中可配置
+  search?: SearchProps | undefined; // 搜索项配置
+  dictCode?: string; // 字典编码，配置后优先使用 Dict / DictLabel 组件
+  dictValueType?: DictValueType; // 字典值类型
+  enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>); // 枚举字典
+  isFilterEnum?: boolean | Ref<boolean>; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+  fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+  headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
+  render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+  imageProps?: ImageCellProps<T>; // 图片列配置
+  statusProps?: StatusCellProps<T>; // 状态列配置
+  moneyProps?: MoneyCellProps<T>; // 金额列配置
+  actions?: TableActionProps<T>[]; // 操作按钮配置
+  _children?: ColumnProps<T>[]; // 多级表头
+}
+
+/** ProTable 对外暴露的组件实例状态和方法。 */
+export interface ProTableInstance<T extends DefaultRow = DefaultRow> {
+  element?: unknown;
+  loading: boolean;
+  tableData: T[];
+  radio: string;
+  pageable: Table.Pageable;
+  searchParam: Record<string, any>;
+  searchInitParam: Record<string, any>;
+  isSelected: boolean;
+  selectedList: T[];
+  selectedListIds: Array<string | number>;
+  enumMap: Map<string, Record<string, any>[]>;
+  getTableList: () => Promise<void>;
+  search: () => void;
+  reset: () => void;
+  handleSizeChange: (size: number) => void;
+  handleCurrentChange: (page: number) => void;
+  clearSelection: () => void;
+  getTotal: () => number;
+  refreshEnums: () => Promise<void>;
+}

package/dist/package/src/components/ProTable.ts

@@ -0,0 +1,8 @@
+import type { DefineComponent } from "vue";
+import type { ProTableInstance, ProTableProps } from "./ProTable/interface";
+import ProTableImplementation from "./ProTable/index.vue";
+
+/** ProTable 公共组件 Adapter。 */
+const ProTable = ProTableImplementation as unknown as DefineComponent<ProTableProps, ProTableInstance>;
+
+export default ProTable;

package/dist/package/src/components/SearchForm/components/SearchFormItem.vue

@@ -0,0 +1,168 @@
+<template>
+  <Dict
+    v-if="shouldUseDictComponent"
+    v-model="_searchParam[column.search?.key ?? handleProp(column.prop!)]"
+    :code="column.search?.dictCode ?? column.dictCode!"
+    :code-type="column.search?.dictValueType ?? column.dictValueType ?? 'number'"
+    :placeholder="placeholder.placeholder"
+    v-bind="handleSearchProps"
+    :style="handleSearchStyle"
+  />
+  <ElSelect
+    v-else-if="column.search?.el === 'select' && !column.search?.render"
+    v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"
+    v-model="_searchParam[column.search?.key ?? handleProp(column.prop!)]"
+    :style="handleSearchStyle"
+  >
+    <el-option v-for="(col, index) in columnEnum" :key="index" :label="col[fieldNames.label]" :value="col[fieldNames.value]" />
+  </ElSelect>
+  <component
+    v-else
+    :is="searchComponent"
+    v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"
+    v-model.trim="_searchParam[column.search?.key ?? handleProp(column.prop!)]"
+    :data="column.search?.el === 'tree-select' ? columnEnum : []"
+    :options="['cascader', 'select-v2'].includes(column.search?.el!) ? columnEnum : []"
+  >
+    <template v-if="column.search?.el === 'cascader'" #default="{ data }">
+      <span>{{ data[fieldNames.label] }}</span>
+    </template>
+    <slot v-if="column.search?.el !== 'cascader'"></slot>
+  </component>
+</template>
+
+<script setup lang="ts" name="SearchFormItem">
+import { computed, inject, ref, unref, type Component } from "vue";
+import {
+  ElCascader,
+  ElDatePicker,
+  ElInput,
+  ElInputNumber,
+  ElSelect,
+  ElSelectV2,
+  ElSlider,
+  ElSwitch,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTreeSelect
+} from "element-plus";
+import Dict from "../../../components/Dict/index.vue";
+import { handleProp } from "../../../utils";
+import { ColumnProps, SearchType } from "../../../components/ProTable/interface";
+
+/** 单个搜索表单项组件属性。 */
+interface SearchFormItem {
+  column: ColumnProps;
+  searchParam: { [key: string]: any };
+}
+const props = defineProps<SearchFormItem>();
+
+// Re receive SearchParam
+const _searchParam = computed(() => props.searchParam);
+
+const searchComponentMap: Record<SearchType, Component> = {
+  input: ElInput,
+  "input-number": ElInputNumber,
+  select: ElSelect,
+  "select-v2": ElSelectV2,
+  "tree-select": ElTreeSelect,
+  cascader: ElCascader,
+  "date-picker": ElDatePicker,
+  "time-picker": ElTimePicker,
+  "time-select": ElTimeSelect,
+  switch: ElSwitch,
+  slider: ElSlider
+};
+
+/**
+ * 获取搜索项实际渲染组件，避免按需加载后动态字符串组件无法解析。
+ */
+const searchComponent = computed(() => {
+  const render = props.column.search?.render;
+  if (render) return render;
+  const searchEl = props.column.search?.el;
+  return searchEl ? searchComponentMap[searchEl] : ElInput;
+});
+
+/**
+ * 判断当前搜索项是否应直接使用字典组件渲染。
+ */
+const shouldUseDictComponent = computed(() => {
+  return (
+    !!(props.column.search?.dictCode ?? props.column.dictCode) &&
+    props.column.search?.el === "select" &&
+    !props.column.search?.render
+  );
+});
+
+// 判断 fieldNames 设置 label && value && children 的 key 值
+const fieldNames = computed(() => {
+  return {
+    label: props.column.fieldNames?.label ?? "label",
+    value: props.column.fieldNames?.value ?? "value",
+    children: props.column.fieldNames?.children ?? "children"
+  };
+});
+
+// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
+const enumMap = inject("enumMap", ref(new Map()));
+
+const columnEnum = computed(() => {
+  const searchEnum = unref(props.column.search?.enum);
+  if (Array.isArray(searchEnum)) return searchEnum;
+  const staticEnum = typeof props.column.enum !== "function" ? unref(props.column.enum) : undefined;
+  if (Array.isArray(staticEnum) && staticEnum.length) return staticEnum;
+
+  let enumData = enumMap.value.get(props.column.prop);
+  if (!enumData) return [];
+  if (props.column.search?.el === "select-v2" && props.column.fieldNames) {
+    enumData = enumData.map((item: { [key: string]: any }) => {
+      return { ...item, label: item[fieldNames.value.label], value: item[fieldNames.value.value] };
+    });
+  }
+  return enumData;
+});
+
+/**
+ * 统一处理 Dict 搜索组件的宽度透传，避免覆盖组件默认宽度。
+ */
+const handleSearchStyle = computed(() => {
+  return props.column.search?.props?.style ?? { width: "100%" };
+});
+
+// 处理透传的 searchProps (el 为 tree-select、cascader 的时候需要给下默认 label && value && children)
+const handleSearchProps = computed(() => {
+  const label = fieldNames.value.label;
+  const value = fieldNames.value.value;
+  const children = fieldNames.value.children;
+  const searchEl = props.column.search?.el;
+  let searchProps = props.column.search?.props ?? {};
+  if (searchEl === "tree-select") {
+    searchProps = { ...searchProps, props: { ...searchProps, label, children }, nodeKey: value };
+  }
+  if (searchEl === "cascader") {
+    searchProps = { ...searchProps, props: { ...searchProps, label, value, children } };
+  }
+  return searchProps;
+});
+
+// 处理默认 placeholder
+const placeholder = computed(() => {
+  const search = props.column.search;
+  if (["datetimerange", "daterange", "monthrange"].includes(search?.props?.type) || search?.props?.isRange) {
+    return {
+      rangeSeparator: search?.props?.rangeSeparator ?? "至",
+      startPlaceholder: search?.props?.startPlaceholder ?? "开始时间",
+      endPlaceholder: search?.props?.endPlaceholder ?? "结束时间"
+    };
+  }
+  const placeholder = search?.props?.placeholder ?? (search?.el?.includes("input") ? "请输入" : "请选择");
+  return { placeholder };
+});
+
+// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
+const clearable = computed(() => {
+  const search = props.column.search;
+  return search?.props?.clearable ?? (search?.defaultValue == null || search?.defaultValue == undefined);
+});
+</script>

package/dist/package/src/components/SearchForm/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <div v-if="columns.length" class="card table-search" :class="{ 'table-search--no-operation': !showOperation }">
+    <el-form ref="formRef" :model="searchParam">
+      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
+        <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
+          <el-form-item>
+            <template #label>
+              <el-space :size="4">
+                <span>{{ `${item.search?.label ?? item.label}` }}</span>
+                <el-tooltip v-if="item.search?.tooltip" effect="dark" :content="item.search?.tooltip" placement="top">
+                  <i :class="'iconfont icon-yiwen'"></i>
+                </el-tooltip>
+              </el-space>
+              <span>&nbsp;:</span>
+            </template>
+            <SearchFormItem :column="item" :search-param="searchParam" />
+          </el-form-item>
+        </GridItem>
+        <GridItem v-if="showOperation" suffix>
+          <div class="operation">
+            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
+            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
+            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
+              {{ collapsed ? "展开" : "合并" }}
+              <el-icon class="el-icon--right">
+                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
+              </el-icon>
+            </el-button>
+          </div>
+        </GridItem>
+      </Grid>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { computed, ref } from "vue";
+import { ColumnProps } from "../../components/ProTable/interface";
+import { BreakPoint } from "../../components/Grid/interface";
+import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+import SearchFormItem from "./components/SearchFormItem.vue";
+import Grid from "../../components/Grid/index.vue";
+import GridItem from "../../components/Grid/components/GridItem.vue";
+
+/** ProTable 搜索表单组件属性。 */
+interface ProTableProps {
+  columns?: ColumnProps[]; // 搜索配置列
+  searchParam?: { [key: string]: any }; // 搜索参数
+  searchCol: number | Record<BreakPoint, number>;
+  search: (params: any) => void; // 搜索方法
+  reset: (params: any) => void; // 重置方法
+  showOperation?: boolean; // 是否展示搜索、重置等操作按钮
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  searchParam: () => ({}),
+  showOperation: true
+});
+
+// 获取响应式设置
+const getResponsive = (item: ColumnProps) => {
+  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 collapsed = ref(true);
+
+// 获取响应式断点
+const gridRef = ref();
+const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
+
+// 判断是否显示 展开/合并 按钮
+const showCollapse = computed(() => {
+  let show = false;
+  props.columns.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;
+});
+</script>
+
+<style scoped lang="scss">
+.table-search--no-operation {
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+}
+</style>

package/dist/package/src/components/SelectFilter/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);
+        cursor: pointer;
+        list-style: none;
+        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;
+        }
+      }
+    }
+  }
+}

package/dist/package/src/components/SelectFilter/index.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="select-filter">
+    <div v-for="item in data" :key="item.key" class="select-filter-item">
+      <div class="select-filter-item-title">
+        <span>{{ item.title }} ：</span>
+      </div>
+      <span v-if="!item.options.length" class="select-filter-notData">暂无数据 ~</span>
+      <el-scrollbar>
+        <ul class="select-filter-list">
+          <li
+            v-for="option in item.options"
+            :key="option.value"
+            :class="{
+              active:
+                option.value === selected[item.key] ||
+                (Array.isArray(selected[item.key]) && selected[item.key].includes(option.value))
+            }"
+            @click="select(item, option)"
+          >
+            <slot :row="option">
+              <el-icon v-if="option.icon">
+                <component :is="option.icon" />
+              </el-icon>
+              <span>{{ option.label }}</span>
+            </slot>
+          </li>
+        </ul>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="selectFilter">
+import { ref, watch } from "vue";
+
+/** 筛选项候选值。 */
+interface OptionsProps {
+  value: string | number;
+  label: string;
+  icon?: string;
+}
+
+/** 单组筛选配置。 */
+interface SelectDataProps {
+  title: string; // 列表标题
+  key: string; // 当前筛选项 key 值
+  multiple?: boolean; // 是否为多选
+  options: OptionsProps[]; // 筛选数据
+}
+
+/** SelectFilter 组件属性。 */
+interface SelectFilterProps {
+  data?: SelectDataProps[]; // 选择的列表数据
+  defaultValues?: { [key: string]: any }; // 默认值
+}
+
+const props = withDefaults(defineProps<SelectFilterProps>(), {
+  data: () => [],
+  defaultValues: () => ({})
+});
+
+// 重新接收默认值
+const selected = ref<{ [key: string]: any }>({});
+watch(
+  () => props.defaultValues,
+  () => {
+    props.data.forEach(item => {
+      if (item.multiple) selected.value[item.key] = props.defaultValues[item.key] ?? [""];
+      else selected.value[item.key] = props.defaultValues[item.key] ?? "";
+    });
+  },
+  { deep: true, immediate: true }
+);
+
+// emit
+const emit = defineEmits<{
+  change: [value: any];
+}>();
+
+/**
+ * @description 选择筛选项
+ * @param {Object} item 选中的哪项列表
+ * @param {Object} option 选中的值
+ * @return void
+ * */
+const select = (item: SelectDataProps, option: OptionsProps) => {
+  if (!item.multiple) {
+    // * 单选
+    if (selected.value[item.key] !== option.value) selected.value[item.key] = option.value;
+  } else {
+    // * 多选
+    // 如果选中的是第一个值，则直接设置
+    if (item.options[0].value === option.value) selected.value[item.key] = [option.value];
+    // 如果选择的值已经选中了，则删除选中的值
+    if (selected.value[item.key].includes(option.value)) {
+      let currentIndex = selected.value[item.key].findIndex((s: any) => s === option.value);
+      selected.value[item.key].splice(currentIndex, 1);
+      // 当全部删光时，把第第一个值选中
+      if (selected.value[item.key].length == 0) selected.value[item.key] = [item.options[0].value];
+    } else {
+      // 未选中点击值的时候，追加选中值
+      selected.value[item.key].push(option.value);
+      // 单选中全部并且点击到了未选中的值，把第一个值删除掉
+      if (selected.value[item.key].includes(item.options[0].value)) selected.value[item.key].splice(0, 1);
+    }
+  }
+  emit("change", selected.value);
+};
+</script>
+
+<style scoped lang="scss">
+@use "./index.scss" as *;
+</style>