更新

global.d.ts

@@ -116,6 +116,15 @@ declare module "*.css" {
     const value: string;
     export default value;
 }
+// declare module '*.vue' {
+//     import type { DefineComponent } from 'vue'
+//     const component: DefineComponent<{}, {}, any>
+//
+//     export interface HTMLAttributes {
+//         vModel?: any;
+//     }
+//     export default component
+// }
 
 declare function GM_xmlhttpRequest(init: any): void;
 

package.json

@@ -3,21 +3,26 @@
   "version": "0.8.2",
   "description": "芜湖助手",
   "scripts": {
-    "release": "rollup -c rollup-prod.config.js && node build.js",
+    "release": "cross-env NODE_ENV=production rollup -c rollup-prod.config.js && node build.js",
-    "watch": "rollup -c -w"
+    "watch": "cross-env NODE_ENV=development rollup -c -w"
   },
   "devDependencies": {
+    "@rollup/plugin-alias": "^4.0.3",
     "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^8.5.0",
     "@types/jquery": "^3.5.14",
     "@types/node": "^18.0.6",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "cross-env": "^7.0.3",
     "npm": "^8.19.2",
     "rollup": "^2.79.0",
-    "rollup-plugin-html-literals": "^1.1.5",
+    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-serve": "^2.0.1",
     "rollup-plugin-string-html": "^1.0.0",
     "tslib": "^2.4.0",
-    "typescript": "^4.8.3"
+    "typescript": "^4.8.3",
+    "vue": "^3.2.47"
   }
 }

rollup-prod.config.js

@@ -1,5 +1,6 @@
 import terser from "@rollup/plugin-terser";
-import devConfig from "./rollup.config";
+import rollupConfig from "./rollup.config";
 
-devConfig.plugins.push(terser());
+rollupConfig.plugins.push(terser());
-export default devConfig;
+rollupConfig.output.file = 'dist/bundle.min.js';
+export default rollupConfig;

rollup.config.js

@@ -1,7 +1,15 @@
 import typescript from "@rollup/plugin-typescript";
 import json from "@rollup/plugin-json";
 import html from "rollup-plugin-string-html";
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import alias from "@rollup/plugin-alias";
+import postcss from 'rollup-plugin-postcss';
+import vue from "@vitejs/plugin-vue";
 
