poi-plugin-kai-planner 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-kai-planner",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "main": "index.js",
   "author": "aulu",
   "contributors": ["aulu"],

package/src/app/KaiPlannerApp.js

@@ -2,13 +2,24 @@
 const { DailyTabV2 } = require("./tabs/daily/DailyTabV2");
 const { checkAndUpdateData } = require("../services/static/version/dataUpdateManager");
 const { readMeta } = require("../services/static/version/versionStore");
+const {
+  DEFAULT_THEME_TOKENS,
+  readPoiTheme,
+  buildPlannerThemeTokens,
+  subscribePoiTheme,
+  themeTokensToCssVars,
+} = require("./theme/poiTheme");
 
-const placeholderStyle = {
-  padding: 12,
-  background: "#111827",
-  color: "#e5e7eb",
-  borderRadius: 8,
-};
+function buildPlaceholderStyle(themeTokens) {
+  const theme = themeTokens || DEFAULT_THEME_TOKENS;
+  return {
+    padding: 12,
+    background: theme.surfacePanel,
+    color: theme.textPrimary,
+    borderRadius: 8,
+    border: `1px solid ${theme.borderSubtle}`,
+  };
+}
 
 function pad2(n) {
   return String(n).padStart(2, "0");
@@ -25,7 +36,6 @@ function formatSimpleTime(iso) {
 
 function readBundledManifestUpdatedAt() {
   try {
-    // eslint-disable-next-line global-require
     const manifest = require("../data/static/data_manifest.json");
     if (manifest && manifest.updated_at) return String(manifest.updated_at);
   } catch {}
@@ -34,7 +44,6 @@ function readBundledManifestUpdatedAt() {
 
 function readEnableDebugFlag() {
   try {
-    // eslint-disable-next-line global-require
     const pkg = require("../../package.json");
     const poiPlugin = pkg && pkg.poiPlugin ? pkg.poiPlugin : {};
     if (poiPlugin.enableDebug == null) return true;
@@ -55,19 +64,43 @@ class KaiPlannerApp extends React.Component {
       checkingUpdate: false,
       lastUpdateAtText: "-",
       updateTip: "",
+      themeTokens: buildPlannerThemeTokens(readPoiTheme(props.envWindow)),
     };
     this._WishlistTab = null;
     this._AcquisitionTab = null;
     this._DebugTab = null;
+    this._unsubscribeTheme = null;
+    this._themeWarmupTimer = null;
     this.enableDebug = readEnableDebugFlag();
     this.handleCheckUpdate = this.handleCheckUpdate.bind(this);
+    this.syncTheme = this.syncTheme.bind(this);
   }
 
   componentDidMount() {
+    this.syncTheme();
+    this._unsubscribeTheme = subscribePoiTheme(this.props.envWindow, (hostTheme) => {
+      this.setState({ themeTokens: buildPlannerThemeTokens(hostTheme) });
+    });
+    const schedule = this.props.envWindow && this.props.envWindow.setTimeout ? this.props.envWindow.setTimeout.bind(this.props.envWindow) : setTimeout;
+    this._themeWarmupTimer = schedule(() => this.syncTheme(), 0);
     this.syncUpdateMeta();
     this.handleCheckUpdate(false);
   }
 
+  componentWillUnmount() {
+    if (typeof this._unsubscribeTheme === "function") this._unsubscribeTheme();
+    if (this._themeWarmupTimer != null) {
+      const clear = this.props.envWindow && this.props.envWindow.clearTimeout ? this.props.envWindow.clearTimeout.bind(this.props.envWindow) : clearTimeout;
+      clear(this._themeWarmupTimer);
+      this._themeWarmupTimer = null;
+    }
+  }
+
+  syncTheme() {
+    const hostTheme = readPoiTheme(this.props.envWindow);
+    this.setState({ themeTokens: buildPlannerThemeTokens(hostTheme) });
+  }
+
   syncUpdateMeta() {
     try {
       const meta = readMeta();
@@ -98,14 +131,22 @@ class KaiPlannerApp extends React.Component {
   }
 
   render() {
+    const themeTokens = this.state.themeTokens || DEFAULT_THEME_TOKENS;
+    const placeholderStyle = buildPlaceholderStyle(themeTokens);
+    const rootStyle = {
+      padding: 12,
+      color: themeTokens.textPrimary,
+      background: themeTokens.surfaceBase,
+      ...themeTokensToCssVars(themeTokens),
+    };
     const tab = !this.enableDebug && this.state.tab === "debug" ? "daily" : this.state.tab;
     const tabButtonStyle = (key) => ({
       padding: "6px 10px",
       borderRadius: 8,
       cursor: "pointer",
-      border: "1px solid #374151",
-      background: tab === key ? "#1f2937" : "transparent",
-      color: "#e5e7eb",
+      border: `1px solid ${themeTokens.borderSubtle}`,
+      background: tab === key ? themeTokens.buttonActiveBg : "transparent",
+      color: themeTokens.textPrimary,
       marginRight: 8,
       fontSize: 14,
     });
@@ -115,11 +156,11 @@ class KaiPlannerApp extends React.Component {
       content = React.createElement(DailyTabV2, {
         envWindow: this.props.envWindow,
         envCtx: this.props.envCtx,
+        themeTokens,
       });
     } else if (tab === "wishlist") {
       if (!this._WishlistTab && !this.state.wishlistLoadError) {
         try {
-          // eslint-disable-next-line global-require
           this._WishlistTab = require("./tabs/wishlist/WishlistTabV2");
         } catch (error) {
           this.setState({ wishlistLoadError: String(error && error.stack ? error.stack : error) });
@@ -136,6 +177,7 @@ class KaiPlannerApp extends React.Component {
         content = React.createElement(this._WishlistTab, {
           envWindow: this.props.envWindow,
           envCtx: this.props.envCtx,
+          themeTokens,
         });
       } else {
         content = React.createElement("div", { style: placeholderStyle }, "【改修规划】加载中...");
@@ -143,7 +185,6 @@ class KaiPlannerApp extends React.Component {
     } else if (tab === "acquisition") {
       if (!this._AcquisitionTab && !this.state.acquisitionLoadError) {
         try {
-          // eslint-disable-next-line global-require
           this._AcquisitionTab = require("./tabs/acquisition/AcquisitionTab");
         } catch (error) {
           this.setState({ acquisitionLoadError: String(error && error.stack ? error.stack : error) });
@@ -160,6 +201,7 @@ class KaiPlannerApp extends React.Component {
         content = React.createElement(this._AcquisitionTab, {
           envWindow: this.props.envWindow,
           envCtx: this.props.envCtx,
+          themeTokens,
         });
       } else {
         content = React.createElement("div", { style: placeholderStyle }, "【装备获取规划】加载中...");
@@ -167,7 +209,6 @@ class KaiPlannerApp extends React.Component {
     } else if (tab === "debug") {
       if (!this._DebugTab && !this.state.debugLoadError) {
         try {
-          // eslint-disable-next-line global-require
           this._DebugTab = require("./tabs/debug/DebugTab");
         } catch (error) {
           this.setState({ debugLoadError: String(error && error.stack ? error.stack : error) });
@@ -184,6 +225,7 @@ class KaiPlannerApp extends React.Component {
         content = React.createElement(this._DebugTab, {
           envWindow: this.props.envWindow,
           envCtx: this.props.envCtx,
+          themeTokens,
         });
       } else {
         content = React.createElement("div", { style: placeholderStyle }, "【Debug】加载中...");
@@ -194,7 +236,7 @@ class KaiPlannerApp extends React.Component {
 
     return React.createElement(
       "div",
-      { style: { padding: 12 } },
+      { className: "kai-planner-root", style: rootStyle },
       React.createElement(
         "div",
         { style: { marginBottom: 12, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 } },
@@ -211,13 +253,13 @@ class KaiPlannerApp extends React.Component {
         React.createElement(
           "div",
           { style: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", justifyContent: "flex-end" } },
-          React.createElement("span", { style: { fontSize: 14, opacity: 0.8 } }, `上一次数据源更新：${this.state.lastUpdateAtText}`),
+          React.createElement("span", { style: { fontSize: 14, color: themeTokens.textMuted } }, `上一次数据源更新：${this.state.lastUpdateAtText}`),
           React.createElement(
             "button",
             { style: tabButtonStyle("__check__"), onClick: () => this.handleCheckUpdate(true), disabled: this.state.checkingUpdate },
             this.state.checkingUpdate ? "检查中..." : "检查更新"
           ),
-          this.state.updateTip ? React.createElement("span", { style: { fontSize: 14, opacity: 0.85 } }, this.state.updateTip) : null
+          this.state.updateTip ? React.createElement("span", { style: { fontSize: 14, color: themeTokens.textMuted } }, this.state.updateTip) : null
         )
       ),
       content

package/src/app/tabs/acquisition/AcquisitionPlanForm.js

@@ -2,6 +2,7 @@
 const { MouseComboBox } = require("../wishlist/components/MouseComboBox");
 const { EVENT_COMBO_CLOSE_ALL, isInComboRoot } = require("../../../services/wishlist/dropdownInteraction");
 const { countNoteUnits } = require("../../../services/common/noteText");
+const { DEFAULT_THEME_TOKENS } = require("../../theme/poiTheme");
 
 const NOTE_MAX_UNITS = 100;
 
@@ -18,26 +19,36 @@ function AcquisitionPlanForm({
   onClearEquip,
   onSubmit,
   onCancel,
+  themeTokens,
 }) {
   if (!visible) return null;
 
+  const theme = themeTokens || DEFAULT_THEME_TOKENS;
   const panelStyle = {
     marginTop: 10,
     padding: 10,
-    border: "1px solid rgba(255,255,255,0.12)",
+    border: `1px solid ${theme.borderSubtle}`,
     borderRadius: 8,
-    background: "rgba(0,0,0,0.12)",
+    background: theme.surfaceElevated,
   };
   const formRow = { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", marginTop: 8 };
-  const labelStyle = { width: 96, opacity: 0.88, fontWeight: 700 };
+  const labelStyle = { width: 96, color: theme.textMuted, fontWeight: 700 };
   const inputStyle = {
     padding: "6px 8px",
     borderRadius: 8,
-    border: "1px solid rgba(255,255,255,0.12)",
-    background: "rgba(0,0,0,0.15)",
-    color: "#e5e7eb",
+    border: `1px solid ${theme.borderSubtle}`,
+    background: theme.surfaceInput,
+    color: theme.textPrimary,
     minWidth: 180,
   };
+  const chipStyle = {
+    border: `1px solid ${theme.info}`,
+    background: theme.mode === "light" ? "rgba(37,99,235,0.12)" : "rgba(59,130,246,0.14)",
+    color: theme.info,
+    borderRadius: 8,
+    padding: "4px 8px",
+    cursor: "pointer",
+  };
   const noteCount = countNoteUnits(form.note || "");
 
   return React.createElement(
@@ -64,6 +75,7 @@ function AcquisitionPlanForm({
         placeholder: mode === "edit" ? "编辑模式下不可修改装备" : "搜索并选择装备（名称/equipId）",
         onInputChange: (value) => onPatch({ equipQuery: value }),
         options: equipOptions,
+        themeTokens: theme,
         emptyText: "无匹配装备",
         onSelect: (value, option) => onSelectEquip(value, option),
       }),
@@ -73,14 +85,7 @@ function AcquisitionPlanForm({
             {
               type: "button",
               onClick: () => onClearEquip && onClearEquip(),
-              style: {
-                border: "1px solid rgba(147,197,253,0.45)",
-                background: "rgba(59,130,246,0.14)",
-                color: "#93c5fd",
-                borderRadius: 8,
-                padding: "4px 8px",
-                cursor: "pointer",
-              },
+              style: chipStyle,
             },
             `已选：${selectedEquipText} ×`
           )
@@ -116,7 +121,7 @@ function AcquisitionPlanForm({
         }),
         React.createElement(
           "div",
-          { style: { marginTop: 4, opacity: 0.7, fontSize: 12, textAlign: "right" } },
+          { style: { marginTop: 4, color: theme.textMuted, fontSize: 12, textAlign: "right" } },
           `当前字数 ${noteCount}/${NOTE_MAX_UNITS}`
         )
       )
@@ -127,9 +132,8 @@ function AcquisitionPlanForm({
       React.createElement("button", { onClick: onSubmit }, mode === "edit" ? "保存" : "确认新增"),
       React.createElement("button", { onClick: onCancel }, "取消")
     ),
-    error ? React.createElement("div", { style: { marginTop: 8, color: "#fca5a5" } }, error) : null
+    error ? React.createElement("div", { style: { marginTop: 8, color: theme.danger } }, error) : null
   );
 }
 
 module.exports = { AcquisitionPlanForm };
-