diff --git a/electron/welcome/assets/svgs/upload-loading.svg b/electron/welcome/assets/svgs/upload-loading.svg
new file mode 100644
index 0000000000000000000000000000000000000000..328f23c83d377e6c387e1dbaf63967e34e6b1855
--- /dev/null
+++ b/electron/welcome/assets/svgs/upload-loading.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1749279175697" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17176" data-spm-anchor-id="a313x.search_index.0.i8.435a3a81HRMhUI" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><path d="M512 102.4a409.6 409.6 0 1 0 409.6 409.6h102.4c0 282.7776-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0v102.4z" fill="#ffffff" p-id="17177"></path></svg>
\ No newline at end of file
diff --git a/electron/welcome/index.vue b/electron/welcome/index.vue
index be1256640abea738c21c2fe4a8f3e53253e85deb..84be0920d406c27a32660a274236ddbe28aabafc 100644
--- a/electron/welcome/index.vue
+++ b/electron/welcome/index.vue
@@ -1,9 +1,219 @@
 <template>
-    
+  <div
+    class="welcome-container"
+    :style="{ backgroundImage: `url(${welcomeBgImage})` }"
+  >
+    <img class="close-btn" :src="closeIcon" alt="" @click="handleClose" />
+    <div v-if="avtivePage === 'welcome'" class="welcome-page">
+      <div class="welcome-title">
+        {{ $t('welcome.welcomeText') }}
+        <img :src="logoImage" alt="" />
+      </div>
+      <div class="welcome-detail-content">
+        <div class="welcome-detail-content-item" :class = "isLinux?'':'item-disabled'" @click="handleLocalDeploy">
+          <img :src="localDeployIcon" alt="" />
+          <span class="welcome-detail-content-item-text">{{ $t('welcome.localDeploy') }}</span>
+        </div>
+        <div class="welcome-detail-content-item" @click="handleOnlineService">
+          <img :src="onlineServiceIcon" alt="" />
+          <span class="welcome-detail-content-item-text">{{ $t('welcome.onlineService') }}</span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="welcome-detail">
+      <div v-if="avtivePage === 'localDeploy'" class="local-deploy">
+        <localDeploy :back="handleBack" />
+      </div>
+      <div v-if="avtivePage === 'onlineService'" class="online-service">
+        <OnlineService :back="handleBack" />
+      </div>
+    </div>
+  </div>
 </template>
+
 <script lang="ts" setup>
+import { computed, onMounted, Ref } from 'vue';
+import 'element-plus/dist/index.css';
+import logoImage from './assets/images/logo-euler-copilot.png';
+import welcomeBgImage from './assets/images/welcome_bg.webp';
+import localDeployIcon from './assets/svgs/local_deploy.svg';
+import onlineServiceIcon from './assets/svgs/online_service.svg';
+import closeIcon from './assets/svgs/close.svg';
+import { ref } from 'vue';
+import OnlineService from './onlineService.vue';
+import localDeploy from './localDeploy.vue';
+
+type activePageType = 'localDeploy' | 'onlineService' | 'welcome';
+const avtivePage: Ref<activePageType> = ref('welcome');
+  const platform = ref<'linux' | 'darwin' | 'windows' | 'unknown'>('unknown');
+
+onMounted(() => {
+  if (window.eulercopilotWelcome && window.eulercopilotWelcome.system) {
+    platform.value = window.eulercopilotWelcome.system.platform as 'linux' | 'darwin'| 'unknown';
+  } else {
+    const userAgent = navigator.userAgent;
+    if (userAgent.includes('Linux')) platform.value = 'linux';
+    else if (userAgent.includes('Mac')) platform.value = 'darwin';
+  }
+  console.log('系统平台:', platform.value);
+});
+
+const isLinux = computed(() => ['linux', 'darwin'].includes(platform.value));
+// 处理本地部署选择
+const handleLocalDeploy = async () => {
+  if(!isLinux.value){
+    return;
+  }
+  console.log('选择本地部署');
+  avtivePage.value = 'localDeploy';
+};
+
+// 处理在线服务选择
+const handleOnlineService = async () => {
+  console.log('选择在线服务');
+  avtivePage.value = 'onlineService';
+};
 
+const handleBack = () => {
+  console.log('返回到欢迎页面');
+  avtivePage.value = 'welcome';
+};
+
+const handleClose = async () => {
+  console.log('关闭欢迎页面');
+  try {
+    await window.eulercopilotWelcome?.welcome.cancel();
+  } catch (error) {
+    console.error('完成欢迎流程失败:', error);
+  }
+};
+
+onMounted(() => {
+  console.log('欢迎页面已加载');
+});
 </script>
