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();