更新菜单样式

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "wuhu-torn-helper",
-  "version": "0.8.7",
+  "version": "1.0.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "wuhu-torn-helper",
-      "version": "0.8.7",
+      "version": "1.0.8",
       "devDependencies": {
         "@element-plus/icons-vue": "^2.1.0",
         "@rollup/plugin-alias": "^4.0.3",
@@ -21,7 +21,7 @@
         "@vitejs/plugin-vue": "^4.0.0",
         "@vue/tsconfig": "^0.1.3",
         "cross-env": "^7.0.3",
-        "element-plus": "^2.3.3",
+        "element-plus": "^2.3.10",
         "just-clone": "^6.2.0",
         "npm": "^8.19.2",
         "reflect-metadata": "^0.1.13",
@@ -1577,9 +1577,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001457",
+      "version": "1.0.30001528",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001457.tgz",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001528.tgz",
-      "integrity": "sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==",
+      "integrity": "sha512-0Db4yyjR9QMNlsxh+kKWzQtkyflkG/snYheSzkjmvdEtEXB1+jt7A2HmSEiO6XIJPIbo92lHNGNySvE5pZcs5Q==",
       "dev": true
     },
     "node_modules/chalk": {
@@ -1971,9 +1971,9 @@
       "dev": true
     },
     "node_modules/element-plus": {
-      "version": "2.3.3",
+      "version": "2.3.12",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.3.tgz",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.12.tgz",
-      "integrity": "sha512-Zy61OXrG6b4FF3h29A9ZOUkaEQXjCuFwNa7DlpB3Vo+42Tw5zBbHe5a4BY7i56TVJG5xTbS9UQyA726J91pDqg==",
+      "integrity": "sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==",
       "dev": true,
       "dependencies": {
         "@ctrl/tinycolor": "^3.4.1",
@@ -8747,9 +8747,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001457",
+      "version": "1.0.30001528",
-      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001457.tgz",
+      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001528.tgz",
-      "integrity": "sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA==",
+      "integrity": "sha512-0Db4yyjR9QMNlsxh+kKWzQtkyflkG/snYheSzkjmvdEtEXB1+jt7A2HmSEiO6XIJPIbo92lHNGNySvE5pZcs5Q==",
       "dev": true
     },
     "chalk": {
@@ -9066,9 +9066,9 @@
       "dev": true
     },
     "element-plus": {
-      "version": "2.3.3",
+      "version": "2.3.12",
-      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.3.tgz",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.3.12.tgz",
-      "integrity": "sha512-Zy61OXrG6b4FF3h29A9ZOUkaEQXjCuFwNa7DlpB3Vo+42Tw5zBbHe5a4BY7i56TVJG5xTbS9UQyA726J91pDqg==",
+      "integrity": "sha512-fAWpbKCyt+l1dsqSNPOs/F/dBN4Wp5CGAyxbiS5zqDwI4q3QPM+LxLU2h3GUHMIBtMGCvmsG98j5HPMkTKkvcA==",
       "dev": true,
       "requires": {
         "@ctrl/tinycolor": "^3.4.1",

package.json

@@ -21,7 +21,7 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/tsconfig": "^0.1.3",
     "cross-env": "^7.0.3",
-    "element-plus": "^2.3.3",
+    "element-plus": "^2.3.10",
     "just-clone": "^6.2.0",
     "npm": "^8.19.2",
     "reflect-metadata": "^0.1.13",

src/vue/FloatMenu.vue

@@ -22,7 +22,8 @@
         </el-tab-pane>
       </el-tabs>
     </el-dialog>
-    <el-drawer v-model="expanded" :show-close="false" :size="isMobilePhone ? '85%' : '30%'" direction="rtl">
+    <el-drawer v-model="expanded" :show-close="false" :size="isMobilePhone ? '85%' : '30%'" class="whDrawer"
+               direction="rtl">
       <template #header="{ close, titleId, titleClass }">
         <div :id="titleId" :class="titleClass">
           <el-tooltip content="更新？" placement="bottom-start">
@@ -45,6 +46,10 @@
           关闭
         </el-button>
       </template>
+      <el-card :body-style="{ 'padding': '0' }" style="margin-bottom: 1em">
+        <template #header>
+          <div>快捷动作</div>
+        </template>
         <el-menu :unique-opened="true">
           <el-sub-menu index="1">
             <template #title>
@@ -54,16 +59,16 @@
             <el-sub-menu v-for="(item, i) in travelData" :index="'1-' + (i + 1)">
               <template #title>{{ item.cName }}</template>
               <el-menu-item :index="'1-' + (i + 1) + '1'" @click="travelConfirm(item.index, 0)">
-              普通飞机
+                ❌ 普通飞机
               </el-menu-item>
               <el-menu-item :index="'1-' + (i + 1) + '2'" @click="travelConfirm(item.index, 1)">
-              PI飞机
+                ✅ PI飞机
               </el-menu-item>
               <el-menu-item :index="'1-' + (i + 1) + '3'" @click="travelConfirm(item.index, 2)">
-              股票飞机
+                👍 股票飞机
               </el-menu-item>
               <el-menu-item :index="'1-' + (i + 1) + '4'" @click="travelConfirm(item.index, 3)">
-              商务飞机(机票或内衣店)
+                🥵 商务飞机(机票或内衣店)
               </el-menu-item>
             </el-sub-menu>
           </el-sub-menu>
@@ -72,13 +77,13 @@
               <el-icon>💪</el-icon>
               <span>锻炼</span>
             </template>
-          <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.STR)">力量
+            <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.STR)">力量 STR
             </el-menu-item>
-          <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.DEF)">防御
+            <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.DEF)">防御 DEF
             </el-menu-item>