-<style lang="scss" scoped>
 
-</style>
\ No newline at end of file
+<style lang="scss">
+.welcome-container {
+  height: 100vh;
+  font-size: 24px;
+  color: #333;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .close-btn {
+    position: absolute;
+    right: 24px;
+    top: 28px;
+    cursor: pointer;
+  }
+
+  .welcome-page {
+    .welcome-title {
+      display: flex;
+      justify-content: center;
+      text-align: center;
+      font-size: 28px;
+      font-weight: 700;
+      line-height: 36px;
+      font-family: 'HarmonyOS Sans SC';
+      margin-bottom: 72px;
+
+      img {
+        width: 330px;
+      }
+    }
+
+    .welcome-detail-content {
+      display: flex;
+      justify-content: center;
+      gap: 24px;
+
+      .welcome-detail-content-item {
+        border-radius: 16px;
+        background-color: rgba(255, 255, 255, 0.7);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 270px;
+        height: 214px;
+        cursor: pointer;
+
+        &:hover:not(.item-disabled) {
+          border: 2px solid rgb(99, 149, 253);
+          width: 266px;
+          height: 210px;
+        }
+
+        img {
+          margin-bottom: 32px;
+          width: 72px;
+        }
+
+        .welcome-detail-content-item-text {
+          font-weight: 700;
+          font-family: 'HarmonyOS  Sans SC';
+          font-size: 20px;
+          line-height: 30px;
+        }
+      }
+
+      .item-disabled{
+        background-color: rgba(212, 212, 212, 0.7);
+        cursor: not-allowed !important;
+        
+      }
+    }
+  }
+
+  .welcome-detail {
+    width: 100vw;
+    height: 100vh;
+    background-color: #ffffffee;
+
+    .welcome-detail-title {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      margin: 24px 0 24px 24px;
+
+      .back-btn {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        img {
+          width: 16px;
+          height: 16px;
+          margin-right: 5px;
+        }
+        .back-btn-text {
+          color: rgb(78, 88, 101);
+          font-size: 14px;
+          font-family: 'HarmonyOS Sans SC';
+          line-height: 24px;
+        }
+      }
+      .divider {
+        display: inline-block;
+        width: 1px;
+        height: 16px;
+        background-color: rgb(233, 229, 239);
+        margin: 0 8px;
+      }
+      .welcome-detail-title-text {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+        font-family: 'HarmonyOS Sans SC';
+      }
+    }
+  }
+}
+</style>
diff --git a/electron/welcome/lang/en.ts b/electron/welcome/lang/en.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b87e359fb581758d6a1ae8a6df515e78eb5bab38
--- /dev/null
+++ b/electron/welcome/lang/en.ts
@@ -0,0 +1,31 @@
+export default {
+  welcome: {
+    welcomeText: 'Welcome to use',
+    localDeploy: 'Back-end local deployment',
+    onlineService: 'Back-end online services',
+    back: 'Back',
+    confirm: 'Ok',
+    pleaseInput: 'Please Input',
+    validUrl: 'Please enter a valid URL',
+    validationFailure:'Validation failure',
+},
+  localDeploy: {
+    model: 'Large model',
+    embeddingModel: 'Embedding Model',
+    url: 'URL',
+    modelName: 'ModelName',
+    apiKey: 'API_Key',
+    copyTip: 'Reuse the same link for large models',
+    installation: 'Installation',
+    dataBase: 'Database services',
+    authHub: 'AuthHub services',
+    intelligence: 'Intelligence services',
+    serviceLaunch: 'Configuration File Initialization & Service Startup',
+    stopInstall: 'Stop installation',
+    complete: 'Complete',
+    retry: 'Retry',
+  },
+  onlineService: {
+    serviceUrl: 'Backend Service Links',
+  },
+};
diff --git a/electron/welcome/lang/index.ts b/electron/welcome/lang/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..736df67cb4b0bec3e07de197972c362b5d6c6eea
--- /dev/null
+++ b/electron/welcome/lang/index.ts
@@ -0,0 +1,16 @@
+import { createI18n } from 'vue-i18n';
+// 语言包
+import zh from './zh';
+import en from './en';
+
+const locale = 'zh';
+
+const i18n_welcome = createI18n({
+  legacy: false, // 设置为 false，启用 composition API 模式
+  locale,
+  messages: {
+    zh,
+    en,
+  },
+});
+export default i18n_welcome;
\ No newline at end of file
diff --git a/electron/welcome/lang/zh.ts b/electron/welcome/lang/zh.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9bd17c7984b052248728babd501c058cb2fe8be5
--- /dev/null
+++ b/electron/welcome/lang/zh.ts
@@ -0,0 +1,31 @@
+export default {
+  welcome: {
+    welcomeText: '欢迎使用',
+    localDeploy: '后端本地部署',
+    onlineService: '后端在线服务',
+    back: '返回',
+    confirm: '确定',
+    pleaseInput: '请输入',
+    validUrl: '请输入有效的URL',
+    validationFailure:'检验失败',
+},
+  localDeploy: {
+    model: '大模型',
+    embeddingModel: 'Embedding模型',
+    url: 'URL',
+    modelName: '模型名称',
+    apiKey: 'API_Key',
+    copyTip: '复用大模型相同链接',
+    installation: '安装中',
+    dataBase: '数据库服务',
+    authHub: 'AuthHub服务',
+    intelligence: 'Intelligence服务',
+    serviceLaunch: '配置文件初始化 & 服务启动',
+    stopInstall: '停止安装',
+    complete: '完成',
+    retry: '重试',
+  },
+  onlineService: {
+    serviceUrl: '后端服务链接',
+  },
+};
diff --git a/electron/welcome/localDeploy.vue b/electron/welcome/localDeploy.vue
index 679f983557b35327c7b3cd65dfc58e1d67b46edd..7f16531f7f6ebd923848ca1030ec34678d163d09 100644
--- a/electron/welcome/localDeploy.vue
+++ b/electron/welcome/localDeploy.vue
@@ -1,137 +1,241 @@
 <template>
