poi-plugin-kai-planner 1.0.9 → 1.0.11

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.9",
+  "version": "1.0.11",
   "main": "index.js",
   "author": "aulu",
   "contributors": ["aulu"],

package/src/app/components/EquipTypeIconFilter.js

@@ -1,62 +1,84 @@
 /* src/app/components/EquipTypeIconFilter.js */
 
 const React = require("react");
-const { SlotitemTypeIcon } = require("./SlotitemTypeIcon");
 
-function EquipTypeIconFilter({ options, selectedKeys, onToggle, onClear, iconSize }) {
+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 size = Number.isFinite(iconSize) ? iconSize : 12;
-  const baseButtonStyle = {
+  const areaStyle = {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+  };
+  const entryStyle = {
     display: "inline-flex",
     alignItems: "center",
-    justifyContent: "center",
-    minWidth: 28,
-    height: 28,
-    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, style: { width: size, height: size } })
-      );
-    })
+        "重置选项"
+      )
+    )
   );
 }
 

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 })
   );
 }