poi-plugin-kai-planner 1.0.8 → 1.0.10

package/README.md

@@ -34,10 +34,17 @@
 - 远端静态数据更新流程：[docs/REMOTE_DATA_UPDATE.md](docs/REMOTE_DATA_UPDATE.md)
 
 ## 2026-03 UI 更新
+
 - Daily 页面支持按装备类型筛选；类型名来自 POI 的 `$equipTypes[api_type[3]].api_name`
 - Daily 与 Wishlist 表格中的装备名称前都会显示装备类型 icon
 - Wishlist 主表中的优先级改为标签样式展示（P0-P5 固定颜色）
 - Wishlist 展开明细中的“当前持有”计数会去除改修星数大于 0 的装备以及计划起点装备
 - 页面顶部 tab、上一次数据源更新、检查更新与更新提示统一使用 `14px` 字号
-- Daily 与 Wishlist 主表中的装备类型 icon 统一缩小到 `16x16`
 - Daily 与 Wishlist 主表的折叠箭头统一为：未展开 `▶`、已展开 `▼`
+
+## 装备类型 icon 兼容性说明
+
+- 当前所有装备类型 icon 均直接使用 POI 宿主的 `SlotitemIcon` 默认渲染尺寸
+- 插件侧不再对 `SlotitemIcon` 做 `zoom`、`transform: scale(...)` 或其它自定义缩放处理
+- 原因是不同用户的 POI / Electron / 系统缩放环境下，非宿主默认缩放可能导致 icon 错位、放大或整页异常
+- 若后续仍需优化观感，优先通过 icon 外层容器的间距、行高、按钮 padding 等布局参数处理，不再恢复 icon 本体缩放

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-kai-planner",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "main": "index.js",
   "author": "aulu",
   "contributors": ["aulu"],

package/src/app/components/EquipTypeIconFilter.js

@@ -0,0 +1,62 @@
+/* src/app/components/EquipTypeIconFilter.js */
+
+const React = require("react");
+const { SlotitemTypeIcon } = require("./SlotitemTypeIcon");
+
+function EquipTypeIconFilter({ options, selectedKeys, onToggle, onClear }) {
+  if (!Array.isArray(options) || options.length === 0) return null;
+
+  const selectedSet = new Set((selectedKeys || []).map(String));
+  const baseButtonStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: 44,
+    height: 44,
+    padding: 0,
+    borderRadius: 8,
+    border: "1px solid rgba(255,255,255,0.12)",
+    background: "rgba(255,255,255,0.04)",
+    color: "#e5e7eb",
+    cursor: "pointer",
+    flexShrink: 0,
+  };
+
+  return React.createElement(
+    "div",
+    { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" } },
+    React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        style: {
+          ...baseButtonStyle,
+          padding: "0 10px",
+          background: selectedSet.size === 0 ? "rgba(255,255,255,0.14)" : "rgba(255,255,255,0.04)",
+        },
+      },
+      "全部"
+    ),
+    ...options.map((option) => {
+      const key = String(option.key);
+      const active = selectedSet.has(key);
+      return React.createElement(
+        "button",
+        {
+          key,
+          type: "button",
+          onClick: () => onToggle(key),
+          "aria-label": option.name || key,
+          style: {
+            ...baseButtonStyle,
+            background: active ? "rgba(255,255,255,0.14)" : "rgba(255,255,255,0.04)",
+          },
+        },
+        React.createElement(SlotitemTypeIcon, { iconType: option.iconType })
+      );
+    })
+  );
+}
+
+module.exports = { EquipTypeIconFilter };

package/src/app/components/SlotitemTypeIcon.js

@@ -9,10 +9,6 @@ try {
 
 function SlotitemTypeIcon({ iconType, title, style }) {
   if (!iconType || !SlotitemIcon) return null;
-  const baseSize = 20;
-  const width = style && Number.isFinite(style.width) ? style.width : baseSize;
-  const height = style && Number.isFinite(style.height) ? style.height : baseSize;
-  const scale = Math.min(width / baseSize, height / baseSize);
 
   return React.createElement(
     "span",
@@ -22,27 +18,12 @@ function SlotitemTypeIcon({ iconType, title, style }) {
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        width,
-        height,
         flexShrink: 0,
         lineHeight: 0,
         ...(style || {}),
       },
     },
-    React.createElement(
-      "span",
-      {
-        style: {
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: baseSize,
-          height: baseSize,
-          zoom: scale,
-        },
-      },
-      React.createElement(SlotitemIcon, { slotitemId: iconType })
-    )
+    React.createElement(SlotitemIcon, { slotitemId: iconType })
   );
 }
 

package/src/app/tabs/daily/DailyTab.js

@@ -1,142 +1,298 @@
 /* src/app/tabs/daily/DailyTab.js */
 
 const React = require("react");
+
 const { SlotitemTypeIcon } = require("../../components/SlotitemTypeIcon");
 
+const { EquipTypeIconFilter } = require("../../components/EquipTypeIconFilter");
+
 const { loadStaticData } = require("../../../data/loaders/loadStaticData");