-    <el-form ref="ruleFormRef" label-position="left" label-width="auto" :model="ruleForm" :rules="rules"
-        class="model-ruleForm" style="max-width: 600px">
-        <div class="model-title">
-            大模型
-            <img :src="successIcon" alt="success" width="16" height="16" />
-        </div>
-        <el-form-item label="URL" prop="url" label-position="left">
-            <el-input placeholder="请输入" v-model="ruleForm.url" />
-        </el-form-item>
-        <el-form-item label="模型名称" prop="modelName" label-position="left">
-            <el-input placeholder="请输入" v-model="ruleForm.modelName" />
-        </el-form-item>
-        <el-form-item label="API_Key" prop="apiKey" label-position="left">
-            <el-input placeholder="请输入" v-model="ruleForm.apiKey" />
-        </el-form-item>
+  <div class="welcome-detail-title">
+    <div @click="handleBack" class="back-btn">
+      <img :src="leftArrowIcon" alt="" />
+      <span class="back-btn-text">{{ $t('welcome.back') }}</span>
+    </div>
+    <span class="divider"></span>
+    <div class="welcome-detail-title-text">{{ $t('welcome.localDeploy') }}</div>
+  </div>
+  <div v-if="!isTimeLine">
+    <el-form
+      ref="ruleFormRef"
+      label-position="left"
+      label-width="auto"
+      :model="ruleForm"
+      :rules="rules"
+      validate-on-input
+      class="model-ruleForm"
+      style="max-width: 600px"
+    >
+      <div class="model-title">
+        {{ $t('localDeploy.model') }}
+        <img :src="successIcon" alt="success" width="16" height="16" />
+      </div>
+      <el-form-item :label="$t('localDeploy.url')" prop="url" label-position="left">
+        <el-input :placeholder="$t('welcome.pleaseInput')" v-model="ruleForm.url" />
+      </el-form-item>
+      <el-form-item :label="$t('localDeploy.modelName')" prop="modelName" label-position="left">
+        <el-input :placeholder="$t('welcome.pleaseInput')" v-model="ruleForm.modelName" />
+      </el-form-item>
+      <el-form-item :label="$t('localDeploy.apiKey')" prop="apiKey" label-position="left">
+        <el-input :placeholder="$t('welcome.pleaseInput')" v-model="ruleForm.apiKey" />
+      </el-form-item>
     </el-form>