+let node_env = process.env.NODE_ENV;
+let vuePath = node_env === 'production' ?
+    'vue/dist/vue.runtime.esm-browser.prod.js' : 'vue/dist/vue.runtime.esm-browser.js';
 export default {
     input: 'src/ts/index.ts',
     output: {
@@ -9,15 +17,33 @@ export default {
         format: 'iife',
     },
     plugins: [
-        typescript(),
         json(),
+        alias({
+            entries: [{ find: 'vue', replacement: vuePath }]
+        }),
+        replace({
+            values: {
+                'process.env.NODE_ENV': () => JSON.stringify(node_env),
+                '__VUE_OPTIONS_API__': () => JSON.stringify(false),
+                '__VUE_PROD_DEVTOOLS__': () => JSON.stringify(true),
+            },
+            preventAssignment: true,
+        }),
+        vue({ isProduction: node_env === 'production' }),
+        postcss({ minimize: true }),
+        resolve({
+            browser: true,
+            preferBuiltins: false,
+        }),
+        typescript(),
         html({
-            include: ["**/*.html", "**/*.css"],
+            // include: ["**/*.html", "**/*.css"],
+            include: ["**/*.html"],
             minifier: {
                 includeAutoGeneratedTags: true,
-                removeAttributeQuotes: true,
+                removeAttributeQuotes: false,
                 removeComments: true,
-                removeRedundantAttributes: true,
+                removeRedundantAttributes: false,
                 removeScriptTypeAttributes: true,
                 removeStyleLinkTypeAttributes: true,
                 sortClassName: true,

src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

src/ts/class/utils/Popup.ts

@@ -9,14 +9,18 @@ export default class Popup extends WuhuBase {
     className = 'Popup';
     private readonly container: HTMLElement = null;
     private readonly node: HTMLElement = null;
+    private onClosing: () => unknown;
 
     /**
      * 构造新弹窗
      * @param innerHTML
      * @param title
+     * @param onClosing
      */
-    constructor(innerHTML: string, title: string = '芜湖助手') {
+    constructor(innerHTML: string, title: string = '芜湖助手', onClosing: () => unknown = () => {
+    }) {
         super();
+        this.onClosing = onClosing;
         if (Popup.glob.popup_node) {
             Log.info('关闭前一个弹窗');
             Popup.glob.popup_node.close();
@@ -37,6 +41,7 @@ export default class Popup extends WuhuBase {
     }
 
     public close() {
+        this.onClosing();
         this.container.remove();
         this.showChat();
     }
@@ -59,4 +64,16 @@ export default class Popup extends WuhuBase {
     // 禁止单例调用
     private getInstance() {
     }
+
+    public setOnClosing(onClosing): void {
+        if (!onClosing) {
+            throw new Error('无方法用于设置onClosing');
+        }
+        this.onClosing = onClosing;
+    }
+
+    public closing(func: () => unknown): Popup {
+        this.setOnClosing(func);
+        return this;
+    }
 }

src/ts/decs/TestDeco.ts

@@ -0,0 +1,5 @@
+import Log from "../class/Log";
+
+export default function (tar: unknown) {
+    Log.info("TestDeco", tar);
+}

src/ts/static/html/buyBeer/shop_beer_static_item.html

@@ -1,60 +1,64 @@
 <div class="acc-title">
-<span class="item-desc">
+    <span class="item-desc tt-buy" style="display: inline-block;">
     <span aria-labelledby="180-name 180-price 180-stock" class="item Alcohol" itemid="180" loaded="0" tabindex="0">
-<img alt="Bottle of Beer" aria-hidden="true" class="torn-item item-plate" data-converted="1"
+     <span class="item-plate">
-     data-size="large" id="item-1bea9f66-a6c4-475c-accb-41dcb67af64f-old" src="/images/items/180/large.png"
+    <img alt="Bottle of Beer" class="torn-item large" src="/images/items/180/large.png">
-     style="opacity: 0;">
+    </span>
-<span class="item-hover">
+    <span class="item-hover">
-<button aria-label="Show info: Bottle of Beer" class="view-h wai-btn" i-data="i_723_228_51_52" value="100"></button>
+    <button aria-label="Show info: Bottle of Beer" class="view-h wai-btn" value="100"></button>
-<button aria-label="Buy: Bottle of Beer" class="buy-h wai-btn" i-data="i_774_228_51_52" value="100"></button>
+    <button aria-label="Buy: Bottle of Beer" class="buy-h wai-btn" i-data="i_661_346_51_52" value="100"></button>
+    </span>
     </span>
-<canvas aria-label="Bottle of Beer" class="torn-item item-plate item-converted" height="50"
-        id="item-1bea9f66-a6c4-475c-accb-41dcb67af64f"
-        item-mode="light" role="img" style="opacity: 1;" width="100"></canvas></span>
     <span class="desc">
-<span class="name  t-overflow bold" id="180-name">啤酒</span>
+    <span id="180-name" class="name  t-overflow bold">一瓶啤酒</span>
-<span class="price t-gray-6" data-sell="$5" id="180-price">$10</span>
+    <span id="180-price" class="price t-gray-6" data-sell="$5">$10</span>
-<span class="stock t-gray-6 t-overflow" id="180-stock">酒 (<span class="instock">1100</span>存货)</span>
+    <span id="180-stock" class="stock t-gray-6 t-overflow">Alcohol (<span class="instock">600</span> in stock)</span>
     </span>
     <span class="buy-act-wrap">
+    <button aria-label="Close" class="close-icon p0 wai-btn" value="100"></button>
     <label class="wai" for="180">Amount
     of Bottle of Beer</label>
-<input autocomplete="new-amount" id="180" maxlength="3" name="buyAmount[]" type="text" value="100">
+    <input id="180" autocomplete="new-amount" maxlength="3" name="buyAmount[]" type="text" value="100">
     <span class="buy-act bold">
-<button class="wai-support t-blue h">买</button>
+    <button class="wai-support t-blue h" i-data="i_815_375_53_34" value="100">Buy<br><span
-<div class="tt-max-buy-overlay"></div>
+            class="tt-max-buy">fill max</span></button>
+    <div class="tt-max-buy-overlay"></div></span>
     </span>
     </span>
-</span>
+    <div class="torn-divider divider-right"></div>
-    <div class="confirm-wrap">
+    <div class="confirm-wrap" style="display: none;">
     <span class="confirm">
     <span>
-点击确定购买
+    确定购买
     </span>
     <span>
     <span class="count">100</span>
-瓶啤酒
+    x Bottle of Beer for
     $<span class="total">1,000</span>
     </span>
     <span class="confirm-act m-top5">
-<a class="wai-support yes m-right10 bold t-blue h" data-id="180" href="#" i-data="i_819_263_23_16">
+    <a class="wai-support yes m-right10 bold t-blue h" data-id="180" href="#" i-data="i_705_379_24_14">
-确定
+    Yes
     </a>
     <span class="no bold">
-<a class="wai-support t-blue h" href="#" i-data="i_852_263_18_16">
+    <a class="wai-support t-blue h" href="#" i-data="i_740_379_16_14">
-不
+    No
     </a>
     </span>
     </span>
     </span>
     </div>
-    <div class="success-wrap">
+    <div class="success-wrap" style="display: none;">
-<span class="success">
+    <span class="success"><span class="t-red bold">
-<span class="t-red bold">
+            There is not enough stock left to buy <b>100</b> of this item.
-<span class="ajax-preloader"></span>
             </span>
-</span>
+    <span class="confirm-act m-top5">
-        <button aria-label="Close" class="close-icon p0 wai-btn" i-data="i_954_228_10_11" value="100"></button>
+
+            <a class="items m-right10 bold t-blue h" href="item.php">Your Items</a>
+
+
+    </span></span>
+        <button aria-label="Close" class="close-icon p0 wai-btn" i-data="i_840_344_10_11" value="100"></button>
     </div>
     <div class="msg-wrap">
      <span class="t-green bold">

src/ts/test/Test.ts

@@ -1,57 +1,56 @@
 import WuhuBase from "../class/WuhuBase";
 import Log from "../class/Log";
-import CommonUtils from "../class/utils/CommonUtils";
 import Popup from "../class/utils/Popup";
 import CompanyHelper from "../class/action/CompanyHelper";
 import globVars from "../globVars";
-import FetchUtils from "../class/utils/FetchUtils";
+import { createApp } from "vue";
-import ItemValueQueryHandler from "../class/handler/ItemValueQueryHandler";
+import ItemPrice from "../vue/ItemPrice.vue"
-import createApp from "vue";
 
 export default class Test extends WuhuBase {
     className = 'Test';
 
     public test(): void {
-        let popup = new Popup(CommonUtils.getInstance().getTravelStage().toString());
+        let popup = new Popup(
+            // '<input v-model="itemNameInput" placeholder="输入物品名(英)" /><br/>' +
+            // '<select v-if="itemNameInput" v-on:select=""><option v-for="item in filteredItems">{{ item }}</option></select>' +
+            // '<p v-if="itemInfo"></p>' +
+            ''
+        );
         popup.getElement()['__POOL__'] = Test.getPool();
         Log.info({ NET: globVars.WH_NET_LOG });
-        FetchUtils.getInstance().ajaxFetch({
+        // let vueApp = createApp({
-            url: '/inventory.php?step=info&itemID=205&armouryID=0&asObject=true',
+        //     data() {
-
+        //         return {
-            method: 'GET',
+        //             itemNameInput: "",
-            referrer: 'bazaar.php',
+        //             itemInfo:{}
-        });
+        //         }
-        ItemValueQueryHandler.getInstance().show();
+        //     },
-        // this.case1()
+        //     computed: {
-        // this.case2()
+        //         filteredItems() {
-        // this.case3().then();
+        //             let arr = ['123', '456', '789', '135', '246', '357', '579'];
-        createApp()
+        //             let out = [];
+        //             if (this.itemNameInput) {
+        //                 arr.forEach(v => {
+        //                     v.includes(this.itemNameInput) && out.push(v);
+        //                 })
+        //             }
+        //             return out;
+        //         }
+        //     }
+        // });
+        let vueApp = createApp(ItemPrice);
+        vueApp.mount('#wh-popup-cont');
+        popup.setOnClosing(() => vueApp.unmount());
     }
 
     private case1() {
-        const temp = document.createElement("DIV");
+        // FetchUtils.getInstance().ajaxFetch({
-        const temp2 = document.createElement("DIV");
+        //     url: '/inventory.php?step=info&itemID=205&armouryID=0&asObject=true',
-
+        //
-        // @ts-ignore
+        //     method: 'GET',
-        temp.append(...document.body.childNodes);
+        //     referrer: 'bazaar.php',
-        // @ts-ignore
+        // });
-        temp2.append(...document.head.childNodes);
+        // ItemValueQueryHandler.getInstance().show();
-        temp2.querySelectorAll('script[src*="google"]').forEach(item => item.remove());
-        temp2.querySelectorAll('#gtm_tag').forEach(item => item.remove());
-        temp2.querySelectorAll('script[src*="chat/gonline"]').forEach(item => item.remove());
-        temp2.querySelectorAll('script[nonce]').forEach(item => item.remove());
-
-        window.stop();
-
-        // document.body.outerHTML = document.body.outerHTML;
-        Log.info(document.body.outerHTML);
-        document.body.innerHTML = "";
-        document.head.innerHTML = "";
-        // @ts-ignore
-        document.body.append(...temp.childNodes);
-        // @ts-ignore
-        // document.head.append(...temp2.childNodes);
-        document.body.insertAdjacentHTML('afterbegin', temp2.innerHTML);
     }
 
     private case2() {

src/ts/vue/Hello.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Hello"
+}
+</script>
+
+<style scoped>
+
+</style>

src/ts/vue/ItemPrice.vue

@@ -0,0 +1,45 @@
+<template>
+  <input v-model="itemNameInput" placeholder="输入物品名(英)"/><br/>
+  <select v-if="itemNameInput" v-on:select="">
+    <option v-for="item in filteredItems">{{ item }}</option>
+  </select>
+  <p v-if="itemInfo">
+    {{ itemInfo.value }}
+  </p>
+</template>
+
+<script lang="ts">
+import Hello from "./Hello.vue";
+
+export default {
+  name: "ItemPrice",
+  components: { Hello },
+  data() {
+    return {
+      itemNameInput: "",
+      itemInfo: {
+        value: 100
+      }
+    }
+  },
+  computed: {
+    filteredItems() {
+      let arr = ['123', '456', '789', '135', '246', '357', '579'];
+      let out = [];
+      if (this.itemNameInput) {
+        arr.forEach(v => {
+          v.includes(this.itemNameInput) && out.push(v);
+        })
+      }
+      return out;
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  background: red;
+  color: white;
+}
+</style>

tsconfig.json

@@ -10,6 +10,10 @@
     "removeComments": true,
     "sourceMap": false,
     "resolveJsonModule": true,
-    "strict": false
+    "strict": false,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "strictNullChecks": false,
+    "strictFunctionTypes": false
   }
 }