-const { buildArrangementIndex } = require("../../../data/indexes/buildArrangementIndex");
-const { buildDailyViewModel } = require("../../../services/daily/buildDailyViewModel");
-const { getReduxStateFromEnvWindow } = require("../../../services/player/getReduxStateFromEnvWindow");
+
+const {
+  buildArrangementIndex,
+} = require("../../../data/indexes/buildArrangementIndex");
+
+const {
+  buildDailyViewModel,
+} = require("../../../services/daily/buildDailyViewModel");
+
+const {
+  getReduxStateFromEnvWindow,
+} = require("../../../services/player/getReduxStateFromEnvWindow");
+
 const {
   TOKYO_WEEK_KEYS,
+
   TOKYO_WEEK_LABEL_ZH,
+
   formatTokyoDateTimeWithWeekday,
+
   getTokyoWeekdayKey,
 } = require("../../../services/utils/tokyoTime");
 
 function buildShipIndexes(masterShipsRaw) {
   const shipBySortno = {};
+
   const shipByApiId = {};
+
   for (const k of Object.keys(masterShipsRaw || {})) {
     const s = masterShipsRaw[k];
+
     if (!s) continue;
+
     if (s.api_sortno != null) shipBySortno[String(s.api_sortno)] = s;
+
     if (s.api_id != null) shipByApiId[String(s.api_id)] = s;
   }
+
   return { shipBySortno, shipByApiId };
 }
 
 function SectionTitle({ children }) {
-  return React.createElement("div", { style: { fontWeight: 800, margin: "10px 0 6px" } }, children);
+  return React.createElement(
+    "div",
+    { style: { fontWeight: 800, margin: "10px 0 6px" } },
+    children,
+  );
 }
 
 function ItemList({ title, items }) {
   if (!items || items.length === 0) return null;
+
   return React.createElement(
     "div",
+
     { style: { marginTop: 6 } },
-    React.createElement("div", { style: { opacity: 0.85, marginBottom: 4 } }, title),
+
+    React.createElement(
+      "div",
+      { style: { opacity: 0.85, marginBottom: 4 } },
+      title,
+    ),
+
     React.createElement(
       "ul",
+
       { style: { margin: 0, paddingLeft: 18 } },
-      items.map((it, idx) => React.createElement("li", { key: idx }, `${it.name} × ${it.count}`))
-    )
+
+      items.map((it, idx) =>
+        React.createElement("li", { key: idx }, `${it.name} × ${it.count}`),
+      ),
+    ),
   );
 }
 
 function PhaseBlock({ phase }) {
   const label = phase.phase === 0 ? "阶段0（0 -> 6）" : "阶段1（6 -> MAX）";
+
   const dev = phase.dev || { min: 0, max: 0 };
+
   const screw = phase.screw || { min: 0, max: 0 };
+
   const extras = phase.items && phase.items.extras ? phase.items.extras : [];
 
   return React.createElement(
     "div",
-    { style: { border: "1px solid rgba(255,255,255,0.12)", borderRadius: 8, padding: 10, marginTop: 10 } },
+
+    {
+      style: {
+        border: "1px solid rgba(255,255,255,0.12)",
+        borderRadius: 8,
+        padding: 10,
+        marginTop: 10,
+      },
+    },
+
     React.createElement(
       "div",
-      { style: { display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" } },
+
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          gap: 12,
+          flexWrap: "wrap",
+        },
+      },
+
       React.createElement("div", { style: { fontWeight: 800 } }, label),
-      React.createElement("div", { style: { opacity: 0.9 } }, `资材(开发): ${dev.min}/${dev.max}，螺丝: ${screw.min}/${screw.max}`)
+
+      React.createElement(
+        "div",
+        { style: { opacity: 0.9 } },
+        `资材(开发): ${dev.min}/${dev.max}，螺丝: ${screw.min}/${screw.max}`,
+      ),
     ),
-    ItemList({ title: "通用消耗（每次）", items: phase.items ? phase.items.common : [] }),
+
+    ItemList({
+      title: "通用消耗（每次）",
+      items: phase.items ? phase.items.common : [],
+    }),
+
     extras.length > 0
       ? React.createElement(
           "div",
+
           { style: { marginTop: 6 } },
-          React.createElement("div", { style: { opacity: 0.85, marginBottom: 4 } }, "额外消耗（特定星级区间，会叠加在通用消耗上）"),
+
+          React.createElement(
+            "div",
+            { style: { opacity: 0.85, marginBottom: 4 } },
+            "额外消耗（特定星级区间，会叠加在通用消耗上）",
+          ),
+
           extras.map((ex, i) =>
             React.createElement(
               "div",
-              { key: i, style: { marginTop: 6, padding: "8px 10px", background: "rgba(255,255,255,0.05)", borderRadius: 8 } },
-              React.createElement("div", { style: { fontWeight: 700, marginBottom: 4 } }, `${ex.star_from} -> ${ex.star_to}`),
+
+              {
+                key: i,
+                style: {
+                  marginTop: 6,
+                  padding: "8px 10px",
+                  background: "rgba(255,255,255,0.05)",
+                  borderRadius: 8,
+                },
+              },
+
+              React.createElement(
+                "div",
+                { style: { fontWeight: 700, marginBottom: 4 } },
+                `${ex.star_from} -> ${ex.star_to}`,
+              ),
+
               React.createElement(
                 "ul",
+
                 { style: { margin: 0, paddingLeft: 18 } },
-                (ex.items || []).map((it, idx) => React.createElement("li", { key: idx }, `${it.name} × ${it.count}`))
-              )
-            )
-          )
+
+                (ex.items || []).map((it, idx) =>
+                  React.createElement(
+                    "li",
+                    { key: idx },
+                    `${it.name} × ${it.count}`,
+                  ),
+                ),
+              ),
+            ),
+          ),
         )