-    <el-form ref="embeddingRuleFormRef" label-position="left" label-width="auto" :model="embeddingRuleForm" :rules="rules"
-    class="model-ruleForm" style="max-width: 600px">
-        <div class="model-title">
-            Embedding模型
-            <img :src="successIcon" alt="success" width="16" height="16" />
-        </div>
-        <el-form-item label="URL" prop="url" label-position="left">
-            <el-input placeholder="请输入" v-model="embeddingRuleForm.url">
-                <template #suffix>
-                    <el-icon class="el-input__icon" @click="copyText(ruleForm)" >
-                        <img :src="copyIcon" alt="copy" width="16" height="16" />
-                    </el-icon>
-                </template>
-            </el-input>
-        </el-form-item>
-            <el-form-item label="模型名称" prop="modelName" label-position="left">
-                <el-input placeholder="请输入" v-model="embeddingRuleForm.modelName" />
-            </el-form-item>
-            <el-form-item label="API_Key" prop="apiKey" label-position="left">
-                <el-input placeholder="请输入" v-model="embeddingRuleForm.apiKey" />
-            </el-form-item>
+    <el-form
+      ref="embeddingRuleFormRef"
+      label-position="left"
+      label-width="auto"
+      :model="embeddingRuleForm"
+      :rules="rules"
+      class="model-ruleForm"
+      style="max-width: 600px"
+    >
+      <div class="model-title">
+        {{ $t('localDeploy.embeddingModel') }}
+        <img :src="successIcon" alt="success" width="16" height="16" />
+      </div>
+      <el-form-item :label="$t('localDeploy.url')" prop="url" label-position="left">
+        <el-input placeholder="请输入" v-model="embeddingRuleForm.url">
+          <template #suffix>
+            <el-tooltip
+              :content="$t('localDeploy.copyTip')"
+              placement="top"
+              effect="light"
+              popper-class="url-icon-tooltip"
+            >
+              <el-icon class="el-input__icon" @click="copyText(ruleForm)">
+                <img :src="copyIcon" alt="copy" width="16" height="16" />
+              </el-icon>
+            </el-tooltip>
+          </template>
+        </el-input>
+      </el-form-item>
+        <el-form-item :label="$t('localDeploy.modelName')" prop="modelName" label-position="left">
+          <el-input :placeholder="$t('welcome.pleaseInput')" v-model="embeddingRuleForm.modelName" />
+      </el-form-item>
+      <el-form-item :label="$t('localDeploy.apiKey')" prop="apiKey" label-position="left">
+        <el-input :placeholder="$t('welcome.pleaseInput')" v-model="embeddingRuleForm.apiKey" />
+      </el-form-item>
     </el-form>
     <div class="submit-btn">
-        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
+      <el-button
+        type="primary"
+        :disabled="isConfirmDisabled"
+        @click="handleConfirm"
+      >
+        {{ $t('welcome.confirm') }}
+      </el-button>
     </div>
+  </div>
+  <div v-else>
+    <TimeLine />
+  </div>
 </template>
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import copyIcon from './assets/svgs/copy_icon.svg'
-import successIcon from './assets/svgs/success.svg'
+import { reactive, ref, watch } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+import copyIcon from './assets/svgs/copy_icon.svg';
+import successIcon from './assets/svgs/success.svg';
+import TimeLine from './timeLine.vue';
+import leftArrowIcon from './assets/svgs/left_arrow.svg';
+import i18n from './lang/index';
+
+const props = withDefaults(
+  defineProps<{
+    back: Function;
+  }>(),
+  {},
+);
 
 interface RuleForm {
-    url: string;
-    modelName: string;
-    apiKey: string;
+  url: string;
+  modelName: string;
+  apiKey: string;
 }
 
 const ruleForm = reactive<RuleForm>({
-    url: '',
-    modelName: '',
-    apiKey: '',
-})
+  url: '',
+  modelName: '',
+  apiKey: '',
+});
 const embeddingRuleForm = reactive<RuleForm>({
-    url: '',
-    modelName: '',
-    apiKey: '',
-})
+  url: '',
+  modelName: '',
+  apiKey: '',
+});
 
-const ruleFormRef = ref<FormInstance>()
+const ruleFormRef = ref<FormInstance>();
 
-const embeddingRuleFormRef = ref<FormInstance>()
+const embeddingRuleFormRef = ref<FormInstance>();
 
