poi-plugin-kai-planner 1.0.0

package/src/app/tabs/wishlist/CreatePlanForm.js

@@ -0,0 +1,185 @@
+/* src/app/tabs/wishlist/CreatePlanForm.js */
+
+const React = require("react");
+const { MouseComboBox } = require("./components/MouseComboBox");
+const {
+  EVENT_COMBO_CLOSE_ALL,
+  isInComboRoot,
+} = require("../../../services/wishlist/dropdownInteraction");
+
+function CreatePlanForm({
+  visible,
+  create,
+  createError,
+  improvable,
+  priorities,
+  targetOptions,
+  startOptions,
+  startOptionsTip,
+  targetInputValue,
+  startInputValue,
+  selectedTargetText,
+  selectedStartText,
+  onPatchCreate,
+  onSelectTarget,
+  onSelectStart,
+  onClearTarget,
+  onClearStart,
+  onSubmit,
+  onCancel,
+}) {
+  if (!visible) return null;
+
+  const panelStyle = {
+    marginTop: 10,
+    padding: 10,
+    border: "1px solid rgba(255,255,255,0.12)",
+    borderRadius: 8,
+    background: "rgba(0,0,0,0.12)",
+  };
+  const formRow = { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", marginTop: 8 };
+  const labelStyle = { width: 84, opacity: 0.88, fontWeight: 700 };
+  const inputStyle = {
+    padding: "6px 8px",
+    borderRadius: 8,
+    border: "1px solid rgba(255,255,255,0.12)",
+    background: "rgba(0,0,0,0.15)",
+    color: "#e5e7eb",
+    minWidth: 180,
+  };
+
+  return React.createElement(
+    "div",
+    {
+      style: panelStyle,
+      onMouseDownCapture: (e) => {
+        if (isInComboRoot(e && e.target)) return;
+        if (typeof document !== "undefined" && typeof CustomEvent === "function" && document.dispatchEvent) {
+          document.dispatchEvent(new CustomEvent(EVENT_COMBO_CLOSE_ALL));
+        }
+      },
+    },
+    React.createElement("div", { style: { fontWeight: 800 } }, "新增改修计划"),
+
+    React.createElement(
+      "div",
+      { style: formRow },
+      React.createElement("div", { style: labelStyle }, "目标装备："),
+      React.createElement(MouseComboBox, {
+        inputStyle: { ...inputStyle, minWidth: 590 },
+        dropdownWidth: 590,
+        inputValue: targetInputValue,
+        placeholder: "搜索并选择目标装备（名称/equipId）",
+        onInputChange: (v) => onPatchCreate({ targetQuery: v }),
+        options: targetOptions,
+        emptyText: "无匹配目标装备",
+        onSelect: (value, option) => onSelectTarget(value, option),
+      }),
+      selectedTargetText
+        ? React.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: () => onClearTarget && onClearTarget(),
+              style: {
+                border: "1px solid rgba(147,197,253,0.45)",
+                background: "rgba(59,130,246,0.14)",
+                color: "#93c5fd",
+                borderRadius: 8,
+                padding: "4px 8px",
+                cursor: "pointer",
+              },
+              title: "点击清空已选目标装备",
+            },
+            `已选：${selectedTargetText} ×`
+          )
+        : null
+    ),
+
+    React.createElement(
+      "div",
+      { style: formRow },
+      React.createElement("div", { style: labelStyle }, "改修星数："),
+      React.createElement("input", {
+        style: { ...inputStyle, minWidth: 100, opacity: improvable ? 1 : 0.6 },
+        type: "number",
+        min: 0,
+        max: 10,
+        disabled: !improvable,
+        value: improvable ? create.targetLevel : "0",
+        onChange: (e) => onPatchCreate({ targetLevel: e.target.value }),
+        placeholder: "目标星数",
+      }),
+      React.createElement("div", { style: { ...labelStyle, width: 70 } }, "优先级："),
+      React.createElement(
+        "select",
+        {
+          style: { ...inputStyle, minWidth: 100 },
+          value: create.priority,
+          onChange: (e) => onPatchCreate({ priority: e.target.value }),
+        },
+        priorities.map((p) => React.createElement("option", { key: p, value: p }, p))
+      )
+    ),
+
+    React.createElement(
+      "div",
+      { style: formRow },
+      React.createElement("div", { style: labelStyle }, "起点装备："),
+      React.createElement(MouseComboBox, {
+        inputStyle: { ...inputStyle, minWidth: 590 },
+        dropdownWidth: 590,
+        disabled: !create.targetEquipId,
+        inputValue: startInputValue,
+        placeholder: create.targetEquipId ? "搜索并选择起点装备（名称/api_id/舰船名）" : "请先选择目标装备",
+        onInputChange: (v) => onPatchCreate({ startQuery: v }),
+        options: startOptions,
+        emptyText: "无匹配起点装备",
+        footerTip: startOptionsTip || "",
+        onSelect: (value, option) => onSelectStart(value, option),
+      }),
+      selectedStartText
+        ? React.createElement(
+            "button",
+            {
+              type: "button",
+              onClick: () => onClearStart && onClearStart(),
+              style: {
+                border: "1px solid rgba(147,197,253,0.45)",
+                background: "rgba(59,130,246,0.14)",
+                color: "#93c5fd",
+                borderRadius: 8,
+                padding: "4px 8px",
+                cursor: "pointer",
+              },
+              title: "点击清空已选起点装备",
+            },
+            `已选：${selectedStartText} ×`
+          )
+        : null
+    ),
+
+    React.createElement(
+      "div",
+      { style: formRow },
+      React.createElement("div", { style: labelStyle }, "备注："),
+      React.createElement("input", {
+        style: { ...inputStyle, minWidth: 520 },
+        value: create.note,
+        onChange: (e) => onPatchCreate({ note: e.target.value }),
+        placeholder: "备注",
+      })
+    ),
+
+    React.createElement(
+      "div",
+      { style: { ...formRow, marginTop: 10 } },
+      React.createElement("button", { onClick: onSubmit }, "确认新增"),
+      React.createElement("button", { onClick: onCancel }, "取消")
+    ),
+
+    createError ? React.createElement("div", { style: { marginTop: 8, color: "#fca5a5" } }, createError) : null
+  );
+}
+
+module.exports = { CreatePlanForm };