fix: 保留工作流列表返回状态

- 记录页码、分类和搜索条件并同步到路由

- 从工作流设计页返回时恢复原列表位置

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowDesign.vue

@@ -51,6 +51,10 @@ import {
   isWorkflowDataEmpty,
   normalizeWorkflowStartNodes,
 } from '../../../../../packages/tinyflow-ui/src/utils/workflowNodeFields';
+import {
+  buildWorkflowListRouteQuery,
+  parseWorkflowDesignReturnState,
+} from './workflow-list-route-state';
 
 import '@tinyflow-ai/vue/dist/index.css';
 
@@ -160,7 +164,11 @@ async function initializeWorkflow() {
 }
 
 function backToWorkflowList() {
-  router.replace({ path: '/ai/workflow' });
+  const listState = parseWorkflowDesignReturnState(route.query);
+  router.replace({
+    path: '/ai/workflow',
+    query: buildWorkflowListRouteQuery(listState),
+  });
 }
 const WORKFLOW_DRAFT_WRITE_DELAY = 320;
 let draftWriteTimer: ReturnType<typeof setTimeout> | undefined;

easyflow-ui-admin/app/src/views/ai/workflow/WorkflowList.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { FormInstance } from 'element-plus';
 
+import type { WorkflowListRouteState } from './workflow-list-route-state';
+
 import type {
   ActionButton,
   CardPrimaryAction,
@@ -15,6 +17,7 @@ import {
   onMounted,
   ref,
 } from 'vue';
+import { useRoute } from 'vue-router';
 
 import { useAccess } from '@easyflow/access';
 import { EasyFlowFormModal } from '@easyflow/common-ui';
@@ -75,6 +78,11 @@ import {
   resolveAiResourceDisplayStatus,
 } from '#/views/ai/shared/publish-status';
 
+import {
+  buildWorkflowDesignReturnQuery,
+  mergeWorkflowListRouteQuery,
+  parseWorkflowListRouteState,
+} from './workflow-list-route-state';
 import WorkflowModal from './WorkflowModal.vue';
 
 const ElXMarkdown = defineAsyncComponent(
@@ -82,6 +90,8 @@ const ElXMarkdown = defineAsyncComponent(
 );
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const route = useRoute();
+const initialListState = parseWorkflowListRouteState(route.query);
 
 interface FieldDefinition {
   // 字段名称
@@ -276,8 +286,15 @@ onMounted(() => {
 });
 const pageDataRef = ref();
 const saveDialog = ref();
-const selectedCategoryId = ref<number | string>('');
-const searchKeyword = ref('');
+const selectedCategoryId = ref<number | string>(initialListState.categoryId);
+const searchKeyword = ref(initialListState.keyword);
+const currentPageNumber = ref(initialListState.pageNumber);
+const currentPageSize = ref(initialListState.pageSize);
+const suppressInitialCategoryChange = ref(Boolean(initialListState.categoryId));
+const initialQueryParams = {
+  categoryId: initialListState.categoryId || undefined,
+  title: initialListState.keyword || undefined,
+};
 const dictStore = useDictStore();
 const headerButtons = [
   {
@@ -353,6 +370,32 @@ function applyFilters() {
     title: searchKeyword.value || undefined,
   });
 }
+function currentListState(): WorkflowListRouteState {
+  const pageState = pageDataRef.value?.getPageState?.();
+  return {
+    categoryId: String(selectedCategoryId.value || ''),
+    keyword: searchKeyword.value,
+    pageNumber: pageState?.pageNumber ?? currentPageNumber.value,
+    pageSize: pageState?.pageSize ?? currentPageSize.value,
+  };
+}
+function syncListRouteState() {
+  const target = {
+    path: '/ai/workflow',
+    query: mergeWorkflowListRouteQuery(route.query, currentListState()),
+  };
+  if (router.resolve(target).fullPath !== route.fullPath) {
+    void router.replace(target);
+  }
+}
+function handlePageStateChange(state: {
+  pageNumber: number;
+  pageSize: number;
+}) {
+  currentPageNumber.value = state.pageNumber;
+  currentPageSize.value = state.pageSize;
+  syncListRouteState();
+}
 function handleSearch(keyword: string) {
   searchKeyword.value = keyword;
   applyFilters();
@@ -859,6 +902,7 @@ function toDesignPage(row: any) {
       id: row.id,
       pageKey: '/ai/workflow',
       navTitle: resolveNavTitle(row),
+      ...buildWorkflowDesignReturnQuery(currentListState()),
     },
   });
 }
@@ -979,7 +1023,17 @@ const formRules = computed(() => {
 });
 
 function changeCategory(category: any) {
-  selectedCategoryId.value = category?.id ?? '';
+  const categoryId = category?.id ?? '';
+  if (
+    suppressInitialCategoryChange.value &&
+    String(categoryId) === initialListState.categoryId
+  ) {
+    suppressInitialCategoryChange.value = false;
+    selectedCategoryId.value = categoryId;
+    return;
+  }
+  suppressInitialCategoryChange.value = false;
+  selectedCategoryId.value = categoryId;
   applyFilters();
 }
 function showControlDialog(item: any) {
@@ -1045,6 +1099,17 @@ const getSideList = async () => {
       },
       ...res.data,
     ];
+    if (
+      selectedCategoryId.value &&
+      !res.data.some(
+        (category: any) =>
+          String(category.id) === String(selectedCategoryId.value),
+      )
+    ) {
+      suppressInitialCategoryChange.value = false;
+      selectedCategoryId.value = '';
+      applyFilters();
+    }
   }
 };
 function handleHeaderButtonClick(data: any) {
@@ -1085,6 +1150,7 @@ function handleHeaderButtonClick(data: any) {
     </ElDialog>
     <HeaderSearch
       :buttons="headerButtons"
+      :initial-value="searchKeyword"
       @search="handleSearch"
       @button-click="handleHeaderButtonClick"
     />
@@ -1103,7 +1169,10 @@ function handleHeaderButtonClick(data: any) {
           ref="pageDataRef"
           page-url="/api/v1/workflow/page"
           :page-sizes="[12, 18, 24]"
-          :page-size="12"
+          :page-size="initialListState.pageSize"
+          :initial-page-number="initialListState.pageNumber"
+          :initial-query-params="initialQueryParams"
+          @state-change="handlePageStateChange"
         >
           <template #default="{ pageList }">
             <CardList

easyflow-ui-admin/app/src/views/ai/workflow/workflow-list-route-state.test.ts

@@ -0,0 +1,85 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  buildWorkflowDesignReturnQuery,
+  buildWorkflowListRouteQuery,
+  mergeWorkflowListRouteQuery,
+  parseWorkflowDesignReturnState,
+  parseWorkflowListRouteState,
+} from './workflow-list-route-state';
+
+describe('workflow list route state', () => {
+  it('restores page, page size, category and keyword from list query', () => {
+    expect(
+      parseWorkflowListRouteState({
+        categoryId: '7',
+        keyword: '月报',
+        pageNumber: '3',
+        pageSize: '18',
+      }),
+    ).toEqual({
+      categoryId: '7',
+      keyword: '月报',
+      pageNumber: 3,
+      pageSize: 18,
+    });
+  });
+
+  it('falls back safely for invalid pagination query', () => {
+    expect(
+      parseWorkflowListRouteState({
+        pageNumber: '-2',
+        pageSize: '999',
+      }),
+    ).toEqual({
+      categoryId: '',
+      keyword: '',
+      pageNumber: 1,
+      pageSize: 12,
+    });
+  });
+
+  it('round trips list state through workflow design return query', () => {
+    const state = {
+      categoryId: '7',
+      keyword: '月报',
+      pageNumber: 3,
+      pageSize: 18,
+    };
+
+    const designQuery = buildWorkflowDesignReturnQuery(state);
+
+    expect(designQuery).toEqual({
+      returnCategoryId: '7',
+      returnKeyword: '月报',
+      returnPageNumber: '3',
+      returnPageSize: '18',
+    });
+    expect(parseWorkflowDesignReturnState(designQuery)).toEqual(state);
+    expect(buildWorkflowListRouteQuery(state)).toEqual({
+      categoryId: '7',
+      keyword: '月报',
+      pageNumber: '3',
+      pageSize: '18',
+    });
+  });
+
+  it('preserves unrelated query while removing cleared list state', () => {
+    expect(
+      mergeWorkflowListRouteQuery(
+        {
+          categoryId: '7',
+          devLogin: 'admin',
+          keyword: '旧关键字',
+          pageNumber: '5',
+        },
+        {
+          categoryId: '',
+          keyword: '',
+          pageNumber: 1,
+          pageSize: 12,
+        },
+      ),
+    ).toEqual({ devLogin: 'admin' });
+  });
+});

easyflow-ui-admin/app/src/views/ai/workflow/workflow-list-route-state.ts

@@ -0,0 +1,131 @@
+import type { LocationQuery } from 'vue-router';
+
+const DEFAULT_PAGE_NUMBER = 1;
+const DEFAULT_PAGE_SIZE = 12;
+const WORKFLOW_PAGE_SIZES = new Set([12, 18, 24]);
+
+const LIST_QUERY_KEYS = {
+  categoryId: 'categoryId',
+  keyword: 'keyword',
+  pageNumber: 'pageNumber',
+  pageSize: 'pageSize',
+} as const;
+
+const RETURN_QUERY_KEYS = {
+  categoryId: 'returnCategoryId',
+  keyword: 'returnKeyword',
+  pageNumber: 'returnPageNumber',
+  pageSize: 'returnPageSize',
+} as const;
+
+interface WorkflowListQueryKeys {
+  readonly categoryId: string;
+  readonly keyword: string;
+  readonly pageNumber: string;
+  readonly pageSize: string;
+}
+
+interface WorkflowListRouteState {
+  categoryId: string;
+  keyword: string;
+  pageNumber: number;
+  pageSize: number;
+}
+
+function readQueryValue(query: LocationQuery, key: string): string {
+  const value = query[key];
+  const normalized = Array.isArray(value) ? value[0] : value;
+  return normalized === null || normalized === undefined
+    ? ''
+    : String(normalized);
+}
+
+function parsePositiveInteger(value: string, fallback: number): number {
+  if (!/^\d+$/.test(value)) {
+    return fallback;
+  }
+  const parsed = Number(value);
+  return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : fallback;
+}
+
+function parseState(
+  query: LocationQuery,
+  keys: WorkflowListQueryKeys,
+): WorkflowListRouteState {
+  const pageSize = parsePositiveInteger(
+    readQueryValue(query, keys.pageSize),
+    DEFAULT_PAGE_SIZE,
+  );
+  return {
+    categoryId: readQueryValue(query, keys.categoryId),
+    keyword: readQueryValue(query, keys.keyword),
+    pageNumber: parsePositiveInteger(
+      readQueryValue(query, keys.pageNumber),
+      DEFAULT_PAGE_NUMBER,
+    ),
+    pageSize: WORKFLOW_PAGE_SIZES.has(pageSize) ? pageSize : DEFAULT_PAGE_SIZE,
+  };
+}
+
+function buildStateQuery(
+  state: WorkflowListRouteState,
+  keys: WorkflowListQueryKeys,
+): LocationQuery {
+  return {
+    ...(state.pageNumber === DEFAULT_PAGE_NUMBER
+      ? {}
+      : { [keys.pageNumber]: String(state.pageNumber) }),
+    ...(state.pageSize === DEFAULT_PAGE_SIZE
+      ? {}
+      : { [keys.pageSize]: String(state.pageSize) }),
+    ...(state.categoryId ? { [keys.categoryId]: state.categoryId } : {}),
+    ...(state.keyword ? { [keys.keyword]: state.keyword } : {}),
+  };
+}
+
+function parseWorkflowListRouteState(
+  query: LocationQuery,
+): WorkflowListRouteState {
+  return parseState(query, LIST_QUERY_KEYS);
+}
+
+function parseWorkflowDesignReturnState(
+  query: LocationQuery,
+): WorkflowListRouteState {
+  return parseState(query, RETURN_QUERY_KEYS);
+}
+
+function buildWorkflowListRouteQuery(
+  state: WorkflowListRouteState,
+): LocationQuery {
+  return buildStateQuery(state, LIST_QUERY_KEYS);
+}
+
+function buildWorkflowDesignReturnQuery(
+  state: WorkflowListRouteState,
+): LocationQuery {
+  return buildStateQuery(state, RETURN_QUERY_KEYS);
+}
+
+function mergeWorkflowListRouteQuery(
+  query: LocationQuery,
+  state: WorkflowListRouteState,
+): LocationQuery {
+  const listQueryKeys = new Set<string>(Object.values(LIST_QUERY_KEYS));
+  const nextQuery = Object.fromEntries(
+    Object.entries(query).filter(([key]) => !listQueryKeys.has(key)),
+  ) as LocationQuery;
+  return {
+    ...nextQuery,
+    ...buildWorkflowListRouteQuery(state),
+  };
+}
+
+export {
+  buildWorkflowDesignReturnQuery,
+  buildWorkflowListRouteQuery,
+  mergeWorkflowListRouteQuery,
+  parseWorkflowDesignReturnState,
+  parseWorkflowListRouteState,
+};
+export type { WorkflowListRouteState };