poi-plugin-kai-planner 1.0.10 → 1.0.12

package/README.md

@@ -41,10 +41,12 @@
 - Wishlist 展开明细中的“当前持有”计数会去除改修星数大于 0 的装备以及计划起点装备
 - 页面顶部 tab、上一次数据源更新、检查更新与更新提示统一使用 `14px` 字号
 - Daily 与 Wishlist 主表的折叠箭头统一为：未展开 `▶`、已展开 `▼`
+- Daily 与 Wishlist 中的类型 filter 已调整为更接近 `poi-plugin-item-info` 的 `checkbox + icon` 轻量布局
 
 ## 装备类型 icon 兼容性说明
 
 - 当前所有装备类型 icon 均直接使用 POI 宿主的 `SlotitemIcon` 默认渲染尺寸
+- Daily 表格、Wishlist 表格、类型 filter 现在都直接从 `views/components/etc/icon` 引入宿主 `SlotitemIcon`
 - 插件侧不再对 `SlotitemIcon` 做 `zoom`、`transform: scale(...)` 或其它自定义缩放处理
 - 原因是不同用户的 POI / Electron / 系统缩放环境下，非宿主默认缩放可能导致 icon 错位、放大或整页异常
-- 若后续仍需优化观感，优先通过 icon 外层容器的间距、行高、按钮 padding 等布局参数处理，不再恢复 icon 本体缩放
+- 若后续仍需优化观感，优先参考 `poi-plugin-item-info` 的宿主友好结构，通过 checkbox / label 布局、外层 gap 、margin 等轻量样式调整观感

package/package.json

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

package/src/app/components/EquipTypeIconFilter.js

@@ -1,61 +1,84 @@
 /* src/app/components/EquipTypeIconFilter.js */
 
 const React = require("react");
-const { SlotitemTypeIcon } = require("./SlotitemTypeIcon");
+
+let SlotitemIcon = null;
+try {
+  ({ SlotitemIcon } = require("views/components/etc/icon"));
+} catch {}
 
 function EquipTypeIconFilter({ options, selectedKeys, onToggle, onClear }) {
   if (!Array.isArray(options) || options.length === 0) return null;
 
   const selectedSet = new Set((selectedKeys || []).map(String));
-  const baseButtonStyle = {
+  const areaStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+  };
+  const entryStyle = {
     display: "inline-flex",
     alignItems: "center",
-    justifyContent: "center",
-    minWidth: 44,
-    height: 44,
-    padding: 0,
-    borderRadius: 8,
+    marginRight: "1em",
+    marginBottom: 8,
+    cursor: "pointer",
+  };
+  const checkboxStyle = {
+    verticalAlign: "middle",
+    display: "inline-block",
+    margin: 0,
+    marginRight: 4,
+  };
+  const actionButtonStyle = {
+    marginTop: 10,
+    marginBottom: 10,
+    minWidth: 120,
+    height: 24,
     border: "1px solid rgba(255,255,255,0.12)",
-    background: "rgba(255,255,255,0.04)",
+    background: "rgba(255,255,255,0.08)",
     color: "#e5e7eb",
     cursor: "pointer",
-    flexShrink: 0,
   };
 
   return React.createElement(
     "div",
-    { style: { display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" } },
+    null,
     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)",
-        },
-      },
-      "全部"
+      "div",
+      { style: areaStyle },
+      ...options.map((option) => {
+        const key = String(option.key);
+        const active = selectedSet.has(key);
+        return React.createElement(
+          "label",
+          {
+            key,
+            style: entryStyle,
+            title: option.name || key,
+          },
+          React.createElement("input", {
+            type: "checkbox",
+            checked: active,
+            onChange: () => onToggle(key),
+            style: checkboxStyle,
+          }),
+          SlotitemIcon ? React.createElement(SlotitemIcon, { slotitemId: option.iconType }) : null
+        );
+      })
     ),
