lkddi/certd
1
0
Fork 0
mirror of https://github.com/certd/certd.git synced 2026-06-25 03:57:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): 统一使用useMounted钩子简化页面初始化逻辑

Browse Source
This commit is contained in:
xiaojunnuo
2026-06-06 00:50:59 +08:00
parent 5546af518e
commit 1175e1164b
29 changed files with 118 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+6 -2
View File
@@ -1,4 +1,4 @@
./packages/core/lego
./packages/core/lego
# IntelliJ project files
node_modules/
npm-debug.log
@@ -34,4 +34,8 @@ test.js
/logs
.pnpm-lock.yaml
pnpm-lock.yaml
.studio/
.studio/
# Certd 推广报告，仅本地使用
/popularize/
packages/ui/certd-client/src/router/source/modules/sys.ts
+1 -1
View File
@@ -311,7 +311,7 @@ export const sysResources = [
},
icon: "ion:bag-check",
permission: "sys:settings:edit",
keepAlive: true,
keepAlive: false,
auth: true,
},
},
packages/ui/certd-client/src/use/use-mounted.ts
+24
View File
@@ -0,0 +1,24 @@
import { onActivated, onMounted } from "vue";
/**
* 可靠的页面刷新钩子：
* - 如果组件实际被 KeepAlive 缓存命中，由 onActivated 触发 init；
* - 如果没有被缓存，由 onMounted 兜底触发，避免不刷新也不触发 onActivated。
*/
export function useMounted(init: () => void | Promise<void>) {
let activated = false;
onActivated(() => {
activated = true;
init();
});
onMounted(() => {
// 让 onActivated 有机会先执行；组件未被 KeepAlive 缓存时 onActivated 不会触发，由这里兜底。
setTimeout(() => {
if (!activated) {
init();
}
});
});
}
packages/ui/certd-client/src/views/certd/access/index.vue
+3 -9
View File
@@ -11,7 +11,8 @@
</template>
<script lang="ts">
import { defineComponent, onActivated, onMounted } from "vue";
import { defineComponent } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { createAccessApi } from "/@/views/certd/access/api";
@@ -23,14 +24,7 @@ export default defineComponent({
const { t } = useI18n();
const api = createAccessApi("user");
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api, permission: { isProjectPermission: true } } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
packages/ui/certd-client/src/views/certd/addon/index.vue
+3 -9
View File
@@ -11,7 +11,8 @@
</template>
<script lang="ts">
import { defineComponent, onActivated, onMounted } from "vue";
import { defineComponent } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { createAddonApi } from "./api";
@@ -26,14 +27,7 @@ export default defineComponent({
createCrudOptions,
context: { api, permission: { isProjectPermission: true } },
});
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
packages/ui/certd-client/src/views/certd/basic/group/index.vue
+3 -9
View File
@@ -11,7 +11,8 @@
</template>
<script lang="ts">
import { defineComponent, onActivated, onMounted } from "vue";
import { defineComponent } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
@@ -24,14 +25,7 @@ export default defineComponent({
permission: { isProjectPermission: true },
},
});
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
packages/ui/certd-client/src/views/certd/cert/apply-template/index.vue
+3 -8
View File
@@ -11,7 +11,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
@@ -25,12 +27,5 @@ const { crudBinding, crudRef, crudExpose } = useFs({
permission: { isProjectPermission: true },
},
});
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/certd/history/index.vue
+7 -8
View File
@@ -14,12 +14,18 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
import { message, Modal } from "ant-design-vue";
import { useMounted } from "/@/use/use-mounted";
import { DeleteBatch } from "./api";
import { useMounted } from "/@/use/use-mounted";
import { useI18n } from "/src/locales";
import { useMounted } from "/@/use/use-mounted";
import { useCrudPermission } from "/@/plugin/permission";
const { t } = useI18n();
@@ -52,13 +58,6 @@ const handleBatchDelete = () => {
message.error(t("certd.pleaseSelectRecords"));
}
};
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
<style lang="less"></style>
packages/ui/certd-client/src/views/certd/monitor/cert/index.vue
+4 -8
View File
@@ -11,9 +11,12 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
import { useI18n } from "/src/locales";
const { t } = useI18n();
@@ -22,12 +25,5 @@ defineOptions({
name: "CertStore",
});
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { permission: { isProjectPermission: true } } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/certd/monitor/history/index.vue
+4 -8
View File
@@ -21,9 +21,12 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
import { useI18n } from "/src/locales";
const { t } = useI18n();
defineOptions({
@@ -37,12 +40,5 @@ const context: any = {
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
const handleBatchDelete = context.handleBatchDelete;
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/certd/monitor/site/index.vue
+4 -8
View File
@@ -26,9 +26,12 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
import { useI18n } from "/src/locales";
const { t } = useI18n();
defineOptions({
@@ -42,12 +45,5 @@ const context: any = {
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
const handleBatchDelete = context.handleBatchDelete;
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/certd/monitor/site/ip/index.vue
+3 -8
View File
@@ -5,7 +5,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted, ref, Ref } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
@@ -21,12 +23,5 @@ const { crudBinding, crudRef, crudExpose } = useFs({
props,
},
});
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/certd/notification/index.vue
+3 -9
View File
@@ -11,7 +11,8 @@
</template>
<script lang="ts">
import { defineComponent, onActivated, onMounted } from "vue";
import { defineComponent } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { createNotificationApi } from "./api";
@@ -23,14 +24,7 @@ export default defineComponent({
const api = createNotificationApi();
notificationProvide(api);
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api, permission: { isProjectPermission: true } } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
packages/ui/certd-client/src/views/certd/open/openkey/index.vue
+4 -8
View File
@@ -11,21 +11,17 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
import { OPEN_API_DOC } from "/@/views/certd/open/openkey/api";
defineOptions({
name: "OpenKey",
});
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { permission: { isProjectPermission: true } } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/certd/pipeline/group/index.vue
+3 -9
View File
@@ -11,7 +11,8 @@
</template>
<script lang="ts">
import { defineComponent, onActivated, onMounted } from "vue";
import { defineComponent } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
@@ -24,14 +25,7 @@ export default defineComponent({
permission: { isProjectPermission: true },
},
});
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
packages/ui/certd-client/src/views/certd/pipeline/template/index.vue
+4 -7
View File
@@ -14,9 +14,12 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
import { useI18n } from "/src/locales";
defineOptions({
name: "PipelineTemplate",
@@ -28,11 +31,5 @@ const { crudBinding, crudRef, crudExpose } = useFs({
},
});
const { t } = useI18n();
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/certd/project/detail/index.vue
+2 -2
View File
@@ -28,6 +28,7 @@
<script lang="ts" setup>
import { onActivated, onMounted, Ref, ref } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { message, Modal } from "ant-design-vue";
@@ -117,13 +118,12 @@ onMounted(async () => {
return;
}
await loadProjectDetail();
// await crudExpose.doRefresh();
if (migrate === "true") {
openTransferDialog();
}
});
onActivated(async () => {
useMounted(async () => {
await crudExpose.doRefresh();
});
</script>
packages/ui/certd-client/src/views/certd/suite/mine/index.vue
+4 -7
View File
@@ -15,14 +15,14 @@
</template>
<script lang="ts" setup>
import { computed, onActivated, onMounted, ref } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import { computed, ref } from "vue";
import createCrudOptions from "./crud";
import { mySuiteApi, SuiteDetail } from "/@/views/certd/suite/mine/api";
import SuiteCard from "/@/views/framework/home/dashboard/suite-card.vue";
import { useMounted } from "/@/use/use-mounted";
defineOptions({
name: "MySuites",
name: "MySuite",
});
const detail = ref<SuiteDetail>({});
const currentSuite = computed(() => {
@@ -39,10 +39,7 @@ async function loadSuiteDetail() {
}
// 页面打开后获取列表数据
onMounted(async () => {
// await crudExpose.doRefresh();
});
onActivated(async () => {
useMounted(async () => {
await loadSuiteDetail();
await crudExpose.doRefresh();
});
packages/ui/certd-client/src/views/sys/access/index.vue
+3 -10
View File
@@ -11,7 +11,8 @@
</template>
<script lang="ts">
import { defineComponent, onActivated, onMounted } from "vue";
import { defineComponent } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "../../certd/access/crud";
import { createAccessApi } from "/@/views/certd/access/api";
@@ -21,15 +22,7 @@ export default defineComponent({
setup() {
const api = createAccessApi("sys");
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(async () => {
await crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
packages/ui/certd-client/src/views/sys/authority/role/index.vue
+1 -9
View File
@@ -104,15 +104,7 @@ export default defineComponent({
// 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { authz, permission } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(async () => {
await crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
crudRef,
packages/ui/certd-client/src/views/sys/authority/user/index.vue
+1 -8
View File
@@ -18,14 +18,7 @@ export default defineComponent({
// 此处传入权限前缀进行通用按钮权限设置，会通过commonOptions去设置actionbar和rowHandle的按钮的show属性
// 更多关于按钮权限的源代码设置，请参考 ./src/plugin/fast-crud/index.js （75-77行）
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { permission: "sys:auth:user" } });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(async () => {
await crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
return {
crudBinding,
packages/ui/certd-client/src/views/sys/monitor/site/index.vue
+3 -7
View File
@@ -14,7 +14,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import createCrudOptions from "./crud";
@@ -25,11 +27,5 @@ defineOptions({
const context: any = {};
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
const handleBatchDelete = context.handleBatchDelete;
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/sys/pipeline/index.vue
+3 -7
View File
@@ -14,7 +14,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import createCrudOptions from "./crud";
@@ -25,11 +27,5 @@ defineOptions({
const context: any = {};
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
const handleBatchDelete = context.handleBatchDelete;
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/sys/suite/invite/level.vue
+5 -7
View File
@@ -46,11 +46,15 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { computed, onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { Modal, notification } from "ant-design-vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud-level";
import * as api from "./api";
import { useMounted } from "/@/use/use-mounted";
import { util } from "/@/utils";
defineOptions({ name: "SysInviteLevel" });
@@ -92,13 +96,7 @@ function confirmRemove(opts: any) {
},
});
}
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
<style lang="less">
packages/ui/certd-client/src/views/sys/suite/invite/user-level.vue
+3 -7
View File
@@ -8,18 +8,14 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud-user-level";
defineOptions({ name: "SysInviteUserLevel" });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/sys/suite/invite/withdraw.vue
+3 -7
View File
@@ -8,18 +8,14 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud-withdraw";
defineOptions({ name: "SysInviteWithdraw" });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-client/src/views/sys/suite/trade/index.vue
+2 -8
View File
@@ -11,21 +11,15 @@
</template>
<script lang="ts" setup>
import { onActivated, onMounted } from "vue";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
import { useMounted } from "/@/use/use-mounted";
defineOptions({
name: "OrderManager",
});
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
<style lang="less"></style>
packages/ui/certd-client/src/views/sys/suite/user-suite/index.vue
+3 -8
View File
@@ -11,7 +11,9 @@
</template>
<script lang="ts" setup>
import { useMounted } from "/@/use/use-mounted";
import { onActivated, onMounted } from "vue";
import { useMounted } from "/@/use/use-mounted";
import { useFs } from "@fast-crud/fast-crud";
import createCrudOptions from "./crud";
@@ -19,12 +21,5 @@ defineOptions({
name: "UserSuites",
});
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
// 页面打开后获取列表数据
onMounted(() => {
// crudExpose.doRefresh();
});
onActivated(() => {
crudExpose.doRefresh();
});
useMounted(() => crudExpose.doRefresh());
</script>
packages/ui/certd-server/src/plugins/plugin-volcengine/plugins/plugin-deploy-to-vke.ts
+6 -4
View File
@@ -1,9 +1,10 @@
import { AbstractTaskPlugin, IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from "@certd/pipeline";
import { createCertDomainGetterInputDefine, createRemoteSelectInputDefine } from "@certd/plugin-lib";
import { utils } from "@certd/basic";
import { IsTaskPlugin, pluginGroups, RunStrategy, TaskInput } from "@certd/pipeline";
import { CertApplyPluginNames, CertInfo } from "@certd/plugin-cert";
import { createCertDomainGetterInputDefine, createRemoteSelectInputDefine } from "@certd/plugin-lib";
import { AbstractPlusTaskPlugin } from "@certd/plugin-plus";
import { VolcengineAccess } from "../access.js";
import { VolcengineClient } from "../ve-client.js";
import { utils } from "@certd/basic";
const regionOptions = [
{ label: "北京", value: "cn-beijing" },
@@ -20,13 +21,14 @@ const regionOptions = [
icon: "svg:icon-volcengine",
group: pluginGroups.volcengine.key,
desc: "替换火山引擎VKE集群中的TLS Secret证书",
needPlus:true,
default: {
strategy: {
runStrategy: RunStrategy.SkipWhenSucceed,
},
},
})
export class VolcengineDeployToVKE extends AbstractTaskPlugin {
export class VolcengineDeployToVKE extends AbstractPlusTaskPlugin {
@TaskInput({
title: "域名证书",
helper: "请选择前置任务输出的域名证书",