poi-plugin-inventory-cleaner 1.11.1 → 1.12.1

package/README-CN.md

@@ -17,7 +17,7 @@
 - **联动当前任务**：任务需要的装备标「任务需要 N 件」，不参与可拆的件数就是预留的那部分。
 - **按装备类型筛选**：沿用游戏本体「装备筛选」的 14 个大类 / 60 多个细分类型（与「装备信息」插件一致，如舰上战斗机、夜间轰炸机、高角炮、大口径主炮(II)），下拉框按大类分组。
 - **排序**：按攻略判定 / 数量 / 可拆件数 / 名称 / 类型，随时切换。
-- **名称显示**：中文名为主，日文原名作为副标题保留。
+- **名称显示**：中文名为主，日文原名作为副标题保留；每行和分类下拉都带游戏原版装备图标。
 - **筛选与搜索**：全部 / 可拆 / 留一些 / 不拆 / 看计划 / 受保护，支持按名称或 id 搜索。
 
 - **独立窗口**：使用 poi 原生的「在新窗口打开插件」功能（`poiPlugin.windowMode`，默认开启）。点击插件图标时 poi 会自己创建窗口并承载插件，带标题栏、主题、缩放和窗口位置记忆；不需要的话在「设置 → 插件 → 库存清理大师」里关掉即可。

package/README.md

@@ -15,7 +15,7 @@
 - **Unfinished quest needs** — collects equipment from quest text (in-progress quests, `poi-plugin-quest-planner` observed quests, the `poi-plugin-quest-info-2` quest list, or the I-Tell-You cache — whichever is available), parses the required count, and reserves that many pieces. It does not depend on a single plugin; with none installed it still counts in-progress quests.
 - **Type filter** — the game's own 14 equipment categories and 60+ detail types, matching Equipment Info, grouped in the dropdown.
 - **Sorting** — verdict / count / clearable / name / type.
-- **Names** — Chinese name first, original Japanese shown underneath.
+- **Names** — Chinese name first, original Japanese shown underneath, with the in-game equipment icon on every row and in the type picker.
 - **Filters & search** — all / scrap / keep some / keep / check plan / protected; search by name or id.
 
 - **Native window mode** — ships `poiPlugin.windowMode`, so poi opens the plugin in its own managed window (titlebar, theme, zoom, remembered bounds). Toggle it off in poi settings if you prefer the tab.

package/index.js

@@ -133,6 +133,100 @@ function Stat({ label, value, tone }) {
   )
 }
 
