fix: 💄 Optimize wireless connection user interface

.npmrc

@@ -1,5 +1,6 @@
 registry=https://registry.npmmirror.com/
 shamefully-hoist=true
+virtual-store-dir-max-length=70
 
 ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
 ELECTRON_CUSTOM_DIR="{{ version }}"

package.json

@@ -49,7 +49,7 @@
     "electron-store": "^9.0.0",
     "electron-updater": "^6.1.8",
     "element-plus": "^2.7.2",
-    "eslint": "^9.2.0",
+    "eslint": "^8.57.0",
     "fix-path": "^4.0.0",
     "fs-extra": "^11.2.0",
     "hono": "^4.3.2",

src/components/Device/components/BatchActions/Tasks/components/TaskDialog/index.vue

@@ -8,12 +8,13 @@
     destroy-on-close
     @closed="onClosed"
   >
+    <div class="pr-24 pt-4">
       <ele-form-row
         ref="formRef"
         :model="model"
         :rules="rules"
         label-width="180px"
-      class="!pr-24 !pt-4"
+        class=""
       >
         <ele-form-item-col
           :label="$t('device.task.type')"
@@ -140,11 +141,14 @@
         </ele-form-item-col>
 
         <ele-form-item-col :span="24" label="">
-        <div class="text-red-200 hover:text-red-500 transition-colors">
+          <div
+            class="text-red-200 dark:text-red-900 !hover:text-red-500 transition-colors"
+          >
             {{ $t('device.task.tips') }}
           </div>
         </ele-form-item-col>
       </ele-form-row>
+    </div>
 
     <template #footer>
       <el-button @click="close">

src/components/Device/components/WirelessGroup/PairDialog/index.vue

@@ -2,15 +2,12 @@
   <el-dialog
     v-model="visible"
     :title="$t('device.wireless.pair')"
-    width="600"
+    width="80%"
     append-to-body
     destroy-on-close
   >
-    <div class="text-red-500 text-sm pb-8 pl-4">
+    <div class="pt-4 pr-24">
-      {{ $t("device.wireless.pair.tips") }}
+      <el-form ref="elForm" :model="formData" label-width="160px" class="">
-    </div>
-
-    <el-form ref="elForm" :model="formData" label-width="100px">
         <el-form-item
           :label="$t('device.wireless.pair.address')"
           prop="host"
@@ -33,7 +30,10 @@
           :label="$t('device.wireless.pair.port')"
           prop="port"
           :rules="[
-          { required: true, message: $t('device.wireless.pair.port.message') },
+            {
+              required: true,
+              message: $t('device.wireless.pair.port.message'),
+            },
           ]"
         >
           <el-input
@@ -50,7 +50,10 @@
           :label="$t('device.wireless.pair.code')"
           prop="pair"
           :rules="[
-          { required: true, message: $t('device.wireless.pair.code.message') },
+            {
+              required: true,
+              message: $t('device.wireless.pair.code.message'),
+            },
           ]"
         >
           <el-input
@@ -61,13 +64,23 @@
           >
           </el-input>
         </el-form-item>
+
+        <el-form-item label="">
+          <div
+            class="text-red-200 dark:text-red-900 !hover:text-red-500 transition-colors"
+          >
+            {{ $t('device.wireless.pair.tips') }}
+          </div>
+        </el-form-item>
       </el-form>
+    </div>
+
     <template #footer>
       <el-button @click="handleClose">
-        {{ $t("common.cancel") }}
+        {{ $t('common.cancel') }}
       </el-button>
       <el-button type="primary" @click="handleSubmit">
-        {{ $t("common.confirm") }}
+        {{ $t('common.confirm') }}
       </el-button>
     </template>
   </el-dialog>

src/components/Device/components/WirelessGroup/index.vue

@@ -251,17 +251,24 @@ export default {
     async handleError(message) {
       try {
         await this.$confirm(
-          `
+          `<div class="pt-4 pl-4">
-        <div class="pb-4 text-sm text-red-500">${this.$t(
+            <div class="text-sm text-red-500 pb-4">${this.$t(
               'device.wireless.connect.error.detail',
             )}：${message}</div>
             <div>${this.$t('device.wireless.connect.error.reasons[0]')}：</div>
-        <div>1. ${this.$t('device.wireless.connect.error.reasons[1]')} </div>
+            <div>1. ${this.$t(
-        <div>2. ${this.$t('device.wireless.connect.error.reasons[2]')} </div>
+              'device.wireless.connect.error.reasons[1]',
-        <div>3. ${this.$t('device.wireless.connect.error.reasons[3]')} </div>
+            )} </div>
-        <div>4. ${this.$t('device.wireless.connect.error.reasons[4]')} </div>
+            <div>2. ${this.$t(
-        <div>5. ${this.$t('device.wireless.connect.error.reasons[5]')} </div>
+              'device.wireless.connect.error.reasons[2]',
-        `,
+            )} </div>
+            <div>3. ${this.$t(
+              'device.wireless.connect.error.reasons[3]',
+            )} </div>
+            <div>4. ${this.$t(
+              'device.wireless.connect.error.reasons[4]',
+            )} </div>
+          </div>`,
           this.$t('device.wireless.connect.error.title'),
           {
             dangerouslyUseHTMLString: true,

src/components/Quick/components/Task/components/TaskListDialog/index.vue

@@ -29,8 +29,31 @@
           prop="taskType"
           :label="$t('device.task.type')"
           align="center"
+        >
+          <div class="h-full flex items-center justify-center">
+            <el-dropdown :key="row.id" trigger="hover" :disabled="!row.extra">
+              <span
+                :class="
+                  row.extra
+                    ? 'text-primary hover:underline'
+                    : 'text-[var(--el-table-text-color)]'
+                "
               >
                 {{ $t(getDictLabel(taskModel, row.taskType)) }}
+              </span>
+
+              <template v-if="row.extra" #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    v-for="(item, index) of row.extra.split(',')"
+                    :key="index"
+                  >
+                    {{ item }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
         </el-table-column>
 
         <el-table-column