perf: ♻️ Optimize the performance of equipment interaction column and…

… file manager
viarotel-org · Sep 8, 2024 · 41ffcf5 · 41ffcf5
1 parent 3b1fbbf
commit 41ffcf5
Show file tree

Hide file tree

Showing 7 changed files with 306 additions and 123 deletions.
diff --git a/...ponents/BatchActions/FileManage/index.vue → ...omponents/BatchActions/FilePush/index.vue b/...ponents/BatchActions/FileManage/index.vue → ...omponents/BatchActions/FilePush/index.vue
diff --git a/src/components/Device/components/BatchActions/index.vue b/src/components/Device/components/BatchActions/index.vue
@@ -39,7 +39,7 @@
 
 <script setup>
 import Application from './Application/index.vue'
-import FileManage from './FileManage/index.vue'
+import FilePush from './FilePush/index.vue'
 import Screenshot from './Screenshot/index.vue'
 import Shell from './Shell/index.vue'
 import Tasks from './Tasks/index.vue'
@@ -65,7 +65,7 @@ const actionModel = [
   {
     label: 'device.control.file.push',
     svgIcon: 'file-send',
-    component: FileManage,
+    component: FilePush,
   },
   {
     label: 'device.control.shell.name',

diff --git a/src/components/Device/components/ControlBar/FileManage/FileDialog/index.vue b/src/components/Device/components/ControlBar/FileManage/FileDialog/index.vue
@@ -5,6 +5,7 @@
     width="97%"
     append-to-body
     destroy-on-close
+    :close-on-click-modal="false"
     class="el-dialog--beautify"
     @closed="onClosed"
   >
@@ -15,32 +16,26 @@
         text
         icon="Top"
         circle
-        class="mr-2"
+        class="mr-2 flex-none"
         @click="handlePrev"
       ></el-button>
 
-      <el-breadcrumb separator-icon="ArrowRight">
-        <el-breadcrumb-item>
-          <el-button
-            text
-            icon="Iphone"
-            class="!px-2"
-            @click="handleBreadcrumb(breadcrumbModel[0])"
-          ></el-button>
-        </el-breadcrumb-item>
-
-        <el-breadcrumb-item
-          v-for="item of breadcrumbModel"
-          :key="item.value"
-          @click="handleBreadcrumb(item)"
-        >
-          <el-button text class="!px-2">
-            {{ item.label || item.value }}
-          </el-button>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
-
-      <div class="ml-auto">
+      <Scrollable ref="scrollableRef" class="flex-1 w-0 flex items-center">
+        <el-breadcrumb separator-icon="ArrowRight" class="!flex">
+          <el-breadcrumb-item
+            v-for="item of breadcrumbModel"
+            :key="item.value"
+            class="!flex-none"
+            @click="handleBreadcrumb(item)"
+          >
+            <el-button text class="!px-2" :icon="item.icon" :title="item.label">
+              {{ item.label }}
+            </el-button>
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </Scrollable>
+
+      <div class="flex-none">
         <el-button text icon="Refresh" circle @click="getTableData"></el-button>
       </div>
     </div>
@@ -88,28 +83,31 @@
         :selectable="(row) => ['file'].includes(row.type)"
       ></el-table-column>
 
-      <el-table-column prop="name" :label="$t('common.name')" sortable>
+      <el-table-column
+        prop="name"
+        :label="$t('common.name')"
+        sortable
+        show-overflow-tooltip
+      >
         <template #default="{ row }">
-          <div class="flex items-center">
-            <el-link
-              v-if="row.type === 'directory'"
-              type="default"
-              icon="Folder"
-              class="!space-x-2"
-              @click="handleDirectory(row)"
-            >
-              {{ row.name }}
-            </el-link>
-            <el-link
-              v-else
-              type="default"
-              icon="Document"
-              class="!space-x-2"
-              @click="handleDownload(row)"
-            >
-              {{ row.name }}
-            </el-link>
-          </div>
+          <el-link
+            v-if="row.type === 'directory'"
+            type="default"
+            icon="Folder"
+            class="!space-x-2"
+            @click="handleDirectory(row)"
+          >
+            {{ row.name }}
+          </el-link>
+          <el-link
+            v-else
+            type="default"
+            icon="Document"
+            class="!space-x-2"
+            @click="handleDownload(row)"
+          >
+            {{ row.name }}
+          </el-link>
         </template>
       </el-table-column>
 
@@ -185,15 +183,21 @@ const tableData = ref([])
 
 const currentPath = ref('sdcard')
 
+const presetMap = {
+  sdcard: {
+    icon: 'Iphone',
+    label: window.t('device.control.file.manager.storage'),
+    value: 'sdcard',
+  },
+}
+
 const breadcrumbModel = computed(() => {
-  const pathList = currentPath.value.split('/')
+  const list = currentPath.value.split('/')
 
-  const value = pathList.map(item => ({
-    label:
-      item === 'sdcard'
-        ? window.t('device.control.file.manager.storage')
-        : void 0,
+  const value = list.map(item => ({
+    label: item,
     value: item,
+    ...(presetMap[item] || {}),
   }))
 
   return value
@@ -226,9 +230,14 @@ function onSelectionChange(selection) {
   selectionRows.value = selection
 }
 
-function handleDirectory(row) {
+const scrollableRef = ref()
+
+async function handleDirectory(row) {
   currentPath.value += `/${row.name}`
   getTableData()
+
+  await nextTick()
+  scrollableRef.value.scrollToEnd()
 }
 
 function handleBreadcrumb(data) {

diff --git a/src/components/Device/components/ControlBar/index.vue b/src/components/Device/components/ControlBar/index.vue
@@ -1,66 +1,68 @@
 <template>
   <div
-    ref="wheelContainer"
-    class="bg-primary-100 dark:bg-gray-800 -my-[8px] flex flex-nowrap overflow-hidden scroll-smooth px-4 group"
+    class="bg-primary-100 dark:bg-gray-800 flex items-center group -my-[8px] h-9 overflow-hidden"
   >
     <el-button
       type="primary"
-      class="el-button-nav prev"
+      class="el-button-nav"
       title="Prev"
       @click="handlePrev"
     >
       <el-icon>
         <CaretLeft />
       </el-icon>
     </el-button>
+
+    <Scrollable ref="scrollableRef" class="flex-1 w-0 flex items-center">
+      <component
+        :is="item.component || 'div'"
+        v-for="(item, index) in controlModel"
+        :key="index"
+        class="flex-none"
+        v-bind="{
+          device,
+          ...(item.command
+            ? {
+              onClick: () => handleShell(item),
+            }
+            : {}),
+        }"
+      >
+        <template #default="{ loading = false } = {}">
+          <el-button
+            type="primary"
+            plain
+            class="!border-none !mx-0 bg-transparent !rounded-0"
+            :disabled="device.$unauthorized"
+            :title="$t(item.tips || item.label)"
+            :loading="loading"
+          >
+            <template #icon>
+              <svg-icon
+                v-if="item.svgIcon"
+                :name="item.svgIcon"
+                :class="item.iconClass"
+              ></svg-icon>
+              <el-icon v-else-if="item.elIcon" :class="item.iconClass">
+                <component :is="item.elIcon" />
+              </el-icon>
+            </template>
+            {{ $t(item.label) }}
+          </el-button>
+        </template>
+      </component>
+    </Scrollable>
+
     <el-button
       type="primary"
-      class="el-button-nav next"
+      class="el-button-nav"
       title="Next"
       @click="handleNext"
     >
       <el-icon>
         <CaretRight />
       </el-icon>
     </el-button>
-    <component
-      :is="item.component || 'div'"
-      v-for="(item, index) in controlModel"
-      :key="index"
-      class="flex-none"
-      v-bind="{
-        device,
-        ...(item.command
-          ? {
-            onClick: () => handleShell(item),
-          }
-          : {}),
-      }"
-    >
-      <template #default="{ loading = false } = {}">
-        <el-button
-          type="primary"
-          plain
-          class="!border-none !mx-0 bg-transparent !rounded-0"
-          :disabled="device.$unauthorized"
-          :title="$t(item.tips || item.label)"
-          :loading="loading"
-          @wheel.prevent="onWheel"
-        >
-          <template #icon>
-            <svg-icon
-              v-if="item.svgIcon"
-              :name="item.svgIcon"
-              :class="item.iconClass"
-            ></svg-icon>
-            <el-icon v-else-if="item.elIcon" :class="item.iconClass">
-              <component :is="item.elIcon" />
-            </el-icon>
-          </template>
-          {{ $t(item.label) }}
-        </el-button>
-      </template>
-    </component>
   </div>
 </template>
 
@@ -182,30 +184,11 @@ export default {
   },
   computed: {},
   methods: {
-    onWheel(event) {
-      const container = this.$refs.wheelContainer
-      container.scrollLeft += event.deltaY
-    },
     handlePrev() {
-      const container = this.$refs.wheelContainer
-
-      if (container.scrollLeft <= 0) {
-        return false
-      }
-
-      container.scrollLeft -= 100
+      this.$refs.scrollableRef.scrollBackward()
     },
     handleNext() {
-      const container = this.$refs.wheelContainer
-
-      if (
-        container.scrollLeft
-        >= container.scrollWidth - container.clientWidth
-      ) {
-        return false
-      }
-
-      container.scrollLeft += 100
+      this.$refs.scrollableRef.scrollForward()
     },
     handleShell(row) {
       this.$adb.deviceShell(this.device.id, row.command)
@@ -220,12 +203,6 @@ export default {
 }
 
 .el-button.el-button-nav {
-  @apply p-0 rounded-none border-0 absolute z-10 inset-y-0 flex items-center justify-center opacity-0 bg-primary-100 dark:bg-gray-800 !hover:bg-primary-300 active:bg-primary-500 text-primary-600 hover:text-white w-4 group-hover:opacity-100 transition-opacity;
-  &.prev {
-    @apply left-0;
-  }
-  &.next {
-    @apply right-0;
-  }
+  @apply flex-none p-0 rounded-none border-0 h-full flex items-center justify-center opacity-0 bg-primary-100 dark:bg-gray-800 !hover:bg-primary-300 active:bg-primary-500 text-primary-600 hover:text-white w-4 group-hover:opacity-100 transition-opacity;
 }
 </style>
diff --git a/src/plugins/index.js b/src/plugins/index.js
@@ -1,7 +1,9 @@
 import ElementPlus from './element-plus/index.js'
+import Scrollable from './scrollable/index.js'
 
 export default {
   install(app) {
     app.use(ElementPlus)
+    app.use(Scrollable)
   },
 }