diff --git a/index.html b/index.html
index f909f3083..c5bf78205 100644
--- a/index.html
+++ b/index.html
@@ -27,10 +27,12 @@
 
     <style>
         @keyframes shadow {
+
             0%,
             100% {
                 transform: scale(1, 1);
             }
+
             50% {
                 transform: scale(1.2, 1);
             }
@@ -40,16 +42,20 @@
             17% {
                 border-bottom-right-radius: 3px;
             }
+
             25% {
                 transform: translateY(9px) rotate(22.5deg);
             }
+
             50% {
                 border-bottom-right-radius: 40px;
                 transform: translateY(18px) scale(1, 0.9) rotate(45deg);
             }
+
             75% {
                 transform: translateY(9px) rotate(67.5deg);
             }
+
             100% {
                 transform: translateY(0) rotate(90deg);
             }
@@ -105,10 +111,10 @@
 </head>
 
 <body>
-<div class="think-page-loader">
-    <div class="loader"></div>
-</div>
-<router-view></router-view>
+    <div class="think-page-loader">
+        <div class="loader"></div>
+    </div>
+    <router-view></router-view>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/readme.md b/readme.md
index db4ad1a16..ccf0fe35f 100644
--- a/readme.md
+++ b/readme.md
@@ -1,15 +1,16 @@
 ## ThinkAdmin for html
 
-此分支是为`ThinkAdmin`下个版本前端`UI`构建测试用途。
+此分支是为 `ThinkAdmin` 下个版本前端 `UI` 构建测试用途。
 
-目前拟定以`Vue3`为技术核心库，基础`UI`组件库使用`Element-Plus`构建。
+目前拟定以 `Vue3` 为技术核心库，基础 `UI` 组件库使用 `Element-Plus` 构建。
 
 ##### **集成组件：**
 
-* vue v3.2.31
-* vue.router v4.0.12
-* vue.sfc.loader v0.8.4
-* vue element-plus v2.0.3
+-   vue v3.4.34
+-   vue.router v4.4.0
+-   vue.sfc.loader v0.9.5
+-   vue element-plus v2.7.7
+-   vue element-plugs-icons v2.0.9
 
 ##### **在线体验：**
 
@@ -17,4 +18,4 @@ http://html.thinkadmin.top
 
 ##### **建议收集：**
 
-https://gitee.com/zoujingli/ThinkAdmin/issues/I4CK3H
\ No newline at end of file
+https://gitee.com/zoujingli/ThinkAdmin/issues/I4CK3H
diff --git a/static/app.js b/static/app.js
index 0aa567039..d0aaf0349 100644
--- a/static/app.js
+++ b/static/app.js
@@ -1,112 +1,131 @@
 ;(async () => {
-
     /*! 项目应用根路径 */
-    window.appRoot = document.querySelector('script[src*="app.js"]').src.split('/').slice(3, -2).join('/') + '/';
+    // @ts-ignore
+    window.appRoot = document.querySelector('script[src*="app.js"]').src.split('/').slice(3, -2).join('/') + '/'
 
     /*! 模块加载请求处理 */
     const options = {
         // 模块缓存
-        moduleCache: {vue: Vue, less: less},
+        // @ts-ignore
+        moduleCache: { vue: Vue, less: less },
         // 动态加载文件
         getFile(url) {
-            if (!(/^(https?:)?\/\//)) {
-                url = (appRoot + url).replace(/\/+.?\/+/g, '/');
+            if (!/^(https?:)?\/\//) {
+                // @ts-ignore
+                url = (appRoot + url).replace(/\/+.?\/+/g, '/')
             }
-            return fetch(url).then(res => {
+            return fetch(url).then((res) => {
                 if (res.ok) {
-                    return {getContentData: binary => binary ? res.arrayBuffer() : res.text()};
+                    return { getContentData: (binary) => (binary ? res.arrayBuffer() : res.text()) }
                 } else if (res.status === 404) {
-                    return `<template><el-empty description="${res.status}，${res.statusText}">${url}</el-empty></template>`;
+                    return `<template><el-empty description="${res.status}，${res.statusText}">${url}</el-empty></template>`
                 } else {
-                    throw Object.assign(new Error(url + ' ' + res.statusText), {res});
+                    throw Object.assign(new Error(url + ' ' + res.statusText), { res })
                 }
-            });
+            })
         },
         // 追加样式HTML
         addStyle(style) {
-            const before = document.head.getElementsByTagName('style')[0] || null;
-            const object = Object.assign(document.createElement('style'), {textContent: style});
-            document.head.insertBefore(object, before);
+            const before = document.head.getElementsByTagName('style')[0] || null
+            const object = Object.assign(document.createElement('style'), { textContent: style })
+            document.head.insertBefore(object, before)
         },
         // 输出日志信息
         log(type, ...args) {
-            console.log(type, ...args);
+            console.log(type, ...args)
         },
-    };
+    }
 
-    const {loadModule} = window['vue3-sfc-loader'];
-    const loadVue = (vuePath) => loadModule(vuePath, options);
+    const { loadModule } = window['vue3-sfc-loader']
+    const loadVue = (vuePath) => loadModule(vuePath, options)
 
+    // @ts-ignore
     const router = VueRouter.createRouter({
-        routes: [], history: VueRouter.createWebHashHistory(),
-    });
+        routes: [],
+        // @ts-ignore
+        history: VueRouter.createWebHashHistory(),
+    })
 
     // 创建后台主路由
     router.addRoute({
-        name: 'layout', path: '/', component: () => {
-            return loadVue('/static/template/layout.vue');
-        }, children: [{path: '/', redirect: '/static/template/login.vue'},]
-    });
+        name: 'layout',
+        path: '/',
+        component: () => {
+            return loadVue('/static/template/layout.vue')
+        },
+        children: [{ path: '/', redirect: '/static/template/login.vue' }],
+    })
 
     // 动态注销路由
     router.afterEach(function (to) {
-        let name = to.fullPath.replace(/[.\/]+/g, '_');
+        let name = to.fullPath.replace(/[.\/]+/g, '_')
         if (router.hasRoute(name)) router.removeRoute(name)
-        if (loading) loading = loading.close(), null;
-        document.querySelectorAll('.think-page-loader').forEach((el) => el.style.display = 'none');
-    });
+        if (loading) (loading = loading.close()), null
+        // @ts-ignore
+        document.querySelectorAll('.think-page-loader').forEach((el) => (el.style.display = 'none'))
+    })
 
     // 动态注册路由
