diff --git a/web/src/components/Breadcrumb/index.vue b/web/src/components/Breadcrumb/index.vue
index bc31de6..0526cfc 100644
--- a/web/src/components/Breadcrumb/index.vue
+++ b/web/src/components/Breadcrumb/index.vue
@@ -16,7 +16,7 @@
   </el-breadcrumb>
 </template>
 
-<script>
+<script lang="ts">
 import { pathToRegexp } from 'path-to-regexp'
 import { defineComponent } from 'vue'
 export default defineComponent({
diff --git a/web/src/components/Hamburger/index.vue b/web/src/components/Hamburger/index.vue
index 79e004c..3b942ec 100644
--- a/web/src/components/Hamburger/index.vue
+++ b/web/src/components/Hamburger/index.vue
@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'Hamburger',
diff --git a/web/src/components/SvgIcon/index.vue b/web/src/components/SvgIcon/index.vue
index e792e53..305e7ec 100644
--- a/web/src/components/SvgIcon/index.vue
+++ b/web/src/components/SvgIcon/index.vue
@@ -10,7 +10,7 @@
   </svg>
 </template>
 
-<script>
+<script lang="ts">
 import { isExternal } from '@/utils/validate'
 import { defineComponent } from 'vue'
 
diff --git a/web/src/layout/components/Navbar.vue b/web/src/layout/components/Navbar.vue
index 7e8bb67..8780bfe 100644
--- a/web/src/layout/components/Navbar.vue
+++ b/web/src/layout/components/Navbar.vue
@@ -4,7 +4,7 @@
     <hamburger
       :is-active="app.sidebar.opened"
       class="hamburger-container"
-      @toggleClick="toggleSideBar"
+      @toggle-click="toggleSideBar"
     />
     <el-dropdown
       style="float: left; line-height: 48px; cursor: pointer"
@@ -68,7 +68,7 @@
                   <el-avatar
                     v-if="$store.getters.avatar"
                     :size="40"
-                    :src="avatar"
+                    :src="$store.getters.avatar"
                   />
                   <div
                     v-else
@@ -117,76 +117,66 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 import logo from '@/assets/images/logo.png'
-import { mapState } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb/index.vue'
 import Hamburger from '@/components/Hamburger/index.vue'
-import { NamespaceOption } from '@/api/namespace'
+import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
+import { NamespaceUserData, NamespaceOption } from '@/api/namespace'
 import { getNamespace, setNamespace, removeNamespace } from '@/utils/namespace'
-import { ElLoading } from 'element-plus'
-import { defineComponent } from 'vue'
+import { ElLoading, ElMessage } from 'element-plus'
+import { ref, computed } from 'vue'
 
-export default defineComponent({
-  components: {
-    Breadcrumb,
-    Hamburger,
-  },
-  data() {
-    return {
-      logo: logo,
-      starCount: 0,
-      forkCount: 0,
-      namespaceListLoading: false,
-      namespace: getNamespace(),
-      namespaceList: [],
-    }
-  },
-  computed: {
-    ...mapState(['app', 'user']),
-  },
-  created() {
-    document.title = `Goploy-${this.namespace.name}`
-  },
-  methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
-    handleNamespaceVisible(visible) {
-      if (visible === true) {
-        this.namespaceListLoading = true
-        new NamespaceOption()
-          .request()
-          .then((response) => {
-            this.namespaceList = response.data.list
-          })
-          .finally(() => {
-            this.namespaceListLoading = false
-          })
-      }
-    },
-    handleNamespaceChange(namespace) {
-      setNamespace({
-        id: namespace.namespaceId,
-        name: namespace.namespaceName,
-        role: namespace.role,
+const namespaceListLoading = ref(false)
+const namespaceList = ref<NamespaceOption['datagram']['list']>()
+const namespace = ref(getNamespace())
+const { locale } = useI18n({ useScope: 'global' })
+const router = useRouter()
+const store = useStore()
+const app = computed(() => store.state['app'])
+const user = computed(() => store.state['user'])
+
+document.title = `Goploy-${namespace.value.name}`
+
+function toggleSideBar() {
+  store.dispatch('app/toggleSideBar')
+}
+function handleNamespaceVisible(visible: boolean) {
+  if (visible === true) {
+    namespaceListLoading.value = true
+    new NamespaceOption()
+      .request()
+      .then((response) => {
+        namespaceList.value = response.data.list
       })
-      ElLoading.service({ fullscreen: true })
-      location.reload()
-    },
-    handleSetLanguage(lang) {
-      this.$i18n.locale = lang
-      this.$store.dispatch('app/setLanguage', lang)
-      this.$message.success('Switch language success')
-    },
-    async logout() {
-      await this.$store.dispatch('user/logout')
-      await this.$store.dispatch('tagsView/delAllViews')
-      removeNamespace()
-      this.$router.push(`/login`)
-    },
-  },
-})
+      .finally(() => {
+        namespaceListLoading.value = false
+      })
+  }
+}
+function handleNamespaceChange(namespace: NamespaceUserData['datagram']) {
+  setNamespace({
+    id: namespace.namespaceId,
+    name: namespace.namespaceName,
+    role: namespace.role,
+  })
+  ElLoading.service({ fullscreen: true })
+  location.reload()
+}
+function handleSetLanguage(lang: string) {
+  locale.value = lang
+  store.dispatch('app/setLanguage', lang)
+  ElMessage.success('Switch language success')
+}
+
+async function logout() {
+  await store.dispatch('user/logout')
+  await store.dispatch('tagsView/delAllViews')
+  removeNamespace()
+  router.push(`/login`)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/web/src/layout/components/RightMenu/index.vue b/web/src/layout/components/RightMenu/index.vue
index 7dd5088..152050c 100644
--- a/web/src/layout/components/RightMenu/index.vue
+++ b/web/src/layout/components/RightMenu/index.vue
@@ -146,7 +146,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import VueQrcode from '@chenfengyuan/vue-qrcode'
 import { md5 as hashByMD5 } from '@/utils/md5'
 
diff --git a/web/src/layout/components/Sidebar/Link.vue b/web/src/layout/components/Sidebar/Link.vue
index 4d2d46c..4a513b4 100644
--- a/web/src/layout/components/Sidebar/Link.vue
+++ b/web/src/layout/components/Sidebar/Link.vue
@@ -7,7 +7,7 @@
   </router-link>
 </template>
 
-<script>
+<script lang="ts">
 import { isExternal } from '@/utils/validate'
 import { defineComponent } from 'vue'
 export default defineComponent({
diff --git a/web/src/layout/components/Sidebar/SidebarItem.vue b/web/src/layout/components/Sidebar/SidebarItem.vue
index beeaf58..0ba22fa 100644
--- a/web/src/layout/components/Sidebar/SidebarItem.vue
+++ b/web/src/layout/components/Sidebar/SidebarItem.vue
@@ -48,7 +48,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { isExternal } from '@/utils/validate'
 import AppLink from './Link.vue'
 import FixiOSBug from './FixiOSBug'
diff --git a/web/src/layout/components/Sidebar/index.vue b/web/src/layout/components/Sidebar/index.vue
index de0845f..2fe56cf 100644
--- a/web/src/layout/components/Sidebar/index.vue
+++ b/web/src/layout/components/Sidebar/index.vue
@@ -20,7 +20,7 @@
   </el-scrollbar>
 </template>
 
-<script>
+<script lang="ts">
 import { mapState } from 'vuex'
 import SidebarItem from './SidebarItem.vue'
 import variables from '@/styles/variables.module.scss'
diff --git a/web/src/layout/components/TagsView/ScrollPane.vue b/web/src/layout/components/TagsView/ScrollPane.vue
index 4eb04c8..4ab8868 100644
--- a/web/src/layout/components/TagsView/ScrollPane.vue
+++ b/web/src/layout/components/TagsView/ScrollPane.vue
@@ -9,7 +9,7 @@
   </el-scrollbar>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue'
 const tagAndTagSpacing = 4 // tagAndTagSpacing
 export default defineComponent({
diff --git a/web/src/layout/components/TagsView/index.vue b/web/src/layout/components/TagsView/index.vue
index 26fea30..05c1353 100644
--- a/web/src/layout/components/TagsView/index.vue
+++ b/web/src/layout/components/TagsView/index.vue
@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import ScrollPane from './ScrollPane.vue'
 import path from 'path-browserify'
 import { defineComponent } from 'vue'
diff --git a/web/src/views/deploy/index.vue b/web/src/views/deploy/index.vue
index 786e7cf..4b26a60 100644
--- a/web/src/views/deploy/index.vue
+++ b/web/src/views/deploy/index.vue
@@ -263,7 +263,6 @@
       :on-rebuilt="handleRebuilt"
     />
     <TheCommitListDialog
-      ref="test"
       v-model="commitDialogVisible"
       :project-row="selectedItem"
     >
@@ -316,7 +315,7 @@
           </el-checkbox-group>
         </el-form-item>
       </el-form>
-      <template #footer class="dialog-footer">
+      <template #footer>
         <el-button @click="greyServerDialogVisible = false">
           {{ $t('cancel') }}
         </el-button>
@@ -490,9 +489,6 @@ export default defineComponent({
     this.tableDefaultSort = this.getTableSort()
     this.getList()
   },
-  mounted() {
-    console.log(this.$refs['test'])
-  },
   methods: {
     parseTime,
     parseGitURL,
diff --git a/web/src/views/login/index.vue b/web/src/views/login/index.vue
index 324a7af..e23af4f 100644
--- a/web/src/views/login/index.vue
+++ b/web/src/views/login/index.vue
@@ -143,7 +143,6 @@ export default defineComponent({
           this.$store
             .dispatch('user/login', this.loginForm)
             .then(() => {
-              console.log(this.$router.getRoutes())
               this.$router.push({
                 path: this.redirect || '/',
                 query: this.redirect ? param2Obj(this.redirect) : {},
diff --git a/web/src/views/user/profile.vue b/web/src/views/user/profile.vue
index 3849c59..3d04861 100644
--- a/web/src/views/user/profile.vue
+++ b/web/src/views/user/profile.vue
@@ -1,47 +1,47 @@
 <template>
   <div class="app-container">
     <el-form
-      ref="pwdForm"
-      :model="pwdForm"
-      :rules="pwdForm.rules"
+      ref="form"
+      :rules="formRules"
+      :model="formData"
       label-position="top"
       style="margin-left: 40px"
     >
       <el-form-item :label="$t('userPage.oldPassword')" prop="old">
         <el-input
-          v-model="pwdForm.old"
-          :type="pwdForm.type.old"
+          v-model="formData.old"
+          :type="formProps.type.old"
           style="width: 300px"
         />
-        <span class="show-pwd" @click="showPwd('old')">
+        <span class="show-pwd" @click="showPwd(inputElem.old)">
           <svg-icon icon-class="eye" />
         </span>
       </el-form-item>
       <el-form-item :label="$t('userPage.newPassword')" prop="new">
         <el-input
-          v-model="pwdForm.new"
-          :type="pwdForm.type.new"
+          v-model="formData.new"
+          :type="formProps.type.new"
           style="width: 300px"
           autocomplete="off"
         />
-        <span class="show-pwd" @click="showPwd('new')">
+        <span class="show-pwd" @click="showPwd(inputElem.new)">
           <svg-icon icon-class="eye" />
         </span>
       </el-form-item>
       <el-form-item :label="$t('userPage.rePassword')" prop="confirm">
         <el-input
-          v-model="pwdForm.confirm"
-          :type="pwdForm.type.confirm"
+          v-model="formData.confirm"
+          :type="formProps.type.confirm"
           style="width: 300px"
           autocomplete="off"
         />
-        <span class="show-pwd" @click="showPwd('confirm')">
+        <span class="show-pwd" @click="showPwd(inputElem.confirm)">
           <svg-icon icon-class="eye" />
         </span>
       </el-form-item>
       <el-form-item>
         <el-button
-          :loading="pwdForm.loading"
+          :loading="formProps.loading"
           type="primary"
           @click="changePassword()"
           >{{ $t('save') }}</el-button
@@ -51,100 +51,107 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+export default { name: 'UserProfile' }
+</script>
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
 import { validPassword } from '@/utils/validate'
+import Validator, { RuleItem } from 'async-validator'
 import { UserChangePassword } from '@/api/user'
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: 'UserProfile',
-  data() {
-    const confirmPass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('Please enter the password again'))
-      } else if (value !== this.pwdForm.new) {
-        callback(new Error('The two passwords do not match!'))
-      } else {
-        callback()
-      }
-    }
-    const validatePass = (rule, value, callback) => {
-      if (!validPassword(value)) {
-        callback(
-          new Error(
-            '8 to 16 characters and a minimum of 2 character sets from these classes: [letters], [numbers], [special characters]'
-          )
-        )
-      } else {
-        callback()
-      }
-    }
-    return {
-      pwdForm: {
-        old: '',
-        new: '',
-        confirm: '',
-        loading: false,
-        type: {
-          old: 'password',
-          new: 'password',
-          confirm: 'password',
-        },
-        rules: {
-          old: [
-            {
-              required: true,
-              message: 'Old password required',
-              trigger: ['blur'],
-            },
-          ],
-          new: [
-            {
-              required: true,
-              message:
-                '8 to 16 characters and a minimum of 2 character sets from these classes: [letters], [numbers], [special characters]',
-              trigger: ['blur'],
-              validator: validatePass,
-            },
-          ],
-          confirm: [
-            { required: true, validator: confirmPass, trigger: ['blur'] },
-          ],
-        },
-      },
-    }
-  },
-  methods: {
-    showPwd(index) {
-      if (this.pwdForm.type[index] === 'password') {
-        this.pwdForm.type[index] = ''
-      } else {
-        this.pwdForm.type[index] = 'password'
-      }
-    },
-    changePassword() {
-      this.$refs.pwdForm.validate((valid) => {
-        if (valid) {
-          this.pwdForm.loading = true
-          new UserChangePassword({
-            oldPwd: this.pwdForm.old,
-            newPwd: this.pwdForm.new,
-          })
-            .request()
-            .then(() => {
-              this.pwdForm.loading = false
-              this.$message.success('Success')
-            })
-            .catch(() => {
-              this.pwdForm.loading = false
-            })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
+import { ref } from 'vue'
+enum inputElem {
+  old = 'old',
+  new = 'new',
+  confirm = 'confirm',
+}
+
+const form = ref<Validator>()
+const formData = ref({
+  old: '',
+  new: '',
+  confirm: '',
+})
+const formProps = ref({
+  loading: false,
+  type: {
+    old: 'password',
+    new: 'password',
+    confirm: 'password',
   },
 })
+
+const formRules = {
+  old: [
+    {
+      required: true,
+      message: 'Old password required',
+      trigger: ['blur'],
+    },
+  ],
+  new: [
+    {
+      required: true,
+      message:
+        '8 to 16 characters and a minimum of 2 character sets from these classes: [letters], [numbers], [special characters]',
+      trigger: ['blur'],
+      validator: (_, value) => {
+        if (!validPassword(value)) {
+          return new Error(
+            '8 to 16 characters and a minimum of 2 character sets from these classes: [letters], [numbers], [special characters]'
+          )
+        } else {
+          return true
+        }
+      },
+    } as RuleItem,
+  ],
+  confirm: [
+    {
+      required: true,
+      validator: (_, value) => {
+        if (value === '') {
+          return new Error('Please enter the password again')
+        } else if (value !== formData.value.new) {
+          return new Error('The two passwords do not match!')
+        } else {
+          return true
+        }
+      },
+      trigger: ['blur'],
+    } as RuleItem,
+  ],
+}
+
+function showPwd(index: inputElem) {
+  if (formProps.value.type[index] === 'password') {
+    formProps.value.type[index] = ''
+  } else {
+    formProps.value.type[index] = 'password'
+  }
+}
+function changePassword() {
+  form.value?.validate((valid: boolean) => {
+    if (valid) {
+      formProps.value.loading = true
+      new UserChangePassword({
+        oldPwd: formData.value.old,
+        newPwd: formData.value.new,
+      })
+        .request()
+        .then(() => {
+          formProps.value.loading = false
+          ElMessage.success('Success')
+        })
+        .catch(() => {
+          formProps.value.loading = false
+        })
+    } else {
+      console.log('error submit!!')
+      return false
+    }
+  })
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>