poi-plugin-inventory-cleaner 1.12.2 → 1.13.1

package/i18n/en-US.json

@@ -31,6 +31,7 @@
   "stock.keepPlus": "Keep one more",
   "stock.batchToggle": "Batch keep",
   "stock.categoryAll": "All categories",
+  "stock.backToTop": "Back to top",
   "stock.categoryTitle": "Filter by in-game equipment type",
   "stock.sortTitle": "Sort by",
   "stock.sortVerdict": "Guide verdict",

package/i18n/zh-CN.json

@@ -31,6 +31,7 @@
   "stock.keepPlus": "多留一件",
   "stock.batchToggle": "批量保留",
   "stock.categoryAll": "全部类别",
+  "stock.backToTop": "回到顶部",
   "stock.categoryTitle": "按游戏装备类型筛选",
   "stock.sortTitle": "排序方式",
   "stock.sortVerdict": "按攻略判定",

package/index.js

@@ -403,6 +403,17 @@ function App() {
 
   const [batchOpen, setBatchOpen] = React.useState(false)
   const [batchValues, setBatchValues] = React.useState({})
+  const [showTop, setShowTop] = React.useState(false)
+  const rootRef = React.useRef(null)
+
+  const handleScroll = React.useCallback((event) => {
+    setShowTop(event.currentTarget.scrollTop > 400)
+  }, [])
+
+  const scrollToTop = React.useCallback(() => {
+    const element = rootRef.current
+    if (element) element.scrollTo({ top: 0, behavior: 'smooth' })
+  }, [])
 
   const firstKeepSave = React.useRef(true)
   React.useEffect(() => {
@@ -477,7 +488,7 @@ function App() {
 
   return h(
     'div',
-    { className: 'stock-root' },
+    { className: 'stock-root', ref: rootRef, onScroll: handleScroll },
     h('style', null, CSS),
     h(
       'header',
@@ -658,7 +669,18 @@ function App() {
         ),
     h('p', { className: 'stock-warn' }, t('stock.warn')),
     h('p', { className: 'stock-source' }, t('stock.source')),
-
+    showTop
+      ? h(
+          'button',
+          {
+            type: 'button',
+            className: 'stock-top',
+            title: t('stock.backToTop'),
+            onClick: scrollToTop,
+          },
+          '↑',
+        )
+      : null,
   )
 }
 

package/lib/style.js

@@ -373,25 +373,21 @@ const CSS = `
 .stock-note {
   margin: 6px 0 0;
   font-size: 11px;
-  line-height: 1.55;
-  opacity: 0.65;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
+  line-height: 1.6;
+  opacity: 0.7;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .stock-consume {
   margin: 4px 0 0;
   font-size: 10px;
-  line-height: 1.5;
+  line-height: 1.55;
   opacity: 0.45;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 
 .stock-batchbar {
@@ -645,6 +641,53 @@ const CSS = `
   opacity: 0.42;
 }
 
+.stock-root::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.stock-root::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
+}
+
+.stock-root::-webkit-scrollbar-thumb {
+  background: rgba(170, 180, 195, 0.6);
+  border: 2px solid transparent;
+  border-radius: 6px;
+  background-clip: padding-box;
+}
+
+.stock-root::-webkit-scrollbar-thumb:hover {
+  background: rgba(205, 215, 230, 0.8);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+.stock-top {
+  position: fixed;
+  right: 22px;
+  bottom: 22px;
+  z-index: 70;
+  width: 42px;
+  height: 42px;
+  padding: 0;
+  border: 1px solid rgba(150, 160, 175, 0.55);
+  border-radius: 50%;
+  color: #e8edf4;
+  background: rgba(38, 44, 54, 0.94);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+  font-family: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.stock-top:hover {
+  border-color: #818cf8;
+  color: #818cf8;
+}
+
 `
 
 module.exports = { CSS }

package/package.json

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