perf: 💄 Optimize the interface display effect

viarotel-org · Dec 6, 2024 · c7a5cd4 · c7a5cd4
1 parent e643f8e
commit c7a5cd4
Show file tree

Hide file tree

Showing 16 changed files with 93 additions and 88 deletions.
diff --git a/electron/main.js b/electron/main.js
@@ -62,10 +62,10 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     icon: getLogoPath(),
     show: false,
-    width: 1200,
-    height: 800,
-    minWidth: 1200,
-    minHeight: 800,
+    width: 700,
+    minWidth: 700,
+    height: 600,
+    minHeight: 600,
     autoHideMenuBar: true,
     webPreferences: {
       preload: path.join(__dirname, 'preload.mjs'),

diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "electron-log": "5.2.0",
     "electron-store": "9.0.0",
     "electron-updater": "6.3.9",
-    "element-plus": "2.8.2",
+    "element-plus": "2.9.0",
     "eslint": "9.13.0",
     "fix-path": "4.0.0",
     "fs-extra": "11.2.0",
@@ -69,6 +69,7 @@
     "vue-command": "35.2.1",
     "vue-i18n": "9.13.1",
     "vue-router": "^4.5.0",
+    "vue-screen": "^2.4.0",
     "which": "4.0.0"
   }
 }
diff --git a/src/components/PreferenceForm/index.vue b/src/components/PreferenceForm/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="elForm" :model="preferenceData" label-width="250px" class="">
+  <el-form ref="elForm" :model="preferenceData" label-width="200px" class="">
     <el-collapse
       v-model="collapseValue"
       v-bind="{
@@ -36,7 +36,9 @@
             <el-col
               v-for="(item_1, name_1) of subModel(item)"
               :key="name_1"
-              :span="item_1.span || 12"
+              :span="item_1.span || 24"
+              :md="item_1.span || 12"
+              :lg="item_1.span || 8"
               :offset="item_1.offset || 0"
             >
               <el-form-item :label="$t(item_1.label)" :prop="item_1.field">
@@ -57,7 +59,7 @@
                       >
                       </el-link>
                     </el-tooltip>
-                    <div class="truncate max-w-56" :title="$t(item_1.label)">
+                    <div class="truncate max-w-42" :title="$t(item_1.label)">
                       {{ $t(item_1.label) }}
                     </div>
                   </div>
@@ -89,7 +91,6 @@ import { i18n } from '$/locales/index.js'
 import { usePreferenceStore } from '$/store/index.js'
 
 import { omit } from 'lodash-es'
-import { computed } from 'vue'
 
 import { inputModel } from './components/index.js'
 

diff --git a/src/components/TaskDialog/index.vue b/src/components/TaskDialog/index.vue
@@ -8,12 +8,12 @@
     destroy-on-close
     @closed="onClosed"
   >
-    <div class="pr-24 pt-4">
+    <div class="pr-12 pt-4">
       <ele-form-row
         ref="formRef"
         :model="model"
         :rules="rules"
-        label-width="180px"
+        label-width="120px"
         class=""
       >
         <ele-form-item-col

diff --git a/src/locales/languages/en-US.json b/src/locales/languages/en-US.json
@@ -219,7 +219,6 @@
   "preferences.config.export.success": "Export success",
   "preferences.config.edit.name": "Edit",
   "preferences.config.reset.name": "Reset",
-  "preferences.config.save.placeholder": "Config saved",
 
   "preferences.common.name": "Common",
   "preferences.common.theme.name": "Theme",

diff --git a/src/locales/languages/ru-RU.json b/src/locales/languages/ru-RU.json
@@ -219,7 +219,6 @@
   "preferences.config.export.success": "Экспорт успешно выполнен",
   "preferences.config.edit.name": "Редактировать",
   "preferences.config.reset.name": "Сброс",
-  "preferences.config.save.placeholder": "Конфигурация сохранена",
 
   "preferences.common.name": "Общие",
   "preferences.common.theme.name": "Тема",

