新增SelectCreate组件

components/SelectCreate/index.d.ts

@@ -0,0 +1,29 @@
+import type { SelectProps } from "antd/es/select";
+import type { FC } from "react";
+
+export interface SelectCreateOption {
+  /** 选项的唯一标识符 */
+  id: string | number;
+  /** 选项的显示名称 */
+  name: string;
+  /** 其他自定义属性 */
+  [key: string]: any;
+}
+
+export interface SelectCreateProps extends SelectProps {
+  /** 选项列表 */
+  items: SelectCreateOption[];
+  /** 是否显示删除图标，默认为 true */
+  showDelete?: boolean;
+  /** 标签名称，用于占位符显示 */
+  label?: string;
+  /** 删除选项时的回调函数 */
+  onDelete?: (option: SelectCreateOption) => void;
+}
+
+/**
+ * 可创建选项的选择器组件
+ */
+declare const SelectCreate: FC<SelectCreateProps>;
+
+export default SelectCreate;

components/SelectCreate/index.js

@@ -0,0 +1,46 @@
+import { CloseCircleOutlined } from "@ant-design/icons";
+import { Select } from "antd";
+
+/**
+ * 可创建选项的选择器组件
+ */
+function SelectCreate(props) {
+  const { items, showDelete = true, label = "", maxCount = 1, onDelete, ...restProps } = props;
+
+  const handlerDelete = (option) => {
+    onDelete?.(option);
+  };
+
+  return (
+    <Select
+      mode="tags"
+      maxCount={maxCount}
+      placeholder={`请选择${label}，无对应选项可直接输入创建选项`}
+      optionRender={option => (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <span>{option.label}</span>
+          {
+            showDelete && (
+              <CloseCircleOutlined
+                style={{ marginRight: 10 }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handlerDelete(option);
+                }}
+              />
+            )
+          }
+        </div>
+      )}
+      {...restProps}
+    >
+      {
+        items.map(item => (
+          <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
+        ))
+      }
+    </Select>
+  );
+}
+
+export default SelectCreate;