-    let loading = null;
+    let loading = null
+    // @ts-ignore
     router.beforeEach(function (to, fr, next) {
-        let name = to.fullPath.replace(/[.\/]+/g, '_');
+        let name = to.fullPath.replace(/[.\/]+/g, '_')
         if (router.hasRoute(name)) {
             console.log('PAGE-LOADING:', to.fullPath)
+            // @ts-ignore
             loading = ElementPlus.ElLoading.service({
-                lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.3)',
-            });
-            next();
+                lock: true,
+                text: 'Loading',
+                background: 'rgba(0, 0, 0, 0.3)',
+            })
+            next()
         } else {
             // 删除页面缓存
-            delete options.moduleCache[to.fullPath];
+            delete options.moduleCache[to.fullPath]
             // 登录页面处理
             if (to.fullPath.indexOf('/login.vue') > -1) {
-                router.addRoute({name: name, path: to.fullPath, component: () => loadVue(to.fullPath)})
+                router.addRoute({ name: name, path: to.fullPath, component: () => loadVue(to.fullPath) })
             } else {
                 // 动态注册路由并触发新路由
-                router.addRoute('layout', {name: name, path: to.fullPath, component: () => loadVue(to.fullPath)});
+                router.addRoute('layout', { name: name, path: to.fullPath, component: () => loadVue(to.fullPath) })
             }
-            next({name: name});
-        }
-    });
-
-    // 创建 Vue 应用
-    const app = Vue.createApp({});
-    app.directive('href', {
-        mounted(el, binding) {
-            console.log(el)
-            el.addEventListener('click', (e) => {
-                e.stopPropagation();
-                if (binding.value) {
-                    router.push(binding.value);
-                }
-            }, {passive: false})
-        },
-        unmounted(el) {
-            // 移除点击事件监听器
-            el.removeEventListener('click');
+            next({ name: name })
         }
     })
 