-      : null
+      : null,
   );
 }
 
 function UpgradeBlock({ upgrades, upgradeMeta }) {
   if (!upgradeMeta || upgradeMeta.hasAnyUpgradeConfig === false) {
-    return React.createElement("div", { style: { marginTop: 10, opacity: 0.8 } }, "该装备任意日期都不可进化（没有进化配置）");
+    return React.createElement(
+      "div",
+      { style: { marginTop: 10, opacity: 0.8 } },
+      "该装备任意日期都不可进化（没有进化配置）",
+    );
   }
 
   if (!upgrades || upgrades.length === 0) {
-    return React.createElement("div", { style: { marginTop: 10, opacity: 0.8 } }, "该装备今天不可进化（今日可用秘书舰不符合进化要求）");
+    return React.createElement(
+      "div",
+      { style: { marginTop: 10, opacity: 0.8 } },
+      "该装备今天不可进化（今日可用秘书舰不符合进化要求）",
+    );
   }
 
   return React.createElement(
     "div",
+
     null,
+
     upgrades.map((u, idx) =>
       React.createElement(
         "div",
-        { key: idx, style: { border: "1px solid rgba(255,255,255,0.12)", borderRadius: 8, padding: 10, marginTop: 10 } },
+
+        {
+          key: idx,
+          style: {
+            border: "1px solid rgba(255,255,255,0.12)",
+            borderRadius: 8,
+            padding: 10,
+            marginTop: 10,
+          },
+        },
+
+        React.createElement(
+          "div",
+
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              gap: 12,
+              flexWrap: "wrap",
+            },
+          },
+
+          React.createElement(
+            "div",
+            { style: { fontWeight: 900 } },
+            `进化：→ ${u.upgradeName}（${u.upgradeId}）`,
+          ),
+
+          React.createElement(
+            "div",
+            { style: { opacity: 0.9 } },
+            `资材(开发): ${u.dev.min}/${u.dev.max}，螺丝: ${u.screw.min}/${u.screw.max}`,
+          ),
+        ),
+
         React.createElement(
           "div",
-          { style: { display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" } },
-          React.createElement("div", { style: { fontWeight: 900 } }, `进化：→ ${u.upgradeName}（${u.upgradeId}）`),
-          React.createElement("div", { style: { opacity: 0.9 } }, `资材(开发): ${u.dev.min}/${u.dev.max}，螺丝: ${u.screw.min}/${u.screw.max}`)
+          { style: { marginTop: 6, opacity: 0.9 } },
+          `指定秘书舰（今日可用）：${u.secretaryText || "不可"}`,
         ),
-        React.createElement("div", { style: { marginTop: 6, opacity: 0.9 } }, `指定秘书舰（今日可用）：${u.secretaryText || "不可"}`),
-        ItemList({ title: "进化消耗", items: u.items || [] })
-      )
-    )
+
+        ItemList({ title: "进化消耗", items: u.items || [] }),
+      ),
+    ),
   );
 }
 
 function upgradeStatusText(upgradeMeta) {
-  if (!upgradeMeta || upgradeMeta.hasAnyUpgradeConfig === false) return "不可进化";
+  if (!upgradeMeta || upgradeMeta.hasAnyUpgradeConfig === false)
+    return "不可进化";
+
   if (upgradeMeta.canUpgradeToday) return "今日可进化";
+
   return "今日不可进化";
 }
 
 class DailyTab extends React.Component {
   constructor(props) {
     super(props);
+
     this.state = {
       tokyoText: formatTokyoDateTimeWithWeekday(),
+
       weekdayKey: getTokyoWeekdayKey(),
+
       expanded: {},
+
       vm: null,
+
       error: null,
+
       search: "",
-      searchEquipType: "",
+
+      selectedEquipTypes: [],
     };
 
     this.refresh = this.refresh.bind(this);
+
     this.setWeekday = this.setWeekday.bind(this);
+
     this.toggleRow = this.toggleRow.bind(this);
   }
 
   componentDidMount() {
     this.refresh();
+
     this._timer = setInterval(() => {
       this.setState({ tokyoText: formatTokyoDateTimeWithWeekday() });
     }, 1000);
@@ -152,34 +308,55 @@ class DailyTab extends React.Component {
 
   toggleRow(equipId) {
     const k = String(equipId);
+
     const next = { ...(this.state.expanded || {}) };
+
     next[k] = !next[k];
+
     this.setState({ expanded: next });
   }
 
   refresh() {
     try {
       const staticData = loadStaticData();
-      const { index: arrangementIndex } = buildArrangementIndex(staticData.improvementArrangement);
+
+      const { index: arrangementIndex } = buildArrangementIndex(
+        staticData.improvementArrangement,
+      );
 
       const state = getReduxStateFromEnvWindow(this.props.envWindow);
+
       if (!state || !state.const) {
         this.setState({
-          error: "Redux state unavailable. 请先进入母港，确保 /api_start2 已加载。",
+          error:
+            "Redux state unavailable. 请先进入母港，确保 /api_start2 已加载。",
+
           vm: null,
         });
+
         return;
       }
 
       const masterEquipsById = state.const.$equips || {};
+
       const masterEquipTypesById = state.const.$equipTypes || {};
+
       const masterShipsRaw = state.const.$ships || {};
+
       const { shipBySortno, shipByApiId } = buildShipIndexes(masterShipsRaw);
 
       const vm = buildDailyViewModel({
         staticData,
+
         arrangementIndex,
-        poi: { masterEquipsById, masterEquipTypesById, shipBySortno, shipByApiId },
+
+        poi: {
+          masterEquipsById,
+          masterEquipTypesById,
+          shipBySortno,
+          shipByApiId,
+        },
+
         weekdayKey: this.state.weekdayKey,
       });
 
@@ -192,279 +369,561 @@ class DailyTab extends React.Component {
   render() {
     const wrapperStyle = {
       height: "calc(100vh - 140px)",
+
       display: "flex",
+
       flexDirection: "column",
+
       color: "#e5e7eb",
-      fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
+
+      fontFamily:
+        "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
+
       fontSize: 14,
+
       lineHeight: 1.4,
     };
 
     const stickyHeaderStyle = {
       position: "sticky",
+
       top: 0,
+
       zIndex: 5,
+
       padding: "12px 12px 10px",
+
       background: "rgba(16,24,40,0.92)",
+
       backdropFilter: "blur(6px)",
+
       borderBottom: "1px solid rgba(255,255,255,0.08)",
     };
 
-    const headerRowStyle = { display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", flexWrap: "wrap" };
-    const tabBarStyle = { display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 };
+    const headerRowStyle = {
+      display: "flex",
+      justifyContent: "space-between",
+      gap: 12,
+      alignItems: "center",
+      flexWrap: "wrap",
+    };
+
+    const tabBarStyle = {
+      display: "flex",
+      gap: 8,
+      flexWrap: "wrap",
+      marginTop: 10,
+    };
+
     const tabStyle = (active) => ({
       padding: "6px 10px",
+
       borderRadius: 10,
+
       border: "1px solid rgba(255,255,255,0.12)",
+
       background: active ? "rgba(255,255,255,0.12)" : "transparent",
+
       cursor: "pointer",
+
       userSelect: "none",
     });
-    const toolbarStyle = { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" };
+
+    const toolbarStyle = {
+      display: "flex",
+      gap: 8,
+      alignItems: "center",
+      flexWrap: "wrap",
+    };
 
     const inputStyle = {
       width: 240,
+
       padding: "6px 10px",
+
       borderRadius: 8,
+
       border: "1px solid rgba(255,255,255,0.12)",
+
       background: "rgba(0,0,0,0.15)",
+
       color: "#e5e7eb",
+
       outline: "none",
+
       fontSize: 14,
     };
 
     const scrollAreaStyle = {
       flex: 1,
+
       overflowY: "auto",
+
       padding: 12,
     };
 
     const tableStyle = {
       width: "100%",
+
       borderCollapse: "collapse",
+
       borderSpacing: 0,
+
       overflow: "hidden",
+
       border: "1px solid rgba(255,255,255,0.12)",
+
       borderRadius: 10,
+
       background: "rgba(0,0,0,0.06)",
     };
 
-    const thStyle = { textAlign: "left", padding: "10px 10px", borderBottom: "1px solid rgba(255,255,255,0.12)", opacity: 0.9 };
-    const tdStyle = { padding: "10px 10px", borderBottom: "1px solid rgba(255,255,255,0.08)", verticalAlign: "top" };
+    const thStyle = {
+      textAlign: "left",
+      padding: "10px 10px",
+      borderBottom: "1px solid rgba(255,255,255,0.12)",
+      opacity: 0.9,
+    };
+
+    const tdStyle = {
+      padding: "10px 10px",
+      borderBottom: "1px solid rgba(255,255,255,0.08)",
+      verticalAlign: "top",
+    };
+
+    const baseCostColStyle = { width: 180, minWidth: 180, maxWidth: 180 };
+    const upgradeColStyle = { width: 140, minWidth: 140, maxWidth: 140 };
+
     const smallMuted = { opacity: 0.75, fontSize: 11 };
 
     const vm = this.state.vm;
-    const q = String(this.state.search || "").trim().toLowerCase();
-    const selectedEquipType = String(this.state.searchEquipType || "").trim();
+
+    const q = String(this.state.search || "")
+      .trim()
+      .toLowerCase();
+
+    const selectedEquipTypes = Array.isArray(this.state.selectedEquipTypes)
+      ? this.state.selectedEquipTypes.map(String)
+      : [];
+
+    const selectedEquipTypeSet = new Set(selectedEquipTypes);
+
     const allRows = vm && vm.rows ? vm.rows : [];
+
     const equipTypeOptions = [];
+
     const seenEquipTypes = new Set();
+
     for (const row of allRows) {
-      const name = String(row && row.equipTypeName ? row.equipTypeName : "").trim();
-      if (!name || seenEquipTypes.has(name)) continue;
-      seenEquipTypes.add(name);
-      equipTypeOptions.push(name);
+      const key = row && row.iconType != null ? String(row.iconType) : "";
+
+      if (!key || seenEquipTypes.has(key)) continue;
+
+      seenEquipTypes.add(key);
+
+      equipTypeOptions.push({
+        key,
+
+        iconType: row.iconType,
+
+        name: String(row && row.equipTypeName ? row.equipTypeName : ""),
+      });
     }
+
     const rows = allRows.filter((r) => {
-      if (selectedEquipType && String(r.equipTypeName || "") !== selectedEquipType) return false;
-      if (q && !String(r.equipName || "").toLowerCase().includes(q)) return false;
+      const typeKey = r && r.iconType != null ? String(r.iconType) : "";
+
+      if (selectedEquipTypeSet.size && !selectedEquipTypeSet.has(typeKey))
+        return false;
+
+      if (
+        q &&
+        !String(r.equipName || "")
+          .toLowerCase()
+          .includes(q)
+      )
+        return false;
+
       return true;
     });
 
     return React.createElement(
       "div",
+
       { style: wrapperStyle },
+
       React.createElement(
         "div",
+
         { style: stickyHeaderStyle },
+
         React.createElement(
           "div",
+
           { style: headerRowStyle },
+
           React.createElement(
             "div",
+
             null,
-            React.createElement("div", { style: { fontSize: 18, fontWeight: 900 } }, "每日改修"),
-            React.createElement("div", { style: smallMuted }, `当前时间（GMT+9）：${this.state.tokyoText}`)
+
+            React.createElement(
+              "div",
+              { style: { fontSize: 18, fontWeight: 900 } },
+              "每日改修",
+            ),
+
+            React.createElement(
+              "div",
+              { style: smallMuted },
+              `当前时间（GMT+9）：${this.state.tokyoText}`,
+            ),
           ),
+
           React.createElement(
             "div",
+
             { style: toolbarStyle },
-            React.createElement(
-              "select",
-              {
-                value: this.state.searchEquipType,
-                onChange: (e) => this.setState({ searchEquipType: e.target.value }),
-                style: { ...inputStyle, width: 180 },
-              },
-              React.createElement("option", { value: "" }, "全部类型"),
-              ...equipTypeOptions.map((name) => React.createElement("option", { key: name, value: name }, name))
-            ),
+
             React.createElement("input", {
               value: this.state.search,
+
               placeholder: "搜索装备名称...",
+
               onChange: (e) => this.setState({ search: e.target.value }),
+
               style: inputStyle,
             }),
-            React.createElement("button", { onClick: this.refresh }, "刷新")
-          )
+
+            React.createElement("button", { onClick: this.refresh }, "刷新"),
+          ),
         ),
+
+        equipTypeOptions.length
+          ? React.createElement(
+              "div",
+
+              { style: { marginTop: 10 } },
+
+              React.createElement(EquipTypeIconFilter, {
+                options: equipTypeOptions,
+
+                selectedKeys: selectedEquipTypes,
+
+                onToggle: (key) =>
+                  this.setState((prev) => {
+                    const current = new Set(
+                      Array.isArray(prev.selectedEquipTypes)
+                        ? prev.selectedEquipTypes.map(String)
+                        : [],
+                    );
+
+                    if (current.has(key)) current.delete(key);
+                    else current.add(key);
+
+                    return { selectedEquipTypes: Array.from(current) };
+                  }),
+
+                onClear: () => this.setState({ selectedEquipTypes: [] })
+              }),
+            )
+          : null,
+
         React.createElement(
           "div",
+
           { style: tabBarStyle },
+
           TOKYO_WEEK_KEYS.slice(1).map((k) =>
             React.createElement(
               "div",
+
               {
                 key: k,
+
                 style: tabStyle(this.state.weekdayKey === k),
+
                 onClick: () => this.setWeekday(k),
               },
-              TOKYO_WEEK_LABEL_ZH[k]
-            )
+
+              TOKYO_WEEK_LABEL_ZH[k],
+            ),
           ),
+
           React.createElement(
             "div",
+
             {
               key: "sunday",
+
               style: tabStyle(this.state.weekdayKey === "sunday"),
+
               onClick: () => this.setWeekday("sunday"),
             },
-            TOKYO_WEEK_LABEL_ZH.sunday
-          )
-        )
+
+            TOKYO_WEEK_LABEL_ZH.sunday,
+          ),
+        ),
       ),
+
       React.createElement(
         "div",
+
         { style: scrollAreaStyle },
+
         this.state.error
           ? React.createElement(
               "pre",
+
               {
                 style: {
                   marginTop: 0,
+
                   padding: 12,
+
                   background: "#0b1220",
+
                   border: "1px solid rgba(255,255,255,0.12)",
+
                   borderRadius: 10,
+
                   whiteSpace: "pre-wrap",
+
                   wordBreak: "break-word",
                 },
               },
-              this.state.error
+
+              this.state.error,
             )
           : null,
+
         !this.state.error && vm
           ? React.createElement(
               React.Fragment,
+
               null,
+
               React.createElement(
                 "div",
+
                 { style: { margin: "0 0 10px", opacity: 0.8 } },
-                `今日可改修装备：${rows.length} 条${selectedEquipType ? `（类型：${selectedEquipType}）` : ""}${q ? `（搜索：${this.state.search}）` : ""}`
+
+                `今日可改修装备：${rows.length} 条${selectedEquipTypes.length ? `（类型筛选：${selectedEquipTypes.length}）` : ""}${q ? `（搜索：${this.state.search}）` : ""}`,
               ),
+
               React.createElement(
                 "table",
+
                 { style: tableStyle },
+
                 React.createElement(
                   "thead",
+
                   null,
+
                   React.createElement(
                     "tr",
+
                     null,
+
                     React.createElement("th", { style: thStyle }, "装备名称"),
-                    React.createElement("th", { style: thStyle }, "基础消耗（油/弹/钢/铝）"),
-                    React.createElement("th", { style: thStyle }, `${TOKYO_WEEK_LABEL_ZH[this.state.weekdayKey]} - 秘书舰`),
-                    React.createElement("th", { style: thStyle }, "可进化")
-                  )
+
+                    React.createElement(
+                      "th",
+                      { style: { ...thStyle, ...baseCostColStyle } },
+                      "基础消耗（油/弹/钢/铝）",
+                    ),
+
+                    React.createElement(
+                      "th",
+                      { style: thStyle },
+                      `${TOKYO_WEEK_LABEL_ZH[this.state.weekdayKey]} - 秘书舰`,
+                    ),
+
+React.createElement("th", { style: { ...thStyle, ...upgradeColStyle } }, "可进化"),
+                  ),
                 ),
+
                 React.createElement(
                   "tbody",
+
                   null,
+
                   rows.map((r) => {
                     const exp = !!this.state.expanded[String(r.equipId)];
+
                     const base = r.baseCost || {};
-                    const baseText = `${base.fuel || 0}/${base.ammo || 0}/${base.steel || 0}/${base.bauxite || 0}` + (base.missing ? "（缺数据）" : "");
+
+                    const baseText =
+                      `${base.fuel || 0}/${base.ammo || 0}/${base.steel || 0}/${base.bauxite || 0}` +
+                      (base.missing ? "（缺数据）" : "");
+
                     const foldIcon = exp ? "▼" : "▶";
+
                     const onRowClick = () => this.toggleRow(r.equipId);
 
                     return React.createElement(
                       React.Fragment,
+
                       { key: r.equipId },
+
                       React.createElement(
                         "tr",
+
                         {
                           onClick: onRowClick,
+
                           style: { cursor: "pointer" },
+
                           title: "点击展开/收起",
                         },
+
                         React.createElement(
                           "td",
+
                           { style: tdStyle },
+
                           React.createElement(
                             "div",
-                            { style: { display: "flex", gap: 8, alignItems: "center" } },
+
+                            {
+                              style: {
+                                display: "flex",
+                                gap: 8,
+                                alignItems: "center",
+                              },
+                            },
+
                             React.createElement(
                               "button",
+
                               {
                                 onClick: (e) => {
                                   e.preventDefault();
+
                                   e.stopPropagation();
+
                                   onRowClick();
                                 },
+
                                 style: {
                                   width: 28,
+
                                   height: 28,
+
                                   borderRadius: 8,
+
                                   border: "1px solid rgba(255,255,255,0.12)",
+
                                   background: "rgba(255,255,255,0.06)",
+
                                   color: "#e5e7eb",
+
                                   cursor: "pointer",
                                 },
+
                                 title: "展开/收起",
                               },
-                              foldIcon
+
+                              foldIcon,
                             ),
-                            React.createElement(SlotitemTypeIcon, { iconType: r.iconType, title: r.equipTypeName, style: { width: 14, height: 14 } }),
+
+                            React.createElement(SlotitemTypeIcon, {
+                              iconType: r.iconType,
+                              title: r.equipTypeName,
+                            }),
+
                             React.createElement(
                               "div",
+
                               null,
-                              React.createElement("div", { style: { fontWeight: 400 } }, r.equipName),
-                              React.createElement("div", { style: smallMuted }, `equipId: ${r.equipId}`)
-                            )
-                          )
+
+                              React.createElement(
+                                "div",
+                                { style: { fontWeight: 400 } },
+                                r.equipName,
+                              ),
+
+                              React.createElement(
+                                "div",
+                                { style: smallMuted },
+                                `equipId: ${r.equipId}`,
+                              ),
+                            ),
+                          ),
+                        ),
+
+                        React.createElement("td", { style: { ...tdStyle, ...baseCostColStyle } }, baseText),
+
+                        React.createElement(
+                          "td",
+                          { style: tdStyle },
+                          r.secretaryText || "不可",
+                        ),
+
+                        React.createElement(
+                          "td",
+                          { style: { ...tdStyle, ...upgradeColStyle } },
+                          upgradeStatusText(r.upgradeMeta),
                         ),
-                        React.createElement("td", { style: tdStyle }, baseText),
-                        React.createElement("td", { style: tdStyle }, r.secretaryText || "不可"),
-                        React.createElement("td", { style: tdStyle }, upgradeStatusText(r.upgradeMeta))
                       ),
+
                       exp
                         ? React.createElement(
                             "tr",
+
                             { key: `${r.equipId}_detail` },
+
                             React.createElement(
                               "td",
-                              { style: { ...tdStyle, paddingTop: 0 }, colSpan: 4 },
-                              React.createElement(SectionTitle, null, "改修消耗明细（每次）"),
-                              React.createElement(PhaseBlock, { phase: r.phases[0] }),
-                              React.createElement(PhaseBlock, { phase: r.phases[1] }),
+
+                              {
+                                style: { ...tdStyle, paddingTop: 0 },
+                                colSpan: 4,
+                              },
+
+                              React.createElement(
+                                SectionTitle,
+                                null,
+                                "改修消耗明细（每次）",
+                              ),
+
+                              React.createElement(PhaseBlock, {
+                                phase: r.phases[0],
+                              }),
+
+                              React.createElement(PhaseBlock, {
+                                phase: r.phases[1],
+                              }),
+
                               r.upgradeMeta && r.upgradeMeta.hasAnyUpgradeConfig
                                 ? React.createElement(
                                     React.Fragment,
+
                                     null,
-                                    React.createElement(SectionTitle, null, "进化消耗（今日可进化）"),
-                                    React.createElement(UpgradeBlock, { upgrades: r.upgrades || [], upgradeMeta: r.upgradeMeta })
+
+                                    React.createElement(
+                                      SectionTitle,
+                                      null,
+                                      "进化消耗（今日可进化）",
+                                    ),
+
+                                    React.createElement(UpgradeBlock, {
+                                      upgrades: r.upgrades || [],
+                                      upgradeMeta: r.upgradeMeta,
+                                    }),
                                   )
-                                : null
-                            )
+                                : null,
+                            ),
                           )
-                        : null
+                        : null,
                     );
-                  })
-                )
-              )
+                  }),
+                ),
+              ),
             )
