koishi-plugin-kkk 1.0.6 → 1.0.8

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # 更新日志
 
+## 1.0.8
+
+### 修复
+- 控制台入口包加载失败导致**侧边栏「kkk 配置」整个消失**：上一版加 RPC 失败日志时把 `try / else` 括错了，
+  注册面板路由的那段代码跑到作用域外（`ReferenceError: server is not defined`），现在结构修正。
+- 面板前端包禁用缓存（`/@plugin-<id>/index.js` 加 `no-store`）：控制台默认不带缓存头，
+  浏览器会一直用旧 bundle，表现为「代码改了但界面没变」。
+
+### 变更
+- 控制台页面取登录凭据改成两条路依次尝试（RPC → store.user），都不行时**把失败原因显示在页面上**，
+  方便一眼看出是没登录还是别的问题。
+
+## 1.0.7
+
+### 修复
+- **面板报「加载配置失败 / 鉴权失败: 缺少authorization」**：面板自己的登录 token 存在服务端内存里，
+  Koishi 一重启就失效，而自动登录脚本看到 localStorage 里已经有 token 就跳过登录，
+  于是一直拿着废 token 请求、所有接口 401。现在：
+  - 每次打开面板都会重新换一个新的 token（不再因为 localStorage 有值就跳过）；
+  - 接口鉴权同时接受「控制台换来的面板 cookie」，即使前端 token 过期也能正常读写配置。
+- 1.0.6 引入的登录校验配合这次修复才算完整：现在（装了 auth 插件时）未登录打不开面板、
+  登录后配置能正常加载与保存。
+
 ## 1.0.6
 
 ### 变更

package/client/index.ts

@@ -1,17 +1,14 @@
 /**
  * kkk 的控制台入口（浏览器端）。
  *
- * 用官方工具 `koishi-console build .` 打包（入口必须是 client/index.ts），产物在 dist/index.js。
- *
- * 面板本体是插件自带的 `/kkk`（独立页面）。qq-chat 那种做法是把界面注册成控制台页面、
- * 天然跟着控制台登录态；独立 URL 没有这层保护，所以这里向服务端要一个「面板 token」：
- *   1. `send('kkk/panel-token')` —— 服务端那个监听器带 authority: 4，
- *      未登录 / 权限不足的控制台客户端根本调不到；
- *   2. 拿到 token 后拼进 iframe 地址（/kkk?panel=<token>），服务端校验通过会给面板发 cookie，
- *      后续静态资源与接口都靠它放行；
- *   3. 拿不到 token（没登录）就只显示提示，不加载面板。
+ * 面板本体是插件自带的 `/kkk`（独立页面），独立 URL 没有控制台那层保护，
+ * 所以这里负责把「控制台已登录」这件事告诉面板。两条路依次尝试：
+ *   1. RPC `kkk/panel-token`（服务端监听器带 authority: 4，未登录根本调不到）；
+ *   2. 控制台 store 里的 user。
+ * 拿到凭据后拼进 iframe 地址；两条路都不行才显示「请先登录」，并把最后一条错误原因带上，
+ * 方便一眼看出是没登录还是别的什么问题。
  */
-import { send } from '@koishijs/client'
+import { send, store } from '@koishijs/client'
 import { computed, defineComponent, h, onMounted, onUnmounted, ref } from 'vue'
 
 export const name = 'kkk-console'