diff --git a/src/locales/languages/zh-CN.json b/src/locales/languages/zh-CN.json
@@ -219,7 +219,6 @@
   "preferences.config.export.success": "导出成功",
   "preferences.config.edit.name": "编辑",
   "preferences.config.reset.name": "重置",
-  "preferences.config.save.placeholder": "自动保存配置成功",
 
   "preferences.common.name": "通用设置",
   "preferences.common.theme.name": "主题",

diff --git a/src/locales/languages/zh-TW.json b/src/locales/languages/zh-TW.json
@@ -219,7 +219,6 @@
   "preferences.config.export.success": "匯出成功",
   "preferences.config.edit.name": "編輯",
   "preferences.config.reset.name": "重設",
-  "preferences.config.save.placeholder": "自動儲存設定成功",
 
   "preferences.common.name": "一般設定",
   "preferences.common.theme.name": "主題",

diff --git a/src/pages/device/components/MirrorAction/index.vue b/src/pages/device/components/MirrorAction/index.vue
@@ -1,14 +1,15 @@
 <template>
-  <el-button
+  <EleTooltipButton
     type="primary"
     text
     :disabled="row.$unauthorized"
     :loading="loading"
-    :icon="loading ? '' : 'Monitor'"
+    :icon="loading ? '' : 'VideoPlay'"
+    placement="top"
+    :content="loading ? $t('common.starting') : $t('device.mirror.start')"
     @click="handleClick(row)"
   >
-    {{ loading ? $t('common.starting') : $t('device.mirror.start') }}
-  </el-button>
+  </EleTooltipButton>
 </template>
 
 <script>

diff --git a/src/pages/device/components/MoreDropdown/index.vue b/src/pages/device/components/MoreDropdown/index.vue
@@ -1,41 +1,47 @@
 <template>
-  <el-dropdown :hide-on-click="false">
-    <el-button
-      type="primary"
-      text
-      :disabled="row.$unauthorized"
-      icon="CirclePlus"
-    >
-      {{ $t('device.actions.more.name') }}
-    </el-button>
+  <el-tooltip
+    effect="light"
+    placement="top"
+    :offset="1"
+    :content="$t('device.actions.more.name')"
+  >
+    <el-dropdown :hide-on-click="false" toggle="click">
+      <el-button
+        type="primary"
+        text
+        :disabled="row.$unauthorized"
+        icon="CirclePlus"
+      >
+      </el-button>
 
-    <template #dropdown>
-      <el-dropdown-menu>
-        <component
-          :is="item.component"
-          v-for="(item, index) of options"
-          :key="index"
-          v-bind="{
-            ...$props,
-            ...(item.props || {}),
-          }"
-          v-slot="{ loading, trigger }"
-        >
-          <el-dropdown-item :disabled="loading" @click="trigger">
-            <template v-if="loading">
-              <el-icon class="is-loading">
-                <Loading />
-              </el-icon>
-              {{ $t('common.starting') }}
-            </template>
-            <template v-else>
-              {{ $t(item.label) }}
-            </template>
-          </el-dropdown-item>
-        </component>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <component
+            :is="item.component"
+            v-for="(item, index) of options"
+            :key="index"
+            v-bind="{
+              ...$props,
+              ...(item.props || {}),
+            }"
+            v-slot="{ loading, trigger }"
+          >
+            <el-dropdown-item :disabled="loading" @click="trigger">
+              <template v-if="loading">
+                <el-icon class="is-loading">
+                  <Loading />
+                </el-icon>
+                {{ $t('common.starting') }}
+              </template>
+              <template v-else>
+                {{ $t(item.label) }}
+              </template>
+            </el-dropdown-item>
+          </component>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </el-tooltip>
 </template>
 
 <script>

diff --git a/src/pages/device/components/WirelessAction/index.vue b/src/pages/device/components/WirelessAction/index.vue
@@ -1,16 +1,17 @@
 <template>
-  <el-button
+  <EleTooltipButton
     v-if="!row.$wifi"
     type="primary"
     text
     :disabled="row.$unauthorized"
+    placement="top"
+    :content="$t('device.wireless.mode')"
     @click="handleWifi(row)"
   >
     <template #icon>