-          : null
-      )
+          : null,
+      ),
     );
   }
 }
@@ -472,4 +931,3 @@ class DailyTab extends React.Component {
 module.exports = {
   DailyTab,
 };
-

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

@@ -31,6 +31,7 @@ const {
   upsertLastResult,
 } = require("../../../storage/userPlans/planStore");
 const { CreatePlanForm } = require("./CreatePlanForm");
+const { EquipTypeIconFilter } = require("../../components/EquipTypeIconFilter");
 const { WishlistTable } = require("./components/WishlistTable");
 const { WishlistExpandedDetail } = require("./components/WishlistExpandedDetail");
 const { buildWishlistViewModel } = require("../../../services/wishlist/buildWishlistViewModel");
@@ -107,6 +108,7 @@ class WishlistTab extends React.Component {
       rebindInputById: {},
       editById: {},
       filterTargetName: "",
+      selectedTargetEquipTypes: [],
       activePlanTab: "unfinished",
       showCreateForm: false,
       create: {
@@ -553,18 +555,18 @@ class WishlistTab extends React.Component {
     });
   }
 
-  renderExpandedRow(plan, planWrap) {
-    const state = this.getReduxState();
-    const masterEquipsById = ((state || {}).const || {}).$equips || {};
-    return React.createElement(WishlistExpandedDetail, {
-      plan,
-      planWrap,
-      state,
-      masterEquipsById,
-      getEquipName,
-      toInt,
-      stockStatusMark,
-    });
+  renderExpandedRow(plan, planWrap) {
+    const state = this.getReduxState();
+    const masterEquipsById = ((state || {}).const || {}).$equips || {};
+    return React.createElement(WishlistExpandedDetail, {
+      plan,
+      planWrap,
+      state,
+      masterEquipsById,
+      getEquipName,
+      toInt,
+      stockStatusMark,
+    });
   }
 
   render() {
@@ -621,17 +623,48 @@ class WishlistTab extends React.Component {
     }
 
     const masterEquipsById = state.const.$equips || {};
-    const vm = buildWishlistViewModel({
-      plans,
-      planResults: this.state.planResults,
-      filterTargetName: this.state.filterTargetName,
-      getEquipName,
-      getEquipSortno,
-      masterEquipsById,
-      masterEquipTypesById: state.const.$equipTypes || {},
+    const vm = buildWishlistViewModel({
+      plans,
+      planResults: this.state.planResults,
+      filterTargetName: this.state.filterTargetName,
+      getEquipName,
+      getEquipSortno,
+      masterEquipsById,
+      masterEquipTypesById: state.const.$equipTypes || {},
     });
+    const selectedTargetEquipTypes = Array.isArray(this.state.selectedTargetEquipTypes)
+      ? this.state.selectedTargetEquipTypes.map(String)
+      : [];
+    const selectedTargetEquipTypeSet = new Set(selectedTargetEquipTypes);
+    const targetEquipTypeOptions = [];
+    const seenTargetEquipTypes = new Set();
+    for (const rowVm of vm.rows || []) {
+      const key = rowVm && rowVm.targetIconType != null ? String(rowVm.targetIconType) : "";
+      if (!key || seenTargetEquipTypes.has(key)) continue;
+      seenTargetEquipTypes.add(key);
+      targetEquipTypeOptions.push({
+        key,
+        iconType: rowVm.targetIconType,
+        name: String(rowVm && rowVm.targetEquipTypeName ? rowVm.targetEquipTypeName : ""),
+      });
+    }
+    const matchesSelectedTargetType = (rowVm) => {
+      const key = rowVm && rowVm.targetIconType != null ? String(rowVm.targetIconType) : "";
+      return !selectedTargetEquipTypeSet.size || selectedTargetEquipTypeSet.has(key);
+    };
+    const filteredVm = {
+      ...vm,
+      rows: (vm.rows || []).filter(matchesSelectedTargetType),
+      unfinishedRows: (vm.unfinishedRows || []).filter(matchesSelectedTargetType),
+      completedRows: (vm.completedRows || []).filter(matchesSelectedTargetType),
+    };
+    filteredVm.counts = {
+      total: filteredVm.rows.length,
+      unfinished: filteredVm.unfinishedRows.length,
+      completed: filteredVm.completedRows.length,
+    };
     const activePlanTab = this.state.activePlanTab || "unfinished";
-    const activeRows = activePlanTab === "completed" ? vm.completedRows : vm.unfinishedRows;
+    const activeRows = activePlanTab === "completed" ? filteredVm.completedRows : filteredVm.unfinishedRows;
 
     return React.createElement(
       "div",
@@ -658,6 +691,26 @@ class WishlistTab extends React.Component {
           React.createElement("button", { onClick: () => this.setState({ showCreateForm: true }) }, "新增改修计划"),
           React.createElement("button", { onClick: this.refreshPlans }, "刷新")
         ),
+        targetEquipTypeOptions.length
+          ? React.createElement(
+              "div",
+              { style: { marginTop: 10 } },
+              React.createElement(EquipTypeIconFilter, {
+                options: targetEquipTypeOptions,
+                selectedKeys: selectedTargetEquipTypes,
+                onToggle: (key) =>
+                  this.setState((prev) => {
+                    const current = new Set(
+                      Array.isArray(prev.selectedTargetEquipTypes) ? prev.selectedTargetEquipTypes.map(String) : []
+                    );
+                    if (current.has(key)) current.delete(key);
+                    else current.add(key);
+                    return { selectedTargetEquipTypes: Array.from(current) };
+                  }),
+                onClear: () => this.setState({ selectedTargetEquipTypes: [] }),
+              })
+            )
+          : null,
         React.createElement(
           "div",
           { style: planTabBar },

package/src/app/tabs/wishlist/components/WishlistTable.js

@@ -58,6 +58,10 @@ function WishlistTable({
 }) {
   const { row, input, th, td } = styles;
   const smallMuted = { opacity: 0.75, fontSize: 11, marginTop: 2 };
+  const priorityColStyle = { width: 100, minWidth: 100, maxWidth: 100 };
+  const targetLevelColStyle = { width: 120, minWidth: 120, maxWidth: 120 };
+  const completedColStyle = { width: 100, minWidth: 100, maxWidth: 100 };
+  const actionColStyle = { width: 180, minWidth: 180, maxWidth: 180 };
 
   return React.createElement(
     "table",
@@ -70,12 +74,12 @@ function WishlistTable({
         null,
         React.createElement("th", { style: th }, "目标装备"),
         React.createElement("th", { style: th }, "起点装备（快照）"),
-        React.createElement("th", { style: th }, "优先级"),
-        React.createElement("th", { style: th }, "目标星数"),
+        React.createElement("th", { style: { ...th, ...priorityColStyle } }, "优先级"),
+        React.createElement("th", { style: { ...th, ...targetLevelColStyle } }, "目标星数"),
         React.createElement("th", { style: th }, "备注"),
-        React.createElement("th", { style: th }, "已完成步数"),
+        React.createElement("th", { style: { ...th, ...completedColStyle } }, "已完成步数"),
         React.createElement("th", { style: th }, "今日可改修"),
-        React.createElement("th", { style: th }, "操作")
+        React.createElement("th", { style: { ...th, ...actionColStyle } }, "操作")
       )
     ),
     React.createElement(
@@ -104,7 +108,7 @@ function WishlistTable({
           },
           React.createElement(
             "td",
-            { style: td },
+            { style: { ...td, ...actionColStyle } },
             React.createElement(
               "div",
               { style: { display: "flex", gap: 8, alignItems: "center" } },
@@ -132,7 +136,6 @@ function WishlistTable({
               React.createElement(SlotitemTypeIcon, {
                 iconType: rowVm.targetIconType,
                 title: rowVm.targetEquipTypeName,
-                style: { width: 14, height: 14 },
               }),
               React.createElement(
                 "div",
@@ -145,7 +148,7 @@ function WishlistTable({
           React.createElement("td", { style: td }, getPlanStartSnapshotText(p)),
           React.createElement(
             "td",
-            { style: td },
+            { style: { ...td, ...priorityColStyle } },
             isEditing
               ? React.createElement(
                   "select",
@@ -164,7 +167,7 @@ function WishlistTable({
           ),
           React.createElement(
             "td",
-            { style: td },
+            { style: { ...td, ...targetLevelColStyle } },
             isEditing
               ? React.createElement("input", {
                   type: "number",
@@ -183,11 +186,11 @@ function WishlistTable({
               : p.targetLevel
           ),
           React.createElement("td", { style: td }, p.note || ""),
-          React.createElement("td", { style: td }, `${completedCount}/${totalSteps}`),
+          React.createElement("td", { style: { ...td, ...completedColStyle } }, `${completedCount}/${totalSteps}`),
           React.createElement("td", { style: td }, today),
           React.createElement(
             "td",
-            { style: td },
+            { style: { ...td, ...actionColStyle } },
             React.createElement(
               "div",
               { style: row },