更新

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";
@@ -35,8 +29,9 @@ const DateTimeFormatter = (ts: number) => {
   let date = new Date(ts);
   return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
 };
-
+const loadData = async () => {
-onMounted(async () => {
+  loading.value = true;
+  events.value = [];
   let res;
   try {
     res = await (await doFetch()).json();
@@ -52,10 +47,14 @@ onMounted(async () => {
   } catch (e) {
     logger.error(e.stack);
   }
-});
+};
+
+onMounted(loadData);
 </script>
 
 <template>
+  <el-button @click="loadData">刷新</el-button>
+  <el-divider/>
   <el-timeline v-if="!loading">
     <el-timeline-item v-for="ev in events" :color="ev.isNew?'#0bbd87':''"
                       :timestamp="DateTimeFormatter(ev.time*1000)">
@@ -65,6 +64,4 @@ onMounted(async () => {
   <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-button circle @click="expanded = !expanded">
         <el-icon>
           <MoonNight/>
         </el-icon>
       </el-button>
-    <el-dialog v-model="drawer" :destroy-on-close="true" :fullscreen="isMobilePhone" :lock-scroll="true"
+      <el-button circle @click="showDrawer">
-               :title="drawerTitle" width="65%">
+        <el-icon>
-      <component :is="drawerContent"/>
+          <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];