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,143 +8,147 @@
     destroy-on-close
     @closed="onClosed"
   >
-    <ele-form-row
-      ref="formRef"
-      :model="model"
-      :rules="rules"
-      label-width="180px"
-      class="!pr-24 !pt-4"
-    >
-      <ele-form-item-col
-        :label="$t('device.task.type')"
-        :span="24"
-        prop="taskType"
+    <div class="pr-24 pt-4">
+      <ele-form-row
+        ref="formRef"
+        :model="model"
+        :rules="rules"
+        label-width="180px"
+        class=""
       >
-        <el-select
-          v-model="model.taskType"
-          :placeholder="$t('common.select.please')"
-          clearable
-          filterable
-          @change="onTaskChange"
+        <ele-form-item-col
+          :label="$t('device.task.type')"
+          :span="24"
+          prop="taskType"
         >
-          <el-option
-            v-for="item in taskModel"
-            :key="item.value"
-            :label="$t(item.label)"
-            :value="item.value"
+          <el-select
+            v-model="model.taskType"
+            :placeholder="$t('common.select.please')"
+            clearable
+            filterable
+            @change="onTaskChange"
           >
-          </el-option>
-        </el-select>
-      </ele-form-item-col>
-      <ele-form-item-col
-        :label="$t('device.task.frequency')"
-        :span="24"
-        prop="timerType"
-      >
-        <el-radio-group v-model="model.timerType">
-          <el-radio
-            v-for="(item, index) of timerModel"
-            :key="index"
-            :value="item.value"
-          >
-            {{ $t(item.label) }}
-          </el-radio>
-        </el-radio-group>
-      </ele-form-item-col>
-
-      <ele-form-item-col
-        v-if="['timeout'].includes(model.timerType)"
-        :label="$t('device.task.timeout')"
-        :span="24"
-        prop="timeout"
-      >
-        <el-date-picker
-          v-model="model.timeout"
-          type="datetime"
-          placeholder="0000-00-00 00:00:00"
-          clearable
-          v-bind="{ disabledDate, defaultTime }"
-        ></el-date-picker>
-      </ele-form-item-col>
-
-      <ele-form-item-col
-        v-if="['interval'].includes(model.timerType)"
-        :label="$t('device.task.interval')"
-        :span="24"
-        prop="interval"
-      >
-        <el-input
-          v-model="model.interval"
-          type="number"
-          placeholder="0"
-          clearable
-        >
-          <template #append>
-            <el-select
-              v-model="model.intervalType"
-              :placeholder="$t('common.select.please')"
-              filterable
-              class="!w-36"
+            <el-option
+              v-for="item in taskModel"
+              :key="item.value"
+              :label="$t(item.label)"
+              :value="item.value"
             >
-              <el-option
-                v-for="(item, index) of intervalModel"
-                :key="index"
-                :label="$t(item.label)"
-                :value="item.value"
-              />
-            </el-select>
-          </template>
-        </el-input>
-      </ele-form-item-col>
+            </el-option>
+          </el-select>
+        </ele-form-item-col>
+        <ele-form-item-col
+          :label="$t('device.task.frequency')"
+          :span="24"
+          prop="timerType"
+        >
+          <el-radio-group v-model="model.timerType">
+            <el-radio
+              v-for="(item, index) of timerModel"
+              :key="index"
+              :value="item.value"
+            >
+              {{ $t(item.label) }}
+            </el-radio>
+          </el-radio-group>
+        </ele-form-item-col>
 
-      <ele-form-item-col
-        v-if="['install'].includes(model.taskType)"
-        :label="$t('device.task.extra.app')"
-        :span="24"
-        prop="extra"
-      >
-        <InputPath
-          v-model="model.extra"
-          :placeholder="$t('device.control.install.placeholder')"
-          :data="{
-            properties: ['openFile', 'multiSelections'],
-            filters: [
-              {
-                name: $t('device.control.install.placeholder'),
-                extensions: ['apk'],
-              },
-            ],
-          }"
-        />
-      </ele-form-item-col>
+        <ele-form-item-col
+          v-if="['timeout'].includes(model.timerType)"
+          :label="$t('device.task.timeout')"
+          :span="24"
+          prop="timeout"
+        >
+          <el-date-picker
+            v-model="model.timeout"
+            type="datetime"
+            placeholder="0000-00-00 00:00:00"
+            clearable
+            v-bind="{ disabledDate, defaultTime }"
+          ></el-date-picker>
+        </ele-form-item-col>
 
-      <ele-form-item-col
-        v-if="['shell'].includes(model.taskType)"
-        :label="$t('device.task.extra.shell')"
-        :span="24"
-        prop="extra"
-      >
-        <InputPath
-          v-model="model.extra"
-          :placeholder="$t('device.control.shell.select')"
-          :data="{
-            properties: ['openFile'],
-            filters: [
-              {
-                name: $t('device.control.shell.select'),
-                extensions: ['sh'],
-              },
-            ],
-          }"
-        />
-      </ele-form-item-col>
+        <ele-form-item-col
+          v-if="['interval'].includes(model.timerType)"
+          :label="$t('device.task.interval')"
+          :span="24"
+          prop="interval"
+        >
+          <el-input
+            v-model="model.interval"
+            type="number"
+            placeholder="0"
+            clearable
+          >
+            <template #append>
+              <el-select
+                v-model="model.intervalType"
+                :placeholder="$t('common.select.please')"
+                filterable
+                class="!w-36"
+              >
+                <el-option
+                  v-for="(item, index) of intervalModel"
+                  :key="index"
+                  :label="$t(item.label)"
+                  :value="item.value"
+                />
+              </el-select>
+            </template>
+          </el-input>
+        </ele-form-item-col>
 
