信用与线索适配移动端

ArkMowers · Sep 22, 2023 · fa8a0dd · fa8a0dd
1 parent 17e99ce
commit fa8a0dd
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 49 deletions.
diff --git a/ui/src/components/Clue.vue b/ui/src/components/Clue.vue
@@ -13,7 +13,10 @@ const {
   maa_credit_fight
 } = storeToRefs(store)
 
-import { h } from 'vue'
+import { h, inject } from 'vue'
+
+const mobile = inject('mobile')
+
 import { NTag, NAvatar } from 'naive-ui'
 
 function render_tag({ option, handleClose }) {
@@ -45,42 +48,40 @@ function render_label(option) {
 
 <template>
   <n-card title="线索收集与信用">
-    <template #header>
-      <n-checkbox v-model:checked="enable_party">
-        <div class="card-title">线索收集</div>
-      </n-checkbox>
-    </template>
-    <n-h4>信用设置</n-h4>
     <n-space vertical>
-      <n-checkbox v-model:checked="maa_enable">调用Maa进行信用商店购物</n-checkbox>
-      <n-checkbox v-model:checked="maa_credit_fight">调用Maa进行信用作战</n-checkbox>
+      <n-checkbox v-model:checked="enable_party">线索收集</n-checkbox>
+      <n-checkbox v-model:checked="maa_credit_fight">信用作战（OF-1）</n-checkbox>
     </n-space>
-    <n-h4>优先购买与黑名单</n-h4>
-    <p>
-      信用商店性价比可参考<n-button
+    <n-divider />
+    <n-checkbox v-model:checked="maa_enable" class="maa-shop">Maa信用商店购物</n-checkbox>
+    <help-text>
+      <span>性价比参考：</span>
+      <n-button
         text
         tag="a"
-        href="https://yituliu.site/"
+        href="https://yituliu.site/material/store"
         target="_blank"
         type="primary"
-        >明日方舟一图流</n-button
-      >。注意跑单时赤金与作战记录均大幅升值。
-    </p>
-    <table>
-      <tr>
-        <td>信用溢出：</td>
-        <td>
-          <n-radio-group v-model:value="maa_mall_ignore_blacklist_when_full">
-            <n-space>
-              <n-radio :value="false">停止购买</n-radio>
-              <n-radio :value="true">无视黑名单继续购买，直至不再溢出</n-radio>
-            </n-space>
-          </n-radio-group>
-        </td>
-      </tr>
-      <tr>
-        <td>优先购买：</td>
-        <td>
+        >明日方舟一图流 - 商店性价比</n-button
+      >
+      <p>注意：跑单时赤金与作战记录均大幅升值</p>
+    </help-text>
+    <n-form
+      :label-placement="mobile ? 'top' : 'left'"
+      :show-feedback="false"
+      label-width="72"
+      label-align="left"
+    >
+      <n-form-item label="信用溢出">
+        <n-radio-group v-model:value="maa_mall_ignore_blacklist_when_full">
+          <n-space>
+            <n-radio :value="false">停止购买</n-radio>
+            <n-radio :value="true">无视黑名单继续购买，直至不再溢出</n-radio>
+          </n-space>
+        </n-radio-group>
+      </n-form-item>
+      <n-form-item label="优先购买">
+        <n-radio-group v-model:value="maa_mall_ignore_blacklist_when_full">
           <n-select
             multiple
             filterable
@@ -90,23 +91,20 @@ function render_label(option) {
             :render-tag="render_tag"
             :render-label="render_label"
           />
-        </td>
-      </tr>
-      <tr>
-        <td>黑名单：</td>
-        <td>
-          <n-select
-            multiple
-            filterable
-            tag
-            :options="shop_list"
-            v-model:value="maa_mall_blacklist"
-            :render-tag="render_tag"
-            :render-label="render_label"
-          />
-        </td>
-      </tr>
-    </table>
+        </n-radio-group>
+      </n-form-item>
+      <n-form-item label="黑名单">
+        <n-select
+          multiple
+          filterable
+          tag
+          :options="shop_list"
+          v-model:value="maa_mall_blacklist"
+          :render-tag="render_tag"
+          :render-label="render_label"
+        />
+      </n-form-item>
+    </n-form>
   </n-card>
 </template>
 
@@ -144,4 +142,13 @@ td {
   display: flex;
   gap: 12px;
 }
+
+.h4 {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.maa-shop {
+  margin: 8px 0;
+}
 </style>
diff --git a/ui/src/pages/Advanced.vue b/ui/src/pages/Advanced.vue
@@ -2,7 +2,7 @@
 import { useConfigStore } from '@/stores/config'
 import { usePlanStore } from '@/stores/plan'
 import { storeToRefs } from 'pinia'
-import { computed, inject } from 'vue'
+import { computed, inject, h } from 'vue'
 
 import pinyinMatch from 'pinyin-match/es/traditional'