前端美化

ArkMowers · Dec 18, 2023 · fc1c592 · fc1c592
1 parent 06070e2
commit fc1c592
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 82 deletions.
diff --git a/ui/public/avatar/Current.png b/ui/public/avatar/Current.png
diff --git a/ui/src/components/Email.vue b/ui/src/components/Email.vue
@@ -18,6 +18,11 @@ async function test_email() {
   const response = await axios.get(`${import.meta.env.VITE_HTTP_URL}/test-email`)
   test_result.value = response.data
 }
+
+const email_options = [
+  { label: 'QQ邮箱', value: false },
+  { label: '自定义邮箱', value: true }
+]
 </script>
 
 <template>
@@ -26,11 +31,18 @@ async function test_email() {
       <n-checkbox v-model:checked="mail_enable" class="email-title">
         <div class="card-title">邮件提醒</div>
         <div class="expand"></div>
-        <n-radio-group class="email-mode" v-model:value="custom_smtp_server.enable">
-          <n-radio-button :value="false" label="QQ邮箱" />
-          <n-radio-button :value="true" label="自定义邮箱" />
-        </n-radio-group>
       </n-checkbox>
+      <n-button
+        v-if="mobile"
+        @click="custom_smtp_server.enable = !custom_smtp_server.enable"
+        type="primary"
+        ghost
+        >{{ custom_smtp_server.enable ? '自定义邮箱' : 'QQ邮箱' }}</n-button
+      >
+      <n-radio-group v-else class="email-mode" v-model:value="custom_smtp_server.enable">
+        <n-radio-button :value="false" label="QQ邮箱" />
+        <n-radio-button :value="true" label="自定义邮箱" />
+      </n-radio-group>
     </template>
     <template #default>
       <n-form

diff --git a/ui/src/components/MaaBasic.vue b/ui/src/components/MaaBasic.vue
@@ -54,7 +54,7 @@ const maa_touch_options = ['maatouch', 'minitouch', 'adb'].map((x) => {
     <n-form
       :label-placement="mobile ? 'top' : 'left'"
       :show-feedback="false"
-      label-width="72"
+      label-width="96"
       label-align="left"
     >
       <n-form-item label="Maa目录">
@@ -72,17 +72,21 @@ const maa_touch_options = ['maatouch', 'minitouch', 'adb'].map((x) => {
       <n-form-item label="触控模式">
         <n-select v-model:value="maa_touch_option" :options="maa_touch_options" />
       </n-form-item>
+      <n-form-item>
+        <template #label>
+          <span>启动间隔</span>
+          <help-text>
+            <div>单位：小时</div>
+            <div>可填小数</div>
+          </help-text> </template
+        ><n-input-number v-model:value="maa_gap" />
+      </n-form-item>
     </n-form>
+    <n-divider />
     <div class="misc-container">
       <n-button @click="test_maa">测试设置</n-button>
       <div>{{ maa_msg }}</div>
     </div>
-    <n-divider />
-    <div class="misc-container">
-      <div>启动间隔</div>
-      <n-input-number class="hour-input" v-model:value="maa_gap" />
-      <div>小时（可填小数）</div>
-    </div>
   </n-card>
 </template>
 
@@ -91,45 +95,10 @@ p {
   margin: 0 0 10px 0;
 }
 
-.maa-basic {
-  width: 100%;
-}
-
-.maa-basic {
-  td:nth-child(1) {
-    width: 62px;
-  }
-
-  td:nth-child(2) {
-    padding-right: 6px;
-  }
-
-  td:nth-child(3) {
-    width: 40px;
-  }
-}
-
 .misc-container {
   margin-top: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
 }
-
-.hour-input {
-  width: 120px;
-}
-
-.maa-conn {
-  width: 100%;
-
-  td {
-    &:nth-child(1) {
-      width: 62px;
-    }
-    &:nth-child(3) {
-      width: 56px;
-    }
-  }
-}
 </style>
diff --git a/ui/src/components/MaaLongTasks.vue b/ui/src/components/MaaLongTasks.vue
@@ -28,10 +28,10 @@ const mobile = inject('mobile')
     </template>
     <n-form :label-placement="mobile ? 'top' : 'left'" :show-feedback="false">
       <n-grid cols="2">
-        <n-form-item-gi label="开始时间：">
+        <n-form-item-gi label="开始时间">
           <n-time-picker format="H:mm" v-model:formatted-value="maa_rg_sleep_max" />
         </n-form-item-gi>
-        <n-form-item-gi label="停止时间：">
+        <n-form-item-gi label="停止时间">
           <n-time-picker format="H:mm" v-model:formatted-value="maa_rg_sleep_min" />
         </n-form-item-gi>
       </n-grid>

diff --git a/ui/src/components/MaaRogue.vue b/ui/src/components/MaaRogue.vue
@@ -1,13 +1,20 @@
 <script setup>
 import { useConfigStore } from '@/stores/config'
+import { usePlanStore } from '@/stores/plan'
 import { storeToRefs } from 'pinia'
 import { inject } from 'vue'
 
 const mobile = inject('mobile')
 
-const store = useConfigStore()
+const config_store = useConfigStore()
 
-const { maa_rg_theme, rogue } = storeToRefs(store)
+const { maa_rg_theme, rogue } = storeToRefs(config_store)
+
+const plan_store = usePlanStore()
+const { operators } = storeToRefs(plan_store)
+
+import { match } from 'pinyin-pro'
+import { render_op_label } from '@/utils/op_select'
 
 const rogue_themes = [
   { label: '傀影与猩红孤钻', value: 'Phantom' },
@@ -76,25 +83,31 @@ const roles = [
 
 <template>
   <n-form :label-placement="mobile ? 'top' : 'left'" :show-feedback="false" class="rogue">
-    <n-form-item label="主题：">
+    <n-form-item label="主题">
       <n-select v-model:value="maa_rg_theme" :options="rogue_themes" />
     </n-form-item>
-    <n-form-item label="分队：">
+    <n-form-item label="分队">
       <n-select v-model:value="rogue.squad" :options="squad[maa_rg_theme]" />
     </n-form-item>
-    <n-form-item label="职业：">
+    <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 label="干员">
+      <n-select
+        filterable
+        :options="operators"
+        v-model:value="rogue.core_char"
+        :filter="(p, o) => match(o.label, p)"
+        :render-label="render_op_label"
+      />
     </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-form-item label="策略">
       <n-radio-group v-model:value="rogue.mode">
         <n-space>
           <n-radio :value="0">刷等级</n-radio>

diff --git a/ui/src/components/Recruit.vue b/ui/src/components/Recruit.vue
@@ -33,46 +33,40 @@ const mobile = inject('mobile')
       <n-form-item>
         <template #label>
           <span>启动间隔</span>
+          <help-text>
+            <div>单位：小时</div>
+            <div>可填小数</div>
+          </help-text>
         </template>
-        <n-input-number class="hour-input" v-model:value="recruit_gap" />
-        <div>小时（可填小数）</div>
+        <n-input-number v-model:value="recruit_gap" />
       </n-form-item>
-      <n-form-item>
-        <template #label>
-          <span>三星招募阈值</span>
-        </template>
+      <n-form-item label="三星招募阈值">
         <n-input-number v-model:value="recruitment_permit" />
       </n-form-item>
-      <n-form-item>
-        <template #label>
-          <span>三星招募时长</span>
-        </template>
+      <n-form-item label="三星招募时长">
         <n-radio-group v-model:value="recruitment_time" name="recruitment_time">
           <n-space justify="start">
             <n-radio :value="true">7:40</n-radio>
             <n-radio :value="false">9:00</n-radio>
           </n-space>
         </n-radio-group>
       </n-form-item>
-      <n-form-item>
-        <template #label>
-          <span>五星招募策略</span>
-        </template>
+      <n-form-item label="五星招募策略">
         <n-radio-group v-model:value="recruit_auto_5" name="recruitment_time">
           <n-space justify="start">
             <n-radio :value="1">自动选择</n-radio>
             <n-radio :value="2">手动选择</n-radio>
           </n-space>
         </n-radio-group>
       </n-form-item>
-      <n-form-item v-if="recruit_auto_5 === 2">
+      <n-form-item v-if="recruit_auto_5 === 2" :show-label="false">
         <n-checkbox v-model:checked="recruit_auto_only5">五星词条组合唯一时自动选择</n-checkbox>
       </n-form-item>
-      <n-form-item>
-        <n-checkbox v-model:checked="recruit_email_enable"> 邮件通知 </n-checkbox>
+      <n-form-item :show-label="false">
+        <n-checkbox v-model:checked="recruit_email_enable">邮件通知</n-checkbox>
       </n-form-item>
-      <n-form-item>
-        <n-checkbox v-model:checked="recruit_robot"> 保留支援机械标签 </n-checkbox>
+      <n-form-item :show-label="false">
+        <n-checkbox v-model:checked="recruit_robot">保留支援机械标签</n-checkbox>
       </n-form-item>
     </n-form>
   </n-card>

diff --git a/ui/src/components/TaskDialog.vue b/ui/src/components/TaskDialog.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { inject, ref, watch, computed } from 'vue'
+import { inject, ref, watch, computed, h } from 'vue'
 const show = inject('show_task')
 
 import { storeToRefs } from 'pinia'
@@ -51,6 +51,9 @@ const operators_with_free_current = computed(() => {
     { value: 'Free', label: 'Free' }
   ].concat(operators.value)
 })
+
+import { match } from 'pinyin-pro'
+import { render_op_label } from '@/utils/op_select'
 </script>
 
 <template>
@@ -79,6 +82,8 @@ const operators_with_free_current = computed(() => {
                     }
                   "
                   :on-blur="deactivate"
+                  :filter="(p, o) => match(o.label, p)"
+                  :render-label="render_op_label"
                 />
               </template>
             </n-dynamic-tags>
@@ -107,4 +112,8 @@ const operators_with_free_current = computed(() => {
     width: 140px;
   }
 }
+
+.n-dynamic-tags {
+  align-items: center;
+}
 </style>
diff --git a/ui/src/components/TriggerString.vue b/ui/src/components/TriggerString.vue
@@ -108,6 +108,9 @@ function update_op(op) {
 function update_type(type) {
   build_data(op_data.value.operator, type)
 }
+
+import { match } from 'pinyin-pro'
+import { render_op_label } from '@/utils/op_select'
 </script>
 
 <template>
@@ -119,6 +122,8 @@ function update_type(type) {
       filterable
       :options="operators"
       :on-update:value="update_op"
+      :filter="(p, o) => match(o.label, p)"
+      :render-label="render_op_label"
     />
     <n-select :default-value="op_data.type" :options="op_options" :on-update:value="update_type" />
   </template>

diff --git a/ui/src/pages/Settings.vue b/ui/src/pages/Settings.vue
@@ -78,7 +78,7 @@ import { render_op_label, render_op_tag } from '@/utils/op_select'
               label-width="120"
               label-align="left"
             >
-              <n-form-item label="服务器：">
+              <n-form-item label="服务器">
                 <n-radio-group v-model:value="package_type">
                   <n-space>
                     <n-radio value="official">官服</n-radio>
@@ -119,10 +119,10 @@ import { render_op_label, render_op_tag } from '@/utils/op_select'
                 <n-input v-model:value="simulator.simulator_folder" />
                 <n-button @click="select_simulator_folder" class="dialog-btn">...</n-button>
               </n-form-item>
-              <n-form-item label="启动游戏：">
+              <n-form-item label="启动游戏">
                 <n-select v-model:value="tap_to_launch_game.enable" :options="launch_options" />
               </n-form-item>
-              <n-form-item v-if="tap_to_launch_game.enable == 'tap'" label="点击坐标：">
+              <n-form-item v-if="tap_to_launch_game.enable == 'tap'" label="点击坐标">
                 <span class="coord-label">X:</span>
                 <n-input-number v-model:value="tap_to_launch_game.x" />
                 <span class="coord-label">Y:</span>
@@ -158,7 +158,7 @@ import { render_op_label, render_op_tag } from '@/utils/op_select'
               <n-form-item :show-label="false">
                 <n-checkbox v-model:checked="start_automatically">启动后自动开始任务</n-checkbox>
               </n-form-item>
-              <n-form-item label="截图数量：">
+              <n-form-item label="截图数量">
                 <n-input-number v-model:value="screenshot" />
               </n-form-item>
               <n-form-item>
@@ -175,7 +175,7 @@ import { render_op_label, render_op_tag } from '@/utils/op_select'
                 />
                 <div class="scale">{{ webview.scale * 100 }}%</div>
               </n-form-item>
-              <n-form-item label="显示主题：">
+              <n-form-item label="显示主题">
                 <n-radio-group v-model:value="theme">
                   <n-space>
                     <n-radio value="light">亮色</n-radio>
@@ -279,7 +279,7 @@ import { render_op_label, render_op_tag } from '@/utils/op_select'
                 </template>
                 <n-input-number v-model:value="drone_interval" />
               </n-form-item>
-              <n-form-item label="搓玉补货房间：">
+              <n-form-item label="搓玉补货房间">
                 <n-select
                   multiple
                   filterable