+const isConfirmDisabled = ref(true);
+const isTimeLine = ref(false);
 
 const rules = reactive<FormRules<RuleForm>>({
-    url: [
-        { required: true, message: '请输入后端服务链接', trigger: 'blur' },
-    ],
-    modelName: [
-        { required: true, message: '请输入模型名称', trigger: 'blur' },
-    ],
-    apiKey: [
-        { required: true, message: '请输入API_Key', trigger: 'blur' },
-    ],
-})
+  url: [
+    { required: true, message: i18n.global.t('welcome.pleaseInput')+i18n.global.t('localDeploy.url'), trigger: ['change','blur'] },
+    { type: 'url', message: i18n.global.t('welcome.validUrl'), trigger: 'blur' },
+  ],
+  modelName: [{ required: true, message: i18n.global.t('welcome.pleaseInput')+i18n.global.t('localDeploy.modelName'), trigger: ['change','blur'] }],
+  apiKey: [{ required: true, message: i18n.global.t('welcome.pleaseInput')+i18n.global.t('localDeploy.apiKey'), trigger: ['change','blur'] }],
+});
+
+
+watch(
+  [() => ruleForm, () => embeddingRuleForm],
+  ([newRuleForm, newEmbeddingRuleForm]) => {
+    // 检查所有必填字段是否都有值
+    const isRuleFormValid =
+      newRuleForm.url && newRuleForm.modelName && newRuleForm.apiKey;
+    const isEmbeddingRuleFormValid =
+      newEmbeddingRuleForm.url &&
+      newEmbeddingRuleForm.modelName &&
+      newEmbeddingRuleForm.apiKey;
+
+    // 如果两个表单都有效，则启用按钮
+    isConfirmDisabled.value = !(isRuleFormValid && isEmbeddingRuleFormValid);
+  },
+  { immediate: true, deep: true }, // 立即执行一次初始检查
+);
 
 const copyText = (ruleForm: RuleForm) => {
-    embeddingRuleForm.url = ruleForm.url
-    embeddingRuleForm.modelName = ruleForm.modelName
-    embeddingRuleForm.apiKey = ruleForm.apiKey
-    console.log(embeddingRuleForm)
-}
+  embeddingRuleForm.url = ruleForm.url;
+  embeddingRuleForm.apiKey = ruleForm.apiKey;
+};
+const validateForm = async () => {
+  const [ruleFormValid, ruleFormFields] = await new Promise<[boolean, any]>(
+    (resolve) => {
+      ruleFormRef.value?.validate((valid, fields) => resolve([valid, fields]));
+    },
+  );
 
-const handleConfirm = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    await formEl.validate((valid, fields) => {
-        if (!valid) {
-            console.error('表单验证失败:', fields);
-            return;
-        }
-        console.log('表单验证成功:', ruleForm);
-    })
-
-    // 这里可以添加处理逻辑，比如保存链接或发送请求
-    console.log('后端服务链接:', ruleForm.url);
-    // 关闭当前页面或执行其他操作
-}
+  const [embeddingRuleFormValid, embeddingRuleFormFields] = await new Promise<
+    [boolean, any]
+  >((resolve) => {
+    embeddingRuleFormRef.value?.validate((valid, fields) =>
+      resolve([valid, fields]),
+    );
+  });
+
+  if (!ruleFormValid || !embeddingRuleFormValid) {
+    return false;
+  }
+  return true;
+};
+
+const handleConfirm = async () => {
+  if (!ruleFormRef.value || !embeddingRuleFormRef.value) return;
+  const isValid = await validateForm();
+  if (!isValid) {
+    return;
+  }
+  isTimeLine.value = true;
+
+  console.log('表单验证成功:', { ruleForm, embeddingRuleForm });
+};
+const handleBack = () => {
+    if(isTimeLine.value){
+        isTimeLine.value = false;
+    }else{
+        props.back();
+    }
+};
 
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
+/* 自定义el-tooltip的背景色为绿色 */
+.url-icon-tooltip.el-popper.is-light {
+  background-color: rgb(244,246,250) !important;
+  border-color: rgb(223,229,239) !important;
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
+}
+.url-icon-tooltip.el-popper.is-light .el-popper__arrow::before {
+  background-color: rgb(244,246,250) !important;
+  border-color: rgb(223,229,239) !important;
+  border-left-color: transparent !important;
+  border-top-color: transparent !important;
+}
 .model-ruleForm {
-    margin: 0 48px 0 40px;
-    .model-title{
-        font-weight: 700;
-        font-size: 16px;
-        line-height: 24px;
-        margin: 32px 0 16px 8px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-    .el-input__icon{
-        cursor: pointer;
-    }
+  margin: 0 48px 0 40px;
+  .model-title {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 24px;
+    margin: 32px 0 16px 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .el-input__icon {
+    cursor: pointer;
+  }
 }
 .submit-btn {
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    bottom: 24px;
-    button {
-        padding: 8px 25px;
-    }
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  bottom: 24px;
+  button {
+    padding: 8px 25px;
+  }
+}
+.el-form-item:not(.is-error) .el-input__wrapper {
+  background-color: transparent !important;
 }
-.el-form-item.is-error .el-input__wrapper{
-    background-color: rgb(247,193,193);
+.el-form-item.is-error .el-input__wrapper {
+  background-color: rgb(247, 193, 193);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/electron/welcome/main.ts b/electron/welcome/main.ts
index 0f4151f629424a99858569fe4578150ae4eeaaf7..79899ab338594979ae5c436844dce24d9db13e91 100644
--- a/electron/welcome/main.ts
+++ b/electron/welcome/main.ts
@@ -2,9 +2,13 @@
 import type { App } from 'vue';
 import { createApp } from 'vue';
 import WelcomeComponent from './index.vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import i18n_welcome from './lang';
 
 // 创建 Vue 应用并挂载
 const app: App = createApp(WelcomeComponent);
+app.use(ElementPlus).use(i18n_welcome);
 app.mount('#app');
 
 console.log('Welcome Vue app initialized');
diff --git a/electron/welcome/onlineService.vue b/electron/welcome/onlineService.vue
index 0adac7ca773ce099da03a42e88ed1e32f910158b..1aaa5ae2287f6134a201a41c0ad065e1caec31f7 100644
--- a/electron/welcome/onlineService.vue
+++ b/electron/welcome/onlineService.vue
@@ -1,82 +1,133 @@
 <template>
-    <el-form ref="ruleFormRef" label-position="left" label-width="auto" :model="ruleForm" :rules="rules"
-        class="online-ruleForm" style="max-width: 600px">
-        <el-form-item label="后端服务链接" prop="url" label-position="left">
-            <el-input placeholder="请输入" v-model="ruleForm.url" @blur="checkUrlValid" />
-        </el-form-item>
-    </el-form>
-    <div class="submit-btn">
-        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确定</el-button>
+  <div class="welcome-detail-title">
+    <div @click="handleBack" class="back-btn">
+      <img :src="leftArrowIcon" alt="" />
+      <span class="back-btn-text">{{ $t('welcome.back') }}</span>
     </div>
+    <span class="divider"></span>
+    <div class="welcome-detail-title-text">{{ $t('welcome.localDeploy') }}</div>
+  </div>
+  <el-form
+    ref="ruleFormRef"
+    label-position="left"
+    label-width="auto"
+    :model="ruleForm"
+    :rules="rules"
+    class="online-ruleForm"
+    style="max-width: 600px"
+  >
+    <el-form-item :label="$t('onlineService.serviceUrl')" prop="url" label-position="left">
+      <el-input
+        :placeholder="$t('welcome.pleaseInput')"
+        v-model="ruleForm.url"
+        @change="handleUrlChange"
+        @blur="handleUrlBlur"
+      />
+    </el-form-item>
+  </el-form>
+  <div class="submit-btn">
+    <el-button type="primary" :disabled="isConfirmDisabled" @click="handleConfirm(ruleFormRef)">
+      {{ $t('welcome.confirm') }}
+    </el-button>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
+import { reactive, ref, onMounted } from 'vue';
+import type { FormInstance, FormRules } from 'element-plus';
+import leftArrowIcon from './assets/svgs/left_arrow.svg';
+import i18n from './lang/index';
+
+const props = withDefaults(
+  defineProps<{
+    back: Function;
+  }>(),
+  {},
+);
 
 interface RuleForm {
-    url: string;
+  url: string;
 }
 
 const ruleForm = reactive<RuleForm>({
-    url: '',
-})
-const ruleFormRef = ref<FormInstance>()
+  url: '',
+});
+const ruleFormRef = ref<FormInstance>();
 
+const checkUrlValid = (_rule, value, callback) => {
+  // 这里校验各个url链接
+  window.eulercopilotWelcome.config.validateServer(value).then(({isValid,error}) => {
+    if (!isValid) {
+      callback(error);
+    } else {
+      callback();
+    }
+  }).catch((err) => {
+    callback(i18n.global.t('welcome.validationFailure'),err);
+  });
+};
 const rules = reactive<FormRules<RuleForm>>({
-    url: [
-        { required: true, message: '请输入后端服务链接', trigger: 'blur' },
-        { type: 'url', message: '请输入有效的URL', trigger: ['blur', 'change'] },
-    ],
-})
+  url: [
+    { required: true, message:i18n.global.t('welcome.pleaseInput')+i18n.global.t('onlineService.serviceUrl') , trigger: ['change','blur'] },
+    { type: 'url', message: i18n.global.t('welcome.validUrl'), trigger: ['blur'] },
+    { validator: checkUrlValid, trigger: ['blur'] },
+  ],
+});
 