-      <ele-form-item-col :span="24" label="">
-        <div class="text-red-200 hover:text-red-500 transition-colors">
-          {{ $t('device.task.tips') }}
-        </div>
-      </ele-form-item-col>
-    </ele-form-row>
+        <ele-form-item-col
+          v-if="['install'].includes(model.taskType)"
+          :label="$t('device.task.extra.app')"
+          :span="24"
+          prop="extra"
+        >
+          <InputPath
+            v-model="model.extra"
+            :placeholder="$t('device.control.install.placeholder')"
+            :data="{
+              properties: ['openFile', 'multiSelections'],
+              filters: [
+                {
+                  name: $t('device.control.install.placeholder'),
+                  extensions: ['apk'],
+                },
+              ],
+            }"
+          />
+        </ele-form-item-col>
+
+        <ele-form-item-col
+          v-if="['shell'].includes(model.taskType)"
+          :label="$t('device.task.extra.shell')"
+          :span="24"
+          prop="extra"
+        >
+          <InputPath
+            v-model="model.extra"
+            :placeholder="$t('device.control.shell.select')"
+            :data="{
+              properties: ['openFile'],
+              filters: [
+                {
+                  name: $t('device.control.shell.select'),
+                  extensions: ['sh'],
+                },
+              ],
+            }"
+          />
+        </ele-form-item-col>
+
+        <ele-form-item-col :span="24" label="">
+          <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,72 +2,85 @@
   <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">
-      {{ $t("device.wireless.pair.tips") }}
+    <div class="pt-4 pr-24">
+      <el-form ref="elForm" :model="formData" label-width="160px" class="">
+        <el-form-item
+          :label="$t('device.wireless.pair.address')"
+          prop="host"
+          :rules="[
+            {
+              required: true,
+              message: $t('device.wireless.pair.address.message'),
+            },
+          ]"
+        >
+          <el-input
+            v-model="formData.host"
+            :placeholder="$t('common.input.placeholder')"
+            class=""
+            clearable
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('device.wireless.pair.port')"
+          prop="port"
+          :rules="[
+            {
+              required: true,
+              message: $t('device.wireless.pair.port.message'),
+            },
+          ]"
+        >
+          <el-input
+            v-model.number="formData.port"
+            type="number"
+            :placeholder="$t('common.input.placeholder')"
+            :min="0"
+            clearable
+            class=""
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item
+          :label="$t('device.wireless.pair.code')"
+          prop="pair"
+          :rules="[
+            {
+              required: true,
+              message: $t('device.wireless.pair.code.message'),
+            },
+          ]"
+        >
+          <el-input
+            v-model="formData.pair"
+            :placeholder="$t('common.input.placeholder')"
+            clearable
+            class=""
+          >
+          </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>
 
-    <el-form ref="elForm" :model="formData" label-width="100px">
-      <el-form-item
-        :label="$t('device.wireless.pair.address')"
-        prop="host"
-        :rules="[
-          {
-            required: true,
-            message: $t('device.wireless.pair.address.message'),
-          },
-        ]"
-      >
-        <el-input
-          v-model="formData.host"
-          :placeholder="$t('common.input.placeholder')"
-          class=""
-          clearable
-        >
-        </el-input>
-      </el-form-item>
-      <el-form-item
-        :label="$t('device.wireless.pair.port')"
-        prop="port"
-        :rules="[
-          { required: true, message: $t('device.wireless.pair.port.message') },
-        ]"
-      >
-        <el-input
-          v-model.number="formData.port"
-          type="number"
-          :placeholder="$t('common.input.placeholder')"
-          :min="0"
-          clearable
-          class=""
-        >
-        </el-input>
-      </el-form-item>
-      <el-form-item
-        :label="$t('device.wireless.pair.code')"
-        prop="pair"
-        :rules="[
-          { required: true, message: $t('device.wireless.pair.code.message') },
-        ]"
-      >
-        <el-input
-          v-model="formData.pair"
-          :placeholder="$t('common.input.placeholder')"
-          clearable
-          class=""
-        >
-        </el-input>
-      </el-form-item>
-    </el-form>
     <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="pb-4 text-sm text-red-500">${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>2. ${this.$t('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>5. ${this.$t('device.wireless.connect.error.reasons[5]')} </div>
-        `,
+          `<div class="pt-4 pl-4">
+            <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>2. ${this.$t(
+              '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

@@ -30,7 +30,30 @@
           :label="$t('device.task.type')"
           align="center"
         >
-          {{ $t(getDictLabel(taskModel, row.taskType)) }}
+          <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