Merge branch 'html' of https://gitee.com/zoujingli/ThinkAdmin into html

readme.md

@@ -6,10 +6,10 @@
 
 ##### **集成组件：**
 
-* vue v3.2.22
+* vue v3.2.26
 * vue.router v4.0.12
 * vue.sfc.loader v0.8.4
-* vue element-plus v1.2.0-beta.3
+* vue element-plus v1.2.0-beta.6
 
 ##### **在线体验：**
 

static/app.js

@@ -8,9 +8,8 @@ window.appRoot = (function (script) {
         moduleCache: {
             vue: Vue,
             less: less
-        },
-        getFile(url) {
-            if (!/^(https?:)?\/\//.test(url)) {
+        }, getFile(url) {
+            if (!(/^(https?:)?\/\//)) {
                 url = (appRoot + url).replace(/\/+.?\/+/g, '/');
             }
             return fetch(url).then(res => {
@@ -22,8 +21,7 @@ window.appRoot = (function (script) {
                     throw Object.assign(new Error(url + ' ' + res.statusText), {res});
                 }
             });
-        },
-        addStyle(style) {
+        }, addStyle(style) {
             const before = document.head.getElementsByTagName('style')[0] || null;
             const object = Object.assign(document.createElement('style'), {textContent: style});
             document.head.insertBefore(object, before);
@@ -32,8 +30,7 @@ window.appRoot = (function (script) {
 
     const {loadModule} = window['vue3-sfc-loader'];
     const loadVue = (vuePath) => loadModule(vuePath, options);
-    const loadVueFile = (vuePath) => () => loadVue(vuePath);
-
+    // const loadVueFile = (vuePath) => () => loadVue(vuePath);
     const router = VueRouter.createRouter({
         routes: [], history: VueRouter.createWebHashHistory(),
     });
@@ -41,55 +38,49 @@ window.appRoot = (function (script) {
     // 添加默认路由
     router.addRoute({path: '/', redirect: '/static/template/pages/one.vue'});
 
-    // 路由前置处理
+    // 动态注册路由
     let loading = null;
     router.beforeEach(function (to, fr, next) {
         let name = to.fullPath.replace(/[.\/]+/g, '_');
         if (router.hasRoute(name)) {
-            console.log('');
-            console.log('load.open', to.fullPath)
+            console.log('open.load', to.fullPath)
             loading = ElementPlus.ElLoading.service({
                 lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.3)',
             });
             next();
         } else {
-            router.addRoute({name: name, path: to.fullPath, component: loadVueFile(to.fullPath)});
+            router.addRoute({name: name, path: to.fullPath, component: () => loadVue(to.fullPath)});
             next({name: name});
         }
     });
 
     // 动态注销路由
-
     router.afterEach(function (to) {
         let name = to.fullPath.replace(/[.\/]+/g, '_');
         if (router.hasRoute(name)) {
             router.removeRoute(name)
         }
         if (loading) {
-            console.log('load.done')
-            loading.close();
-            loading = null;
+            loading = loading.close(), null;
         }
-
     });
 
-    // window.$think = Vue.createApp({
-    //     // name: 'ThinkAdmin',
-    //     components: {
-    //         layout: await loadVue('./static/template/layout.vue'),
-    //     }
-    // });
-
+    // 创建 Vue 应用
     const app = Vue.createApp(Vue.defineAsyncComponent(function () {
         return loadVue('/static/template/layout.vue');
     }));
 
+    // 定义全局缓存
+    app.cache = {loadVue: loadVue};
+
     // 全局字体文件
-    // const icons = await loadVue("https://unpkg.com/@element-plus/icons@0.0.11/lib/index.js");
-    // for (let i in icons) app.component(i, icons[i]);
+    app.cache.icons = await loadVue("/static/plugs/core/vue.element.icons.js");
+    for (let i in app.cache.icons) app.component(i, app.cache.icons[i]);
 
-    app.use(router).use(ElementPlus).mount(document.body);
+    // 注册获取应用
+    window.getApp = () => app;
 
-})().catch(function (ex) {
-    console.error(ex);
-});
+    // 应用组件及路由
+    app.use(ElementPlus).use(router).mount(document.body);
+
+})().catch(ex => console.error(ex));

static/template/layout.vue

@@ -2,7 +2,6 @@
   <el-container>
     <el-header>
       <el-menu
-          :default-active="1"
           mode="horizontal"
           text-color="#fff"
           background-color="rgba(54,25,88,0.9)"
@@ -46,12 +45,12 @@
               </el-tooltip>
             </template>
             <h5 v-text="menu.title"></h5>
-            <el-menu :default-active="1" :open="1">
+            <el-menu :open="1">
               <el-sub-menu index="1">
                 <template #title>
-                  <!--<el-icon>-->
-                  <!--<location></location>-->
-                  <!--</el-icon>-->
+                  <el-icon>
+                    <location></location>
+                  </el-icon>
                   <span>Navigator One</span>
                 </template>
 
@@ -61,21 +60,21 @@
 
               </el-sub-menu>
               <el-menu-item index="2" data-route="/static/template/pages/two.vue">
-                <!--<el-icon>-->
-                <!--<icon-menu></icon-menu>-->
-                <!--</el-icon>-->
+                <el-icon>
+                  <aim></aim>
+                </el-icon>
                 <span>Navigator Two</span>
               </el-menu-item>
               <el-menu-item index="3" data-route="/static/template/pages/thr.vue">
-                <!--<el-icon>-->
-                <!--<document></document>-->
-                <!--</el-icon>-->
+                <el-icon>
+                  <document></document>
+                </el-icon>
                 <span>Navigator Three</span>
               </el-menu-item>
               <el-menu-item index="4" data-route="/static/template/pages/four.vue">
-                <!--<el-icon>-->
-                <!--<setting></setting>-->
-                <!--</el-icon>-->
+                <el-icon>
+                  <setting></setting>
+                </el-icon>
                 <span>Navigator Four</span>
               </el-menu-item>
             </el-menu>

static/template/pages/two.vue

@@ -11,81 +11,11 @@
     </el-header>
     <el-main>
       <el-scrollbar>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
-        <div>{{ userName }}: 你好，这里是为下一代 ThinkAdmin 后台管理系统预设计的 UI 结构。</div>
+
+        <div v-for="icon in icons">
+          <div><b>{{ icon.name }}：</b>{{ icon }}</div>
+        </div>
+
       </el-scrollbar>
     </el-main>
   </el-container>
@@ -95,7 +25,8 @@
 export default {
   data() {
     return {
-      userName: "ThinkAdmin"
+      userName: "ThinkAdmin",
+      icons: getApp().cache.icons
     }
   }
 }