WebChatting · Crazyokd · Apr 27, 2023 · Apr 27, 2023 · Apr 27, 2023
diff --git a/README.md b/README.md
@@ -6,7 +6,8 @@
 - [VueRouter3](https://v3.router.vuejs.org/zh/guide/)
 - [Vuex3](https://v3.vuex.vuejs.org/zh/)
 - [Element](https://element.eleme.io/#/zh-CN/component/installation)
-- [Vue-i18n@8]
+- [Vue-i18n@8]()
+- [Live2D Widget](https://github.com/stevenjoezhang/live2d-widget)
 
 ## Usage
 ### Project setup

diff --git a/package.json b/package.json
@@ -49,4 +49,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,22 @@
 <!DOCTYPE html>
 <html lang="zh">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script src="<%= BASE_URL %>js/autoload.js"></script>
     <title>chatting</title>
-  </head>
-  <body>
+</head>
+
+<body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+                Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/public/js/autoload.js b/public/js/autoload.js
@@ -0,0 +1,92 @@
+// live2d_path 参数建议使用绝对路径
+const live2d_path =
+    "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
+//const live2d_path = "/live2d-widget/";
+
+// 封装异步加载资源的方法
+function loadExternalResource(url, type) {
+    return new Promise((resolve, reject) => {
+        let tag;
+
+        if (type === "css") {
+            tag = document.createElement("link");
+            tag.rel = "stylesheet";
+            tag.href = url;
+        } else if (type === "js") {
+            tag = document.createElement("script");
+            tag.src = url;
+        }
+        if (tag) {
+            tag.onload = () => resolve(url);
+            tag.onerror = () => reject(url);
+            document.head.appendChild(tag);
+        }
+    });
+}
+
+function showLive2dWidget() {
+    console.log("show live2d widget");
+    document.getElementById("waifu-toggle")?.click();
+}
+
+function quitLive2dWidget() {
+    console.log("quit live2d widget");
+    document.getElementById("waifu-tool-quit")?.click();
+}
+
+// 加载 waifu.css live2d.min.js waifu-tips.js
+if (screen.width >= 768) {
+    Promise.all([
+        loadExternalResource(live2d_path + "waifu.css", "css"),
+        loadExternalResource(live2d_path + "live2d.min.js", "js"),
+        loadExternalResource(live2d_path + "waifu-tips.js", "js"),
+    ])
+        .then(() => {
+            // 配置选项的具体用法见 README.md
+            initWidget({
+                waifuPath: live2d_path + "waifu-tips.json",
+                // apiPath: "https://live2d.fghrsh.net/api/",
+                cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
+                tools: [
+                    "hitokoto",
+                    "asteroids",
+                    "switch-model",
+                    "photo",
+                    "info",
+                    "quit",
+                ],
+            });
+        })
+        .then(() => {
+            document.addEventListener("keydown", (event) => {
+                if (event.ctrlKey && event.altKey) {
+                    if (event.key === "o") {
+                        showLive2dWidget();
+                    } else if (event.key === "q") {
+                        quitLive2dWidget();
+                    }
+                }
+            });
+            quitLive2dWidget();
+        });
+}
+
+console.log(`
+  く__,.ヘヽ.        /  ,ー､ 〉
+           ＼ ', !-─‐-i  /  /´
+           ／｀ｰ'       L/／｀ヽ､
+         /   ／,   /|   ,   ,       ',
+       ｲ   / /-‐/  ｉ  L_ ﾊ ヽ!   i
+        ﾚ ﾍ 7ｲ｀ﾄ   ﾚ'ｧ-ﾄ､!ハ|   |
+          !,/7 '0'     ´0iソ|    |
+          |.从"    _     ,,,, / |./    |
+          ﾚ'| i＞.､,,__  _,.イ /   .i   |
+            ﾚ'| | / k_７_/ﾚ'ヽ,  ﾊ.  |
+              | |/i 〈|/   i  ,.ﾍ |  i  |
+             .|/ /  ｉ：    ﾍ!    ＼  |
+              kヽ>､ﾊ    _,.ﾍ､    /､!
+              !'〈//｀Ｔ´', ＼ ｀'7'ｰr'
+              ﾚ'ヽL__|___i,___,ンﾚ|ノ
+                  ﾄ-,/  |___./
+                  'ｰ'    !_,.:
+`);
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,4 +49,4 @@ @@
         "last 2 versions",
         "not dead"
       ]
-    }
+    }