@@ -30,8 +27,9 @@ export function apply (ctx: any) {
       setup () {
         const style = ref<Record<string, string>>({})
         const status = ref<{ authRequired: boolean } | null>(null)
-        const panelToken = ref('')
-        const denied = ref(false)
+        const target = ref('')
+        const reason = ref('')
+        const ready = ref(false)
         const sync = () => {
           const aside = document.querySelector('nav.layout-activity') as HTMLElement | null
           const footer = document.querySelector('footer.layout-status') as HTMLElement | null
@@ -50,46 +48,66 @@ export function apply (ctx: any) {
           }
         }
         let timer: any = null
-        onMounted(async () => {
-          sync()
-          timer = setInterval(sync, 1000)
-          window.addEventListener('resize', sync)
+
+        const openPanel = async () => {
+          let required = true
           try {
             const res = await fetch('/kkk/api/status').then((r) => r.json())
             status.value = (res && res.data) || null
+            required = !status.value || status.value.authRequired !== false
           } catch {
             status.value = null
           }
-          if (!status.value || status.value.authRequired) {
-            try {
-              const token = await send('kkk/panel-token')
-              panelToken.value = typeof token === 'string' ? token : ''
-            } catch {
-              panelToken.value = ''
+          if (!required) { target.value = '/kkk'; ready.value = true; return }
+
+          // 1. RPC 换面板 token
+          try {
+            const token = await send('kkk/panel-token')
+            if (typeof token === 'string' && token) { target.value = '/kkk?panel=' + token; ready.value = true; return }
+            reason.value = 'RPC 没有返回 token'
+          } catch (error: any) {
+            reason.value = 'RPC 失败: ' + String(error?.message ?? error)
+          }
+
+          // 2. store 里的 user（老版本控制台可能只在这里放登录信息）
+          try {
+            const user: any = (store as any)?.user
+            if (user?.token && user?.id) {
+              target.value = '/kkk?uid=' + user.id + '&token=' + user.token
+              ready.value = true
+              return
             }
-            denied.value = !panelToken.value
+          } catch (error: any) {
+            reason.value = reason.value || '读取 store.user 失败: ' + String(error?.message ?? error)
           }
+          ready.value = true
+        }
+
+        onMounted(() => {
+          sync()
+          timer = setInterval(sync, 1000)
+          window.addEventListener('resize', sync)
+          void openPanel()
         })
         onUnmounted(() => {
           if (timer) clearInterval(timer)
           window.removeEventListener('resize', sync)
         })
-        const src = computed(() => {
-          const s = status.value
-          if (s && s.authRequired === false) return '/kkk'
-          return panelToken.value ? '/kkk?panel=' + encodeURIComponent(panelToken.value) : ''
-        })
+
+        const src = computed(() => target.value)
         return () => {
           if (src.value) return h('iframe', { src: src.value, style: style.value })
+          if (!ready.value) return h('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#666', fontFamily: 'system-ui' } }, '正在打开配置面板……')
           return h('div', {
             style: { display: 'flex', flexDirection: 'column', gap: '12px', alignItems: 'center', justifyContent: 'center', height: '100%', fontFamily: 'system-ui', color: '#666' }
           }, [
-            h('h2', { style: { margin: 0, fontSize: '20px' } }, denied.value ? '请先登录 Koishi 控制台' : '正在打开配置面板……'),
-            denied.value ? h('p', { style: { margin: 0 } }, '登录后即可打开 kkk 配置面板。') : null,
-            denied.value ? h('a', { href: '/login', style: { color: '#3b82f6' } }, '去登录') : null
+            h('h2', { style: { margin: 0, fontSize: '20px' } }, '请先登录 Koishi 控制台'),
+            h('p', { style: { margin: 0 } }, '登录后即可打开 kkk 配置面板。'),
+            reason.value ? h('p', { style: { margin: 0, fontSize: '12px', color: '#999' } }, reason.value) : null,
+            h('a', { href: '/login', style: { color: '#3b82f6' } }, '去登录')
           ])
         }
       }
     })
   })
-}
+}

package/dist/index.js