+    // 创建 Vue 应用
+    // @ts-ignore
+    const app = Vue.createApp({})
+    app.directive('href', {
+        mounted(el, binding) {
+            console.log(el)
+            el.addEventListener(
+                'click',
+                (e) => {
+                    e.stopPropagation()
+                    if (binding.value) {
+                        router.push(binding.value)
+                    }
+                },
+                { passive: false }
+            )
+        },
+        unmounted(el) {
+            // 移除点击事件监听器
+            el.removeEventListener('click')
+        },
+    })
 
     // 定义全局缓存，加载字体组件
-    app.cache = {loadOpt: options, loadVue: loadVue, icons: ElementPlusIconsVue};
-    for (let i in app.cache.icons) app.component(i, app.cache.icons[i]);
+    // @ts-ignore
+    app.cache = { loadOpt: options, loadVue: loadVue, icons: ElementPlusIconsVue }
+    for (let i in app.cache.icons) app.component(i, app.cache.icons[i])
 
     // 注册 getApp 获取应用
-    window.getApp = () => app;
+    // @ts-ignore
+    window.getApp = () => app
 
     // 应用组件及路由
-    app.use(ElementPlus).use(router).mount(document.body);
-
-})().catch(ex => console.error(ex));
\ No newline at end of file
+    // @ts-ignore
+    app.use(ElementPlus).use(router).mount(document.body)
+})().catch((ex) => console.error(ex))
diff --git a/static/template/layout.vue b/static/template/layout.vue
index f9c07f6f5..16c15e701 100644
--- a/static/template/layout.vue
+++ b/static/template/layout.vue
@@ -1,12 +1,7 @@
 <template>
   <el-container>
     <el-header>
-      <el-menu
-          mode="horizontal"
-          text-color="#fff"
-          background-color="rgba(54,25,88,0.9)"
-          active-text-color="rgba(54,25,88,1.0)"
-      >
+      <el-menu mode="horizontal" text-color="#fff" background-color="rgba(54,25,88,0.9)" active-text-color="rgba(54,25,88,1.0)">
         <el-menu-item data-route="/" index="1">
           <el-avatar size="small">Ta</el-avatar>
           <span style="margin-left:5px">ThinkAdmin For HTML</span>
@@ -85,25 +80,57 @@
         <el-main>
           <router-view></router-view>
         </el-main>
-        <el-footer>©版权所有 2014-2021 ThinkAdmin</el-footer>
+        <el-footer>©版权所有 2014-2024 ThinkAdmin</el-footer>
       </el-container>
     </el-container>
   </el-container>
 </template>
 
-<style lang="less">
+<script>
+export default {
+  name: 'layout',
+  data() {
+    return {
+      menus: [
+        { name: 'ONE', title: 'SHOW-ONE-LIST', subs: [] },
+        { name: 'TWO', title: 'SHOW-TWO-LIST', subs: [] },
+        { name: 'THR', title: 'SHOW-THR-LIST', subs: [] },
+        { name: 'FOR', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: 'FIV', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: 'SIX', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: 'SEN', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: 'SIX', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: 'EVN', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: 'TEN', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '111', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '122', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '133', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '144', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '155', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '166', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '177', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '188', title: 'SHOW-FOR-LIST', subs: [] },
+        { name: '199', title: 'SHOW-FOR-LIST', subs: [] },
+      ]
+    }
+  }
+}
+</script>
 