-    ...options.map((option) => {
-      const key = String(option.key);
-      const active = selectedSet.has(key);
-      return React.createElement(
+    React.createElement(
+      "div",
+      { style: { display: "flex", gap: 12, flexWrap: "wrap" } },
+      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)",
-          },
+          onClick: onClear,
+          style: actionButtonStyle,
         },
-        React.createElement(SlotitemTypeIcon, { iconType: option.iconType })
-      );
-    })
+        "重置选项"
+      )
+    )
   );
 }
 

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

@@ -2,10 +2,6 @@
 
 const React = require("react");
 
-const { SlotitemTypeIcon } = require("../../components/SlotitemTypeIcon");
-
-const { EquipTypeIconFilter } = require("../../components/EquipTypeIconFilter");
-
 const { loadStaticData } = require("../../../data/loaders/loadStaticData");
 
 const {
@@ -278,9 +274,7 @@ class DailyTab extends React.Component {
 
       error: null,
 
-      search: "",
-
-      selectedEquipTypes: [],
+      search: ""
     };
 
     this.refresh = this.refresh.bind(this);
@@ -502,39 +496,9 @@ class DailyTab extends React.Component {
       .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 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) => {
-      const typeKey = r && r.iconType != null ? String(r.iconType) : "";
-
-      if (selectedEquipTypeSet.size && !selectedEquipTypeSet.has(typeKey))
-        return false;
 
       if (
         q &&
@@ -599,36 +563,6 @@ class DailyTab extends React.Component {
           ),
         ),
 
-        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",
 
@@ -708,7 +642,7 @@ class DailyTab extends React.Component {
 
                 { style: { margin: "0 0 10px", opacity: 0.8 } },
 
-                `今日可改修装备：${rows.length} 条${selectedEquipTypes.length ? `（类型筛选：${selectedEquipTypes.length}）` : ""}${q ? `（搜索：${this.state.search}）` : ""}`,
+                `今日可改修装备：${rows.length} 条${q ? `（搜索：${this.state.search}）` : ""}`,
               ),
 
               React.createElement(
@@ -828,10 +762,6 @@ React.createElement("th", { style: { ...thStyle, ...upgradeColStyle } }, "可进
                               foldIcon,
                             ),
 
-                            React.createElement(SlotitemTypeIcon, {
-                              iconType: r.iconType,
-                              title: r.equipTypeName,
-                            }),
 
                             React.createElement(
                               "div",

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

@@ -31,7 +31,6 @@ 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");
@@ -108,7 +107,6 @@ class WishlistTab extends React.Component {
       rebindInputById: {},
       editById: {},
       filterTargetName: "",
-      selectedTargetEquipTypes: [],
       activePlanTab: "unfinished",
       showCreateForm: false,
       create: {
@@ -632,37 +630,7 @@ class WishlistTab extends React.Component {
       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 filteredVm = vm;
     const activePlanTab = this.state.activePlanTab || "unfinished";
     const activeRows = activePlanTab === "completed" ? filteredVm.completedRows : filteredVm.unfinishedRows;
 
@@ -691,26 +659,6 @@ 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

@@ -1,7 +1,6 @@
 /* src/app/tabs/wishlist/components/WishlistTable.js */
 
 const React = require("react");
-const { SlotitemTypeIcon } = require("../../../components/SlotitemTypeIcon");
 
 const PRIORITY_STYLE_MAP = {
   P0: { color: "#fecaca", borderColor: "rgba(239,68,68,0.55)", background: "rgba(239,68,68,0.16)" },
@@ -108,7 +107,7 @@ function WishlistTable({
           },
           React.createElement(
             "td",
-            { style: { ...td, ...actionColStyle } },
+            { style: td },
             React.createElement(
               "div",
               { style: { display: "flex", gap: 8, alignItems: "center" } },
@@ -133,10 +132,6 @@ function WishlistTable({
                 },
                 expandIcon
               ),
-              React.createElement(SlotitemTypeIcon, {
-                iconType: rowVm.targetIconType,
-                title: rowVm.targetEquipTypeName,
-              }),
               React.createElement(
                 "div",
                 null,