更新

CHANGELOG.md

@@ -5,6 +5,14 @@
 
 # CHANGE
 
+## 1.0.4
+
+2023年06月16日
+
+### 添加
+
+- 标签页管理功能
+
 ## 1.0.3
 
 2023年06月16日

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wuhu-torn-helper",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "芜湖助手",
   "scripts": {
     "release": "cross-env NODE_ENV=production rollup -c && node build.mjs",

src/vue/EventsViewer.vue

@@ -1,9 +1,3 @@
-<script lang="ts">
-export default {
-    name: "EventsViewer"
-}
-</script>
-
 <script lang="ts" setup>
 import { inject, onMounted, Ref, ref } from "vue";
 import { LoggerKey } from "../ts/class/Logger";
@@ -11,60 +5,63 @@ import { LoggerKey } from "../ts/class/Logger";
 const logger = inject(LoggerKey);
 const loading = ref(true);
 const doFetch = () => fetch("https://www.torn.com/page.php", {
-    "headers": {
+  "headers": {
-        "accept": "*/*",
+    "accept": "*/*",
-        "sec-ch-ua-mobile": "?0",
+    "sec-ch-ua-mobile": "?0",
-        "sec-fetch-dest": "empty",
+    "sec-fetch-dest": "empty",
-        "sec-fetch-mode": "cors",
+    "sec-fetch-mode": "cors",
-        "sec-fetch-site": "same-origin",
+    "sec-fetch-site": "same-origin",
-        "x-requested-with": "XMLHttpRequest"
+    "x-requested-with": "XMLHttpRequest"
-    },
+  },
-    "referrer": "https://www.torn.com/page.php?sid=events",
+  "referrer": "https://www.torn.com/page.php?sid=events",
-    "referrerPolicy": "strict-origin-when-cross-origin",
+  "referrerPolicy": "strict-origin-when-cross-origin",
-    "body": (() => {
+  "body": (() => {
-        const data = new FormData();
+    const data = new FormData();
-        data.append('sid', 'eventsData');
+    data.append('sid', 'eventsData');
-        return data;
+    return data;
-    })(),
+  })(),
-    "method": "POST",
+  "method": "POST",
-    "mode": "cors",
+  "mode": "cors",
-    "credentials": "include"
+  "credentials": "include"
 });
 const events: Ref<{ ID: string, message: string, time: number, isNew: boolean }[]> = ref([]);
 const DateTimeFormatter = (ts: number) => {
-    let date = new Date(ts);
+  let date = new Date(ts);
-    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+};
+const loadData = async () => {
+  loading.value = true;
+  events.value = [];
+  let res;
+  try {
+    res = await (await doFetch()).json();
+    if (res.success) {
+      events.value = res.events;
+      if (res['newEventsAmount']) {
+        for (let i = 0; i < res['newEventsAmount']; i++) {
+          events.value[i].isNew = true;
+        }
+      }
+      loading.value = false;
+    }
+  } catch (e) {
+    logger.error(e.stack);
+  }
 };
 
-onMounted(async () => {
+onMounted(loadData);
-    let res;
-    try {
-        res = await (await doFetch()).json();
-        if (res.success) {
-            events.value = res.events;
-            if (res['newEventsAmount']) {
-                for (let i = 0; i < res['newEventsAmount']; i++) {
-                    events.value[i].isNew = true;
-                }
-            }
-            loading.value = false;
-        }
-    } catch (e) {
-        logger.error(e.stack);
-    }
-});
 </script>
 
 <template>
-    <el-timeline v-if="!loading">
+  <el-button @click="loadData">刷新</el-button>
-        <el-timeline-item v-for="ev in events" :color="ev.isNew?'#0bbd87':''"
+  <el-divider/>
-                          :timestamp="DateTimeFormatter(ev.time*1000)">
+  <el-timeline v-if="!loading">
-            <span v-html="ev.message"></span>
+    <el-timeline-item v-for="ev in events" :color="ev.isNew?'#0bbd87':''"
-        </el-timeline-item>
+                      :timestamp="DateTimeFormatter(ev.time*1000)">
-    </el-timeline>
+      <span v-html="ev.message"></span>
-    <el-skeleton v-if="loading" :rows="10" animated/>
+    </el-timeline-item>
+  </el-timeline>
+  <el-skeleton v-if="loading" :rows="10" animated/>
 </template>
 
-<style scoped>
+<style scoped></style>
-
-</style>

src/vue/FloatMenu.vue

@@ -1,13 +1,35 @@
 <template>
   <el-config-provider :size="'default'" :z-index="1000000">
-    <el-button circle class="wh-menu-button" style="z-index: 1000000;" @click="expanded = !expanded">
+    <el-button-group class="wh-menu-button" style="z-index: 1000000;">
-      <el-icon>
+      <el-button circle @click="expanded = !expanded">
-        <MoonNight/>
+        <el-icon>
-      </el-icon>
+          <MoonNight/>
-    </el-button>
+        </el-icon>
-    <el-dialog v-model="drawer" :destroy-on-close="true" :fullscreen="isMobilePhone" :lock-scroll="true"
+      </el-button>
-               :title="drawerTitle" width="65%">
+      <el-button circle @click="showDrawer">
-      <component :is="drawerContent"/>
+        <el-icon>
+          <CopyDocument/>
+        </el-icon>
+      </el-button>
+    </el-button-group>
+    <el-dialog v-model="drawer" :destroy-on-close="false" :fullscreen="isMobilePhone" :lock-scroll="true"
+               :title="drawerTitle" style="padding: 0"
+               width="65%">
+      <el-tabs
+          v-model="editableTabsValue"
+          closable type="card"
+          @tab-remove="removeTab"
+          @tab-click="tabClick"
+      >
+        <el-tab-pane
+            v-for="item in editableTabs"
+            :key="item.name"
+            :label="item.title"
+            :name="item.name"
+        >
+          <component :is="item.content"/>
+        </el-tab-pane>
+      </el-tabs>
     </el-dialog>
     <el-drawer v-model="expanded" :size="isMobilePhone ? '85%' : '30%'" direction="rtl">
       <template #header>
@@ -61,9 +83,9 @@
 
 <script lang="ts" setup>
 
-import { MoonNight } from "@element-plus/icons-vue";
+import { CopyDocument, MoonNight } from "@element-plus/icons-vue";
-import { ElMessage, ElMessageBox } from "element-plus";
+import { ElMessage, ElMessageBox, TabsPaneContext } from "element-plus";
-import { Component, inject, onMounted, ref, shallowRef } from 'vue';
+import { Component, inject, onMounted, ref, shallowRef, triggerRef } from 'vue';
 import { LoggerKey } from "../ts/class/Logger";
 import { QuickGymTrainKey } from "../ts/class/action/QuickGymTrain";
 import { QuickFlyBtnHandlerKey } from "../ts/class/handler/QuickFlyBtnHandler";
@@ -201,6 +223,9 @@ const drawerContent = shallowRef(null);
 const isMobilePhone = ref(false);
 const documentHeight = ref(0);
 const expanded = ref(false);
+// tabs
+const editableTabsValue = ref('');
+const editableTabs = shallowRef([]);
 
 // fast travel
 const travelData = [
@@ -223,10 +248,62 @@ const menuClick = (menuItem: MenuItem) => {
   } else if (menuItem.template) {
     drawer.value = true;
     drawerTitle.value = menuItem.title;
-    drawerContent.value = menuItem.template;
+    // drawerContent.value = menuItem.template;
+    addTab(menuItem);
   }
 };
 
+const showDrawer = () => {
+  if (editableTabs.value.length < 1) {
+    ElMessage.warning('页面还没有打开任何功能标签');
+  } else {
+    drawer.value = true;
+  }
+};
+
+const addTab = (menuItem: MenuItem) => {
+  for (let i = 0; i < editableTabs.value.length; i++) {
+    if (editableTabs.value[i].name === menuItem.title) {
+      editableTabsValue.value = menuItem.title;
+      drawerTitle.value = menuItem.title;
+      return;
+    }
+  }
+  editableTabs.value.push({
+    title: menuItem.title,
+    name: menuItem.title,
+    content: menuItem.template!,
+  });
+  triggerRef(editableTabs);
+  editableTabsValue.value = menuItem.title;
+};
+
+const removeTab = (targetName: string) => {
+  const tabs = editableTabs.value
+  let activeName = editableTabsValue.value
+  if (activeName === targetName) {
+    tabs.forEach((tab, index) => {
+      if (tab.name === targetName) {
+        const nextTab = tabs[index + 1] || tabs[index - 1]
+        if (nextTab) {
+          activeName = nextTab.name
+        }
+      }
+    })
+  }
+
+  editableTabsValue.value = activeName
+  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
+
+  if (editableTabs.value.length < 1) {
+    drawer.value = false;
+  }
+};
+
+const tabClick = (pane: TabsPaneContext) => {
+  drawerTitle.value = <string>pane.paneName;
+}
+
 const travelConfirm = (destIndex: number, typeIndex: number) => {
   const destName = travelData[destIndex].cName;
   const typeName = ['普通飞机', 'PI飞机', '股票飞机', '商务飞机(机票或内衣店)'][typeIndex];