From cdac12bb2f5228ff3f72e8cbb735b0dfdd26118e Mon Sep 17 00:00:00 2001
From: Lorenzo <lorenzo@ariemma.it>
Date: Wed, 25 Jun 2025 21:01:34 +0200
Subject: [PATCH] Translate other parts

---
 .../components/tutorial/tutorial-steps.vue    | 207 ++++---
 .../src/locales/langs/en-US/certd.ts          |  35 ++
 .../src/locales/langs/en-US/guide.ts          |  71 +++
 .../src/locales/langs/en-US/index.ts          |   4 +-
 .../src/locales/langs/zh-CN/certd.ts          |  81 ++-
 .../src/locales/langs/zh-CN/guide.ts          |  71 +++
 .../src/locales/langs/zh-CN/index.ts          |   4 +-
 .../src/router/source/framework.ts            |   2 +-
 .../src/router/source/modules/sys.ts          | 492 ++++++++--------
 .../src/views/certd/monitor/cert/crud.tsx     | 557 +++++++++---------
 .../src/views/certd/monitor/cert/index.vue    |  27 +-
 11 files changed, 899 insertions(+), 652 deletions(-)
 create mode 100644 packages/ui/certd-client/src/locales/langs/en-US/guide.ts
 create mode 100644 packages/ui/certd-client/src/locales/langs/zh-CN/guide.ts

diff --git a/packages/ui/certd-client/src/components/tutorial/tutorial-steps.vue b/packages/ui/certd-client/src/components/tutorial/tutorial-steps.vue
index e20e0dab..bb9bc516 100644
--- a/packages/ui/certd-client/src/components/tutorial/tutorial-steps.vue
+++ b/packages/ui/certd-client/src/components/tutorial/tutorial-steps.vue
@@ -20,14 +20,18 @@
     </div>
 
     <div class="flex-center actions">
-      <fs-button class="m-10" icon="ion:arrow-back-outline" @click="prev()">上一步</fs-button>
-      <fs-button class="m-10" type="primary" icon-right="ion:arrow-forward-outline" @click="next()">下一步</fs-button>
+      <fs-button class="m-10" icon="ion:arrow-back-outline" @click="prev()">{{ t('guide.buttons.prev') }}</fs-button>
+      <fs-button class="m-10" type="primary" icon-right="ion:arrow-forward-outline" @click="next()">{{ t('guide.buttons.next') }}</fs-button>
     </div>
