MaaRogue适配移动端

ArkMowers · Sep 22, 2023 · 38a322d · 38a322d
1 parent cff754a
commit 38a322d
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 89 deletions.
diff --git a/ui/components.d.ts b/ui/components.d.ts
@@ -14,13 +14,16 @@ declare module '@vue/runtime-core' {
     HelpText: typeof import('./src/components/HelpText.vue')['default']
     MaaBasic: typeof import('./src/components/MaaBasic.vue')['default']
     MaaRogue: typeof import('./src/components/MaaRogue.vue')['default']
+    MaaSss: typeof import('./src/components/MaaSss.vue')['default']
     MaaWeekly: typeof import('./src/components/MaaWeekly.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
     NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
     NH4: typeof import('naive-ui')['NH4']
     NIcon: typeof import('naive-ui')['NIcon']

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script setup>
-import { onMounted, inject } from 'vue'
+import { onMounted, inject, provide } from 'vue'
 import { storeToRefs } from 'pinia'
 import doc from '@/pages/Doc.vue'
 import home from '@/pages/Home.vue'
@@ -76,10 +76,15 @@ function set_window_height() {
 
 const loaded = ref(false)
 
+const mobile = ref(true)
+provide('mobile', mobile)
+
 onMounted(async () => {
   set_window_height()
+  mobile.value = window.innerWidth < 500
   window.addEventListener('resize', () => {
     set_window_height()
+    mobile.value = window.innerWidth < 500
   })
 
   const params = new URLSearchParams(document.location.search)
@@ -174,7 +179,7 @@ td {
 }
 
 .external-container {
-  width: 600px;
+  max-width: 600px;
   margin: 0 auto;
 }
 

diff --git a/ui/src/components/MaaRogue.vue b/ui/src/components/MaaRogue.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { useConfigStore } from '@/stores/config'
 import { storeToRefs } from 'pinia'
+import { inject } from 'vue'
+
+const mobile = inject('mobile')
 
 const store = useConfigStore()
 
@@ -72,80 +75,53 @@ const roles = [
 </script>
 
 <template>
-  <table class="tab-content">
-    <tr>
-      <td>主题：</td>
-      <td>
-        <n-radio-group v-model:value="maa_rg_theme">
-          <n-space>
-            <n-radio v-for="t in rogue_themes" :value="t.value">{{ t.label }}</n-radio>
-          </n-space>
-        </n-radio-group>
-      </td>
-    </tr>
-    <tr>
-      <td>分队：</td>
-      <td>
-        <n-select v-model:value="rogue.squad" :options="squad[maa_rg_theme]" />
-      </td>
-    </tr>
-    <tr>
-      <td>职业：</td>
-      <td>
-        <n-select v-model:value="rogue.roles" :options="roles" />
-      </td>
-    </tr>
-    <tr>
-      <td>干员：</td>
-      <td>
-        <n-input v-model:value="rogue.core_char" />
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2">
-        <n-checkbox v-model:checked="rogue.use_support">开局干员使用助战</n-checkbox>
-      </td>
-    </tr>
-    <tr v-if="rogue.use_support">
-      <td colspan="2">
-        <n-checkbox v-model:checked="rogue.use_nonfriend_support"
-          >开局干员使用非好友助战</n-checkbox
-        >
-      </td>
-    </tr>
-    <tr>
-      <td>策略：</td>
-      <td>
-        <n-radio-group v-model:value="rogue.mode">
-          <n-space>
-            <n-radio :value="0">刷等级</n-radio>
-            <n-radio :value="1">刷源石锭</n-radio>
-          </n-space>
-        </n-radio-group>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2">
-        <n-checkbox v-model:checked="rogue.investment_enabled">投资源石锭</n-checkbox>
-      </td>
-    </tr>
-    <tr v-if="rogue.investment_enabled">
-      <td colspan="2">
-        <n-checkbox v-model:checked="rogue.stop_when_investment_full"
-          >储备源石锭达到上限时停止</n-checkbox
-        >
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2">
-        <n-checkbox v-model:checked="rogue.refresh_trader_with_dice">刷新商店（指路鳞）</n-checkbox>
-      </td>
-    </tr>
-  </table>
+  <n-form :label-placement="mobile ? 'top' : 'left'" :show-feedback="false" class="rogue">
+    <n-form-item label="主题：">
+      <n-radio-group v-model:value="maa_rg_theme">
+        <n-space>
+          <n-radio v-for="t in rogue_themes" :value="t.value">{{ t.label }}</n-radio>
+        </n-space>
+      </n-radio-group>
+    </n-form-item>
+    <n-form-item label="分队：">
+      <n-select v-model:value="rogue.squad" :options="squad[maa_rg_theme]" />
+    </n-form-item>
+    <n-form-item label="职业：">
+      <n-select v-model:value="rogue.roles" :options="roles" />
+    </n-form-item>
+    <n-form-item label="干员：">
+      <n-input v-model:value="rogue.core_char" />
+    </n-form-item>
+    <n-form-item :show-label="false">
+      <n-checkbox v-model:checked="rogue.use_support">开局干员使用助战</n-checkbox>
+    </n-form-item>
+    <n-form-item v-if="rogue.use_support" :show-label="false">
+      <n-checkbox v-model:checked="rogue.use_nonfriend_support">开局干员使用非好友助战</n-checkbox>
+    </n-form-item>
+    <n-form-item label="策略：">
+      <n-radio-group v-model:value="rogue.mode">
+        <n-space>
+          <n-radio :value="0">刷等级</n-radio>
+          <n-radio :value="1">刷源石锭</n-radio>
+        </n-space>
+      </n-radio-group>
+    </n-form-item>
+    <n-form-item :show-label="false">
+      <n-checkbox v-model:checked="rogue.investment_enabled">投资源石锭</n-checkbox>
+    </n-form-item>
+    <n-form-item v-if="rogue.investment_enabled" :show-label="false">
+      <n-checkbox v-model:checked="rogue.stop_when_investment_full">
+        储备源石锭达到上限时停止
+      </n-checkbox>
+    </n-form-item>
+    <n-form-item :show-label="false">
+      <n-checkbox v-model:checked="rogue.refresh_trader_with_dice">刷新商店（指路鳞）</n-checkbox>
+    </n-form-item>
+  </n-form>
 </template>
 
 <style scoped lang="scss">
-.tab-content {
-  margin: 0 24px 12px 24px;
+.rogue > .n-form-item {
+  margin: 12px 0 0;
 }
 </style>
diff --git a/ui/src/components/MaaSss.vue b/ui/src/components/MaaSss.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { inject } from 'vue'
+
+const mobile_mode = inject('mobile_mode')
+</script>
+
+<template>
+  <n-form :label-placement="mobile ? 'top' : 'left'">
+    <n-form-item>
+      <template #label> wuhu </template>
+      <template #default> takeoff </template>
+    </n-form-item>
+  </n-form>
+</template>
diff --git a/ui/src/components/Recruit.vue b/ui/src/components/Recruit.vue
@@ -110,7 +110,7 @@ h4 {
 
 .big-table {
   margin-top: 10px;
-  width: 400px;
+  max-width: 360px;
 
   th {
     text-align: center;

diff --git a/ui/src/pages/Advanced.vue b/ui/src/pages/Advanced.vue
@@ -253,7 +253,7 @@ async function select_simulator_folder() {
     </n-card>
     <maa-basic />
     <email />
-<!--    <SKLand/>-->
+    <!--    <SKLand/>-->
   </div>
 </template>
 

diff --git a/ui/src/pages/External.vue b/ui/src/pages/External.vue
@@ -77,24 +77,20 @@ const rogue_themes = [
           </td>
         </tr>
       </table>
-      <n-card content-style="padding: 0">
-        <n-tabs type="segment">
-          <n-tab-pane name="rogue" tab="集成战略">
-            <maa-rogue />
-          </n-tab-pane>
-          <n-tab-pane name="sss" tab="保全派驻" disabled></n-tab-pane>
-          <n-tab-pane name="ra" tab="生息演算" disabled></n-tab-pane>
-        </n-tabs>
-      </n-card>
+      <n-tabs type="line">
+        <n-tab-pane name="rogue" tab="集成战略">
+          <maa-rogue />
+        </n-tab-pane>
+        <n-tab-pane name="sss" tab="保全派驻">
+          <maa-sss />
+        </n-tab-pane>
+        <n-tab-pane name="ra" tab="生息演算" disabled></n-tab-pane>
+      </n-tabs>
     </n-card>
   </div>
 </template>
 
 <style scoped lang="scss">
-.sss-select {
-  width: 175px;
-}
-
 .card-title {
   font-weight: 500;
   font-size: 18px;