feat: 添加小工具

MaaAssistantArknights · Aug 22, 2023 · 54828cb · 54828cb
1 parent ab4f282
commit 54828cb
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 122 deletions.
diff --git a/packages/renderer/src/assets/icons/link.svg b/packages/renderer/src/assets/icons/link.svg
diff --git a/packages/renderer/src/components/Device/DeviceCard.vue b/packages/renderer/src/components/Device/DeviceCard.vue
@@ -99,10 +99,8 @@ async function handleDeviceConnect() {
 </script>
 
 <template>
-  <div v-if="device" class="device-card" :class="isCurrent ? 'current' : ''" :style="{
-    backgroundColor: isCurrent ? themeVars.hoverColor : 'transparent',
-  }">
-    <NButton class="device-info" text :focusable="false" @click="handleJumpToTask" @dblclick="handleDeviceConnect">
+  <div v-if="device" class="device-card" :class="isCurrent ? 'current' : ''">
+    <NButton class=" device-info" text :focusable="false" @click="handleJumpToTask" @dblclick="handleDeviceConnect">
       <NTooltip>
         <template #trigger>
           <div class="device-status" :data-status="device?.status" />

diff --git a/packages/renderer/src/components/Device/DeviceMenu.vue b/packages/renderer/src/components/Device/DeviceMenu.vue
@@ -105,3 +105,9 @@ function handleJumpToTask(device: Device) {
 <template>
   <NMenu :options="menuOptions" :root-indent="0" :indent="48" />
 </template>
+
+<style lang="less" scoped>
+.n-menu :deep(.n-menu-item-content::before) {
+  left: 0;
+}
+</style>
diff --git a/packages/renderer/src/components/Tool/Copilot.vue b/packages/renderer/src/components/Tool/Copilot.vue
@@ -7,6 +7,8 @@ import {
   NInput,
   NInputNumber,
   NModal,
+  NGrid,
+  NGridItem,
   NUpload,
   NUploadDragger,
   type UploadFileInfo,
@@ -146,14 +148,14 @@ function track(text: string) {
   const pat = /BV[0-9a-zA-Z]+/
   const res: (
     | {
-        type: 'text'
-        text: string
-      }
+      type: 'text'
+      text: string
+    }
     | {
-        type: 'link'
-        text: string
-        url: string
-      }
+      type: 'link'
+      text: string
+      url: string
+    }
   )[] = []
   while (text.length > 0) {
     const m = pat.exec(text)
@@ -336,29 +338,23 @@ function previewTileClick(tile: TileClickData) {
 </script>
 
 <template>
-  <NCard>
+  <NCard :bordered="false">
     <template #header>
       <span class="CopilotHeader"> 自动战斗 </span>
     </template>
-    <div class="CopilotConfig">
-      <NInput
-        placeholder="神秘链接 maa://"
-        v-model:value="maaLink"
-        @blur="startFetch"
-        @change="startFetch"
-      ></NInput>
-      <NUpload
-        :default-upload="false"
-        :show-file-list="false"
-        :multiple="false"
-        accept=".json"
-        @change="parseInfo"
-      >
-        <NUploadDragger style="display: block">
-          <span> 选择作业 </span>
-        </NUploadDragger>
-      </NUpload>
-    </div>
+    <NGrid class="CopilotConfig" :cols="1" :y-gap="16">
+      <NGridItem>
+        <NInput placeholder="神秘链接 maa://" v-model:value="maaLink" @blur="startFetch" @change="startFetch"></NInput>
+      </NGridItem>
+      <NGridItem>
+        <NUpload :default-upload="false" :show-file-list="false" :multiple="false" accept=".json" @change="parseInfo">
+          <NUploadDragger style="display: block">
+            <span> 选择本地作业 </span>
+          </NUploadDragger>
+        </NUpload>
+      </NGridItem>
+
+    </NGrid>
 
     <div class="CopilotContent" v-if="data">
       <NCard v-if="data" embedded style="grid-column: span 2">
@@ -383,13 +379,8 @@ function previewTileClick(tile: TileClickData) {
                 <NButton @click="popupPreview()"> theresa.wiki </NButton>
                 <NModal v-model:show="showPreview">
                   <div>
-                    <TMap
-                      ref="tmap"
-                      v-show="!tmapLoading"
-                      @tileClick="previewTileClick"
-                      @mapReady="tmapLoading = false"
-                      :stageId="mapPreview"
-                    ></TMap>
+                    <TMap ref="tmap" v-show="!tmapLoading" @tileClick="previewTileClick" @mapReady="tmapLoading = false"
+                      :stageId="mapPreview"></TMap>
                     <span v-show="tmapLoading"> Loading... </span>
                   </div>
                 </NModal>
@@ -474,10 +465,7 @@ function previewTileClick(tile: TileClickData) {
             </template>
             <div class="SSSCopilotToolMen">
               <template v-for="toolmen in Object.entries(data.tool_men)" :key="toolmen[0]">
-                <NAvatar
-                  size="small"
-                  :src="getProfessionImage(toolmen[0].replace('术士', '术师'))"
-                ></NAvatar>
+                <NAvatar size="small" :src="getProfessionImage(toolmen[0].replace('术士', '术师'))"></NAvatar>
                 <span> {{ toolmen[0] }} </span>
                 <span> {{ toolmen[1] }} </span>
               </template>
@@ -506,7 +494,7 @@ function previewTileClick(tile: TileClickData) {
     flex-direction: column;
     gap: 8px;
 
-    & > div {
+    &>div {
       display: flex;
       align-items: center;
       gap: 4px;

diff --git a/packages/renderer/src/components/Tool/Item.vue b/packages/renderer/src/components/Tool/Item.vue
@@ -76,7 +76,7 @@ async function doDepot() {
 </script>
 
 <template>
-  <NCard>
+  <NCard :bordered="false">
     <template #header>
       <div class="DepotResultHeader">
         <div class="DepotResultTitle">仓库识别</div>
@@ -88,31 +88,20 @@ async function doDepot() {
     </template>
 
     <div class="DepotResultPanel">
-      <div
-        class="DepotResultLayer"
-        :class="{
-          __Processing: processing,
-        }"
-      ></div>
+      <div class="DepotResultLayer" :class="{
+        __Processing: processing,
+      }"></div>
       <div class="DepotResultContent">
-        <div
-          class="DepotResultItem"
-          v-for="item in result?.arkplanner.object.items
-            // .sort((a, b) => (items[b.id as keyof typeof items].rarity - items[a.id as keyof typeof items].rarity))
-            .sort((a, b) => (items[a.id as keyof typeof items].sortId - items[b.id as keyof typeof items].sortId))
-            // .sort((a, b) => a.id.localeCompare(b.id))
-             ?? []"
-          :key="item.id"
-        >
+        <div class="DepotResultItem" v-for="item in result?.arkplanner.object.items
+          // .sort((a, b) => (items[b.id as keyof typeof items].rarity - items[a.id as keyof typeof items].rarity))
+          .sort((a, b) => (items[a.id as keyof typeof items].sortId - items[b.id as keyof typeof items].sortId))
+          // .sort((a, b) => a.id.localeCompare(b.id))
+          ?? []" :key="item.id">
           <NTooltip trigger="hover">
             <template #trigger>
-              <NAvatar
-                :src="getItemBorderedImage(item.name)"
-                :style="{
-                  border: `2px solid ${rareColor[items[item.id as keyof typeof items].rarity as keyof typeof rareColor] ?? 'wheat'}`,
-                }"
-                size="large"
-              ></NAvatar>
+              <NAvatar :src="getItemBorderedImage(item.name)" :style="{
+                border: `2px solid ${rareColor[items[item.id as keyof typeof items].rarity as keyof typeof rareColor] ?? 'wheat'}`,
+              }" size="large"></NAvatar>
             </template>
 
             {{ item.name }}
@@ -171,6 +160,7 @@ async function doDepot() {
     display: grid;
     gap: 8px;
     grid-template-columns: repeat(6, 1fr);
+
     & .DepotResultItem {
       display: flex;
       gap: 4px;

diff --git a/packages/renderer/src/components/Tool/OperBox.vue b/packages/renderer/src/components/Tool/OperBox.vue
@@ -131,7 +131,7 @@ async function doOperBox() {
 </script>
 
 <template>
-  <NCard>
+  <NCard :bordered="false">
     <template #header>
       <div class="OperBoxResultHeader">
         <div class="OperBoxResultTitle">干员识别</div>
@@ -155,33 +155,21 @@ async function doOperBox() {
     </template>
 
     <div class="OperBoxResultPanel">
-      <div
-        class="OperBoxResultLayer"
-        :class="{
-          __Processing: processing,
-        }"
-      ></div>
+      <div class="OperBoxResultLayer" :class="{
+        __Processing: processing,
+      }"></div>
       <div class="OperBoxResultContent">
         <div v-for="i in 6" :key="i" class="OperBoxResultContentRow">
-          <div
-            v-for="oper in owned?.[(7 - i) as OneToSix] ?? []"
-            :key="oper.name"
-            :class="{
-              Hide: !isShow(oper.own, oper.lim),
-            }"
-            class="OperBoxResultContentItem"
-          >
+          <div v-for="oper in owned?.[(7 - i) as OneToSix] ?? []" :key="oper.name" :class="{
+            Hide: !isShow(oper.own, oper.lim),
+          }" class="OperBoxResultContentItem">
             <NTooltip trigger="hover">
               <template #trigger>
-                <NAvatar
-                  v-show="isShow(oper.own, oper.lim)"
-                  :src="getOperatorAvatar(oper.name)"
-                  :style="{
-                        border: `2px solid ${operColor[(7-i) as OneToSix]}`,
-                        opacity: isHighlight(oper.own) ? 1 : 0.4,
-                        transition: 'opacity 0.5s',
-                      }"
-                ></NAvatar>
+                <NAvatar v-show="isShow(oper.own, oper.lim)" :src="getOperatorAvatar(oper.name)" :style="{
+                  border: `2px solid ${operColor[(7 - i) as OneToSix]}`,
+                  opacity: isHighlight(oper.own) ? 1 : 0.4,
+                  transition: 'opacity 0.5s',
+                }"></NAvatar>
               </template>
 
               {{ oper.name }}
@@ -210,7 +198,7 @@ async function doOperBox() {
     width: 100%;
     justify-content: space-around;
 
-    & > div {
+    &>div {
       display: flex;
       align-items: center;
       gap: 4px;
@@ -248,11 +236,11 @@ async function doOperBox() {
     flex-direction: column;
     gap: 16px;
 
-    & > .OperBoxResultContentRow {
+    &>.OperBoxResultContentRow {
       display: flex;
       flex-wrap: wrap;
 
-      & > .OperBoxResultContentItem {
+      &>.OperBoxResultContentItem {
         margin-right: 8px;
         width: 50px;
         transition: width 0.5s, margin 0.5s;

diff --git a/packages/renderer/src/components/Tool/Recruit.vue b/packages/renderer/src/components/Tool/Recruit.vue
@@ -111,7 +111,7 @@ async function doRecruit(selectTags: string[] = []) {
 </script>
 
 <template>
-  <NCard>
+  <NCard :bordered="false">
     <template #header>
       <div class="RecruitResultHeader">
         <div class="RecruitResultTitle">公招计算</div>
@@ -128,12 +128,9 @@ async function doRecruit(selectTags: string[] = []) {
     </template>
 
     <div class="RecruitResultPanel">
-      <div
-        class="RecruitResultLayer"
-        :class="{
-          __Processing: processing,
-        }"
-      ></div>
+      <div class="RecruitResultLayer" :class="{
+        __Processing: processing,
+      }"></div>
       <template v-if="result">
         <div class="RecruitTag">
           <div>识别结果</div>
@@ -158,12 +155,9 @@ async function doRecruit(selectTags: string[] = []) {
               <template v-if="useAvatar">
                 <NTooltip v-for="oper in res.opers" :key="oper.name" trigger="hover">
                   <template #trigger>
-                    <NAvatar
-                      :src="getOperatorAvatar(oper.name)"
-                      :style="{
-                        border: `2px solid ${operColor[oper.level]}`,
-                      }"
-                    ></NAvatar>
+                    <NAvatar :src="getOperatorAvatar(oper.name)" :style="{
+                      border: `2px solid ${operColor[oper.level]}`,
+                    }"></NAvatar>
                   </template>
 
                   {{ oper.name }}
@@ -172,23 +166,16 @@ async function doRecruit(selectTags: string[] = []) {
               <template v-else>
                 <NTooltip v-for="oper in res.opers" :key="oper.name" trigger="hover">
                   <template #trigger>
-                    <NTag
-                      :color="{
-                        textColor: operColor[oper.level],
-                        borderColor: operColor[oper.level],
-                      }"
-                    >
-                      {{ oper.name }}</NTag
-                    >
+                    <NTag :color="{
+                      textColor: operColor[oper.level],
+                      borderColor: operColor[oper.level],
+                    }">
+                      {{ oper.name }}</NTag>
                   </template>
 
-                  <NAvatar
-                    size="large"
-                    :src="getOperatorAvatar(oper.name)"
-                    :style="{
-                      border: `2px solid ${operColor[oper.level]}`,
-                    }"
-                  ></NAvatar>
+                  <NAvatar size="large" :src="getOperatorAvatar(oper.name)" :style="{
+                    border: `2px solid ${operColor[oper.level]}`,
+                  }"></NAvatar>
                 </NTooltip>
               </template>
             </div>