From a05bb488cce6bbde6587dc91ca2688d399450fc2 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Wed, 29 Oct 2025 16:12:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9ESelectCreate=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SelectCreate/index.d.ts | 29 +++++++++++++++++++
 components/SelectCreate/index.js   | 46 ++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)
 create mode 100644 components/SelectCreate/index.d.ts
 create mode 100644 components/SelectCreate/index.js

diff --git a/components/SelectCreate/index.d.ts b/components/SelectCreate/index.d.ts
new file mode 100644
index 0000000..c4734e6
--- /dev/null
+++ b/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;
diff --git a/components/SelectCreate/index.js b/components/SelectCreate/index.js
new file mode 100644
index 0000000..b718832
--- /dev/null
+++ b/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;