更新注释

2026-01-08 16:26:57 +08:00 · 2024-07-26 09:23:17 +08:00 · 2024-07-26 09:23:17 +08:00 · 403c0059a7
commit 403c0059a7
parent 7afe94f1a2
5 changed files with 155 additions and 131 deletions
--- 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>
--- 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
+https://gitee.com/zoujingli/ThinkAdmin/issues/I4CK3H
--- 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));
+    // @ts-ignore
+    app.use(ElementPlus).use(router).mount(document.body)
+})().catch((ex) => console.error(ex))
--- 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>
--- 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>