poi-plugin-compass 0.1.2 → 0.1.4

package/index.js

@@ -26,6 +26,8 @@ const mapAreas = [
   ['4', '西方'], ['5', '南方'], ['6', '中部'],
 ]
 const LOCAL_KCNAV_ASSET_ROOT = path.join(__dirname, 'assets', 'kcnav')
+const LOCAL_PROPHET_SPOT_ICON_ROOT = path.join(__dirname, 'assets', 'icons', 'spot')
+const PREFERENCES_STORAGE_KEY = 'poi-plugin-compass.preferences.v1'
 
 const MAP_PHASES = {
   '5-6': [
@@ -67,7 +69,6 @@ const {
   evaluateMap,
   evaluatePredicate,
   fleetContextFromState,
-  formatPercent,
   mapNodeLabel,
   normalizeMapId,
   normalizeOutcomes,
@@ -114,6 +115,18 @@ const NODE_DEFAULTS = {
   border: '#999999',
 }
 
+const COMBAT_NODE_TYPES = new Set([4, 5, 11, 13, 15])
+const AIR_NODE_TYPES = new Set([7, 10])
+const AIR_STATUS_NODE_TYPES = new Set([4, 5, 7, 10, 11, 13, 15])
+const ICON_ONLY_NODE_TYPES = new Set([0, 5, 7, 8, 10])
+const PROPHET_NODE_ICONS = {
+  5: '5',
+  8: '8',
+}
+const NODE_ICON_SIZE = 64
+const NODE_ICON_SIZE_BY_TYPE = { 7: 56, 8: 48, 10: 56 }
+const NODE_ICON_OFFSET_Y_BY_TYPE = { 0: -2, 5: -6 }
+
 function nodeVisualStyle(nodeInfo = {}) {
   const style = { ...NODE_DEFAULTS, ...nodeInfo }
   const size = Number.isFinite(Number(style.size)) ? Number(style.size) : Number(style.simpleSize)
@@ -156,6 +169,66 @@ function getRootState() {
   return store && typeof store.getState === 'function' ? store.getState() : {}
 }
 
+function compassStorage() {
+  try {
+    return typeof window !== 'undefined' && window.localStorage ? window.localStorage : null
+  } catch (_) {
+    return null
+  }
+}
+
+function isRecord(value) {
+  return value != null && typeof value === 'object' && !Array.isArray(value)
+}
+
+function normalizeOverrides(value) {
+  if (!isRecord(value)) return {}
+  return Object.fromEntries(Object.entries(value).filter(([node, target]) => node && typeof target === 'string' && target))
+}
+
+function readCompassPreferences() {
+  const storage = compassStorage()
+  if (!storage) return {}
+  try {
+    const parsed = JSON.parse(storage.getItem(PREFERENCES_STORAGE_KEY) || '{}')
+    return isRecord(parsed) ? parsed : {}
+  } catch (_) {
+    return {}
+  }
+}
+
+function viewPreferenceKey(mapId, phaseId, deckId) {
+  return `${mapId}|${phaseId || ''}|${deckId}`
+}
+
+function storedOverridesForView(preferences, mapId, phaseId, deckId) {
+  const overridesByView = isRecord(preferences?.overridesByView) ? preferences.overridesByView : {}
+  return normalizeOverrides(overridesByView[viewPreferenceKey(mapId, phaseId, deckId)])
+}
+
+function normalizeStringMap(value) {
+  if (!isRecord(value)) return {}
+  return Object.fromEntries(Object.entries(value).filter(([key, entry]) => key && typeof entry === 'string' && entry))
+}
+
+function normalizeNumberMap(value) {
+  if (!isRecord(value)) return {}
+  return Object.fromEntries(Object.entries(value)
+    .map(([key, entry]) => [key, Number(entry)])
+    .filter(([key, entry]) => key && Number.isFinite(entry)))
+}
+
+function storedExportPreferencesForView(preferences, mapId, phaseId, deckId) {
+  const exportByView = isRecord(preferences?.exportByView) ? preferences.exportByView : {}
+  const stored = exportByView[viewPreferenceKey(mapId, phaseId, deckId)]
+  if (!isRecord(stored)) return { exportRoute: null, exportEnemies: {}, exportFormations: {} }
+  return {
+    exportRoute: typeof stored.route === 'string' && stored.route ? stored.route : null,
+    exportEnemies: normalizeStringMap(stored.enemies),
+    exportFormations: normalizeNumberMap(stored.formations),
+  }
+}
+
 function getFleet(state, deckId = 1) {
   const fleets = state?.info?.fleets
   if (Array.isArray(fleets)) return fleets[deckId - 1] || null
@@ -275,6 +348,21 @@ function nodeIconUrl(icon) {
   return null
 }
 
+function prophetSpotIconUrl(icon) {
+  if (icon == null) return null
+  return pathToFileURL(path.join(LOCAL_PROPHET_SPOT_ICON_ROOT, `${icon}.svg`)).toString()
+}
+
+function nodeMarker(nodeType, nodeInfo) {
+  const prophetIcon = PROPHET_NODE_ICONS[nodeType]
+  if (prophetIcon) return { source: 'prophet', url: prophetSpotIconUrl(prophetIcon) }
+  if ([0, 7, 10].includes(nodeType)) {
+    const kcnavIcon = nodeIconUrl(nodeInfo?.icon)
+    return kcnavIcon ? { source: 'kcnav', url: kcnavIcon } : null
+  }
+  return null
+}
+
 function localNodeTypesForMap(mapId, mapDefinition) {
   const nodeTypes = { ...(localKcnavNodeTypes[mapId] || {}) }
   if (mapDefinition?.start) nodeTypes[mapDefinition.start] = 0
@@ -400,8 +488,71 @@ function routeEdges(geometry) {
     .filter((edge) => edge.from && edge.to)
 }
 
-function outcomeText(outcome) {
-  return `${outcome.to} ${formatPercent(outcome.probability, outcome.estimated)}`
+function formatProbability(value, estimated = false, mode = 'percent') {
+  if (!Number.isFinite(Number(value))) return '未知'
+  const probability = Math.max(0, Math.min(1, Number(value)))
+  const suffix = estimated ? '?' : ''
+  if (mode === 'decimal') {
+    const rounded = Math.round(probability * 100) / 100
+    return `${rounded === 1 ? '1' : rounded.toFixed(2).replace(/^0/, '')}${suffix}`
+  }
+  return `${Math.round(probability * 100)}%${suffix}`
+}
+
+function outcomeText(outcome, mode = 'percent') {
+  return `${outcome.to} ${formatProbability(outcome.probability, outcome.estimated, mode)}`
+}
+
+// These predicates came from separate list items in the cached KCWiki route
+// tables.  Keep the evaluator's compact OR semantics for compatibility, but
+// render each source line separately so the UI does not invent one combined
+// rule where the source did not have one.
+const SEPARATE_SOURCE_LINE_RULE_IDS = new Set([
+  '2-5-C-heavy',
+  '1-5-F-heavy',
+  '1-6-start-heavy', '1-6-M-heavy',
+  '2-3-D-special',
+  '4-2-C-light-l',
+  '6-1-start-heavy3',
+  '6-2-C-a', '6-2-D-f', '6-2-E-f',
+  '6-4-start-right-lha', '6-4-A-noakitsu-heavy', '6-4-E-special', '6-4-E-g', '6-4-J-l', '6-4-J-i', '6-4-K-h',
+  '6-5-start-left', '6-5-C-e', '6-5-E-i', '6-5-I-h',
+  '7-1-B-a', '7-1-H-k',
+  '7-2-C-d', '7-2-E-g', '7-2-I-j',
+  '7-3-C-heavy', '7-3-G-special', '7-3-I-heavy', '7-3-J-m', '7-3-J-p', '7-3-M-n', '7-3-M-o',
+  '7-4-start-c', '7-4-start-a', '7-4-C-d', '7-4-J-k', '7-4-J-l', '7-4-M-heavy',
+  '7-5-B-c', '7-5-D-e', '7-5-D-fast', '7-5-J-N', '7-5-J-O-heavy', '7-5-P-r',
+])
+
+function visibleRuleLabel(rule) {
+  const label = predicateLabel(rule?.predicate)
+  return label
+    .replace(/（[^）]*(?:近似|约|原文|比例未知|分歧系数)[^）]*）/g, '')
+    .replace(/\([^)]*(?:approx|about|original|unknown|coefficient)[^)]*\)/gi, '')
+    .replace(/，?\s*失败后继续判定/g, '')
+    .replace(/：\s*[^，；：]+概率(?:未知|随索敌变化)/g, '')
+    .replace(/；\s*(?:近似|约)/g, '')
+    .replace(/（原文(?:标记\s*\?|比例未知)[^）]*）/g, '')
+    .replace(/（约）/g, '')
+    .replace(/\s{2,}/g, ' ')
+    .replace(/：\s*$/g, '')
+    .trim()
+}
+
+function rulePopoverNotes(rule, rawLabel, visibleLabel) {
+  const notes = []
+  if (rawLabel !== visibleLabel) notes.push(`原文补充：${rawLabel}`)
+  if (rule?.continueOnFailure === true) notes.push('本条判定失败后继续检查后续规则')
+  if (rule?.confidence === 'approximate') notes.push('该条件或概率来自近似资料')
+  if (rule?.confidence === 'unknown' || rule?.outcomes?.some((outcome) => outcome?.probability == null)) {
+    notes.push('来源没有给出明确概率；当前按均等概率暂估')
+  }
+  return notes
+}
+
+function displayPredicatesForRule(rule) {
+  if (!SEPARATE_SOURCE_LINE_RULE_IDS.has(rule?.id) || rule?.predicate?.kind !== 'any') return [rule?.predicate]
+  return rule.predicate.predicates?.length ? rule.predicate.predicates : [rule.predicate]
 }
 
 function conditionIcon(status, active) {
@@ -423,11 +574,16 @@ function ruleRows(mapDefinition, node, context) {
   return (mapDefinition.rules || [])
     .filter((rule) => rule.node === node)
     .sort((left, right) => number(left.priority) - number(right.priority))
-    .map((rule) => ({
-      rule,
-      result: evaluatePredicate(rule.predicate, context),
-      outcomes: normalizeOutcomes(rule.outcomes, rule),
-    }))
+    .reduce((rows, rule) => {
+      displayPredicatesForRule(rule).forEach((predicate, index) => {
+        rows.push({
+          rule: { ...rule, id: `${rule.id}::${index}`, predicate, sourceRuleId: rule.id },
+          result: evaluatePredicate(predicate, context),
+          outcomes: normalizeOutcomes(rule.outcomes, rule),
+        })
+      })
+      return rows
+    }, [])
 }
 
 function fleetSummary(context) {
@@ -458,12 +614,21 @@ function edgeProbability(evaluation, from, to) {
   }
 }
 
-function probabilityTier(value) {
-  if (!Number.isFinite(Number(value))) return ''
-  if (Number(value) === 0) return 'is-probability-zero'
-  if (Number(value) >= 0.75) return 'is-probability-high'
-  if (Number(value) >= 0.4) return 'is-probability-medium'
-  return 'is-probability-low'
+function edgeVisualStyle(value) {
+  const probability = Number(value)
+  if (!Number.isFinite(probability) || probability <= 0) {
+    return { color: '#87919a', width: 2.25, opacity: 0.3 }
+  }
+  const ratio = Math.max(0, Math.min(1, probability))
+  if (ratio >= 0.999999) return { color: '#78d99a', width: 7, opacity: 1 }
+  const start = [125, 135, 145]
+  const end = [120, 217, 154]
+  const color = `rgb(${start.map((component, index) => Math.round(component + (end[index] - component) * ratio)).join(', ')})`
+  return {
+    color,
+    width: 2.25 + ratio * 4.75,
+    opacity: 0.3 + ratio * 0.7,
+  }
 }
 
 function mapBackgroundUrl(mapId) {
@@ -489,19 +654,27 @@ function manualSourceForTarget(evaluation, target) {
 class Compass extends React.Component {
   constructor(props) {
     super(props)
+    const preferences = readCompassPreferences()
+    const storedMapId = typeof preferences.mapId === 'string' && mapCatalog.maps[preferences.mapId]
+      ? preferences.mapId : null
+    const initialMapId = storedMapId
+      || (pluginState.currentMapId && mapCatalog.maps[pluginState.currentMapId] ? pluginState.currentMapId : mapIds[0])
+    const initialDeckId = [1, 2, 3, 4].includes(Number(preferences.deckId)) ? Number(preferences.deckId) : 1
+    const preferredPhaseId = preferences.phaseByMap?.[initialMapId] ?? preferences.phaseId
+    const initialPhaseId = phaseOptionForMap(initialMapId, preferredPhaseId)?.id || null
+    const initialExportPreferences = storedExportPreferencesForView(preferences, initialMapId, initialPhaseId, initialDeckId)
     this.state = {
-      deckId: 1,
-      mapId: pluginState.currentMapId && mapCatalog.maps[pluginState.currentMapId]
-        ? pluginState.currentMapId
-        : mapIds[0],
-      phaseId: phaseOptionsForMap(mapIds[0])[0]?.id || null,
+      deckId: initialDeckId,
+      mapId: initialMapId,
+      phaseId: initialPhaseId,
       selectedNode: pluginState.currentNode || null,
       selectedEdge: null,
-      overrides: {},
+      overrides: storedOverridesForView(preferences, initialMapId, initialPhaseId, initialDeckId),
+      probabilityFormat: preferences.probabilityFormat === 'decimal' ? 'decimal' : 'percent',
+      showEstimatedAir: typeof preferences.showEstimatedAir === 'boolean' ? preferences.showEstimatedAir : true,
+      showEnemyAvatars: typeof preferences.showEnemyAvatars === 'boolean' ? preferences.showEnemyAvatars : true,
       exportOpen: false,
-      exportRoute: null,
-      exportEnemies: {},
-      exportFormations: {},
+      ...initialExportPreferences,
       exportError: null,
       exportBusy: false,
     }
@@ -525,6 +698,42 @@ class Compass extends React.Component {
     this.refresh()
   }
 
+  componentDidUpdate() {
+    this.persistPreferences()
+  }
+
+  persistPreferences() {
+    const storage = compassStorage()
+    if (!storage) return
+    try {
+      const previous = readCompassPreferences()
+      const overridesByView = isRecord(previous.overridesByView) ? { ...previous.overridesByView } : {}
+      overridesByView[viewPreferenceKey(this.state.mapId, this.state.phaseId, this.state.deckId)] = normalizeOverrides(this.state.overrides)
+      const exportByView = isRecord(previous.exportByView) ? { ...previous.exportByView } : {}
+      exportByView[viewPreferenceKey(this.state.mapId, this.state.phaseId, this.state.deckId)] = {
+        route: typeof this.state.exportRoute === 'string' ? this.state.exportRoute : null,
+        enemies: normalizeStringMap(this.state.exportEnemies),
+        formations: normalizeNumberMap(this.state.exportFormations),
+      }
+      const phaseByMap = isRecord(previous.phaseByMap) ? { ...previous.phaseByMap } : {}
+      phaseByMap[this.state.mapId] = this.state.phaseId
+      storage.setItem(PREFERENCES_STORAGE_KEY, JSON.stringify({
+        ...previous,
+        mapId: this.state.mapId,
+        phaseId: this.state.phaseId,
+        phaseByMap,
+        deckId: this.state.deckId,
+        probabilityFormat: this.state.probabilityFormat,
+        showEstimatedAir: this.state.showEstimatedAir,
+        showEnemyAvatars: this.state.showEnemyAvatars,
+        overridesByView,
+        exportByView,
+      }))
+    } catch (_) {
+      // Preferences are optional; a restricted localStorage must not break the plugin.
+    }
+  }
+
   componentWillUnmount() {
     listeners.delete(this.refresh)
     this.unsubscribeStore?.()
@@ -532,15 +741,16 @@ class Compass extends React.Component {
   }
 
   selectMap(mapId) {
+    const preferences = readCompassPreferences()
+    const phaseId = phaseOptionForMap(mapId, preferences.phaseByMap?.[mapId])?.id || null
+    const exportPreferences = storedExportPreferencesForView(preferences, mapId, phaseId, this.state.deckId)
     this.setState({
       mapId,
-      phaseId: phaseOptionsForMap(mapId)[0]?.id || null,
+      phaseId,
       selectedNode: null,
       selectedEdge: null,
-      overrides: {},
-      exportRoute: null,
-      exportEnemies: {},
-      exportFormations: {},
+      overrides: storedOverridesForView(preferences, mapId, phaseId, this.state.deckId),
+      ...exportPreferences,
       exportError: null,
     })
   }
@@ -584,7 +794,10 @@ class Compass extends React.Component {
   }
 
   selectPhase(phaseId) {
-    this.setState({ phaseId, selectedNode: null, selectedEdge: null, overrides: {}, exportRoute: null, exportEnemies: {}, exportFormations: {}, exportError: null })
+    const preferences = readCompassPreferences()
+    const overrides = storedOverridesForView(preferences, this.state.mapId, phaseId, this.state.deckId)
+    const exportPreferences = storedExportPreferencesForView(preferences, this.state.mapId, phaseId, this.state.deckId)
+    this.setState({ phaseId, selectedNode: null, selectedEdge: null, overrides, ...exportPreferences, exportError: null })
   }
 
   selectNode(node) {
@@ -592,7 +805,10 @@ class Compass extends React.Component {
   }
 
   selectFleet(deckId) {
-    this.setState({ deckId, selectedNode: null, selectedEdge: null, overrides: {}, exportRoute: null, exportEnemies: {}, exportFormations: {}, exportError: null })
+    const preferences = readCompassPreferences()
+    const overrides = storedOverridesForView(preferences, this.state.mapId, this.state.phaseId, deckId)
+    const exportPreferences = storedExportPreferencesForView(preferences, this.state.mapId, this.state.phaseId, deckId)
+    this.setState({ deckId, selectedNode: null, selectedEdge: null, overrides, ...exportPreferences, exportError: null })
   }
 
   renderLosIcons(scores) {
@@ -613,10 +829,10 @@ class Compass extends React.Component {
       `制空 ${air.min === air.max ? air.min : `${air.min}～${air.max}`}`)
   }
 
-  setManualOverride(node, to, edgeId = null) {
+  setManualOverride(node, to, edgeId = null, selectedNode = node) {
     this.setState((state) => ({
       overrides: { ...state.overrides, [node]: to },
-      selectedNode: node,
+      selectedNode,
       selectedEdge: edgeId,
       exportRoute: null,
       exportError: null,
@@ -627,6 +843,35 @@ class Compass extends React.Component {
     this.setState({ selectedEdge: edgeId })
   }
 
+  renderNodeEnemyAvatar(ship, rootState, x, y, size) {
+    if (!ship?.id) return null
+    const name = ship.name || '敌舰'
+    return h('foreignObject', {
+      className: 'compass-node-overlay compass-node-enemy-avatar',
+      x,
+      y,
+      width: size,
+      height: size,
+      'aria-label': `最常见敌方旗舰：${name}`,
+    }, h('div', { className: 'compass-node-overlay-content' }, this.renderShipPortrait(ship.id, name, rootState, size)))
+  }
+
+  renderNodeIcon(marker, centerX, centerY, nodeType) {
+    if (!marker?.url) return null
+    const size = NODE_ICON_SIZE_BY_TYPE[nodeType] || NODE_ICON_SIZE
+    const offsetY = NODE_ICON_OFFSET_Y_BY_TYPE[nodeType] || 0
+    return h('image', {
+      className: `compass-node-icon is-${marker.source}`,
+      href: marker.url,
+      x: centerX - size / 2,
+      y: centerY + offsetY - size / 2,
+      width: size,
+      height: size,
+      preserveAspectRatio: 'xMidYMid meet',
+      'aria-hidden': 'true',
+    })
+  }
+
   renderMap(mapDefinition, geometry, evaluation, selectedNode, currentNode, passedNodes = [], mapId = null) {
     if (!mapGeometryAvailable(mapDefinition, geometry)) {
       return h('div', { className: 'compass-empty-panel' }, 'poi 地图数据不可用')
@@ -636,7 +881,8 @@ class Compass extends React.Component {
     const edges = routeEdges(geometry)
     const passedEdges = passedEdgeKeys(passedNodes)
     const nodeTypes = localNodeTypesForMap(mapId, mapDefinition)
-    const airPower = calculatePoiFleetStat(getRootState(), this.state.deckId, 1, true)
+    const rootState = getRootState()
+    const airPower = calculatePoiFleetStat(rootState, this.state.deckId, 1, true)
     const width = Math.max(1200, ...Object.values(positions).map((position) => position.x + 100))
     const height = Math.max(720, ...Object.values(positions).map((position) => position.y + 100))
     return h(
@@ -660,6 +906,7 @@ class Compass extends React.Component {
         const to = positions[edge.to]
         if (!from || !to) return null
         const probability = edgeProbability(evaluation, edge.from, edge.to)
+        const edgeVisual = edgeVisualStyle(probability.global)
         const manualOutcomes = evaluation.decisions[edge.from]?.manualOutcomes
           || evaluation.decisions[edge.from]?.baseOutcomes
           || []
@@ -670,7 +917,6 @@ class Compass extends React.Component {
           'compass-edge',
           probability.global != null ? 'is-reachable' : '',
           probability.estimated ? 'is-estimated' : '',
-          probabilityTier(probability.global),
           passedEdges.has(`${edge.from}->${edge.to}`) ? 'is-passed' : '',
           manualChoice ? 'is-manual-choice' : '',
           selected ? 'is-selected' : '',
@@ -688,6 +934,11 @@ class Compass extends React.Component {
           role: 'button',
           tabIndex: 0,
           'aria-label': `边 ID ${edge.cell}：${edge.from}→${edge.to}`,
+          style: {
+            '--compass-edge-color': edgeVisual.color,
+            '--compass-edge-width': edgeVisual.width,
+            '--compass-edge-opacity': edgeVisual.opacity,
+          },
           onClick: () => manualChoice
             ? this.setManualOverride(edge.from, edge.to, edge.cell)
             : this.selectEdge(edge.cell),
@@ -697,7 +948,7 @@ class Compass extends React.Component {
             `边 ID ${edge.cell}：${edge.from} → ${edge.to}`,
             manualChoice ? '点击选择方向' : null,
             probability.global != null && Number(probability.global) > 0
-              ? `局部 ${formatPercent(probability.local, probability.estimated)}`
+              ? `局部 ${formatProbability(probability.local, probability.estimated, this.state.probabilityFormat)}`
               : null,
           ].filter(Boolean).join(' · ')),
           h('line', {
@@ -706,13 +957,13 @@ class Compass extends React.Component {
             x2: to.x,
             y2: to.y,
           }),
-          probability.global != null && Number(probability.global) > 0
+          probability.global != null && Number(probability.global) > 0 && Math.round(Number(probability.global) * 100) > 0
             ? h('text', {
               x: (from.x + to.x) / 2,
               y: (from.y + to.y) / 2,
               dominantBaseline: 'middle',
               className: 'compass-edge-label',
-            }, formatPercent(probability.global, probability.estimated))
+            }, formatProbability(probability.global, probability.estimated, this.state.probabilityFormat))
             : null,
           selected
             ? h('text', {
@@ -730,10 +981,20 @@ class Compass extends React.Component {
           ? kcnavNodeCatalog['-1']
           : kcnavNodeCatalog[String(nodeType)] || kcnavNodeCatalog['-1']
         const visual = nodeVisualStyle(nodeInfo)
-        const airState = evaluation.probability.reach[node] > 0 && [4, 5, 7, 10, 15].includes(nodeType)
-          ? airStateRange(airPower, loadEnemies(mapId, node)) : null
+        const marker = nodeMarker(nodeType, nodeInfo)
+        const iconOnly = ICON_ONLY_NODE_TYPES.has(nodeType)
+        const enemyData = (COMBAT_NODE_TYPES.has(nodeType) || AIR_NODE_TYPES.has(nodeType) || AIR_STATUS_NODE_TYPES.has(nodeType))
+          ? loadEnemies(mapId, node) : null
+        const commonFlagship = this.state.showEnemyAvatars
+          && (COMBAT_NODE_TYPES.has(nodeType) || AIR_NODE_TYPES.has(nodeType))
+          && enemyData?.status === 'ready'
+          ? enemyData.rows?.[0]?.mainFleet?.[0] : null
+        const airState = evaluation.probability.reach[node] > 0 && AIR_STATUS_NODE_TYPES.has(nodeType)
+          ? airStateRange(airPower, enemyData) : null
+        const displayAirState = this.state.showEstimatedAir ? airState : null
         const centerX = position.x + visual.offsetX
         const centerY = position.y + visual.offsetY
+        const overlaySize = Math.min(20, Math.max(12, Math.round(Math.min(visual.rx, visual.ry))))
         const manualSource = manualSourceForTarget(evaluation, node)
         const manualTarget = manualSource && manualSource !== node
         const classNames = [
@@ -747,7 +1008,7 @@ class Compass extends React.Component {
         const activateNode = (event) => {
           if (event.key !== 'Enter' && event.key !== ' ') return
           event.preventDefault()
-          if (manualTarget) this.setManualOverride(manualSource, node)
+          if (manualTarget) this.setManualOverride(manualSource, node, null, node)
           else this.selectNode(node)
         }
         return h('g', {
@@ -755,11 +1016,11 @@ class Compass extends React.Component {
           className: classNames,
           role: 'button',
           tabIndex: 0,
-          onClick: () => manualTarget ? this.setManualOverride(manualSource, node) : this.selectNode(node),
+          onClick: () => manualTarget ? this.setManualOverride(manualSource, node, null, node) : this.selectNode(node),
           onKeyDown: activateNode,
         },
         h('title', null, nodeInfo?.label ? `${node} · ${nodeInfo.label}` : node),
-        h('ellipse', {
+        iconOnly ? null : h('ellipse', {
           className: 'compass-node-shape',
           cx: centerX,
           cy: centerY,
@@ -770,7 +1031,7 @@ class Compass extends React.Component {
           strokeWidth: visual.stroke,
           opacity: visual.opacity,
         }),
-        visual.simpleBorder
+        !iconOnly && visual.simpleBorder
           ? h('ellipse', {
             className: 'compass-node-simple-border',
             cx: centerX,
@@ -782,9 +1043,10 @@ class Compass extends React.Component {
             opacity: visual.opacity,
           })
           : null,
+        this.renderNodeIcon(marker, centerX, centerY, nodeType),
         h('text', {
           x: centerX,
-          y: centerY + visual.textOffsetY,
+          y: centerY + (iconOnly ? 0 : visual.textOffsetY),
           dominantBaseline: 'middle',
           className: 'compass-node-label',
           style: {
@@ -794,11 +1056,32 @@ class Compass extends React.Component {
             fontSize: visual.fontSize,
           },
         }, node),
-        airState ? h('text', { x: centerX, y: centerY + visual.ry + 21, className: 'compass-node-air-state', textAnchor: 'middle' },
+        commonFlagship ? this.renderNodeEnemyAvatar(
+          commonFlagship,
+          rootState,
+          centerX + visual.rx * 0.7 - overlaySize / 2,
+          centerY + visual.ry * 0.7 - overlaySize / 2,
+          overlaySize,
+        ) : null,
+        displayAirState ? h('text', {
+          x: centerX + visual.rx * 0.85,
+          y: centerY - visual.ry * 0.85,
+          className: 'compass-node-air-state',
+          textAnchor: 'middle',
+          dominantBaseline: 'middle',
+        },
           h('title', null, `当前舰队制空 ${airPower.min}～${airPower.max}；未计沿途损耗、陆航和支援${airState.uncertain ? '；敌编成数据不完整或不确定' : ''}`),
-          ...airState.states.flatMap((state, index) => [
+          ...displayAirState.states.flatMap((state, index) => [
             index ? h('tspan', { key: 'separator', fill: '#ffffff' }, '/') : null,
-            h('tspan', { key: state.label, fill: state.color }, state.label),
+            h('tspan', {
+              key: `${state.label}-${index}`,
+              fill: '#ffffff',
+              style: {
+                fill: '#ffffff',
+                textShadow: `1px 1px 0 ${state.shadow}`,
+                filter: `drop-shadow(1px 1px 0 ${state.shadow})`,
+              },
+            }, state.label),
           ]), airState.uncertain ? '？' : null) : null,
         )
       }),
@@ -852,7 +1135,7 @@ class Compass extends React.Component {
       route ? h('label', { className: 'compass-export-route' }, '路线',
         h('select', { value: route.key, 'aria-label': '导出路线', onChange: (event) => this.setState({ exportRoute: event.target.value, exportError: null }) },
           ...choices.routes.map((candidate) => h('option', { key: candidate.key, value: candidate.key },
-            `${candidate.nodes.join('→')}${candidate.boss ? ' · Boss' : ''} · ${candidate.probability == null ? '含能动选路' : formatPercent(candidate.probability, candidate.estimated)}`))),
+            `${candidate.nodes.join('→')}${candidate.boss ? ' · Boss' : ''} · ${candidate.probability == null ? '含能动选路' : formatProbability(candidate.probability, candidate.estimated, this.state.probabilityFormat)}`))),
       ) : null,
       choices?.blocked.length ? h('div', { className: 'compass-warnings' }, `未知分歧：${choices.blocked.join('、')}`) : null,
       battles?.length ? h('div', { className: 'compass-export-battles' },
@@ -960,22 +1243,33 @@ class Compass extends React.Component {
       h('h4', null, `${node} 点`),
       rows.length
         ? h('div', { className: 'compass-conditions' }, ...rows.map(({ rule, result, outcomes: ruleOutcomes }) => {
-          const active = decision?.rule?.id === rule.id
-          const displayedOutcomes = active ? decision.outcomes : ruleOutcomes
-          const outcomes = displayedOutcomes.length ? displayedOutcomes.map(outcomeText).join(' / ') : '—'
+          const sourceRuleId = rule.sourceRuleId || rule.id
+          const sourceWasMatched = decision?.matchedRuleIds?.includes(sourceRuleId) || decision?.rule?.id === sourceRuleId
+          const splitSourceRule = SEPARATE_SOURCE_LINE_RULE_IDS.has(sourceRuleId)
+          const active = splitSourceRule ? sourceWasMatched && result.status === 'true' : sourceWasMatched
+          const displayedOutcomes = active && (decision?.matchedRuleIds?.length || 0) <= 1
+            ? decision.outcomes
+            : ruleOutcomes
+          const outcomes = displayedOutcomes.length
+            ? displayedOutcomes.map((outcome) => outcomeText(outcome, this.state.probabilityFormat)).join(' / ')
+            : '—'
+          const rawLabel = predicateLabel(rule.predicate)
+          const label = visibleRuleLabel(rule)
+          const notes = rulePopoverNotes(rule, rawLabel, label)
           return h('div', {
           key: rule.id,
           className: `compass-condition is-${result.status}${active ? ' is-active' : ''}`,
           tabIndex: 0,
-          'aria-label': `${conditionStatus(result.status)}：${predicateLabel(rule.predicate)}`,
+          'aria-label': `${conditionStatus(result.status)}：${label}`,
         },
           h('span', { className: 'compass-condition-icon', 'aria-hidden': 'true' }, conditionIcon(result.status, active)),
-          h('span', { className: 'compass-condition-label' }, predicateLabel(rule.predicate)),
+          h('span', { className: 'compass-condition-label' }, label),
           h('span', { className: 'compass-condition-outcomes' }, outcomes),
           h('div', { className: 'compass-condition-popover', role: 'tooltip' },
             h('div', null, `${conditionStatus(result.status)}${active ? ' · 当前出口规则' : ''}`),
+            h('div', null, `条件：${rawLabel}`),
             h('div', null, `出口：${outcomes}`),
-            rule.confidence === 'approximate' ? h('div', null, '概率为资料中的近似值') : null,
+            ...notes.map((note, index) => h('div', { key: `${rule.id}-note-${index}`, className: 'compass-condition-note' }, note)),
           ),
         )
         }))
@@ -1048,6 +1342,35 @@ class Compass extends React.Component {
             }, option.label)),
           )
           : null,
+        h('div', { className: 'compass-option-group', role: 'group', 'aria-label': '概率标签格式' },
+          h('span', { className: 'compass-option-label' }, '概率'),
+          ...[
+            ['percent', '%'],
+            ['decimal', '小数'],
+          ].map(([value, label]) => h('button', {
+            key: value,
+            type: 'button',
+            className: this.state.probabilityFormat === value ? 'is-active' : '',
+            'aria-pressed': this.state.probabilityFormat === value,
+            onClick: () => this.setState({ probabilityFormat: value }),
+          }, label)),
+        ),
+        h('label', { className: 'compass-option-toggle' },
+          h('input', {
+            type: 'checkbox',
+            checked: this.state.showEstimatedAir,
+            onChange: (event) => this.setState({ showEstimatedAir: event.target.checked }),
+          }),
+          h('span', null, '推测制空'),
+        ),
+        h('label', { className: 'compass-option-toggle' },
+          h('input', {
+            type: 'checkbox',
+            checked: this.state.showEnemyAvatars,
+            onChange: (event) => this.setState({ showEnemyAvatars: event.target.checked }),
+          }),
+          h('span', null, '敌舰头像'),
+        ),
         h('span', {
           className: 'compass-toolbar-fleet',
           title: `舰队 ${this.state.deckId}：${fleetSummary(context)}；${mapLosText}`,
@@ -1086,6 +1409,8 @@ exports.pluginWillUnload = stopPlugin
 exports.__test = {
   calculatePoiLos33,
   cellFromDetail,
+  edgeVisualStyle,
+  formatProbability,
   handleGameResponse,
   kcnavNodeTypesFromMap,
   localNodeTypesForMap,
@@ -1100,4 +1425,7 @@ exports.__test = {
   phaseOptionsForMap,
   pluginState,
   routeEdges,
+  ruleRows,
+  visibleRuleLabel,
+  separateSourceLineRuleIds: SEPARATE_SOURCE_LINE_RULE_IDS,
 }