From 4ce32c8b941e93db347bed023f5e044e21f6d5fc Mon Sep 17 00:00:00 2001
From: bridge <wangxin4qiao@163.com>
Date: Mon, 2 Feb 2026 22:06:28 +0800
Subject: [PATCH] feat(StatusBar): implement phenomenon selection and update
 StatusWidget for direct trigger

- Added functionality to open a phenomenon selector and handle selection changes in StatusBar.
- Updated StatusWidget to support disabling the popover for direct click actions, enhancing user interaction.
- Cleaned up unused code in StatusBar for improved readability.
---
 web/src/components/layout/StatusBar.vue    | 42 +++++++++-------------
 web/src/components/layout/StatusWidget.vue | 19 ++++++++--
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/web/src/components/layout/StatusBar.vue b/web/src/components/layout/StatusBar.vue
index cecd422..7eeaefe 100644
--- a/web/src/components/layout/StatusBar.vue
+++ b/web/src/components/layout/StatusBar.vue
@@ -2,7 +2,7 @@
 import { useWorldStore } from '../../stores/world'
 import { useSocketStore } from '../../stores/socket'
 import { ref, computed } from 'vue'
-import { NPopover, NModal, NList, NListItem, NTag, NEmpty, useMessage } from 'naive-ui'
+import { NModal, NList, NListItem, NTag, NEmpty, useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import StatusWidget from './StatusWidget.vue'
 
@@ -37,8 +37,20 @@ function getRarityColor(rarity: string) {
     default: return '#ccc';
   }
 }
-// ...
-// ...
+async function openPhenomenonSelector() {
+  await store.getPhenomenaList()
+  showSelector.value = true
+}
+
+async function handleSelect(id: number, name: string) {
+  try {
+    await store.changePhenomenon(id)
+    message.success(t('game.status_bar.change_success', { name }))
+    showSelector.value = false
+  } catch (e) {
+    message.error(t('common.error'))
+  }
+}
 </script>
 
 <template>
@@ -56,29 +68,9 @@ function getRarityColor(rarity: string) {
         :label="`[${store.currentPhenomenon.name}]`"
         :color="phenomenonColor"
         mode="single"
+        :disable-popover="true"
         @trigger-click="openPhenomenonSelector"
-      >
-        <template #single>
-          <div class="phenomenon-card">
-            <div class="p-header" :style="{ color: phenomenonColor }">
-              <span class="p-title">{{ store.currentPhenomenon.name }}</span>
-              <span class="p-rarity">{{ store.currentPhenomenon.rarity }}</span>
-            </div>
-            <div class="p-desc">{{ store.currentPhenomenon.desc }}</div>
-            
-            <!-- 效果描述 -->
-            <div class="effect-block" v-if="store.currentPhenomenon.effect_desc">
-              <div class="effect-label">{{ t('game.status_bar.effect') }}</div>
-              <div class="effect-content">{{ store.currentPhenomenon.effect_desc }}</div>
-            </div>
-
-            <div class="p-duration" v-if="store.currentPhenomenon.duration_years">
-               {{ t('game.status_bar.duration', { years: store.currentPhenomenon.duration_years }) }}
-            </div>
-            <div class="click-tip">{{ t('game.status_bar.click_to_change') }}</div>
-          </div>
-        </template>
-      </StatusWidget>
+      />
 
       <!-- 秘境 -->
       <StatusWidget
diff --git a/web/src/components/layout/StatusWidget.vue b/web/src/components/layout/StatusWidget.vue
index 0918073..f4df4d6 100644
--- a/web/src/components/layout/StatusWidget.vue
+++ b/web/src/components/layout/StatusWidget.vue
@@ -17,13 +17,17 @@ interface Props {
   
   // 模式: 'single' (天地灵机) 或 'list' (秘境)
   mode?: 'single' | 'list'
+  
+  // 是否禁用 Popover (直接点击触发)
+  disablePopover?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   color: '#ccc',
   items: () => [],
   mode: 'list',
-  emptyText: '暂无数据'
+  emptyText: '暂无数据',
+  disablePopover: false
 })
 
 // 发射点击事件（用于天地灵机的"更易天象"）
@@ -33,7 +37,18 @@ const emit = defineEmits(['trigger-click'])
 <template>
   <div class="status-widget">
     <span class="divider">|</span>
-    <n-popover trigger="click" placement="bottom" style="max-width: 600px;">
+    <!-- 分支A: 禁用 Popover，直接显示 Trigger -->
+    <span 
+      v-if="disablePopover"
+      class="widget-trigger" 
+      :style="{ color: props.color }"
+      @click="emit('trigger-click')"
+    >
+      {{ props.label }}
+    </span>
+
+    <!-- 分支B: 启用 Popover -->
+    <n-popover v-else trigger="click" placement="bottom" style="max-width: 600px;">
       <template #trigger>
         <span 
           class="widget-trigger"