+function fallbackIcon(event) {
+  const img = event.currentTarget
+  if (img.dataset.fallback) return
+  img.dataset.fallback = '1'
+  img.src = iconUrl(-1)
+}
+
+function iconUrl(iconType) {
+  if (typeof window === 'undefined') return ''
+  const root = window.ROOT || window.__ROOT || ''
+  if (!root) return ''
+  const base = String(root).replace(/\\/g, '/').replace(/^\/+/, '')
+  return 'file:///' + base + '/assets/img/slotitem/' + (Number(iconType) || 0) + '.png'
+}
+
+function CategoryPicker({ value, groups, onChange }) {
+  const [open, setOpen] = React.useState(false)
+  const boxRef = React.useRef(null)
+
+  React.useEffect(() => {
+    if (!open) return undefined
+    const onDocClick = (event) => {
+      if (boxRef.current && !boxRef.current.contains(event.target)) setOpen(false)
+    }
+    document.addEventListener('mousedown', onDocClick)
+    return () => document.removeEventListener('mousedown', onDocClick)
+  }, [open])
+
+  return h(
+    'div',
+    { className: 'stock-picker', ref: boxRef },
+    h(
+      'button',
+      {
+        type: 'button',
+        className: 'stock-picker-btn',
+        title: t('stock.categoryTitle'),
+        onClick: () => setOpen((current) => !current),
+      },
+      h('span', { className: 'stock-picker-label' }, value || t('stock.categoryAll')),
+      h('span', { className: 'stock-picker-caret' }, '▾'),
+    ),
+    open
+      ? h(
+          'div',
+          { className: 'stock-picker-panel' },
+          h(
+            'button',
+            {
+              type: 'button',
+              className: 'stock-picker-item' + (value ? '' : ' is-active'),
+              onClick: () => {
+                onChange('')
+                setOpen(false)
+              },
+            },
+            h('span', { className: 'stock-picker-name' }, t('stock.categoryAll')),
+          ),
+          groups.map(([groupName, list]) =>
+            h(
+              'div',
+              { className: 'stock-picker-group', key: groupName },
+              h('div', { className: 'stock-picker-title' }, groupName),
+              list.map((entry) => {
+                const key = entry.key || OTHER_CATEGORY
+                return h(
+                  'button',
+                  {
+                    type: 'button',
+                    key,
+                    className: 'stock-picker-item' + (value === key ? ' is-active' : ''),
+                    onClick: () => {
+                      onChange(key)
+                      setOpen(false)
+                    },
+                  },
+                  h('img', {
+                    className: 'stock-picker-icon',
+                    src: iconUrl(entry.icon),
+                    alt: '',
+                    draggable: 'false',
+                    onError: fallbackIcon,
+                  }),
+                  h('span', { className: 'stock-picker-name' }, entry.key || t('stock.batchOther')),
+                  h('span', { className: 'stock-picker-count' }, String(entry.kinds)),
+                )
+              }),
+            ),
+          ),
+        )
+      : null,
+  )
+}
+
 function StockRow({ row, onKeepChange }) {
   const verdict = VERDICT[row.verdict] || VERDICT.unknown
   return h(
@@ -141,6 +235,13 @@ function StockRow({ row, onKeepChange }) {
     h(
       'div',
       { className: 'stock-row-main' },
+      h('img', {
+        className: 'stock-icon',
+        src: iconUrl(row.icon),
+        alt: '',
+        draggable: 'false',
+        onError: fallbackIcon,
+      }),
       h('span', { className: 'stock-name' }, row.cn || row.jp || `#${row.id}`),
       row.cn && row.jp && row.cn !== row.jp
         ? h('span', { className: 'stock-cn' }, row.jp)
@@ -307,6 +408,7 @@ function App() {
       const entry = map.get(key) || {
         key,
         kinds: 0,
+        icon: row.icon || 0,
         group: row.group || '',
         groupId: row.groupId || 99,
         categoryId: row.categoryId || 0,
@@ -391,29 +493,11 @@ function App() {
         placeholder: t('stock.search'),
         onChange: (event) => setKeyword(event.target.value),
       }),
-      h(
-        'select',
-        {
-          className: 'stock-category',
-          value: category,
-          title: t('stock.categoryTitle'),
-          onChange: (event) => setCategory(event.target.value),
-        },
-        h('option', { value: '' }, t('stock.categoryAll')),
-        categoryGroups.map(([groupName, list]) =>
-          h(
-            'optgroup',
-            { key: groupName, label: groupName },
-            list.map((entry) =>
-              h(
-                'option',
-                { key: entry.key || 'other', value: entry.key || OTHER_CATEGORY },
-                (entry.key || t('stock.batchOther')) + ' (' + entry.kinds + ')',
-              ),
-            ),
-          ),
-        ),
-      ),
+      h(CategoryPicker, {
+        value: category,
+        groups: categoryGroups,
+        onChange: setCategory,
+      }),
       h(
         'select',
         {

package/lib/equip-types.js

@@ -162,6 +162,7 @@ function buildTypeIndex(state) {
     const group = detail ? GROUP_BY_ID.get(detail.group) : null
     index.set(Number(id), {
       filterType,
+      icon: Number(master.api_type && master.api_type[3]) || 0,
       detailId: detail ? detail.id : 0,
       groupId: detail ? detail.group : 99,
       category: labels ? labels.cn : '',

package/lib/inventory.js

@@ -110,6 +110,7 @@ function buildInventory(state, options = {}) {
       verdict,
       rawVerdict: rule ? rule.raw : '',
       category: typeInfo && typeInfo.category ? typeInfo.category : (rule ? rule.category : ''),
+      icon: typeInfo ? typeInfo.icon : 0,
       categoryId: typeInfo ? typeInfo.detailId : 0,
       group: typeInfo ? typeInfo.group : '',
       groupId: typeInfo ? typeInfo.groupId : 99,

package/lib/style.js

@@ -100,6 +100,121 @@ const CSS = `
   border-color: var(--stock-indigo);
 }
 
+.stock-icon {
+  width: 24px;
+  height: 24px;
+  flex: none;
+  border-radius: 4px;
+  opacity: 0.92;
+}
+
+.stock-picker {
+  position: relative;
+  display: inline-block;
+}
+
+.stock-picker-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  max-width: 240px;
+  padding: 0 10px;
+  border: 1px solid var(--stock-border);
+  border-radius: 8px;
+  color: inherit;
+  background: var(--stock-surface);
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.stock-picker-btn:hover {
+  border-color: var(--stock-border-strong);
+}
+
+.stock-picker-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stock-picker-caret {
+  flex: none;
+  opacity: 0.6;
+}
+
+.stock-picker-panel {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 60;
+  width: 330px;
+  max-height: 440px;
+  overflow-y: auto;
+  padding: 6px;
+  border: 1px solid var(--stock-border-strong);
+  border-radius: 10px;
+  background: #1b2129;
+  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
+}
+
+.stock-picker-group + .stock-picker-group {
+  margin-top: 2px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.stock-picker-title {
+  padding: 8px 8px 3px;
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: rgba(232, 237, 244, 0.48);
+}
+
+.stock-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 7px;
+  color: #e8edf4;
+  background: transparent;
+  font-family: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.stock-picker-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.stock-picker-item.is-active {
+  background: rgba(99, 102, 241, 0.4);
+}
+
+.stock-picker-icon {
+  width: 22px;
+  height: 22px;
+  flex: none;
+  border-radius: 3px;
+}
+
+.stock-picker-name {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stock-picker-count {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.5;
+}
+
 .stock-category {
   height: 32px;
   padding: 0 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-inventory-cleaner",
-  "version": "1.11.1",
+  "version": "1.12.1",
   "description": "库存清理大师：对照改修攻略与保留上限，找出囤积过量、可以清理的装备，并标出不能拆的改修材料。",
   "main": "index.js",
   "files": [