First translation step

packages/ui/certd-client/src/components/tutorial/index.vue

@@ -16,18 +16,23 @@ const slots = defineSlots();
 <template>
   <div class="tutorial-button pointer" @click="open">
     <template v-if="!slots.default">
-      <fs-icon v-if="showIcon === false" icon="ant-design:question-circle-outlined" class="mr-0.5"></fs-icon>
-      <div class="hidden md:block">使用教程</div>
+      <fs-icon
+        v-if="showIcon === false"
+        icon="ant-design:question-circle-outlined"
+        class="mr-0.5"
+      ></fs-icon>
+      <div class="hidden md:block">{{$t('tutorial.title')}}</div>
     </template>
     <slot></slot>
     <a-modal v-model:open="openedRef" class="tutorial-modal" width="90%">
-      <template #title> 使用教程 </template>
+      <template #title>{{$t('tutorial.title')}}</template>
       <tutorial-steps v-if="openedRef" />
       <template #footer></template>
     </a-modal>
   </div>
 </template>
 
+
 <style lang="less">
 .tutorial-modal {
   top: 50px;

packages/ui/certd-client/src/components/tutorial/simple-steps.vue

@@ -4,6 +4,9 @@
 
 <script lang="ts" setup>
 import { useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 type Step = {
   title: string;
@@ -13,15 +16,9 @@ type Step = {
 import { ref } from "vue";
 
 const steps = ref<Step[]>([
-  {
-    title: "创建证书流水线"
-  },
-  {
-    title: "添加部署任务"
-  },
-  {
-    title: "定时运行"
-  }
+  { title: t('certd.steps.createPipeline') },
+  { title: t('certd.steps.addTask') },
+  { title: t('certd.steps.scheduledRun') }
 ]);
 
 const router = useRouter();

packages/ui/certd-client/src/components/vip-button/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="!settingStore.isComm || userStore.isAdmin" class="layout-vip isPlus" @click="openUpgrade">
+  <div
+    v-if="!settingStore.isComm || userStore.isAdmin"
+    class="layout-vip isPlus"
+    @click="openUpgrade"
+  >
     <contextHolder />
     <fs-icon icon="mingcute:vip-1-line" :title="text.title" />
 
@@ -20,6 +24,9 @@ import { useSettingStore } from "/@/store/settings";
 import { useRouter } from "vue-router";
 import { useUserStore } from "/@/store/user";
 import { mitter } from "/@/utils/util.mitt";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
 
 const settingStore = useSettingStore();
 const props = withDefaults(
@@ -39,56 +46,56 @@ const text = computed<Text>(() => {
   const map = {
     isComm: {
       comm: {
-        name: `${vipLabel}已开通`,
-        title: "到期时间：" + expireTime.value,
+        name: t("vip.comm.name", { vipLabel }),
+        title: t("vip.comm.title", { expire: expireTime.value }),
       },
       button: {
-        name: `${vipLabel}已开通`,
-        title: "到期时间：" + expireTime.value,
+        name: t("vip.comm.name", { vipLabel }),
+        title: t("vip.comm.title", { expire: expireTime.value }),
       },
       icon: {
         name: "",
-        title: `${vipLabel}已开通`,
+        title: t("vip.comm.name", { vipLabel }),
       },
       nav: {
-        name: `${vipLabel}`,
-        title: "到期时间：" + expireTime.value,
+        name: t("vip.comm.nav", { vipLabel }),
+        title: t("vip.comm.title", { expire: expireTime.value }),
       },
     },
     isPlus: {
       comm: {
-        name: "商业版功能",
-        title: "升级商业版，获取商业授权",
+        name: t("vip.plus.name"),
+        title: t("vip.plus.title"),
       },
       button: {
-        name: `${vipLabel}已开通`,
-        title: "到期时间：" + expireTime.value,
+        name: t("vip.comm.name", { vipLabel }),
+        title: t("vip.comm.title", { expire: expireTime.value }),
       },
       icon: {
         name: "",
-        title: `${vipLabel}已开通`,
+        title: t("vip.comm.name", { vipLabel }),
       },
       nav: {
-        name: `${vipLabel}`,
-        title: "到期时间：" + expireTime.value,
+        name: t("vip.comm.nav", { vipLabel }),
+        title: t("vip.comm.title", { expire: expireTime.value }),
       },
     },
     free: {
       comm: {
-        name: "商业版功能",
-        title: "升级商业版，获取商业授权",
+        name: t("vip.free.comm.name"),
+        title: t("vip.free.comm.title"),
       },
       button: {
-        name: "专业版功能",
-        title: "升级专业版，享受更多VIP特权",
+        name: t("vip.free.button.name"),
+        title: t("vip.free.button.title"),
       },
       icon: {
         name: "",
-        title: "专业版功能",
+        title: t("vip.free.button.name"),
       },
       nav: {
-        name: "基础版",
-        title: "升级专业版，享受更多VIP特权",
+        name: t("vip.free.nav.name"),
+        title: t("vip.free.nav.title"),
       },
     },
   };
@@ -101,6 +108,7 @@ const text = computed<Text>(() => {
   }
 });
 
+
 const expireTime = computed(() => {
   if (settingStore.isPlus) {
     return dayjs(settingStore.plusInfo.expireTime).format("YYYY-MM-DD");