poi-plugin-kancolle-chs 1.4.1 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-kancolle-chs",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "砍口垒汉化计划PLUS POI 原生独立插件：提供全界面文本替换、正则动态替换、KCSAPI 响应合流、中文字体与贴图魔改、自定义字体适配与官方资源更新",
   "main": "index.es",
   "files": [

package/src/constants.es

@@ -15,7 +15,7 @@ export const OFFICIAL_REPO_GIT = 'https://github.com/asaico/Kancolle_to_CHS.git'
 export const OFFICIAL_REPO_RELEASES = 'https://github.com/asaico/Kancolle_to_CHS/releases'
 
 // 插件版本与 npm 元信息
-let pkgVersion = '1.4.1'
+let pkgVersion = '1.4.2'
 try {
   const pkg = require('../package.json')
   if (pkg && pkg.version) pkgVersion = pkg.version

package/src/views/MainPanel.es

@@ -161,16 +161,41 @@ export class MainPanel extends Component {
 
     // 针对旧版 POI 或特定主题外层容器修正高度与滚动上下文
     this.fixParentScrollStyles()
+    setTimeout(this.fixParentScrollStyles, 50)
+    setTimeout(this.fixParentScrollStyles, 250)
+
+    const rootEl = this.rootRef.current
+    if (rootEl) {
+      rootEl.addEventListener('wheel', this.handleWheel, { passive: false })
+
+      const doc = rootEl.ownerDocument || document
+      const win = doc.defaultView || (typeof window !== 'undefined' ? window : null)
+      this.currentDoc = doc
+      this.currentWin = win
+
+      if (win) {
+        win.addEventListener('resize', this.handleResize)
+        if (win !== window) {
+          // 独立新窗口模式：在 window 与 document 均挂载滚轮监听，实现全屏无死角即时滚动响应
+          win.addEventListener('wheel', this.handleWheel, { passive: false })
+          doc.addEventListener('wheel', this.handleWheel, { passive: false })
+        }
+      }
 
-    // 绑定原生滚轮双重补偿监听 (保障老旧 Electron 或卡片事件捕获异常环境)
-    if (this.rootRef && this.rootRef.current) {
-      this.rootRef.current.addEventListener('wheel', this.handleWheel, { passive: true })
+      // 确保进入新窗口时容器立即可获得焦点与滚动上下文
+      setTimeout(() => {
+        try {
+          rootEl.focus({ preventScroll: true })
+        } catch (_) {}
+      }, 50)
     }
 
     // 监听窗口与容器自适应宽度变化，实现动态窄窗紧凑排版适配
     this.handleResize = () => {
       if (this.rootRef && this.rootRef.current) {
         this.setState({ containerWidth: this.rootRef.current.offsetWidth })
+      } else if (this.currentWin) {
+        this.setState({ containerWidth: this.currentWin.innerWidth })
       } else if (typeof window !== 'undefined') {
         this.setState({ containerWidth: window.innerWidth })
       }
@@ -235,21 +260,58 @@ export class MainPanel extends Component {
     if (this.rootRef && this.rootRef.current) {
       this.rootRef.current.removeEventListener('wheel', this.handleWheel)
     }
+    if (this.currentWin) {
+      this.currentWin.removeEventListener('resize', this.handleResize)
+      if (this.currentWin !== window) {
+        this.currentWin.removeEventListener('wheel', this.handleWheel)
+      }
+    }
+    if (this.currentDoc && this.currentDoc !== document) {
+      this.currentDoc.removeEventListener('wheel', this.handleWheel)
+    }
     if (this.ro) {
       this.ro.disconnect()
     }
   }
 
   /**
-   * 自动向上递归修正 POI 外层 Tab 容器的高度与 flex 布局，确保内层滚动条与滚轮绝对可用
+   * 自动向上递归修正 POI 外层 Tab 及独立新窗口容器的高度与 flex 布局，确保内层滚动条与滚轮绝对可用
    */
   fixParentScrollStyles = () => {
     try {
       const root = this.rootRef.current
       if (!root) return
+
+      const doc = root.ownerDocument || document
+      const win = doc.defaultView || window
+      const isDetachedWindow = (doc !== document) || (win !== window) || Boolean(doc.getElementById('plugin-mountpoint'))
+
+      // 1. 若处于独立新窗口模式，修正 html、body 及 #plugin-mountpoint 的高度与溢出策略
+      if (isDetachedWindow) {
+        if (doc.documentElement) {
+          if (doc.documentElement.style.height !== '100%') doc.documentElement.style.height = '100%'
+          if (doc.documentElement.style.overflow !== 'hidden') doc.documentElement.style.overflow = 'hidden'
+        }
+        if (doc.body) {
+          if (doc.body.style.height !== '100%') doc.body.style.height = '100%'
+          if (doc.body.style.margin !== '0px') doc.body.style.margin = '0'
+          if (doc.body.style.padding !== '0px') doc.body.style.padding = '0'
+          if (doc.body.style.overflow !== 'hidden') doc.body.style.overflow = 'hidden'
+        }
+        const mountpoint = doc.getElementById('plugin-mountpoint')
+        if (mountpoint) {
+          if (mountpoint.style.height !== '100vh') mountpoint.style.height = '100vh'
+          if (mountpoint.style.maxHeight !== '100vh') mountpoint.style.maxHeight = '100vh'
+          if (mountpoint.style.display !== 'flex') mountpoint.style.display = 'flex'
+          if (mountpoint.style.flexDirection !== 'column') mountpoint.style.flexDirection = 'column'
+          if (mountpoint.style.overflow !== 'hidden') mountpoint.style.overflow = 'hidden'
+        }
+      }
+
+      // 2. 向上递归修正所有外层容器的高度与 flex 布局
       let parent = root.parentElement
       let depth = 0
-      while (parent && depth < 4) {
+      while (parent && depth < 6) {
         const id = parent.id || ''
         const cls = parent.className || ''
         if (
@@ -259,9 +321,17 @@ export class MainPanel extends Component {
           id.includes('poi-plugin-kancolle-chs') ||
           id === 'plugin-mountpoint'
         ) {
-          if (parent.style.height !== '100%') parent.style.height = '100%'
+          if (id === 'plugin-mountpoint') {
+            if (parent.style.height !== '100vh') parent.style.height = '100vh'
+            if (parent.style.maxHeight !== '100vh') parent.style.maxHeight = '100vh'
+          } else {
+            if (parent.style.height !== '100%') parent.style.height = '100%'
+            if (parent.style.maxHeight !== '100%') parent.style.maxHeight = '100%'
+          }
           if (parent.style.display !== 'flex') parent.style.display = 'flex'
           if (parent.style.flexDirection !== 'column') parent.style.flexDirection = 'column'
+          if (parent.style.flex !== '1 1 0px' && parent.style.flex !== '1') parent.style.flex = '1 1 0'
+          if (parent.style.minHeight !== '0px') parent.style.minHeight = '0'
           if (parent.style.overflow !== 'hidden') parent.style.overflow = 'hidden'
         }
         parent = parent.parentElement
@@ -271,20 +341,50 @@ export class MainPanel extends Component {
   }
 
   /**
-   * 滚轮平滑滚动双重补偿兜底
+   * 滚轮平滑滚动双重补偿与新窗口即时响应机制
    */
   handleWheel = (e) => {
     const container = this.rootRef.current
     if (!container) return
-    if (container.scrollHeight <= container.clientHeight) return
 
-    // 双重保障：若在老版本 POI / Electron 中原生滚轮事件未驱动 scrollTop，进行位移补偿
-    const prevScrollTop = container.scrollTop
-    requestAnimationFrame(() => {
-      if (container && container.scrollTop === prevScrollTop && e.deltaY !== 0) {
-        container.scrollTop += e.deltaY
-      }
-    })
+    // 如果事件目标是拥有独立滚动条的子元素（如 textarea），不予干涉
+    const target = e.target
+    if (target && (target.tagName === 'TEXTAREA' || target.tagName === 'INPUT')) {
+      if (target.scrollHeight > target.clientHeight) return
+    }
+
+    // 获取当前所属窗口（若在新窗口打开，则使用该独立窗口的 window 与 rAF）
+    const win = container.ownerDocument?.defaultView || (typeof window !== 'undefined' ? window : null)
+    const isDetachedWindow = (container.ownerDocument !== document) || (win && win !== window)
+
+    // 计算滚轮位移量
+    let delta = e.deltaY
+    if (e.deltaMode === 1) delta *= 25
+    else if (e.deltaMode === 2) delta *= container.clientHeight
+
+    if (container.scrollHeight <= container.clientHeight) {
+      // 容错重试：若尚未修正外层样式导致高度膨胀，立即修正一次
+      this.fixParentScrollStyles()
+      if (container.scrollHeight <= container.clientHeight) return
+    }
+
+    if (isDetachedWindow) {
+      // 独立新窗口模式：直接驱动 scrollTop 确保 100% 极速平滑滚动响应
+      container.scrollTop += delta
+      if (e.cancelable) e.preventDefault()
+    } else {
+      // 常规主窗口 Tab：双重补偿保障机制
+      const prevScrollTop = container.scrollTop
+      const rAF = (win && typeof win.requestAnimationFrame === 'function')
+        ? win.requestAnimationFrame.bind(win)
+        : requestAnimationFrame
+
+      rAF(() => {
+        if (container && container.scrollTop === prevScrollTop && delta !== 0) {
+          container.scrollTop += delta
+        }
+      })
+    }
   }
 
   /**
@@ -1867,8 +1967,9 @@ export class MainPanel extends Component {
         style={{
           width: '100%',
           height: '100%',
-          minHeight: '100%',
+          minHeight: 0,
           maxHeight: '100%',
+          flex: '1 1 0',
           overflowY: 'auto',
           overflowX: 'hidden',
           WebkitOverflowScrolling: 'touch',
@@ -1970,22 +2071,42 @@ export class MainPanel extends Component {
             }
           }
 
+          /* 新窗口与常规 Tab 模式全层级自适应滚动链保障 */
+          html, body {
+            height: 100% !important;
+            overflow: hidden !important;
+          }
+          #plugin-mountpoint {
+            height: 100vh !important;
+            max-height: 100vh !important;
+            display: flex !important;
+            flex-direction: column !important;
+            overflow: hidden !important;
+            box-sizing: border-box !important;
+          }
+          .poi-app-tabpane,
           #poi-plugin-kancolle-chs,
           #poi-plugin-kancolle-chs.poi-app-tabpane,
           .poi-plugin-content-poi-plugin-kancolle-chs {
             height: 100% !important;
+            max-height: 100% !important;
             display: flex !important;
+            flex: 1 1 0 !important;
+            min-height: 0 !important;
             flex-direction: column !important;
             overflow: hidden !important;
+            box-sizing: border-box !important;
           }
           .kancolle-chs-plus-scroll-container {
             height: 100% !important;
-            min-height: 100% !important;
+            min-height: 0 !important;
             max-height: 100% !important;
+            flex: 1 1 0 !important;
             overflow-y: auto !important;
             overflow-x: hidden !important;
             -webkit-overflow-scrolling: touch !important;
             outline: none !important;
+            box-sizing: border-box !important;
           }
           .kancolle-chs-plus-scroll-container::-webkit-scrollbar {
             width: 8px;