+
   </div>
 </template>
 
 <script setup lang="tsx">
 import { FsRender } from "@fast-crud/fast-crud";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 import SimpleSteps from "./simple-steps.vue";
 type Step = {
   title: string;
@@ -45,130 +49,151 @@ type StepItems = {
 import { computed, nextTick, ref } from "vue";
 
 const steps = ref<Step[]>([
-  {
-    title: "创建证书申请流水线",
-    description: "演示证书申请任务如何配置",
+    {
+    title: t("guide.createCertPipeline.title"),
+    description: t("guide.createCertPipeline.description"),
     items: [
       {
-        title: "教程演示内容",
-        descriptions: ["本教程演示如何自动申请证书并部署到Nginx上", "仅需3步，全自动申请部署证书"],
+        title: t("guide.createCertPipeline.items.tutorialTitle"),
+        descriptions: [
+          t("guide.createCertPipeline.items.tutorialDesc1"),
+          t("guide.createCertPipeline.items.tutorialDesc2"),
+        ],
         body: () => {
           return <SimpleSteps></SimpleSteps>;
         },
       },
       {
         image: "/static/doc/images/1-add.png",
-        title: "创建证书流水线",
-        descriptions: ["点击添加证书流水线，填写证书申请信息"],
+        title: t("guide.createCertPipeline.items.createTitle"),
+        descriptions: [t("guide.createCertPipeline.items.createDesc")],
       },
       {
         image: "/static/doc/images/3-add-success.png",
-        title: "流水线创建成功",
-        descriptions: ["点击手动触发即可申请证书"],
+        title: t("guide.createCertPipeline.items.successTitle"),
+        descriptions: [t("guide.createCertPipeline.items.successDesc")],
       },
       {
-        title: "接下来演示如何自动部署证书",
-        descriptions: ["如果您只需要申请证书，那么到这一步就可以了"],
+        title: t("guide.createCertPipeline.items.nextTitle"),
+        descriptions: [t("guide.createCertPipeline.items.nextDesc")],
       },
     ],
   },
   {
-    title: "添加部署证书任务",
-    description: "这里演示部署证书到Nginx",
+    title: t("guide.addDeployTask.title"),
+    description: t("guide.addDeployTask.description"),
     items: [
       {
         image: "/static/doc/images/5-1-add-host.png",
-        title: "添加证书部署任务",
-        descriptions: ["这里演示自动部署证书到nginx", "本系统提供海量部署插件，满足您的各种部署需求"],
+        title: t("guide.addDeployTask.items.addTaskTitle"),
+        descriptions: [
+          t("guide.addDeployTask.items.addTaskDesc1"),
+          t("guide.addDeployTask.items.addTaskDesc2"),
+        ],
       },
       {
         image: "/static/doc/images/5-2-add-host.png",
-        title: "填写任务参数",
-        descriptions: ["填写主机上证书文件的路径", "选择主机ssh登录授权"],
+        title: t("guide.addDeployTask.items.fillParamsTitle"),
+        descriptions: [
+          t("guide.addDeployTask.items.fillParamsDesc1"),
+          t("guide.addDeployTask.items.fillParamsDesc2"),
+        ],
       },
       {
         image: "/static/doc/images/5-3-add-host.png",
-        title: "让新证书生效",
-        descriptions: ["执行重启脚本", "让证书生效"],
+        title: t("guide.addDeployTask.items.activateCertTitle"),
+        descriptions: [
+          t("guide.addDeployTask.items.activateCertDesc1"),
+          t("guide.addDeployTask.items.activateCertDesc2"),
+        ],
       },
       {
         image: "/static/doc/images/5-4-add-host.png",
-        title: "部署任务添加成功",
-        descriptions: ["现在可以运行"],
+        title: t("guide.addDeployTask.items.taskSuccessTitle"),
+        descriptions: [t("guide.addDeployTask.items.taskSuccessDesc")],
       },
       {
         image: "/static/doc/images/5-5-plugin-list.png",
-        title: "本系统提供茫茫多的部署插件",
-        descriptions: ["您可以根据自身需求将证书部署到各种应用和平台"],
-      },
-    ],
-  },
-  {
-    title: "运行与测试",
-    description: "演示流水线运行,查看日志，成功后跳过等",
-    items: [
-      {
-        image: "/static/doc/images/9-start.png",
-        title: "运行测试一下",
-        descriptions: ["点击手动触发按钮，即可测试运行"],
-      },
-      {
-        image: "/static/doc/images/10-1-log.png",
-        title: "查看日志",
-        descriptions: ["点击任务可以查看状态和日志"],
-      },
-      {
-        image: "/static/doc/images/11-1-error.png",
-        title: "执行失败如何排查",
-        descriptions: ["查看错误日志"],
-      },
-      {
-        image: "/static/doc/images/11-2-error.png",
-        title: "执行失败如何排查",
-        descriptions: ["查看错误日志", "这里报的是nginx容器不存在，修改命令，改成正确的nginx容器名称即可"],
-      },
-      {
-        image: "/static/doc/images/12-1-log-success.png",
-        title: "执行成功",
-        descriptions: ["修改正确后，重新点击手动触发，重新运行一次，执行成功"],
-      },
-      {
-        image: "/static/doc/images/12-2-skip-log.png",
-        title: "成功后自动跳过",
-        descriptions: ["可以看到成功过的将会自动跳过，不会重复执行，只有当参数变更或者证书更新了，才会重新运行"],
-      },
-      {
-        image: "/static/doc/images/13-1-result.png",
-        title: "查看证书部署成功",
-        descriptions: ["访问nginx上的网站，可以看到证书已经部署成功"],
-      },
-      {
-        image: "/static/doc/images/13-3-download.png",
-        title: "还可以下载证书，手动部署",
-        descriptions: ["如果还没有好用的部署插件，没办法自动部署，你还可以下载证书，手动部署"],
-      },
-    ],
-  },
-  {
-    title: "设置定时执行和邮件通知",
-    description: "自动运行",
-    items: [
-      {
-        image: "/static/doc/images/14-timer.png",
-        title: "设置定时执行",
-        descriptions: ["流水线测试成功，接下来配置定时触发，以后每天定时执行就不用管了", "推荐配置每天运行一次，在到期前35天才会重新申请新证书并部署，没到期前会自动跳过，不会重复申请。"],
-      },
-      {
-        image: "/static/doc/images/15-1-email.png",
-        title: "设置邮件通知",
-        descriptions: ["建议选择监听'错误时'和'错误转成功'两种即可，在意外失败时可以尽快去排查问题，（基础版需要配置邮件服务器）"],
-      },
-      {
-        title: "教程结束",
-        descriptions: ["感谢观看，希望对你有所帮助"],
+        title: t("guide.addDeployTask.items.pluginsTitle"),
+        descriptions: [t("guide.addDeployTask.items.pluginsDesc")],
       },
     ],
   },
+	{
+	title: t('guide.runAndTestTask.runAndTestTitle'),
+	description: t('guide.runAndTestTask.runAndTestDescription'),
+	items: [
+		{
+		image: "/static/doc/images/9-start.png",
+		title: t('guide.runAndTestTask.runTestOnce'),
+		descriptions: [t('guide.runAndTestTask.clickManualTriggerToTest')],
+		},
+		{
+		image: "/static/doc/images/10-1-log.png",
+		title: t('guide.runAndTestTask.viewLogs'),
+		descriptions: [t('guide.runAndTestTask.clickTaskToViewStatusAndLogs')],
+		},
+		{
+		image: "/static/doc/images/11-1-error.png",
+		title: t('guide.runAndTestTask.howToTroubleshootFailure'),
+		descriptions: [t('guide.runAndTestTask.viewErrorLogs')],
+		},
+		{
+		image: "/static/doc/images/11-2-error.png",
+		title: t('guide.runAndTestTask.howToTroubleshootFailure'),
+		descriptions: [
+			t('guide.runAndTestTask.viewErrorLogs'),
+			t('guide.runAndTestTask.nginxContainerNotExistFix'),
+		],
+		},
+		{
+		image: "/static/doc/images/12-1-log-success.png",
+		title: t('guide.runAndTestTask.executionSuccess'),
+		descriptions: [t('guide.runAndTestTask.retryAfterFix')],
+		},
+		{
+		image: "/static/doc/images/12-2-skip-log.png",
+		title: t('guide.runAndTestTask.autoSkipAfterSuccess'),
+		descriptions: [t('guide.runAndTestTask.successSkipExplanation')],
+		},
+		{
+		image: "/static/doc/images/13-1-result.png",
+		title: t('guide.runAndTestTask.viewCertDeploymentSuccess'),
+		descriptions: [t('guide.runAndTestTask.visitNginxToSeeCert')],
+		},
+		{
+		image: "/static/doc/images/13-3-download.png",
+		title: t('guide.runAndTestTask.downloadCertManualDeploy'),
+		descriptions: [t('guide.runAndTestTask.downloadIfNoAutoDeployPlugin')],
+		},
+	],
+	},
+	{
+	title: t('guide.scheduleAndEmailTask.title'),
+	description: t('guide.scheduleAndEmailTask.description'),
+	items: [
+		{
+		image: "/static/doc/images/14-timer.png",
+		title: t('guide.scheduleAndEmailTask.setSchedule'),
+		descriptions: [
+			t('guide.scheduleAndEmailTask.pipelineSuccessThenSchedule'),
+			t('guide.scheduleAndEmailTask.recommendDailyRun'),
+		],
+		},
+		{
+		image: "/static/doc/images/15-1-email.png",
+		title: t('guide.scheduleAndEmailTask.setEmailNotification'),
+		descriptions: [
+			t('guide.scheduleAndEmailTask.suggestErrorAndRecoveryEmails'),
+			t('guide.scheduleAndEmailTask.basicVersionNeedsMailServer'),
+		],
+		},
+		{
+		title: t('guide.scheduleAndEmailTask.tutorialEndTitle'),
+		descriptions: [t('guide.scheduleAndEmailTask.thanksForWatching')],
+		},
+	],
+	}
 ]);
 
 const current = ref(0);
diff --git a/packages/ui/certd-client/src/locales/langs/en-US/certd.ts b/packages/ui/certd-client/src/locales/langs/en-US/certd.ts
index df25c376..2b17721d 100644
--- a/packages/ui/certd-client/src/locales/langs/en-US/certd.ts
+++ b/packages/ui/certd-client/src/locales/langs/en-US/certd.ts
@@ -150,4 +150,39 @@ export default {
 		manual: "Manual Execution",
 		timer: "Scheduled Execution",
 	},
+	sysResources: {
+		sysRoot: "System Management",
+		sysConsole: "Console",
+		sysSettings: "System Settings",
+		cnameSetting: "CNAME Service Settings",
+		emailSetting: "Email Server Settings",
+		siteSetting: "Site Personalization",
+		headerMenus: "Top Menu Settings",
+		sysAccess: "System-level Authorization",
+		sysPlugin: "Plugin Management",
+		sysPluginEdit: "Edit Plugin",
+		sysPluginConfig: "Certificate Plugin Configuration",
+		accountBind: "Account Binding",
+		permissionManager: "Permission Management",
+		roleManager: "Role Management",
+		userManager: "User Management",
+		suiteManager: "Suite Management",
+		suiteSetting: "Suite Settings",
+		orderManager: "Order Management",
+		userSuites: "User Suites",
+	},
+	certificateRepo: {
+		title: "Certificate Repository",
+		sub: "Certificates generated from pipeline"
+	},
+
+	certificateNotGenerated: "Certificate not yet generated, please run the pipeline first",
+	viewCertificateTitle: "View Certificate",
+	close: "Close",
+	viewCert: {
+		title: "View Certificate"
+	},
+	download: {
+		title: "Download Certificate"
+	},
 };
diff --git a/packages/ui/certd-client/src/locales/langs/en-US/guide.ts b/packages/ui/certd-client/src/locales/langs/en-US/guide.ts
new file mode 100644
index 00000000..19760eb3
--- /dev/null
+++ b/packages/ui/certd-client/src/locales/langs/en-US/guide.ts
@@ -0,0 +1,71 @@
+export default {
+	createCertPipeline: {
+		title: "Create Certificate Application Pipeline",
+		description: "Demonstrate how to configure a certificate application task",
+		items: {
+			tutorialTitle: "Tutorial Demo Content",
+			tutorialDesc1: "This tutorial demonstrates how to automatically apply for a certificate and deploy it to Nginx",
+			tutorialDesc2: "Only 3 steps, fully automatic application and deployment",
+			createTitle: "Create Certificate Pipeline",
+			createDesc: "Click to add a certificate pipeline and fill in the certificate application information",
+			successTitle: "Pipeline Created Successfully",
+			successDesc: "Click manual trigger to apply for the certificate",
+			nextTitle: "Next, demonstrate how to automatically deploy the certificate",
+			nextDesc: "If you only need to apply for a certificate, you can stop here",
+		},
+	},
+	buttons: {
+		prev: "Previous Step",
+		next: "Next Step",
+	},
+	addDeployTask: {
+		title: "Add Deployment Certificate Task",
+		description: "Demonstrate deployment of certificate to Nginx",
+		items: {
+			addTaskTitle: "Add Certificate Deployment Task",
+			addTaskDesc1: "Demonstrate automatic deployment of certificate to nginx",
+			addTaskDesc2: "Our system provides numerous deployment plugins to meet your needs",
+			fillParamsTitle: "Fill Task Parameters",
+			fillParamsDesc1: "Fill in the certificate file path on the host",
+			fillParamsDesc2: "Select SSH login authorization for the host",
+			activateCertTitle: "Make New Certificate Effective",
+			activateCertDesc1: "Execute restart script",
+			activateCertDesc2: "Make the certificate effective",
+			taskSuccessTitle: "Deployment Task Added Successfully",
+			taskSuccessDesc: "Now you can run it",
+			pluginsTitle: "Our System Provides Numerous Deployment Plugins",
+			pluginsDesc: "You can deploy certificates to various applications and platforms according to your needs",
+		},
+	},
+	runAndTestTask: {
+		runAndTestTitle: "Run and Test",
+		runAndTestDescription: "Demonstrate pipeline running, view logs, skip on success, etc.",
+		runTestOnce: "Run a Test",
+		clickManualTriggerToTest: "Click the manual trigger button to test the run",
+		viewLogs: "View Logs",
+		clickTaskToViewStatusAndLogs: "Click the task to view status and logs",
+		howToTroubleshootFailure: "How to Troubleshoot Failure",
+		viewErrorLogs: "View error logs",
+		nginxContainerNotExistFix: "Shows nginx container not found error, fix by changing to correct nginx container name",
+		executionSuccess: "Execution Success",
+		retryAfterFix: "After fixing, click manual trigger again to rerun successfully",
+		autoSkipAfterSuccess: "Auto Skip After Success",
+		successSkipExplanation: "Successful runs will be skipped automatically, rerun only if parameters or certificates update",
+		viewCertDeploymentSuccess: "View Certificate Deployment Success",
+		visitNginxToSeeCert: "Visit website on nginx to see certificate deployed successfully",
+		downloadCertManualDeploy: "Download Certificate for Manual Deployment",
+		downloadIfNoAutoDeployPlugin: "If no deployment plugin available, download certificate for manual deployment",
+	},
+	scheduleAndEmailTask: {
+		title: "Set Scheduled Execution and Email Notifications",
+		description: "Automatic running",
+		setSchedule: "Set Scheduled Execution",
+		pipelineSuccessThenSchedule: "Pipeline tests succeed, then configure scheduled triggers so it runs automatically daily",
+		recommendDailyRun: "Recommend configuring to run once daily; new certs requested 35 days before expiry and auto-skipped otherwise",
+		setEmailNotification: "Set Email Notifications",
+		suggestErrorAndRecoveryEmails: "Suggest listening for 'On Error' and 'Error to Success' to quickly troubleshoot failures (basic version requires mail server setup)",
+		basicVersionNeedsMailServer: "(basic version requires configuring mail server)",
+		tutorialEndTitle: "Tutorial End",
+		thanksForWatching: "Thank you for watching, hope it helps you",
+	}
+}
\ No newline at end of file
diff --git a/packages/ui/certd-client/src/locales/langs/en-US/index.ts b/packages/ui/certd-client/src/locales/langs/en-US/index.ts
index c5d35830..61bd35d0 100644
--- a/packages/ui/certd-client/src/locales/langs/en-US/index.ts
+++ b/packages/ui/certd-client/src/locales/langs/en-US/index.ts
@@ -4,6 +4,7 @@ import vip from './vip';
 import tutorial from './tutorial';
 import preferences from './preferences';
 import ui from './ui';
+import guide from './guide';
 
 export default {
 	certd,
@@ -11,5 +12,6 @@ export default {
 	vip,
 	ui,
 	tutorial,
-	preferences
+	preferences,
+	guide
 };
\ No newline at end of file
diff --git a/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts b/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
index 98cc51f5..412efb93 100644
--- a/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
+++ b/packages/ui/certd-client/src/locales/langs/zh-CN/certd.ts
@@ -37,29 +37,29 @@ export default {
 		title: "框架",
 		home: "首页",
 	},
-	certd: {
-		title: "证书自动化",
-		pipeline: "证书自动化流水线",
-		pipelineEdit: "编辑流水线",
-		history: "执行历史记录",
-		certStore: "证书仓库",
-		siteMonitor: "站点证书监控",
-		settings: "设置",
-		accessManager: "授权管理",
-		cnameRecord: "CNAME记录管理",
-		subDomain: "子域名托管设置",
-		pipelineGroup: "流水线分组管理",
-		openKey: "开放接口密钥",
-		notification: "通知设置",
-		siteMonitorSetting: "站点监控设置",
-		userSecurity: "认证安全设置",
-		userProfile: "账号信息",
-		suite: "套餐",
-		mySuite: "我的套餐",
-		suiteBuy: "套餐购买",
-		myTrade: "我的订单",
-		paymentReturn: "支付返回",
-	},
+
+	title: "证书自动化",
+	pipeline: "证书自动化流水线",
+	pipelineEdit: "编辑流水线",
+	history: "执行历史记录",
+	certStore: "证书仓库",
+	siteMonitor: "站点证书监控",
+	settings: "设置",
+	accessManager: "授权管理",
+	cnameRecord: "CNAME记录管理",
+	subDomain: "子域名托管设置",
+	pipelineGroup: "流水线分组管理",
+	openKey: "开放接口密钥",
+	notification: "通知设置",
+	siteMonitorSetting: "站点监控设置",
+	userSecurity: "认证安全设置",
+	userProfile: "账号信息",
+	suite: "套餐",
+	mySuite: "我的套餐",
+	suiteBuy: "套餐购买",
+	myTrade: "我的订单",
+	paymentReturn: "支付返回",
+
 	user: {
 		greeting: "您好",
 		profile: "账号信息",
@@ -156,4 +156,39 @@ export default {
 		manual: "手动执行",
 		timer: "定时执行",
 	},
+	sysResources: {
+		sysRoot: "系统管理",
+		sysConsole: "控制台",
+		sysSettings: "系统设置",
+		cnameSetting: "CNAME服务设置",
+		emailSetting: "邮件服务器设置",
+		siteSetting: "站点个性化",
+		headerMenus: "顶部菜单设置",
+		sysAccess: "系统级授权",
+		sysPlugin: "插件管理",
+		sysPluginEdit: "编辑插件",
+		sysPluginConfig: "证书插件配置",
+		accountBind: "账号绑定",
+		permissionManager: "权限管理",
+		roleManager: "角色管理",
+		userManager: "用户管理",
+		suiteManager: "套餐管理",
+		suiteSetting: "套餐设置",
+		orderManager: "订单管理",
+		userSuites: "用户套餐",
+	},
+	certificateRepo: {
+		title: "证书仓库",
+		sub: "从流水线生成的证书"
+	},
+
+	certificateNotGenerated: "证书还未生成，请先运行流水线",
+	viewCertificateTitle: "查看证书",
+	close: "关闭",
+	viewCert: {
+		title: "查看证书"
+	},
+	download: {
+		title: "下载证书"
+	},
 };
diff --git a/packages/ui/certd-client/src/locales/langs/zh-CN/guide.ts b/packages/ui/certd-client/src/locales/langs/zh-CN/guide.ts
new file mode 100644
index 00000000..d5321cbd
--- /dev/null
+++ b/packages/ui/certd-client/src/locales/langs/zh-CN/guide.ts
@@ -0,0 +1,71 @@
+export default {
+	createCertPipeline: {
+		title: "创建证书申请流水线",
+		description: "演示证书申请任务如何配置",
+		items: {
+			tutorialTitle: "教程演示内容",
+			tutorialDesc1: "本教程演示如何自动申请证书并部署到Nginx上",
+			tutorialDesc2: "仅需3步，全自动申请部署证书",
+			createTitle: "创建证书流水线",
+			createDesc: "点击添加证书流水线，填写证书申请信息",
+			successTitle: "流水线创建成功",
+			successDesc: "点击手动触发即可申请证书",
+			nextTitle: "接下来演示如何自动部署证书",
+			nextDesc: "如果您只需要申请证书，那么到这一步就可以了",
+		},
+	},
+	buttons: {
+		prev: "上一步",
+		next: "下一步",
+	},
+	addDeployTask: {
+		title: "添加部署证书任务",
+		description: "这里演示部署证书到Nginx",
+		items: {
+			addTaskTitle: "添加证书部署任务",
+			addTaskDesc1: "这里演示自动部署证书到nginx",
+			addTaskDesc2: "本系统提供海量部署插件，满足您的各种部署需求",
+			fillParamsTitle: "填写任务参数",
+			fillParamsDesc1: "填写主机上证书文件的路径",
+			fillParamsDesc2: "选择主机ssh登录授权",
+			activateCertTitle: "让新证书生效",
+			activateCertDesc1: "执行重启脚本",
+			activateCertDesc2: "让证书生效",
+			taskSuccessTitle: "部署任务添加成功",
+			taskSuccessDesc: "现在可以运行",
+			pluginsTitle: "本系统提供茫茫多的部署插件",
+			pluginsDesc: "您可以根据自身需求将证书部署到各种应用和平台",
+		},
+	},
+	runAndTestTask: {
+		runAndTestTitle: "运行与测试",
+		runAndTestDescription: "演示流水线运行,查看日志，成功后跳过等",
+		runTestOnce: "运行测试一下",
+		clickManualTriggerToTest: "点击手动触发按钮，即可测试运行",
+		viewLogs: "查看日志",
+		clickTaskToViewStatusAndLogs: "点击任务可以查看状态和日志",
+		howToTroubleshootFailure: "执行失败如何排查",
+		viewErrorLogs: "查看错误日志",
+		nginxContainerNotExistFix: "这里报的是nginx容器不存在，修改命令，改成正确的nginx容器名称即可",
+		executionSuccess: "执行成功",
+		retryAfterFix: "修改正确后，重新点击手动触发，重新运行一次，执行成功",
+		autoSkipAfterSuccess: "成功后自动跳过",
+		successSkipExplanation: "可以看到成功过的将会自动跳过，不会重复执行，只有当参数变更或者证书更新了，才会重新运行",
+		viewCertDeploymentSuccess: "查看证书部署成功",
+		visitNginxToSeeCert: "访问nginx上的网站，可以看到证书已经部署成功",
+		downloadCertManualDeploy: "还可以下载证书，手动部署",
+		downloadIfNoAutoDeployPlugin: "如果还没有好用的部署插件，没办法自动部署，你还可以下载证书，手动部署",
+	},
+	scheduleAndEmailTask: {
+		title: "设置定时执行和邮件通知",
+		description: "自动运行",
+		setSchedule: "设置定时执行",
+		pipelineSuccessThenSchedule: "流水线测试成功，接下来配置定时触发，以后每天定时执行就不用管了",
+		recommendDailyRun: "推荐配置每天运行一次，在到期前35天才会重新申请新证书并部署，没到期前会自动跳过，不会重复申请。",
+		setEmailNotification: "设置邮件通知",
+		suggestErrorAndRecoveryEmails: "建议选择监听'错误时'和'错误转成功'两种即可，在意外失败时可以尽快去排查问题，（基础版需要配置邮件服务器）",
+		basicVersionNeedsMailServer: "（基础版需要配置邮件服务器）",
+		tutorialEndTitle: "教程结束",
+		thanksForWatching: "感谢观看，希望对你有所帮助",
+	}
+}
\ No newline at end of file
diff --git a/packages/ui/certd-client/src/locales/langs/zh-CN/index.ts b/packages/ui/certd-client/src/locales/langs/zh-CN/index.ts
index c5d35830..61bd35d0 100644
--- a/packages/ui/certd-client/src/locales/langs/zh-CN/index.ts
+++ b/packages/ui/certd-client/src/locales/langs/zh-CN/index.ts
@@ -4,6 +4,7 @@ import vip from './vip';
 import tutorial from './tutorial';
 import preferences from './preferences';
 import ui from './ui';
+import guide from './guide';
 
 export default {
 	certd,
@@ -11,5 +12,6 @@ export default {
 	vip,
 	ui,
 	tutorial,
-	preferences
+	preferences,
+	guide
 };
\ No newline at end of file
diff --git a/packages/ui/certd-client/src/router/source/framework.ts b/packages/ui/certd-client/src/router/source/framework.ts
index e3e56474..93055436 100644
--- a/packages/ui/certd-client/src/router/source/framework.ts
+++ b/packages/ui/certd-client/src/router/source/framework.ts
@@ -1,7 +1,7 @@
 import LayoutBasic from "/@/layout/layout-basic.vue";
 
 import type { RouteRecordRaw } from "vue-router";
-import i18n from '../../locales/i18n';
+import i18n from '/@/locales/i18n';
 
 import { mergeRouteModules } from "/@/vben/utils";
 const dynamicRouteFiles = import.meta.glob("./modules/**/*.ts*", {
diff --git a/packages/ui/certd-client/src/router/source/modules/sys.ts b/packages/ui/certd-client/src/router/source/modules/sys.ts
index fe290277..987d034a 100644
--- a/packages/ui/certd-client/src/router/source/modules/sys.ts
+++ b/packages/ui/certd-client/src/router/source/modules/sys.ts
@@ -1,256 +1,256 @@
 import LayoutPass from "/@/layout/layout-pass.vue";
 import { useSettingStore } from "/@/store/settings";
 import aboutResource from "/@/router/source/modules/about";
+import i18n from '/@/locales/i18n';
 
 export const sysResources = [
-  {
-    title: "系统管理",
-    name: "SysRoot",
-    path: "/sys",
-    redirect: "/sys/settings",
-    meta: {
-      icon: "ion:settings-outline",
-      permission: "sys:settings:view",
-      order: 10,
-    },
-    children: [
-      {
-        title: "控制台",
-        name: "SysConsole",
-        path: "/sys/console",
-        component: "/sys/console/index.vue",
-        meta: {
-          show: () => {
-            const settingStore = useSettingStore();
-            return settingStore.isComm;
-          },
-          icon: "ion:speedometer-outline",
-          permission: "sys:auth:user:view",
-        },
-      },
+	{
+		title: i18n.global.t('certd.sysResources.sysRoot'),
+		name: "SysRoot",
+		path: "/sys",
+		redirect: "/sys/settings",
+		meta: {
+			icon: "ion:settings-outline",
+			permission: "sys:settings:view",
+			order: 10,
+		},
+		children: [
+			{
+				title: i18n.global.t('certd.sysResources.sysConsole'),
+				name: "SysConsole",
+				path: "/sys/console",
+				component: "/sys/console/index.vue",
+				meta: {
+					show: () => {
+						const settingStore = useSettingStore();
+						return settingStore.isComm;
+					},
+					icon: "ion:speedometer-outline",
+					permission: "sys:auth:user:view",
+				},
+			},
 
-      {
-        title: "系统设置",
-        name: "SysSettings",
-        path: "/sys/settings",
-        component: "/sys/settings/index.vue",
-        meta: {
-          icon: "ion:settings-outline",
-          permission: "sys:settings:view",
-        },
-      },
-      {
-        title: "CNAME服务设置",
-        name: "CnameSetting",
-        path: "/sys/cname/provider",
-        component: "/sys/cname/provider/index.vue",
-        meta: {
-          icon: "ion:earth-outline",
-          permission: "sys:settings:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "邮件服务器设置",
-        name: "EmailSetting",
-        path: "/sys/settings/email",
-        component: "/sys/settings/email/index.vue",
-        meta: {
-          permission: "sys:settings:view",
-          icon: "ion:mail-outline",
-          auth: true,
-        },
-      },
-      {
-        title: "站点个性化",
-        name: "SiteSetting",
-        path: "/sys/site",
-        component: "/sys/site/index.vue",
-        meta: {
-          show: () => {
-            const settingStore = useSettingStore();
-            return settingStore.isComm;
-          },
-          icon: "ion:document-text-outline",
-          permission: "sys:settings:view",
-        },
-      },
-      {
-        title: "顶部菜单设置",
-        name: "HeaderMenus",
-        path: "/sys/settings/header-menus",
-        component: "/sys/settings/header-menus/index.vue",
-        meta: {
-          show: () => {
-            const settingStore = useSettingStore();
-            return settingStore.isComm;
-          },
-          icon: "ion:menu",
-          permission: "sys:settings:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "系统级授权",
-        name: "SysAccess",
-        path: "/sys/access",
-        component: "/sys/access/index.vue",
-        meta: {
-          show: () => {
-            const settingStore = useSettingStore();
-            return settingStore.isComm;
-          },
-          icon: "ion:disc-outline",
-          permission: "sys:settings:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "插件管理",
-        name: "SysPlugin",
-        path: "/sys/plugin",
-        component: "/sys/plugin/index.vue",
-        meta: {
-          icon: "ion:extension-puzzle-outline",
-          permission: "sys:settings:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "编辑插件",
-        name: "SysPluginEdit",
-        path: "/sys/plugin/edit",
-        component: "/sys/plugin/edit.vue",
-        meta: {
-          isMenu: false,
-          icon: "ion:extension-puzzle",
-          permission: "sys:settings:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "证书插件配置",
-        name: "SysPluginConfig",
-        path: "/sys/plugin/config",
-        component: "/sys/plugin/config.vue",
-        meta: {
-          show: () => {
-            const settingStore = useSettingStore();
-            return settingStore.isComm;
-          },
-          icon: "ion:extension-puzzle",
-          permission: "sys:settings:view",
-        },
-      },
-      {
-        title: "账号绑定",
-        name: "AccountBind",
-        path: "/sys/account",
-        component: "/sys/account/index.vue",
-        meta: {
-          icon: "ion:golf-outline",
-          permission: "sys:settings:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "权限管理",
-        name: "PermissionManager",
-        path: "/sys/authority/permission",
-        component: "/sys/authority/permission/index.vue",
-        meta: {
-          icon: "ion:list-outline",
-          //需要校验权限
-          permission: "sys:auth:per:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "角色管理",
-        name: "RoleManager",
-        path: "/sys/authority/role",
-        component: "/sys/authority/role/index.vue",
-        meta: {
-          icon: "ion:people-outline",
-          permission: "sys:auth:role:view",
-          keepAlive: true,
-        },
-      },
-      {
-        title: "用户管理",
-        name: "UserManager",
-        path: "/sys/authority/user",
-        component: "/sys/authority/user/index.vue",
-        meta: {
-          icon: "ion:person-outline",
-          permission: "sys:auth:user:view",
-          keepAlive: true,
-        },
-      },
+			{
+				title: i18n.global.t('certd.sysResources.sysSettings'),
+				name: "SysSettings",
+				path: "/sys/settings",
+				component: "/sys/settings/index.vue",
+				meta: {
+					icon: "ion:settings-outline",
+					permission: "sys:settings:view",
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.cnameSetting'),
+				name: "CnameSetting",
+				path: "/sys/cname/provider",
+				component: "/sys/cname/provider/index.vue",
+				meta: {
+					icon: "ion:earth-outline",
+					permission: "sys:settings:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.emailSetting'),
+				name: "EmailSetting",
+				path: "/sys/settings/email",
+				component: "/sys/settings/email/index.vue",
+				meta: {
+					permission: "sys:settings:view",
+					icon: "ion:mail-outline",
+					auth: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.siteSetting'),
+				name: "SiteSetting",
+				path: "/sys/site",
+				component: "/sys/site/index.vue",
+				meta: {
+					show: () => {
+						const settingStore = useSettingStore();
+						return settingStore.isComm;
+					},
+					icon: "ion:document-text-outline",
+					permission: "sys:settings:view",
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.headerMenus'),
+				name: "HeaderMenus",
+				path: "/sys/settings/header-menus",
+				component: "/sys/settings/header-menus/index.vue",
+				meta: {
+					show: () => {
+						const settingStore = useSettingStore();
+						return settingStore.isComm;
+					},
+					icon: "ion:menu",
+					permission: "sys:settings:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.sysAccess'),
+				name: "SysAccess",
+				path: "/sys/access",
+				component: "/sys/access/index.vue",
+				meta: {
+					show: () => {
+						const settingStore = useSettingStore();
+						return settingStore.isComm;
+					},
+					icon: "ion:disc-outline",
+					permission: "sys:settings:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.sysPlugin'),
+				name: "SysPlugin",
+				path: "/sys/plugin",
+				component: "/sys/plugin/index.vue",
+				meta: {
+					icon: "ion:extension-puzzle-outline",
+					permission: "sys:settings:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.sysPluginEdit'),
+				name: "SysPluginEdit",
+				path: "/sys/plugin/edit",
+				component: "/sys/plugin/edit.vue",
+				meta: {
+					isMenu: false,
+					icon: "ion:extension-puzzle",
+					permission: "sys:settings:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.sysPluginConfig'),
+				name: "SysPluginConfig",
+				path: "/sys/plugin/config",
+				component: "/sys/plugin/config.vue",
+				meta: {
+					show: () => {
+						const settingStore = useSettingStore();
+						return settingStore.isComm;
+					},
+					icon: "ion:extension-puzzle",
+					permission: "sys:settings:view",
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.accountBind'),
+				name: "AccountBind",
+				path: "/sys/account",
+				component: "/sys/account/index.vue",
+				meta: {
+					icon: "ion:golf-outline",
+					permission: "sys:settings:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.permissionManager'),
+				name: "PermissionManager",
+				path: "/sys/authority/permission",
+				component: "/sys/authority/permission/index.vue",
+				meta: {
+					icon: "ion:list-outline",
+					permission: "sys:auth:per:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.roleManager'),
+				name: "RoleManager",
+				path: "/sys/authority/role",
+				component: "/sys/authority/role/index.vue",
+				meta: {
+					icon: "ion:people-outline",
+					permission: "sys:auth:role:view",
+					keepAlive: true,
+				},
+			},
+			{
+				title: i18n.global.t('certd.sysResources.userManager'),
+				name: "UserManager",
+				path: "/sys/authority/user",
+				component: "/sys/authority/user/index.vue",
+				meta: {
+					icon: "ion:person-outline",
+					permission: "sys:auth:user:view",
+					keepAlive: true,
+				},
+			},
 
-      {
-        title: "套餐管理",
-        name: "SuiteManager",
-        path: "/sys/suite",
-        redirect: "/sys/suite/setting",
-        meta: {
-          icon: "ion:cart-outline",
-          permission: "sys:settings:edit",
-          show: () => {
-            const settingStore = useSettingStore();
-            return settingStore.isComm;
-          },
-          keepAlive: true,
-        },
-        children: [
-          {
-            title: "套餐设置",
-            name: "SuiteSetting",
-            path: "/sys/suite/setting",
-            component: "/sys/suite/setting/index.vue",
-            meta: {
-              show: () => {
-                const settingStore = useSettingStore();
-                return settingStore.isComm;
-              },
-              icon: "ion:cart",
-              permission: "sys:settings:edit",
-            },
-          },
-          {
-            title: "订单管理",
-            name: "OrderManager",
-            path: "/sys/suite/trade",
-            component: "/sys/suite/trade/index.vue",
-            meta: {
-              show: () => {
-                const settingStore = useSettingStore();
-                return settingStore.isComm;
-              },
-              icon: "ion:bag-check",
-              permission: "sys:settings:edit",
-              keepAlive: true,
-            },
-          },
-          {
-            title: "用户套餐",
-            name: "UserSuites",
-            path: "/sys/suite/user-suite",
-            component: "/sys/suite/user-suite/index.vue",
-            meta: {
-              show: () => {
-                const settingStore = useSettingStore();
-                return settingStore.isComm;
-              },
-              icon: "ion:gift-outline",
-              auth: true,
-              keepAlive: true,
-            },
-          },
-        ],
-      },
-    ],
-  },
+			{
+				title: i18n.global.t('certd.sysResources.suiteManager'),
+				name: "SuiteManager",
+				path: "/sys/suite",
+				redirect: "/sys/suite/setting",
+				meta: {
+					icon: "ion:cart-outline",
+					permission: "sys:settings:edit",
+					show: () => {
+						const settingStore = useSettingStore();
+						return settingStore.isComm;
+					},
+					keepAlive: true,
+				},
+				children: [
+					{
+						title: i18n.global.t('certd.sysResources.suiteSetting'),
+						name: "SuiteSetting",
+						path: "/sys/suite/setting",
+						component: "/sys/suite/setting/index.vue",
+						meta: {
+							show: () => {
+								const settingStore = useSettingStore();
+								return settingStore.isComm;
+							},
+							icon: "ion:cart",
+							permission: "sys:settings:edit",
+						},
+					},
+					{
+						title: i18n.global.t('certd.sysResources.orderManager'),
+						name: "OrderManager",
+						path: "/sys/suite/trade",
+						component: "/sys/suite/trade/index.vue",
+						meta: {
+							show: () => {
+								const settingStore = useSettingStore();
+								return settingStore.isComm;
+							},
+							icon: "ion:bag-check",
+							permission: "sys:settings:edit",
+							keepAlive: true,
+						},
+					},
+					{
+						title: i18n.global.t('certd.sysResources.userSuites'),
+						name: "UserSuites",
+						path: "/sys/suite/user-suite",
+						component: "/sys/suite/user-suite/index.vue",
+						meta: {
+							show: () => {
+								const settingStore = useSettingStore();
+								return settingStore.isComm;
+							},
+							icon: "ion:gift-outline",
+							auth: true,
+							keepAlive: true,
+						},
+					},
+				],
+			},
+		],
+	},
 ];
 
 export default sysResources;
diff --git a/packages/ui/certd-client/src/views/certd/monitor/cert/crud.tsx b/packages/ui/certd-client/src/views/certd/monitor/cert/crud.tsx
index 65dc4f9c..8e254b73 100644
--- a/packages/ui/certd-client/src/views/certd/monitor/cert/crud.tsx
+++ b/packages/ui/certd-client/src/views/certd/monitor/cert/crud.tsx
@@ -1,5 +1,6 @@
 // @ts-ignore
 import { useI18n } from "vue-i18n";
+//
 import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
 import { certInfoApi } from "./api";
 import dayjs from "dayjs";
@@ -10,285 +11,287 @@ import CertView from "/@/views/certd/pipeline/cert-view.vue";
 import { useCertUpload } from "/@/views/certd/pipeline/cert-upload/use";
 
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const api = certInfoApi;
-  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
-    return await api.GetList(query);
-  };
-  const editRequest = async (req: EditReq) => {
-    const { form, row } = req;
-    form.id = row.id;
-    const res = await api.UpdateObj(form);
-    return res;
-  };
-  const delRequest = async (req: DelReq) => {
-    const { row } = req;
-    return await api.DelObj(row.id);
-  };
+	const { t } = useI18n();
+	const api = certInfoApi;
+	const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+		return await api.GetList(query);
+	};
+	const editRequest = async (req: EditReq) => {
+		const { form, row } = req;
+		form.id = row.id;
+		const res = await api.UpdateObj(form);
+		return res;
+	};
+	const delRequest = async (req: DelReq) => {
+		const { row } = req;
+		return await api.DelObj(row.id);
+	};
 
-  const addRequest = async (req: AddReq) => {
-    const { form } = req;
-    const res = await api.AddObj(form);
-    return res;
-  };
-  const { openCrudFormDialog } = useFormWrapper();
-  const router = useRouter();
+	const addRequest = async (req: AddReq) => {
+		const { form } = req;
+		const res = await api.AddObj(form);
+		return res;
+	};
+	const { openCrudFormDialog } = useFormWrapper();
+	const router = useRouter();
 
-  const model = useModal();
-  const viewCert = async (row: any) => {
-    const cert = await api.GetCert(row.id);
-    if (!cert) {
-      notification.error({ message: "证书还未生成，请先运行流水线" });
-      return;
-    }
+	const model = useModal();
+	const viewCert = async (row: any) => {
+		const cert = await api.GetCert(row.id);
+		if (!cert) {
+			notification.error({ message: t("certd.certificateNotGenerated") });
+			return;
+		}
 
-    model.success({
-      title: "查看证书",
-      maskClosable: true,
-      okText: "关闭",
-      width: 800,
-      content: () => {
-        return <CertView cert={cert}></CertView>;
-      },
-    });
-  };
+		model.success({
+			title: t("certd.modal.viewCertificateTitle"),
+			maskClosable: true,
+			okText: t("certd.modal.close"),
+			width: 800,
+			content: () => {
+				return <CertView cert={cert}></CertView>;
+			},
+		});
+	};
 
-  const { openUploadCreateDialog, openUpdateCertDialog } = useCertUpload();
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest,
-      },
-      form: {
-        labelCol: {
-          //固定label宽度
-          span: null,
-          style: {
-            width: "100px",
-          },
-        },
-        col: {
-          span: 22,
-        },
-        wrapper: {
-          width: 600,
-        },
-      },
-      actionbar: {
-        show: true,
-        buttons: {
-          add: {
-            text: "上传自定义证书",
-            type: "primary",
-            show: false,
-            async click() {
-              await openUploadCreateDialog();
-            },
-          },
-        },
-      },
-      tabs: {
-        name: "fromType",
-        show: true,
-      },
-      rowHandle: {
-        width: 100,
-        fixed: "right",
-        buttons: {
-          view: { show: false },
-          viewCert: {
-            order: 3,
-            title: "查看证书",
-            type: "link",
-            icon: "ph:certificate",
-            async click({ row }) {
-              await viewCert(row);
-            },
-          },
-          copy: { show: false },
-          edit: { show: false },
-          remove: {
-            order: 10,
-            show: false,
-          },
-          download: {
-            order: 9,
-            title: "下载证书",
-            type: "link",
-            icon: "ant-design:download-outlined",
-            async click({ row }) {
-              if (!row.certFile) {
-                notification.error({ message: "证书还未生成，请先运行流水线" });
-                return;
-              }
-              window.open("/api/monitor/cert/download?id=" + row.id);
-            },
-          },
-        },
-      },
-      columns: {
-        id: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          search: {
-            show: false,
-          },
-          column: {
-            width: 100,
-            editable: {
-              disabled: true,
-            },
-          },
-          form: {
-            show: false,
-          },
-        },
-        fromType: {
-          title: "来源",
-          search: {
-            show: true,
-          },
-          type: "dict-select",
-          dict: dict({
-            data: [
-              { label: "流水线", value: "pipeline" },
-              { label: "手动上传", value: "upload" },
-            ],
-          }),
-          form: {
-            show: false,
-          },
-          column: {
-            width: 100,
-            sorter: true,
-            component: {
-              color: "auto",
-            },
-            conditionalRender: false,
-          },
-          valueBuilder({ value, row, key }) {
-            if (!value) {
-              row[key] = "pipeline";
-            }
-          },
-        },
-        domains: {
-          title: "域名",
-          search: {
-            show: true,
-          },
-          type: "text",
-          form: {
-            rules: [{ required: true, message: "请输入域名" }],
-          },
-          column: {
-            width: 450,
-            sorter: true,
-            component: {
-              name: "fs-values-format",
-              color: "auto",
-            },
-          },
-        },
-        domainCount: {
-          title: "域名数量",
-          type: "number",
-          form: {
-            show: false,
-          },
-          column: {
-            width: 120,
-            sorter: true,
-            show: false,
-          },
-        },
-        expiresLeft: {
-          title: "有效天数",
-          search: {
-            show: false,
-          },
-          type: "date",
-          form: {
-            show: false,
-          },
-          column: {
-            sorter: true,
-            conditionalRender: false,
-            cellRender({ row }) {
-              const value = row.expiresTime;
-              if (!value) {
-                return "-";
-              }
-              const expireDate = dayjs(value).format("YYYY-MM-DD");
-              const leftDays = dayjs(value).diff(dayjs(), "day");
-              const color = leftDays < 20 ? "red" : "#389e0d";
-              const percent = (leftDays / 90) * 100;
-              return <a-progress title={expireDate + "过期"} percent={percent} strokeColor={color} format={(percent: number) => `${leftDays}天`} />;
-            },
-          },
-        },
-        expiresTime: {
-          title: "过期时间",
-          search: {
-            show: false,
-          },
-          type: "datetime",
-          form: {
-            show: false,
-          },
-          column: {
-            sorter: true,
-          },
-        },
-        certProvider: {
-          title: "证书颁发机构",
-          search: {
-            show: false,
-          },
-          type: "text",
-          form: {
-            show: false,
-          },
-          column: {
-            width: 200,
-          },
-        },
-        applyTime: {
-          title: "申请时间",
-          search: {
-            show: false,
-          },
-          type: "datetime",
-          form: {
-            show: false,
-          },
-          column: {
-            sorter: true,
-          },
-        },
-        "pipeline.title": {
-          title: "关联流水线",
-          search: { show: false },
-          type: "link",
-          form: {
-            show: false,
-          },
-          column: {
-            width: 350,
-            sorter: true,
-            component: {
-              on: {
-                onClick({ row }) {
-                  router.push({ path: "/certd/pipeline/detail", query: { id: row.pipelineId, editMode: "false" } });
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  };
+	const { openUploadCreateDialog, openUpdateCertDialog } = useCertUpload();
+	return {
+		crudOptions: {
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			form: {
+				labelCol: {
+					//固定label宽度
+					span: null,
+					style: {
+						width: "100px",
+					},
+				},
+				col: {
+					span: 22,
+				},
+				wrapper: {
+					width: 600,
+				},
+			},
+			actionbar: {
+				show: true,
+				buttons: {
+					add: {
+						text: "上传自定义证书",
+						type: "primary",
+						show: false,
+						async click() {
+							await openUploadCreateDialog();
+						},
+					},
+				},
+			},
+			tabs: {
+				name: "fromType",
+				show: true,
+			},
+			rowHandle: {
+				width: 100,
+				fixed: "right",
+				buttons: {
+					view: { show: false },
+					viewCert: {
+						order: 3,
+						title: t("certd.viewCert.title"),
+						type: "link",
+						icon: "ph:certificate",
+						async click({ row }) {
+							await viewCert(row);
+						},
+					},
+					copy: { show: false },
+					edit: { show: false },
+					remove: {
+						order: 10,
+						show: false,
+					},
+					download: {
+						order: 9,
+						title: t("certd.download.title"),
+						type: "link",
+						icon: "ant-design:download-outlined",
+						async click({ row }) {
+							if (!row.certFile) {
+								notification.error({ message: t("certd.certificateNotGenerated") });
+								return;
+							}
+							window.open("/api/monitor/cert/download?id=" + row.id);
+						},
+					},
+
+				},
+			},
+			columns: {
+				id: {
+					title: "ID",
+					key: "id",
+					type: "number",
+					search: {
+						show: false,
+					},
+					column: {
+						width: 100,
+						editable: {
+							disabled: true,
+						},
+					},
+					form: {
+						show: false,
+					},
+				},
+				fromType: {
+					title: "来源",
+					search: {
+						show: true,
+					},
+					type: "dict-select",
+					dict: dict({
+						data: [
+							{ label: "流水线", value: "pipeline" },
+							{ label: "手动上传", value: "upload" },
+						],
+					}),
+					form: {
+						show: false,
+					},
+					column: {
+						width: 100,
+						sorter: true,
+						component: {
+							color: "auto",
+						},
+						conditionalRender: false,
+					},
+					valueBuilder({ value, row, key }) {
+						if (!value) {
+							row[key] = "pipeline";
+						}
+					},
+				},
+				domains: {
+					title: "域名",
+					search: {
+						show: true,
+					},
+					type: "text",
+					form: {
+						rules: [{ required: true, message: "请输入域名" }],
+					},
+					column: {
+						width: 450,
+						sorter: true,
+						component: {
+							name: "fs-values-format",
+							color: "auto",
+						},
+					},
+				},
+				domainCount: {
+					title: "域名数量",
+					type: "number",
+					form: {
+						show: false,
+					},
+					column: {
+						width: 120,
+						sorter: true,
+						show: false,
+					},
+				},
+				expiresLeft: {
+					title: "有效天数",
+					search: {
+						show: false,
+					},
+					type: "date",
+					form: {
+						show: false,
+					},
+					column: {
+						sorter: true,
+						conditionalRender: false,
+						cellRender({ row }) {
+							const value = row.expiresTime;
+							if (!value) {
+								return "-";
+							}
+							const expireDate = dayjs(value).format("YYYY-MM-DD");
+							const leftDays = dayjs(value).diff(dayjs(), "day");
+							const color = leftDays < 20 ? "red" : "#389e0d";
+							const percent = (leftDays / 90) * 100;
+							return <a-progress title={expireDate + "过期"} percent={percent} strokeColor={color} format={(percent: number) => `${leftDays}天`} />;
+						},
+					},
+				},
+				expiresTime: {
+					title: "过期时间",
+					search: {
+						show: false,
+					},
+					type: "datetime",
+					form: {
+						show: false,
+					},
+					column: {
+						sorter: true,
+					},
+				},
+				certProvider: {
+					title: "证书颁发机构",
+					search: {
+						show: false,
+					},
+					type: "text",
+					form: {
+						show: false,
+					},
+					column: {
+						width: 200,
+					},
+				},
+				applyTime: {
+					title: "申请时间",
+					search: {
+						show: false,
+					},
+					type: "datetime",
+					form: {
+						show: false,
+					},
+					column: {
+						sorter: true,
+					},
+				},
+				"pipeline.title": {
+					title: "关联流水线",
+					search: { show: false },
+					type: "link",
+					form: {
+						show: false,
+					},
+					column: {
+						width: 350,
+						sorter: true,
+						component: {
+							on: {
+								onClick({ row }) {
+									router.push({ path: "/certd/pipeline/detail", query: { id: row.pipelineId, editMode: "false" } });
+								},
+							},
+						},
+					},
+				},
+			},
+		},
+	};
 }
diff --git a/packages/ui/certd-client/src/views/certd/monitor/cert/index.vue b/packages/ui/certd-client/src/views/certd/monitor/cert/index.vue
index ad696cb4..d2bf6ea7 100644
--- a/packages/ui/certd-client/src/views/certd/monitor/cert/index.vue
+++ b/packages/ui/certd-client/src/views/certd/monitor/cert/index.vue
@@ -1,30 +1,33 @@
 <template>
-  <fs-page>
-    <template #header>
-      <div class="title">
-        证书仓库
-        <span class="sub">从流水线生成的证书</span>
-      </div>
-    </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-  </fs-page>
+	<fs-page>
+		<template #header>
+			<div class="title">
+				{{ t("certd.certificateRepo.title") }}
+				<span class="sub">{{ t("certd.certificateRepo.sub") }}</span>
+			</div>
+		</template>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+	</fs-page>
 </template>
 
 <script lang="ts" setup>
 import { onActivated, onMounted } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 defineOptions({
-  name: "CertStore",
+	name: "CertStore",
 });
 const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
 
 // 页面打开后获取列表数据
 onMounted(() => {
-  crudExpose.doRefresh();
+	crudExpose.doRefresh();
 });
 onActivated(() => {
-  crudExpose.doRefresh();
+	crudExpose.doRefresh();
 });
 </script>