-      <svg-icon name="wifi"></svg-icon>
+      <svg-icon name="wifi" class=""></svg-icon>
     </template>
-    {{ $t('device.wireless.mode') }}
-  </el-button>
+  </EleTooltipButton>
 
   <el-button
     v-if="row.$wifi"

diff --git a/src/pages/device/components/WirelessGroup/index.vue b/src/pages/device/components/WirelessGroup/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center flex-none space-x-2">
-    <div class="w-86 flex-none">
+    <div class="w-72 flex-none">
       <el-autocomplete
         v-if="!showAutocomplete"
         ref="elAutocompleteRef"

diff --git a/src/pages/device/index.vue b/src/pages/device/index.vue
@@ -57,7 +57,7 @@
           sortable
           show-overflow-tooltip
           align="left"
-          min-width="150"
+          min-width="200"
         >
           <template #default="{ row }">
             <div class="flex items-center">
@@ -86,8 +86,9 @@
         <el-table-column
           v-slot="{ row, $index }"
           :label="$t('device.control.name')"
-          min-width="250"
+          fixed="right"
           align="left"
+          width="200"
         >
           <MirrorAction
             :ref="(value) => getMirrorActionRefs(value, $index)"
@@ -98,7 +99,7 @@
 
           <WirelessAction v-bind="{ row, handleConnect, handleRefresh }" />
         </el-table-column>
-        <el-table-column type="expand">
+        <el-table-column type="expand" fixed="right">
           <template #header>
             <el-icon class="" :title="$t('device.control.more')">
               <Operation class="" />

diff --git a/src/plugins/element-plus/expands/EleTooltipButton/index.vue b/src/plugins/element-plus/expands/EleTooltipButton/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-tooltip v-bind="{ offset: 8, ...$attrs }">
+  <el-tooltip v-bind="{ offset: 1, effect: 'light', ...$attrs }">
     <ElButton
       v-bind="{ ...$props }"
       :class="[

diff --git a/src/store/preference/model/common/index.js b/src/store/preference/model/common/index.js
@@ -119,6 +119,14 @@ export default {
       properties: ['openFile'],
       filters: [{ name: 'preferences.common.scrcpy.name', extensions: ['*'] }],
     },
+    gnirehtetFix: {
+      label: 'preferences.common.gnirehtet.fix.name',
+      field: 'gnirehtetFix',
+      type: 'Switch',
+      value: undefined,
+      placeholder: 'preferences.common.gnirehtet.fix.placeholder',
+      tips: 'preferences.common.gnirehtet.fix.tips',
+    },
     scrcpyAppend: {
       label: 'preferences.common.scrcpy.append.name',
       field: 'scrcpyAppend',
@@ -146,14 +154,6 @@ export default {
       value: undefined,
       placeholder: 'preferences.common.auto-mirror.placeholder',
     },
-    gnirehtetFix: {
-      label: 'preferences.common.gnirehtet.fix.name',
-      field: 'gnirehtetFix',
-      type: 'Switch',
-      value: undefined,
-      placeholder: 'preferences.common.gnirehtet.fix.placeholder',
-      tips: 'preferences.common.gnirehtet.fix.tips',
-    },
     floatControl: {
       label: 'preferences.common.floatControl.name',
       field: 'floatControl',

diff --git a/src/styles/css/desktop.css b/src/styles/css/desktop.css
@@ -4,23 +4,21 @@ html {
 
 /* 自定义滚动条的外观 */
 
-@screen sm {
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
 
-  ::-webkit-scrollbar-track {
-    background-color: theme('colors.gray.100');
-    @apply bg-gray-100 dark:bg-gray-800;
-  }
+::-webkit-scrollbar-track {
+  background-color: theme('colors.gray.100');
+  @apply bg-gray-100 dark:bg-gray-800;
+}
 
-  ::-webkit-scrollbar-thumb {
-    border-radius: 9999px;
-    @apply bg-gray-300 dark:bg-gray-600;
-  }
+::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  @apply bg-gray-300 dark:bg-gray-600;
+}
 
-  ::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-500 dark:bg-gray-300;
-  }
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-500 dark:bg-gray-300;
 }