-          <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.SPD)">速度
+            <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.SPD)">速度 SPD
             </el-menu-item>
-          <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.DEX)">闪避
+            <el-menu-item @click="quickGymTrain.doTrain(BATTLE_STAT.DEX)">闪避 DEX
             </el-menu-item>
           </el-sub-menu>
           <el-sub-menu index="3">
@@ -91,11 +96,30 @@
             <el-menu-item index="3-3" @click="MUZHUANG">🌲 寻找木桩</el-menu-item>
             <el-menu-item index="3-4" @click="_setting">⚙️ 助手设置</el-menu-item>
           </el-sub-menu>
-        <el-menu-item v-for="(item, i) in menuItemList" :index="(4 + i).toString()" @click="menuClick(item)">
+          <!--        <el-menu-item v-for="(item, i) in menuItemList" :index="(4 + i).toString()" @click="menuClick(item)">-->
-          <el-icon>{{ item.title.slice(0, 2) }}</el-icon>
+          <!--          <el-icon>{{ item.title.slice(0, 2) }}</el-icon>-->
-          <span>{{ item.title.slice(2, item.title.length) }}</span>
+          <!--          <span>{{ item.title.slice(2, item.title.length) }}</span>-->
-        </el-menu-item>
+          <!--        </el-menu-item>-->
         </el-menu>
+      </el-card>
+      <el-card :body-style="{ 'padding': '4px' }">
+        <template #header>
+          <div>快捷功能</div>
+        </template>
+        <el-row style="display: flex;">
+          <el-col v-for="item in menuItemList" class="featureCol">
+            <el-card :body-class="'featureMenuBody'" class="featureMenu" shadow="never" @click="menuClick(item)">
+              <!--            <el-card class="featureMenu" @click="menuClick(item)" :body-style="{'padding': '0' }">-->
+              <div>
+                <el-icon class="icon">{{ item.title.slice(0, 2) }}</el-icon>
+              </div>
+              <div class="title">
+                <span>{{ item.title.slice(2, item.title.length) }}</span>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-card>
     </el-drawer>
   </el-config-provider>
 </template>
@@ -236,17 +260,17 @@ const editableTabs = shallowRef([]);
 
 // fast travel
 const travelData = [
-  { cName: "墨西哥", index: 0 },
+  { cName: "🇲🇽 墨西哥", index: 0 },
-  { cName: "开曼", index: 1 },
+  { cName: "🇰🇾 开曼", index: 1 },
-  { cName: "加拿大", index: 2 },
+  { cName: "🇨🇦 加拿大", index: 2 },
-  { cName: "夏威夷", index: 3 },
+  { cName: "🌺 夏威夷", index: 3 },
-  { cName: "嘤国", index: 4 },
+  { cName: "🇬🇧 嘤国", index: 4 },
-  { cName: "阿根廷", index: 5 },
+  { cName: "🇦🇷 阿根廷", index: 5 },
-  { cName: "瑞士 (解毒)", index: 6 },
+  { cName: "🇨🇭 瑞士 (解毒)", index: 6 },
-  { cName: "立本", index: 7 },
+  { cName: "🇯🇵 立本", index: 7 },
-  { cName: "祖国", index: 8 },
+  { cName: "🇨🇳 祖国", index: 8 },
-  { cName: "阿联酋 (UAE)", index: 9 },
+  { cName: "🇦🇪 阿联酋 (UAE)", index: 9 },
-  { cName: "南非", index: 10 },
+  { cName: "🇿🇦 南非", index: 10 },
 ];
 
 const MUZHUANG = () => window.location.replace('https://www.torn.com/item.php?temp=4#xunzhaomuzhuang');
@@ -426,4 +450,38 @@ onMounted(() => {
   top: 32px;
   left: 10px;
 }
+
+.featureCol {
+  max-width: 33.33%;
+}
+
+.featureMenu {
+  cursor: pointer;
+  margin: 4px;
+  border: none;
+}
+
+.featureMenu div {
+  text-align: center;
+}
+
+.featureMenu .icon {
+  font-size: 28px;
+}
+
+.featureMenu .title {
+  font-size: 14px;
+  height: 32px;
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+}
+
+.featureMenu:hover {
+  background-color: #E9EEF6;
+}
+</style>
+<style>
+.whDrawer header {
+  margin-bottom: 4px;
+}
 </style>

src/vue/Test.vue

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