-const urlStatus = ref<'idle' | 'checking' | 'valid' | 'invalid' | 'error'>('idle')
+const isConfirmDisabled = ref(true);
 
-const checkUrlValid = async () => {
-    if (!ruleForm.url) return;
-    urlStatus.value = 'checking'
-    try {
-        const response = await fetch(ruleForm.url, { method: 'HEAD', mode: 'cors' })
-        if (response.status === 404) {
-            urlStatus.value = 'invalid'
-            console.error('链接返回404，无法访问')
-        } else {
-            urlStatus.value = 'valid'
-            console.log('链接可访问')
-        }
-    } catch (e) {
-        urlStatus.value = 'error'
-        console.error('网络错误或CORS/CSP限制，无法访问链接')
-    }
-}
+const handleUrlChange = () => {
+  if (!ruleFormRef.value) return;
+  ruleFormRef.value.validate((valid) => {
+    isConfirmDisabled.value = !valid;
+  });
+};
+
+const handleUrlBlur = () => {
+  handleUrlChange();
+};
+
+onMounted(() => {
+  // 组件挂载后进行一次表单验证
+  if (ruleFormRef.value && ruleForm.url) {
+    handleUrlChange();
+  }
+});
 
 const handleConfirm = async (formEl: FormInstance | undefined) => {
-    if (!formEl) return;
-    await formEl.validate((valid, fields) => {
-        if (!valid) {
-            console.error('表单验证失败:', fields);
-            return;
-        }
-        console.log('表单验证成功:', ruleForm);
-    })
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (!valid) {
+      console.error('表单验证失败:', fields);
+      return;
+    }
+    console.log('表单验证成功:', ruleForm);
+    window.eulercopilotWelcome.config.setProxyUrl(ruleForm.url);
+  });
+};
 