-html, body {
+
+<style lang="less">
+html,
+body {
   margin: 0;
   height: 100%;
   padding: 0;
   display: block;
 }
 
-body > .el-container {
+body>.el-container {
   height: 100%;
 
-  > .el-header {
+  >.el-header {
     margin: 0;
     padding: 0;
 
@@ -124,7 +151,10 @@ body > .el-container {
             padding: 0;
             font-weight: bold;
 
-            &:hover, &:active, &:focus, &.is-active {
+            &:hover,
+            &:active,
+            &:focus,
+            &.is-active {
               color: #FFF !important;
               background: rgba(0, 0, 0, 0) !important;
             }
@@ -162,10 +192,10 @@ body > .el-container {
     }
   }
 
-  > .el-container {
+  >.el-container {
     height: 1px;
 
-    > .el-aside {
+    >.el-aside {
       z-index: 99;
       background: #53a8ff;
       --el-aside-width: 280px;
@@ -200,9 +230,11 @@ body > .el-container {
 
           .el-tabs__item {
             color: #FFF;
+            display: flex;
             height: 58px !important;
             line-height: 58px !important;
             text-align: center !important;
+            justify-content: center;
 
             &.is-active {
               color: #333;
@@ -236,34 +268,34 @@ body > .el-container {
       }
     }
 
-    > .el-container {
-      > .el-main {
+    >.el-container {
+      >.el-main {
         padding: 0;
         background: #EFEFEF;
 
-        > .el-container {
+        >.el-container {
           height: 100%;
 
-          > .el-header {
+          >.el-header {
             z-index: 99;
             background: white;
             line-height: 60px;
             box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
           }
 
-          > .el-main {
+          >.el-main {
             height: 1px;
             z-index: 88;
             --el-main-padding: 0;
 
-            > .el-scrollbar {
+            >.el-scrollbar {
               padding: 0;
               box-sizing: border-box;
 
-              > .el-scrollbar__wrap {
+              >.el-scrollbar__wrap {
                 border-radius: 5px;
 
-                > .el-scrollbar__view {
+                >.el-scrollbar__view {
                   margin: 15px;
                   padding: 20px;
                   background: #FFF;
@@ -276,7 +308,7 @@ body > .el-container {
         }
       }
 
-      > .el-footer {
+      >.el-footer {
         color: #333;
         z-index: 99;
         box-shadow: 0 0 6px 0 rgb(0 0 0 / 20%);
@@ -288,37 +320,3 @@ body > .el-container {
   }
 }
 </style>
-
-<script>
-export default {
-  name: 'layout',
-  data() {
-    return {
-      menus: [
-        {name: 'ONE', title: 'SHOW-ONE-LIST', subs: []},
-        {name: 'TWO', title: 'SHOW-TWO-LIST', subs: []},
-        {name: 'THR', title: 'SHOW-THR-LIST', subs: []},
-        {name: 'FOR', title: 'SHOW-FOR-LIST', subs: []},
-        {name: 'FIV', title: 'SHOW-FOR-LIST', subs: []},
-        {name: 'SIX', title: 'SHOW-FOR-LIST', subs: []},
-        {name: 'SEN', title: 'SHOW-FOR-LIST', subs: []},
-        {name: 'SIX', title: 'SHOW-FOR-LIST', subs: []},
-        {name: 'EVN', title: 'SHOW-FOR-LIST', subs: []},
-        {name: 'TEN', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '111', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '122', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '133', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '144', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '155', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '166', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '177', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '188', title: 'SHOW-FOR-LIST', subs: []},
-        {name: '199', title: 'SHOW-FOR-LIST', subs: []},
-      ]
-    }
-  },
-  created() {
-    let app = this;
-  }
-}
-</script>
diff --git a/static/template/pages/thr.vue b/static/template/pages/thr.vue
index eccc61bfa..80e1b5c4d 100644
--- a/static/template/pages/thr.vue
+++ b/static/template/pages/thr.vue
@@ -28,9 +28,9 @@
         </el-form>
 
         <el-table :data="tableData" border style="width:100%">
-          <el-table-column prop="date" label="Date" width="180"/>
-          <el-table-column prop="name" label="Name" width="180"/>
-          <el-table-column prop="address" label="Address"/>
+          <el-table-column prop="date" label="Date" width="180" />
+          <el-table-column prop="name" label="Name" width="180" />
+          <el-table-column prop="address" label="Address" />
         </el-table>
 
       </el-scrollbar>
