poi-plugin-kai-planner 1.0.0

package/src/app/tabs/daily/DailyTab.js

@@ -0,0 +1,439 @@
+/* src/app/tabs/daily/DailyTab.js */
+
+const React = require("react");
+
+const { loadStaticData } = require("../../../data/loaders/loadStaticData");
+const { buildArrangementIndex } = require("../../../data/indexes/buildArrangementIndex");
+const { buildDailyViewModel } = require("../../../services/daily/buildDailyViewModel");
+const { getReduxStateFromEnvWindow } = require("../../../services/player/getReduxStateFromEnvWindow");
+const {
+  TOKYO_WEEK_KEYS,
+  TOKYO_WEEK_LABEL_ZH,
+  formatTokyoDateTimeWithWeekday,
+  getTokyoWeekdayKey,
+} = require("../../../services/utils/tokyoTime");
+
+function buildShipIndexes(masterShipsRaw) {
+  const shipBySortno = {};
+  const shipByApiId = {};
+  for (const k of Object.keys(masterShipsRaw || {})) {
+    const s = masterShipsRaw[k];
+    if (!s) continue;
+    if (s.api_sortno != null) shipBySortno[String(s.api_sortno)] = s;
+    if (s.api_id != null) shipByApiId[String(s.api_id)] = s;
+  }
+  return { shipBySortno, shipByApiId };
+}
+
+function SectionTitle({ children }) {
+  return React.createElement("div", { style: { fontWeight: 800, margin: "10px 0 6px" } }, children);
+}
+
+function ItemList({ title, items }) {
+  if (!items || items.length === 0) return null;
+  return React.createElement(
+    "div",
+    { style: { marginTop: 6 } },
+    React.createElement("div", { style: { opacity: 0.85, marginBottom: 4 } }, title),
+    React.createElement(
+      "ul",
+      { style: { margin: 0, paddingLeft: 18 } },
+      items.map((it, idx) =>
+        React.createElement("li", { key: idx }, `${it.name} × ${it.count}`)
+      )
+    )
+  );
+}
+
+function PhaseBlock({ phase }) {
+  const label = phase.phase === 0 ? "阶段0（0→1…5→6）" : "阶段1（6→7…9→MAX）";
+  const dev = phase.dev || { min: 0, max: 0 };
+  const screw = phase.screw || { min: 0, max: 0 };
+
+  const extras = (phase.items && phase.items.extras) ? phase.items.extras : [];
+
+  return React.createElement(
+    "div",
+    { style: { border: "1px solid rgba(255,255,255,0.12)", borderRadius: 8, padding: 10, marginTop: 10 } },
+    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" } },
+      React.createElement("div", { style: { fontWeight: 800 } }, label),
+      React.createElement("div", { style: { opacity: 0.9 } },
+        `资材(开发): ${dev.min}/${dev.max}，螺丝: ${screw.min}/${screw.max}`
+      )
+    ),
+    ItemList({ title: "通用消耗（每次）", items: phase.items ? phase.items.common : [] }),
+    extras.length > 0
+      ? React.createElement(
+          "div",
+          { style: { marginTop: 6 } },
+          React.createElement("div", { style: { opacity: 0.85, marginBottom: 4 } }, "独立消耗（特定星级区间，叠加在通用消耗上）"),
+          extras.map((ex, i) =>
+            React.createElement(
+              "div",
+              { key: i, style: { marginTop: 6, padding: "8px 10px", background: "rgba(255,255,255,0.05)", borderRadius: 8 } },
+              React.createElement("div", { style: { fontWeight: 700, marginBottom: 4 } }, `${ex.star_from}→${ex.star_to}`),
+              React.createElement(
+                "ul",
+                { style: { margin: 0, paddingLeft: 18 } },
+                (ex.items || []).map((it, idx) =>
+                  React.createElement("li", { key: idx }, `${it.name} × ${it.count}`)
+                )
+              )
+            )
+          )
+        )
+      : null
+  );
+}
+
+function UpgradeBlock({ upgrades, upgradeMeta }) {
+  if (!upgradeMeta || upgradeMeta.hasAnyUpgradeConfig === false) {
+    return React.createElement(
+      "div",
+      { style: { marginTop: 10, opacity: 0.8 } },
+      "该装备【任意日子都不可进化】（没有进化配置）"
+    );
+  }
+
+  if (!upgrades || upgrades.length === 0) {
+    return React.createElement(
+      "div",
+      { style: { marginTop: 10, opacity: 0.8 } },
+      "该装备【今天不可进化】（今日可用秘书舰不符合进化要求）"
+    );
+  }
+
+  return React.createElement(
+    "div",
+    null,
+    upgrades.map((u, idx) =>
+      React.createElement(
+        "div",
+        { key: idx, style: { border: "1px solid rgba(255,255,255,0.12)", borderRadius: 8, padding: 10, marginTop: 10 } },
+        React.createElement("div", { style: { display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" } },
+          React.createElement("div", { style: { fontWeight: 900 } }, `进化：→ ${u.upgradeName}（${u.upgradeId}）`),
+          React.createElement("div", { style: { opacity: 0.9 } }, `资材(开发): ${u.dev.min}/${u.dev.max}，螺丝: ${u.screw.min}/${u.screw.max}`)
+        ),
+        React.createElement("div", { style: { marginTop: 6, opacity: 0.9 } }, `指定秘书舰（今日可用）：${u.secretaryText || "不可"}`),
+        ItemList({ title: "进化消耗", items: u.items || [] })
+      )
+    )
+  );
+}
+
+function upgradeStatusText(upgradeMeta) {
+  if (!upgradeMeta || upgradeMeta.hasAnyUpgradeConfig === false) return "不可进化";
+  if (upgradeMeta.canUpgradeToday) return "今日可进化";
+  return "今日不可进化";
+}
+
+class DailyTab extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      tokyoText: formatTokyoDateTimeWithWeekday(),
+      weekdayKey: getTokyoWeekdayKey(),
+      expanded: {}, // equipId -> bool
+      vm: null,
+      error: null,
+      search: "",
+    };
+
+    this.refresh = this.refresh.bind(this);
+    this.setWeekday = this.setWeekday.bind(this);
+    this.toggleRow = this.toggleRow.bind(this);
+  }
+
+  componentDidMount() {
+    this.refresh();
+    this._timer = setInterval(() => {
+      this.setState({ tokyoText: formatTokyoDateTimeWithWeekday() });
+    }, 1000);
+  }
+
+  componentWillUnmount() {
+    if (this._timer) clearInterval(this._timer);
+  }
+
+  setWeekday(weekdayKey) {
+    this.setState({ weekdayKey }, this.refresh);
+  }
+
+  toggleRow(equipId) {
+    const k = String(equipId);
+    const next = { ...(this.state.expanded || {}) };
+    next[k] = !next[k];
+    this.setState({ expanded: next });
+  }
+
+  refresh() {
+    try {
+      const staticData = loadStaticData();
+      const { index: arrangementIndex } = buildArrangementIndex(staticData.improvementArrangement);
+
+      const state = getReduxStateFromEnvWindow(this.props.envWindow);
+      if (!state || !state.const) {
+        this.setState({
+          error: "Redux state unavailable. 请先进入母港，确保 /api_start2 已加载。",
+          vm: null,
+        });
+        return;
+      }
+
+      const masterEquipsById = state.const.$equips || {};
+      const masterShipsRaw = state.const.$ships || {};
+      const { shipBySortno, shipByApiId } = buildShipIndexes(masterShipsRaw);
+
+      const vm = buildDailyViewModel({
+        staticData,
+        arrangementIndex,
+        poi: { masterEquipsById, shipBySortno, shipByApiId },
+        weekdayKey: this.state.weekdayKey,
+      });
+
+      this.setState({ vm, error: null });
+    } catch (e) {
+      this.setState({ error: String(e && (e.stack || e)), vm: null });
+    }
+  }
+
+  render() {
+    const wrapperStyle = {
+      height: "calc(100vh - 140px)",
+      display: "flex",
+      flexDirection: "column",
+      color: "#e5e7eb",
+      fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial",
+      fontSize: 12,
+      lineHeight: 1.4,
+    };
+
+    const stickyHeaderStyle = {
+      position: "sticky",
+      top: 0,
+      zIndex: 5,
+      padding: "12px 12px 10px",
+      background: "rgba(16,24,40,0.92)",
+      backdropFilter: "blur(6px)",
+      borderBottom: "1px solid rgba(255,255,255,0.08)",
+    };
+
+    const headerRowStyle = { display: "flex", justifyContent: "space-between", gap: 12, alignItems: "center", flexWrap: "wrap" };
+    const tabBarStyle = { display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 };
+    const tabStyle = (active) => ({
+      padding: "6px 10px",
+      borderRadius: 10,
+      border: "1px solid rgba(255,255,255,0.12)",
+      background: active ? "rgba(255,255,255,0.12)" : "transparent",
+      cursor: "pointer",
+      userSelect: "none",
+    });
+
+    const toolbarStyle = { display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" };
+
+    const inputStyle = {
+      width: 240,
+      padding: "6px 10px",
+      borderRadius: 8,
+      border: "1px solid rgba(255,255,255,0.12)",
+      background: "rgba(0,0,0,0.15)",
+      color: "#e5e7eb",
+      outline: "none",
+    };
+
+    const scrollAreaStyle = {
+      flex: 1,
+      overflowY: "auto",
+      padding: 12,
+    };
+
+    const tableStyle = {
+      width: "100%",
+      borderCollapse: "collapse",
+      borderSpacing: 0,
+      overflow: "hidden",
+      border: "1px solid rgba(255,255,255,0.12)",
+      borderRadius: 10,
+      background: "rgba(0,0,0,0.06)",
+    };
+
+    const thStyle = { textAlign: "left", padding: "10px 10px", borderBottom: "1px solid rgba(255,255,255,0.12)", opacity: 0.9 };
+    const tdStyle = { padding: "10px 10px", borderBottom: "1px solid rgba(255,255,255,0.08)", verticalAlign: "top" };
+    const smallMuted = { opacity: 0.75, fontSize: 11 };
+
+    const vm = this.state.vm;
+    const q = (this.state.search || "").trim().toLowerCase();
+    const rows = vm && vm.rows ? (q ? vm.rows.filter((r) => (r.equipName || "").toLowerCase().includes(q)) : vm.rows) : [];
+
+    return React.createElement(
+      "div",
+      { style: wrapperStyle },
+
+      React.createElement(
+        "div",
+        { style: stickyHeaderStyle },
+        React.createElement(
+          "div",
+          { style: headerRowStyle },
+          React.createElement("div", null,
+            React.createElement("div", { style: { fontSize: 16, fontWeight: 900 } }, "每日改修"),
+            React.createElement("div", { style: smallMuted }, `当前时间（GMT+9）：${this.state.tokyoText}`)
+          ),
+          React.createElement("div", { style: toolbarStyle },
+            React.createElement("input", {
+              value: this.state.search,
+              placeholder: "搜索装备名称...",
+              onChange: (e) => this.setState({ search: e.target.value }),
+              style: inputStyle,
+            }),
+            React.createElement("button", { onClick: this.refresh }, "Refresh")
+          )
+        ),
+
+        React.createElement(
+          "div",
+          { style: tabBarStyle },
+          TOKYO_WEEK_KEYS.slice(1).map((k) =>
+            React.createElement("div", {
+              key: k,
+              style: tabStyle(this.state.weekdayKey === k),
+              onClick: () => this.setWeekday(k),
+            }, TOKYO_WEEK_LABEL_ZH[k])
+          ),
+          React.createElement("div", {
+            key: "sunday",
+            style: tabStyle(this.state.weekdayKey === "sunday"),
+            onClick: () => this.setWeekday("sunday"),
+          }, TOKYO_WEEK_LABEL_ZH["sunday"])
+        )
+      ),
+
+      React.createElement(
+        "div",
+        { style: scrollAreaStyle },
+
+        this.state.error
+          ? React.createElement("pre", {
+              style: {
+                marginTop: 0,
+                padding: 12,
+                background: "#0b1220",
+                border: "1px solid rgba(255,255,255,0.12)",
+                borderRadius: 10,
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word",
+              }
+            }, this.state.error)
+          : null,
+
+        !this.state.error && vm
+          ? React.createElement(
+              React.Fragment,
+              null,
+              React.createElement("div", { style: { margin: "0 0 10px", opacity: 0.8 } },
+                `今日可改修装备：${rows.length} 条` + (q ? `（搜索：${this.state.search}）` : "")
+              ),
+
+              React.createElement(
+                "table",
+                { style: tableStyle },
+                React.createElement(
+                  "thead",
+                  null,
+                  React.createElement(
+                    "tr",
+                    null,
+                    React.createElement("th", { style: thStyle }, "装备名称"),
+                    React.createElement("th", { style: thStyle }, "基础消耗（油/弹/钢/铝）"),
+                    React.createElement("th", { style: thStyle }, `${TOKYO_WEEK_LABEL_ZH[this.state.weekdayKey]} - 秘书舰`),
+                    React.createElement("th", { style: thStyle }, "可进化")
+                  )
+                ),
+                React.createElement(
+                  "tbody",
+                  null,
+                  rows.map((r) => {
+                    const exp = !!this.state.expanded[String(r.equipId)];
+                    const base = r.baseCost || {};
+                    const baseText = `${base.fuel || 0}/${base.ammo || 0}/${base.steel || 0}/${base.bauxite || 0}` + (base.missing ? "（缺数据）" : "");
+                    const icon = exp ? "▾" : "▸";
+
+                    const onRowClick = () => this.toggleRow(r.equipId);
+
+                    return React.createElement(
+                      React.Fragment,
+                      { key: r.equipId },
+
+                      React.createElement(
+                        "tr",
+                        {
+                          onClick: onRowClick,
+                          style: { cursor: "pointer" },
+                          title: "点击展开/收起",
+                        },
+                        React.createElement("td", { style: tdStyle },
+                          React.createElement("div", { style: { display: "flex", gap: 8, alignItems: "center" } },
+                            React.createElement(
+                              "button",
+                              {
+                                onClick: (e) => { e.preventDefault(); e.stopPropagation(); onRowClick(); },
+                                style: {
+                                  width: 28,
+                                  height: 28,
+                                  borderRadius: 8,
+                                  border: "1px solid rgba(255,255,255,0.12)",
+                                  background: "rgba(255,255,255,0.06)",
+                                  color: "#e5e7eb",
+                                  cursor: "pointer",
+                                },
+                                title: "展开/收起",
+                              },
+                              icon
+                            ),
+                            React.createElement("div", null,
+                              React.createElement("div", { style: { fontWeight: 800 } }, r.equipName),
+                              React.createElement("div", { style: smallMuted }, `equipId: ${r.equipId}`)
+                            )
+                          )
+                        ),
+                        React.createElement("td", { style: tdStyle }, baseText),
+                        React.createElement("td", { style: tdStyle }, r.secretaryText || "不可"),
+                        React.createElement("td", { style: tdStyle }, upgradeStatusText(r.upgradeMeta))
+                      ),
+
+                      exp
+                        ? React.createElement(
+                            "tr",
+                            { key: `${r.equipId}_detail` },
+                            React.createElement(
+                              "td",
+                              { style: { ...tdStyle, paddingTop: 0 }, colSpan: 4 },
+                              React.createElement(SectionTitle, null, "改修消耗明细（每次）"),
+                              React.createElement(PhaseBlock, { phase: r.phases[0] }),
+                              React.createElement(PhaseBlock, { phase: r.phases[1] }),
+
+                              r.upgradeMeta && r.upgradeMeta.hasAnyUpgradeConfig
+                                ? React.createElement(
+                                    React.Fragment,
+                                    null,
+                                    React.createElement(SectionTitle, null, "进化消耗（今日可进化）"),
+                                    React.createElement(UpgradeBlock, { upgrades: r.upgrades || [], upgradeMeta: r.upgradeMeta })
+                                  )
+                                : null
+                            )
+                          )
+                        : null
+                    );
+                  })
+                )
+              )
+            )
+          : null
+      )
+    );
+  }
+}
+
+module.exports = {
+  DailyTab,
+};