-    // 这里可以添加处理逻辑，比如保存链接或发送请求
-    console.log('后端服务链接:', ruleForm.url);
-    // 关闭当前页面或执行其他操作
-}
+const handleBack = () => {
+  props.back();
+};
 </script>
 <style lang="scss" scoped>
 .online-ruleForm {
-    margin: 0 48px 0 40px;
+  margin: 0 48px 0 40px;
 }
 .submit-btn {
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    bottom: 24px;
-    button {
-        padding: 8px 25px;
-    }
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  bottom: 24px;
+  button {
+    padding: 8px 25px;
+  }
+}
+.el-form-item:not(.is-error) .el-input__wrapper {
+  background-color: transparent !important;
+}
+.el-form-item.is-error .el-input__wrapper {
+  background-color: rgb(247, 193, 193);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/electron/welcome/timeLine.vue b/electron/welcome/timeLine.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b08c5bc7c0e769b74a43345827d225630ea77533
--- /dev/null
+++ b/electron/welcome/timeLine.vue
@@ -0,0 +1,201 @@
+<template>
+  <el-timeline style="max-width: 600px; max-height: 500px">
+    <el-timeline-item
+      v-for="(activity, index) in activities"
+      :key="index"
+      center
+      :class="`timeline-status-${activity.type}`"
+    >
+      <template #dot>
+        <img
+          v-if="activity.type === 'running'"
+          :src="loadingIcon"
+          alt=""
+          class="running-img"
+        />
+        <img
+          v-else-if="activity.type === 'success'"
+          :src="successIcon"
+          alt=""
+        />
+        <img v-else-if="activity.type === 'failed'" :src="failedIcon" alt="" />
+        <div v-else class="dot"></div>
+      </template>
+      <el-card
+        :class="{
+          'running-card': activity.type === 'running',
+          'success-card': activity.type === 'success',
+          'failed-card': activity.type === 'failed',
+        }"
+      >
+        {{ activity.content }}
+        <span v-if="activity.type === 'running'">{{$t('localDeploy.installation')}}</span>
+      </el-card>
+    </el-timeline-item>
+  </el-timeline>
+  <div class="submit-btn">
+    <el-button v-if="allSuccess" type="primary" @click="handleFinish">
+      {{ $t('localDeploy.complete') }}
+    </el-button>
+    <el-button v-else-if="hasFailed" type="primary" @click="handleRetry">
+      {{ $t('localDeploy.retry') }}
+    </el-button>
+    <el-button v-else type="primary" @click="handleStop">{{ $t('localDeploy.stopInstall') }}</el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+import successIcon from './assets/svgs/success.svg';
+import failedIcon from './assets/svgs/error.svg';
+import loadingIcon from './assets/svgs/upload-loading.svg';
+import i18n from './lang/index';
+
+const activities: any[] = [
+  {
+    content: i18n.global.t('localDeploy.dataBase') ,
+    type: 'running',
+  },
+  {
+    content: i18n.global.t('localDeploy.authHub'),
+    // type: 'success',
+  },
+  {
+    content: i18n.global.t('localDeploy.intelligence'),
+    // type: 'failed',
+  },
+  {
+    content: i18n.global.t('localDeploy.serviceLaunch'),
+    // type: 'success',
+  },
+];
+
+// 计算属性：检查是否所有活动都成功
+const allSuccess = computed(() => {
+  return activities.every((activity) => activity.status === 'success');
+});
+
+// 计算属性：检查是否存在失败的活动
+const hasFailed = computed(() => {
+  return activities.some((activity) => activity.status === 'failed');
+});
+
+const handleStop = () => {};
+const handleRetry = () => {};
+const handleFinish = () => {};
+</script>
+
+<style lang="scss" scoped>
+.submit-btn {
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  bottom: 24px;
+  button {
+    padding: 8px 25px;
+  }
+}
+.el-timeline {
+  position: relative;
+  top: 44px;
+  left: 20px;
+
+  .el-timeline-item {
+    .el-timeline-item__node {
+      z-index: 10;
+    }
+    .el-timeline-item__node,
+    .el-timeline-item__node--normal {
+      height: 24px !important;
+      width: 24px !important;
+      left: -7px !important;
+      background-color: rgb(235, 239, 246);
+    }
+    .el-timeline-item__dot {
+      z-index: 10;
+      left: -6px;
+      img {
+        border-radius: 50%;
+        width: 21px;
+        height: 21px;
+      }
+      .running-img {
+        width: 16px;
+        height: 16px;
+        padding: 2px;
+        border-radius: 50%;
+        background-color: rgb(99, 149, 253);
+        animation: rotate 1s linear infinite;
+      }
+      .dot {
+        width: 21px;
+        height: 21px;
+        border-radius: 50%;
+        background-color: rgb(235, 239, 246);
+      }
+    }
+    .el-timeline-item__wrapper {
+      padding-left: 10px;
+      .el-card {
+        border: none;
+        background-color: rgb(244, 246, 250);
+        color: rgb(78, 88, 101);
+        font-weight: 500;
+        font-family: 'HarmonyOS Sans SC';
+        font-size: 16px;
+      }
+      .running-card {
+        background-color: rgba(99, 149, 253, 0.1);
+        color: rgb(99, 149, 253);
+      }
+      .success-card {
+        background-color: rgba(42, 169, 86, 0.1);
+        color: rgb(36, 171, 54);
+      }
+      .failed-card {
+        background-color: rgba(277, 32, 32, 0.1);
+        color: rgb(277, 32, 32);
+      }
+      .el-card.is-always-shadow {
+        box-shadow: none;
+      }
+      .el-timeline-item__timestamp.is-bottom {
+        margin-top: 0;
+      }
+    }
+  }
+
+  /* 成功状态 - 绿色连接线 */
+  :deep(.timeline-status-success .el-timeline-item__tail) {
+    border-left-color: #67c23a !important;
+  }
+
+  /* 危险状态 - 红色连接线 */
+  :deep(.timeline-status-failed .el-timeline-item__tail) {
+    border-left-color: #f56c6c !important;
+  }
+
+  /* 主要状态 - 蓝色连接线 */
+  :deep(.timeline-status-running .el-timeline-item__tail) {
+    border-left-color: #409eff !important;
+  }
+
+  /* 默认状态 - 灰色连接线 */
+  :deep(.timeline-status-default .el-timeline-item__tail) {
+    border-left-color: #e4e7ed !important;
+  }
+
+  /* 最后一个节点不需要连接线 */
+  :deep(.el-timeline-item:last-child .el-timeline-item__tail) {
+    display: none !important;
+  }
+  :deep(.el-timeline-item__tail) {
+    left: 9px;
+    transform: translateY(35px);
+  }
+  :deep(.el-timeline-item__center:first-child .el-timeline-item__tail) {
+    height: 100% !important;
+    top: 0 !important;
+  }
+}
+</style>
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 3fa6b9c5c5d55058c1993e10126c46443f8eda12..e2b03f5173c8c9c4af9fe74e72dfe150ae0d49a3 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -73,7 +73,6 @@ body[theme='dark'] {
   --expand-fold-active: url('../../assets/svgs/dark_expand_fold_active.svg');
   --o-scrollbar-thumb: #d3dce9;
   --o-apiBox-bg: rgb(253, 254, 255);
-  --o-bg-welcome: url('../../assets/images/welcome_bg.webp');
 }
 
 body[theme='light'] {
@@ -146,7 +145,6 @@ body[theme='light'] {
   --o-scrollbar-thumb: #c3cedf;
   --o-apiBox-bg: rgb(253, 254, 255);
   --el-drawer-padding-primary: 24px !important;
-  --o-bg-welcome: url('../../assets/images/welcome_bg.webp');
 }
 
 body {