存档代码

src/component/rain-earthquake/function-child/around-analysis/SearchComponent.vue

@@ -1,14 +1,15 @@
+<!-- 搜索组件 -->
 <template>
   <div class="search-component-box">
     <el-autocomplete
-        v-model="state"
-        :fetch-suggestions="querySearch"
+        v-model="aroundAnalysisState.searchState.value"
+        :fetch-suggestions="aroundAnalysisState.querySearch"
         popper-class="my-autocomplete"
         placeholder="搜索地点"
-        @select="handleSelect"
-        @focus="handleFocus"
+        @select="aroundAnalysisState.handleSelect"
+        @focus="aroundAnalysisState.handleFocus"
         clearable
-        :disabled="!canSearch" 
+        :disabled="!aroundAnalysisState.canSearch.value"
         :teleported="false"
     >
       <template #suffix>
@@ -25,36 +26,12 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onMounted } from 'vue';
+import { inject } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
-import type { PointResource } from '@/types/common/useAroundAnalysisType';
-import type { AnalysisButtonState } from '@/types/common/useAroundAnalysisType';
+import type { AroundAnalysisState } from '@/types/common/useAroundAnalysisType';
 
-// 从父组件注入搜索状态和按钮状态
-const searchState = inject<ReturnType<typeof import('@/hooks/rain-earthquake/useAroundSearch').useAroundSearch>>('searchState');
-const buttonState = inject<AnalysisButtonState>('analysisButtonState');
-
-const {
-  state,
-  canSearch,
-  querySearch,
-  handleSelect: baseHandleSelect,
-  handleFocus,
-} = searchState!;
-
-// 包装 handleSelect，在搜索选择后触发区域分析
-const handleSelect = async (item: PointResource) => {
-  await baseHandleSelect(item);
-  // 飞行完成后，触发区域分析
-  buttonState?.startAreaAnalysisFromSearch(item);
-};
-
-onMounted(() => {
-  // 加载数据
-  if (searchState) {
-    handleFocus();
-  }
-});
+// 从父组件注入共享的 Hook 实例
+const aroundAnalysisState = inject<AroundAnalysisState>('aroundAnalysisState')!;
 </script>
 
 <style scoped>