@@ -1 +1 @@
-import{send as v}from"@koishijs/client";import{defineComponent as y,ref as u,onMounted as h,onUnmounted as m,computed as g,h as o}from"vue";const A="kkk-console",f=64,x=28;function I(p){p.page({name:"kkk 配置",path:"/kkk-config",desc:"解析 / 面板 / 画质 / 图片切片等设置，改完直接生效",authority:4,icon:"activity:plugin",component:y({setup(){const r=u({}),t=u(null),n=u(""),l=u(false),a=()=>{const e=document.querySelector("nav.layout-activity"),i=document.querySelector("footer.layout-status"),d=e&&Math.round(e.getBoundingClientRect().right)||f,k=(i?Math.round(i.getBoundingClientRect().height):x)+8;r.value={position:"fixed",left:d+"px",top:"0px",width:"calc(100vw - "+d+"px)",height:"calc(100vh - "+k+"px)",border:"0",display:"block",background:"#fff",zIndex:"1"}};let s=null;h(async()=>{a(),s=setInterval(a,1e3),window.addEventListener("resize",a);try{const e=await fetch("/kkk/api/status").then(i=>i.json());t.value=e&&e.data||null}catch{t.value=null}if(!t.value||t.value.authRequired){try{const e=await v("kkk/panel-token");n.value=typeof e=="string"?e:""}catch{n.value=""}l.value=!n.value}}),m(()=>{s&&clearInterval(s),window.removeEventListener("resize",a)});const c=g(()=>{const e=t.value;return e&&e.authRequired===false?"/kkk":n.value?"/kkk?panel="+encodeURIComponent(n.value):""});return()=>c.value?o("iframe",{src:c.value,style:r.value}):o("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center",justifyContent:"center",height:"100%",fontFamily:"system-ui",color:"#666"}},[o("h2",{style:{margin:0,fontSize:"20px"}},l.value?"请先登录 Koishi 控制台":"正在打开配置面板……"),l.value?o("p",{style:{margin:0}},"登录后即可打开 kkk 配置面板。"):null,l.value?o("a",{href:"/login",style:{color:"#3b82f6"}},"去登录"):null])}})})}export{I as apply,A as name};
+import{send as m,store as g}from"@koishijs/client";import{defineComponent as h,ref as i,onMounted as x,onUnmounted as C,computed as S,h as t}from"vue";const L="kkk-console",k=64,w=28;function b(p){p.page({name:"kkk 配置",path:"/kkk-config",desc:"解析 / 面板 / 画质 / 图片切片等设置，改完直接生效",authority:4,icon:"activity:plugin",component:h({setup(){const v=i({}),r=i(null),s=i(""),n=i(""),o=i(false),u=()=>{const a=document.querySelector("nav.layout-activity"),l=document.querySelector("footer.layout-status"),e=a&&Math.round(a.getBoundingClientRect().right)||k,f=(l?Math.round(l.getBoundingClientRect().height):w)+8;v.value={position:"fixed",left:e+"px",top:"0px",width:"calc(100vw - "+e+"px)",height:"calc(100vh - "+f+"px)",border:"0",display:"block",background:"#fff",zIndex:"1"}};let c=null;const y=async()=>{var l;let a=true;try{const e=await fetch("/kkk/api/status").then(f=>f.json());r.value=e&&e.data||null,a=!r.value||r.value.authRequired!==false}catch{r.value=null}if(!a){s.value="/kkk",o.value=true;return}try{const e=await m("kkk/panel-token");if(typeof e=="string"&&e){s.value="/kkk?panel="+e,o.value=true;return}n.value="RPC 没有返回 token"}catch(e){n.value="RPC 失败: "+String((e==null?void 0:e.message)??e)}try{const e=(l=g)==null?void 0:l.user;if(e!=null&&e.token&&(e!=null&&e.id)){s.value="/kkk?uid="+e.id+"&token="+e.token,o.value=true;return}}catch(e){n.value=n.value||"读取 store.user 失败: "+String((e==null?void 0:e.message)??e)}o.value=true};x(()=>{u(),c=setInterval(u,1e3),window.addEventListener("resize",u),y()}),C(()=>{c&&clearInterval(c),window.removeEventListener("resize",u)});const d=S(()=>s.value);return()=>d.value?t("iframe",{src:d.value,style:v.value}):o.value?t("div",{style:{display:"flex",flexDirection:"column",gap:"12px",alignItems:"center",justifyContent:"center",height:"100%",fontFamily:"system-ui",color:"#666"}},[t("h2",{style:{margin:0,fontSize:"20px"}},"请先登录 Koishi 控制台"),t("p",{style:{margin:0}},"登录后即可打开 kkk 配置面板。"),n.value?t("p",{style:{margin:0,fontSize:"12px",color:"#999"}},n.value):null,t("a",{href:"/login",style:{color:"#3b82f6"}},"去登录")]):t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%",color:"#666",fontFamily:"system-ui"}},"正在打开配置面板……")}})})}export{b as apply,L as name};

package/lib/webui.js

@@ -78,7 +78,8 @@ function registerWebUi({ ctx, config, rawConfig, logger, pluginRoot }) {
   // 面板把登录态存在 localStorage 的 accessToken / userId / refreshToken 三个键里，
   // 登录页只是个表单壳子 —— 与其去点 DOM（React 受控组件很脆），不如直接调登录接口把凭据写进去再刷新。
   try {
-    if (localStorage.getItem('accessToken')) return;
+    // 每次都重新换一次：面板自己的 token 存在服务端内存里，Koishi 重启就失效，
+    // 之前这里看到 localStorage 有值就直接 return，结果一直拿着废 token 请求，全部 401。
     // 防呆：万一接口一直不给凭据，也别在这里无限刷新
     if (sessionStorage.getItem('kkk-autologin') === '1') return;
     sessionStorage.setItem('kkk-autologin', '1');
@@ -228,15 +229,20 @@ function registerWebUi({ ctx, config, rawConfig, logger, pluginRoot }) {
     };
     try {
         const consoleService = ctx.console;
-        consoleService?.addListener?.('kkk/panel-token', function () {
-            // this 是发起调用的控制台客户端，auth 由 auth 插件写入
-            if (!this?.auth)
-                throw new Error('请先登录 Koishi 控制台');
-            return issuePanelToken();
-        }, { authority: 4 });
+        if (typeof consoleService?.addListener !== 'function') {
+            logger.warn('[kkk] 控制台没有 addListener，面板 token RPC 未注册（面板将无法从控制台获取登录态）');
+        }
+        else {
+            consoleService.addListener('kkk/panel-token', function () {
+                // this 是发起调用的控制台客户端，auth 由 auth 插件写入
+                if (!this?.auth)
+                    throw new Error('请先登录 Koishi 控制台');
+                return issuePanelToken();
+            }, { authority: 4 });
+        }
     }
     catch (error) {
-        logger.debug('[kkk] 注册面板 token RPC 失败: ' + String(error?.message ?? error));
+        logger.warn('[kkk] 注册面板 token RPC 失败: ' + String(error?.message ?? error));
     }
     const tokens = new Map();
     const issueToken = () => {
@@ -249,6 +255,10 @@ function registerWebUi({ ctx, config, rawConfig, logger, pluginRoot }) {
     const authed = (request) => {
         if (!authRequired())
             return true;
+        // 面板 cookie（控制台换来的）本身就是授权凭据，接口请求直接用账号密码也不用再走一遍
+        const panelCookie = new RegExp(COOKIE_NAME + '_panel=([0-9a-f]+)').exec(String(request?.headers?.cookie || ''));
+        if (panelCookie && panelTokenValid(panelCookie[1]))
+            return true;
         const header = String(request?.headers?.authorization || request?.headers?.['x-access-token'] || '');
         if (header && tokens.has(header.replace(/^Bearer\s+/i, '')))
             return true;
@@ -408,8 +418,32 @@ function registerWebUi({ ctx, config, rawConfig, logger, pluginRoot }) {
         ].join('');
         return true;
     };
+    /**
+     * 控制台下发的插件前端包（`/@plugin-<id>/index.js`）默认没有缓存头，
+     * 浏览器会拿旧的 bundle 一直用（改了客户端逻辑却看不到效果）。
+     * 这里给本插件自己的入口加 no-store —— qq-chat 也是这么处理的。
+     */
+    const isOwnEntry = (requestPath) => {
+        if (!requestPath.includes('/@plugin-'))
+            return false;
+        const entries = ctx.console?.entries ?? {};
+        for (const key of Object.keys(entries)) {
+            if (!requestPath.startsWith('/@plugin-' + key))
+                continue;
+            const files = entries[key]?.files;
+            const list = Array.isArray(files) ? files : [files?.dev, files?.prod];
+            if (list.some((file) => typeof file === 'string' && file.includes('koishi-plugin-kkk')))
+                return true;
+        }
+        return false;
+    };
     server.use(async (response, next) => {
         const requestPath = String(response.path || '');
+        if (isOwnEntry(requestPath)) {
+            await next();
+            response.set('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
+            return;
+        }
         if (!requestPath.startsWith('/kkk/assets/'))
             return next();
         if (await pageDenied(response))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "koishi-plugin-kkk",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "抖音 / B站 / 快手 / 小红书 视频解析与动态推送，带 QQ 交互面板与弹幕烧录（karin-plugin-kkk 的 Koishi 移植版）",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",

package/src/webui.ts

@@ -86,7 +86,8 @@ export function registerWebUi ({ ctx, config, rawConfig, logger, pluginRoot }: W
   // 面板把登录态存在 localStorage 的 accessToken / userId / refreshToken 三个键里，
   // 登录页只是个表单壳子 —— 与其去点 DOM（React 受控组件很脆），不如直接调登录接口把凭据写进去再刷新。
   try {
-    if (localStorage.getItem('accessToken')) return;
+    // 每次都重新换一次：面板自己的 token 存在服务端内存里，Koishi 重启就失效，
+    // 之前这里看到 localStorage 有值就直接 return，结果一直拿着废 token 请求，全部 401。
     // 防呆：万一接口一直不给凭据，也别在这里无限刷新
     if (sessionStorage.getItem('kkk-autologin') === '1') return;
     sessionStorage.setItem('kkk-autologin', '1');
@@ -235,13 +236,17 @@ export function registerWebUi ({ ctx, config, rawConfig, logger, pluginRoot }: W
 
   try {
     const consoleService: any = (ctx as any).console
-    consoleService?.addListener?.('kkk/panel-token', function (this: any) {
-      // this 是发起调用的控制台客户端，auth 由 auth 插件写入
-      if (!this?.auth) throw new Error('请先登录 Koishi 控制台')
-      return issuePanelToken()
-    }, { authority: 4 })
+    if (typeof consoleService?.addListener !== 'function') {
+      logger.warn('[kkk] 控制台没有 addListener，面板 token RPC 未注册（面板将无法从控制台获取登录态）')
+    } else {
+      consoleService.addListener('kkk/panel-token', function (this: any) {
+        // this 是发起调用的控制台客户端，auth 由 auth 插件写入
+        if (!this?.auth) throw new Error('请先登录 Koishi 控制台')
+        return issuePanelToken()
+      }, { authority: 4 })
+    }
   } catch (error: any) {
-    logger.debug('[kkk] 注册面板 token RPC 失败: ' + String(error?.message ?? error))
+    logger.warn('[kkk] 注册面板 token RPC 失败: ' + String(error?.message ?? error))
   }
 
   const tokens = new Map<string, number>()
@@ -256,6 +261,9 @@ export function registerWebUi ({ ctx, config, rawConfig, logger, pluginRoot }: W
 
   const authed = (request: any): boolean => {
     if (!authRequired()) return true
+    // 面板 cookie（控制台换来的）本身就是授权凭据，接口请求直接用账号密码也不用再走一遍
+    const panelCookie = new RegExp(COOKIE_NAME + '_panel=([0-9a-f]+)').exec(String(request?.headers?.cookie || ''))
+    if (panelCookie && panelTokenValid(panelCookie[1])) return true
     const header = String(request?.headers?.authorization || request?.headers?.['x-access-token'] || '')
     if (header && tokens.has(header.replace(/^Bearer\s+/i, ''))) return true
     const cookie = String(request?.headers?.cookie || '')
@@ -419,8 +427,30 @@ export function registerWebUi ({ ctx, config, rawConfig, logger, pluginRoot }: W
     return true
   }
 
+  /**
+   * 控制台下发的插件前端包（`/@plugin-<id>/index.js`）默认没有缓存头，
+   * 浏览器会拿旧的 bundle 一直用（改了客户端逻辑却看不到效果）。
+   * 这里给本插件自己的入口加 no-store —— qq-chat 也是这么处理的。
+   */
+  const isOwnEntry = (requestPath: string): boolean => {
+    if (!requestPath.includes('/@plugin-')) return false
+    const entries: any = (ctx as any).console?.entries ?? {}
+    for (const key of Object.keys(entries)) {
+      if (!requestPath.startsWith('/@plugin-' + key)) continue
+      const files: any = entries[key]?.files
+      const list = Array.isArray(files) ? files : [files?.dev, files?.prod]
+      if (list.some((file: any) => typeof file === 'string' && file.includes('koishi-plugin-kkk'))) return true
+    }
+    return false
+  }
+
   server.use(async (response: any, next: any) => {
     const requestPath = String(response.path || '')
+    if (isOwnEntry(requestPath)) {
+      await next()
+      response.set('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0')
+      return
+    }
     if (!requestPath.startsWith('/kkk/assets/')) return next()
     if (await pageDenied(response)) return
     const relative = decodeURIComponent(requestPath.slice('/kkk/assets/'.length))