perf: 优化列表页面请求两次的问题

2026-06-10 10:37:34 +08:00 · 2026-06-05 00:23:08 +08:00
parent 99fd3083f2
commit 5546af518e
43 changed files with 62 additions and 51 deletions
@@ -25,7 +25,7 @@ version: 1.0.0
 ## 实现流程

 1. 先在 `packages/ui/certd-client/src/views` 下找 1-2 个相近 Fast Crud 页面，沿用它们的导入、布局、命名和权限写法。
-2. 在 `index.vue` 中使用 `fs-crud ref="crudRef" v-bind="crudBinding"`，并在 `onMounted` / `onActivated` 时调用 `crudExpose.doRefresh()`。
+2. 在 `index.vue` 中使用 `fs-crud ref="crudRef" v-bind="crudBinding"`，并在 `onMounted` 或 `onActivated` 时调用 `crudExpose.doRefresh()`；两个生命周期同时存在时只保留一个刷新入口，避免首次进入页面请求两次。
 3. 在 `crud.tsx` 中配置 `request.pageRequest`、`columns`、`search`、`form`、`rowHandle`、`actionbar`、`toolbar` 等，接口分页参数和返回值按现有页面适配。
 4. 操作按钮优先放在 Fast Crud 的 `rowHandle.buttons` 或 `actionbar.buttons` 中；审核、保存设置、批量操作等复杂交互可通过 `context` 调用 `index.vue` 中的方法。
 5. 金额、状态、时间、枚举等字段优先复用项目已有组件、字典和格式化工具；避免在模板里重复堆格式化逻辑。
@@ -82,6 +82,7 @@ export const certdResources = [
          isMenu: true,
          icon: "ion:duplicate-outline",
          auth: true,
+          keepAlive: true,
        },
      },
      {
@@ -282,6 +283,7 @@ export const certdResources = [
            meta: {
              icon: "ion:barcode-outline",
              auth: true,
+              keepAlive: true,
              isMenu: true,
            },
          },
@@ -350,6 +352,7 @@ export const certdResources = [
              },
              icon: "ion:gift-outline",
              auth: true,
+              keepAlive: true,
            },
          },
          {
@@ -112,7 +112,7 @@ export const sysResources = [
      },
      {
        title: "certd.sysResources.headerMenus",
-        name: "HeaderMenus",
+        name: "SettingsHeaderMenus",
        path: "/sys/settings/header-menus",
        component: "/sys/settings/header-menus/index.vue",
        meta: {
@@ -128,7 +128,7 @@ export const sysResources = [
      },
      {
        title: "certd.sysResources.sysAccess",
-        name: "SysAccess",
+        name: "SysAccessManager",
        path: "/sys/access",
        component: "/sys/access/index.vue",
        meta: {
@@ -26,7 +26,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });
    onActivated(() => {
      crudExpose.doRefresh();
@@ -29,7 +29,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });
    onActivated(() => {
      crudExpose.doRefresh();
@@ -27,7 +27,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });
    onActivated(() => {
      crudExpose.doRefresh();
@@ -27,7 +27,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({
 });

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });

 onActivated(() => {
@@ -25,7 +25,7 @@ const context: any = {
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -62,7 +62,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -62,7 +62,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -55,7 +55,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -25,7 +25,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context:

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -40,7 +40,7 @@ const handleBatchDelete = context.handleBatchDelete;

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -45,7 +45,7 @@ const handleBatchDelete = context.handleBatchDelete;

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -24,7 +24,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -26,7 +26,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });
    onActivated(() => {
      crudExpose.doRefresh();
@@ -23,7 +23,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context:

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -27,7 +27,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });
    onActivated(() => {
      crudExpose.doRefresh();
@@ -129,7 +129,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });

 onActivated(async () => {
@@ -37,7 +37,7 @@ import { useCrudPermission } from "/@/plugin/permission";
 const { t } = useI18n();

 defineOptions({
-  name: "CnameRecord",
+  name: "SubDomain",
 });
 const context: any = {
  permission: {
@@ -68,7 +68,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -30,7 +30,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({
 const { t } = useI18n();
 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -117,7 +117,7 @@ onMounted(async () => {
    return;
  }
  await loadProjectDetail();
-  await crudExpose.doRefresh();
+  // await crudExpose.doRefresh();

  if (migrate === "true") {
    openTransferDialog();
@@ -53,7 +53,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -40,10 +40,10 @@ async function loadSuiteDetail() {

 // 页面打开后获取列表数据
 onMounted(async () => {
+  // await crudExpose.doRefresh();
+});
+onActivated(async () => {
  await loadSuiteDetail();
  await crudExpose.doRefresh();
 });
-onActivated(() => {
-  crudExpose.doRefresh();
-});
 </script>
@@ -19,7 +19,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -24,7 +24,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });

    onActivated(async () => {
@@ -22,7 +22,7 @@ import { useFs, useUi } from "@fast-crud/fast-crud";
 import { useI18n } from "/src/locales";

 export default defineComponent({
-  name: "AuthorityManager",
+  name: "PermissionManager",
  components: { FsPermissionTree },
  setup() {
    // 此处传入permission进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
@@ -32,7 +32,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(async () => {
-      await crudExpose.doRefresh();
+      // await crudExpose.doRefresh();
    });
    onActivated(async () => {
      await crudExpose.doRefresh();
@@ -107,7 +107,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });

    onActivated(async () => {
@@ -21,7 +21,7 @@ export default defineComponent({

    // 页面打开后获取列表数据
    onMounted(() => {
-      crudExpose.doRefresh();
+      // crudExpose.doRefresh();
    });
    onActivated(async () => {
      await crudExpose.doRefresh();
@@ -32,7 +32,7 @@ import { useI18n } from "/src/locales";
 const { t } = useI18n();

 defineOptions({
-  name: "CnameProvider",
+  name: "CnameSetting",
 });
 const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });

@@ -56,7 +56,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -56,7 +56,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -62,7 +62,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -53,7 +53,7 @@ const handleBatchDelete = () => {

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -27,7 +27,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context
 const handleBatchDelete = context.handleBatchDelete;

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -27,7 +27,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context
 const handleBatchDelete = context.handleBatchDelete;

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -21,7 +21,7 @@ const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions
 const settingStore = useSettingStore();
 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -123,4 +123,12 @@ const loginLogoCropperOptions = ref({
  border-radius: 0 !important;
  margin-top: 0 !important;
 }
+
+.page-sys-site {
+  .sys-settings-form {
+    width: 900px;
+    max-width: 100%;
+    padding: 20px;
+  }
+}
 </style>
@@ -16,13 +16,13 @@ import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";

 defineOptions({
-  name: "ProductActivationCodeManager",
+  name: "SysProductActivationCode",
 });

 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(async () => {
  await crudExpose.doRefresh();
@@ -94,7 +94,7 @@ function confirmRemove(opts: any) {
 }

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -17,7 +17,7 @@ defineOptions({ name: "SysInviteUserLevel" });
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -17,7 +17,7 @@ defineOptions({ name: "SysInviteWithdraw" });
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });

 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();
@@ -16,16 +16,16 @@ import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";

 defineOptions({
-  name: "TradeManager",
+  name: "OrderManager",
 });
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
-onActivated(async () => {
-  await crudExpose.doRefresh();
+onActivated(() => {
+  crudExpose.doRefresh();
 });
 </script>
 <style lang="less"></style>
@@ -22,7 +22,7 @@ const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context:

 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+  // crudExpose.doRefresh();
 });
 onActivated(() => {
  crudExpose.doRefresh();