refactor(ai): remove onInit callback from useAiAction and move data loading to component lifecycle

This commit is contained in:
Ray.Hao
2025-11-18 09:24:57 +08:00
parent 0ce931ee39
commit a0b714999e
2 changed files with 28 additions and 25 deletions

View File

@@ -1,6 +1,7 @@
import { useRoute } from "vue-router";
import AiCommandApi from "@/api/ai";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, onBeforeUnmount, nextTick } from "vue";
import AiCommandApi from "@/api/ai";
/**
* AI 操作处理器(简化版)
@@ -32,8 +33,6 @@ export interface UseAiActionOptions {
onRefresh?: () => Promise<void> | void;
/** 自动搜索处理函数 */
onAutoSearch?: (keywords: string) => void;
/** 初始化回调(在没有 AI 参数时调用,适合初始加载数据) */
onInit?: () => Promise<void> | void;
/** 当前路由路径(用于执行命令时传递) */
currentRoute?: string;
}
@@ -48,13 +47,7 @@ export interface UseAiActionOptions {
*/
export function useAiAction(options: UseAiActionOptions = {}) {
const route = useRoute();
const {
actionHandlers = {},
onRefresh,
onAutoSearch,
onInit,
currentRoute = route.path,
} = options;
const { actionHandlers = {}, onRefresh, onAutoSearch, currentRoute = route.path } = options;
// 用于跟踪是否已卸载,防止在卸载后执行回调
let isUnmounted = false;
@@ -219,34 +212,33 @@ export function useAiAction(options: UseAiActionOptions = {}) {
/**
* 初始化:处理 URL 参数中的 AI 操作
*
* 注意:此方法只处理 AI 相关参数,不负责页面数据的初始加载
* 页面数据加载应由组件的 onMounted 钩子自行处理
*/
async function init() {
if (isUnmounted) return;
// 检查是否有 AI 助手传递的搜索参数
// 检查是否有 AI 助手传递的参数
const keywords = route.query.keywords as string;
const autoSearch = route.query.autoSearch as string;
const aiActionParam = route.query.aiAction as string;
// 在 nextTick 中执行,确保 DOM 已更新
// 如果没有任何 AI 参数,直接返回
if (!keywords && !autoSearch && !aiActionParam) {
return;
}
// 在 nextTick 中执行,确保页面数据已加载
nextTick(async () => {
if (isUnmounted) return;
// 1. 优先执行 onInit 初始化数据(如果配置了)
if (onInit) {
try {
await onInit();
} catch (error) {
console.error("初始化数据失败:", error);
}
}
// 2. 处理自动搜索
// 1. 处理自动搜索
if (autoSearch === "true" && keywords) {
handleAutoSearch(keywords);
}
// 3. 处理 AI 操作(在数据加载后执行)
// 2. 处理 AI 操作
if (aiActionParam) {
try {
const aiAction = JSON.parse(decodeURIComponent(aiActionParam));

View File

@@ -246,7 +246,7 @@
<script setup lang="ts">
// ==================== 1. Vue 核心 API ====================
import { computed, reactive, ref } from "vue";
import { computed, onMounted, reactive, ref } from "vue";
import { useDebounceFn } from "@vueuse/core";
// ==================== 2. Element Plus ====================
@@ -650,6 +650,17 @@ useAiAction({
ElMessage.success(`AI 助手已为您自动搜索:${keywords}`);
}, 300);
},
onInit: handleQuery,
});
// ==================== 生命周期 ====================
/**
* 组件挂载时初始化数据
*
* 注意:这里会先加载列表数据,如果 URL 中有 AI 参数(如搜索关键字),
* useAiAction 会在 nextTick 中再次执行搜索,这是预期行为
*/
onMounted(() => {
handleQuery();
});
</script>