feat: 样式调整

src/views/engineering/config/components/StepDeviceCategory.vue

@@ -4,8 +4,8 @@
       <el-tabs
         v-if="Object.keys(modelValue).length > 0"
         v-model="activeTab"
-        type="card"
         class="h-full flex flex-col"
+        type="card"
       >
         <el-tab-pane
           v-for="(categoriesMap, channelType) in modelValue"
@@ -16,14 +16,14 @@
           :name="channelType"
         >
           <el-scrollbar>
-            <div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4 p-4">
+            <div class="grid grid-cols-[repeat(auto-fill,minmax(310px,1fr))] gap-4 p-4">
               <div
                 class="bg-white rounded-xl shadow-sm p-12 border-2 border-dashed border-gray-200 hover:border-blue-400 transition-all duration-300 cursor-pointer flex items-center justify-center min-h-[200px]"
                 @click="handleAdd"
               >
                 <div class="flex flex-col items-center gap-3">
                   <el-icon :size="48" class="text-gray-400">
-                    <Plus />
+                    <Plus/>
                   </el-icon>
                   <span class="text-base font-medium text-gray-600">新增设备类别</span>
                 </div>
@@ -36,32 +36,43 @@
                 <div class="flex justify-between items-start mb-3">
                   <div class="flex-1 min-w-0 flex items-center justify-between">
                     <h3
-                      class="font-bold text-lg text-gray-900 truncate"
                       :title="categoryName as string"
+                      class="font-bold text-lg text-gray-900 truncate"
                     >
                       类别名称：{{ categoryName }}
                     </h3>
-                    <el-button @click.stop="handleOpenPointDrawer(fileName)">
-                      点位详情
-                    </el-button>
-                    <el-tag
-                      v-if="!!status"
-                      size="small"
-                      type="success"
-                      effect="light"
-                      class="rounded-md"
-                    >
-                      已上传
-                    </el-tag>
-                    <el-tag
-                      v-else
-                      size="small"
-                      type="info"
-                      effect="light"
-                      class="rounded-md"
-                    >
-                      未上传
-                    </el-tag>
+                    <div class="flex items-center gap-8">
+                      <el-tooltip
+                        content="下载点表文件"
+                        effect="dark"
+                        placement="top"
+                      >
+                        <div
+                          v-if="!!status"
+                          @click.stop="handleDownload(categoryName as string)"
+                        >
+                          <el-button :icon="Download" link type="primary">下载</el-button>
+                        </div>
+                      </el-tooltip>
+                      <el-tag
+                        v-if="!!status"
+                        class="rounded-md"
+                        effect="light"
+                        size="small"
+                        type="success"
+                      >
+                        已上传
+                      </el-tag>
+                      <el-tag
+                        v-else
+                        class="rounded-md"
+                        effect="light"
+                        size="small"
+                        type="info"
+                      >
+                        未上传
+                      </el-tag>
+                    </div>
                   </div>
                 </div>
                 <div>
@@ -70,23 +81,31 @@
                       <div class="flex items-center justify-between">
                         <span class="text-gray-500 whitespace-nowrap">点表文件：</span>
                         <el-tooltip
-                          effect="dark"
                           :content="fileName"
-                          placement="top"
                           :disabled="!fileName"
+                          effect="dark"
+                          placement="bottom"
                         >
-                          <span class="text-gray-900 font-medium truncate max-w-[170px]">
+                          <span class="text-gray-900 font-medium truncate ">
                             {{ fileName || '-' }}
                           </span>
                         </el-tooltip>
 
-                        <div
-                          class="ml-2"
-                          v-if="!!status"
-                          @click.stop="handleDownload(categoryName as string)"
+                        <el-tooltip
+                          :disabled="!fileName"
+                          content="点表文件详情"
+                          effect="dark"
+                          placement="top"
                         >
-                          <el-button type="primary" :icon="Download" link>下载</el-button>
-                        </div>
+                          <el-button
+                            v-if="!!status"
+                            :icon="InfoFilled"
+                            link
+                            type="warning"
+                            @click.stop="handleOpenPointDrawer(fileName)">
+                            详情
+                          </el-button>
+                        </el-tooltip>
                       </div>
                     </div>
                   </div>
@@ -96,8 +115,8 @@
                       class="absolute inset-0 z-10 bg-white/90 flex items-center justify-center rounded-lg"
                     >
                       <el-button
-                        type="danger"
                         size="small"
+                        type="danger"
                         @click="handleCancelUpload(fileName as string)"
                       >
                         取消上传
@@ -105,23 +124,24 @@
                     </div>
                     <el-upload
                       :ref="(el) => setUploadRef(el, fileName as string)"
-                      class="upload-demo"
-                      drag
                       :auto-upload="false"
-                      :limit="1"
-                      :show-file-list="false"
                       :disabled="uploadingStates[fileName]"
+                      :limit="1"
                       :on-change="
                         (file: any) => handleFileChange(file, fileName as string, categoryName)
                       "
+                      :show-file-list="false"
+                      class="upload-demo"
+                      drag
                     >
                       <el-icon class="el-icon--upload !text-3xl !mb-2 !text-gray-400"
-                        ><upload-filled
-                      /></el-icon>
+                      >
+                        <upload-filled/>
+                      </el-icon>
                       <div class="el-upload__text text-xs text-gray-500">
                         拖拽文件或<em class="text-blue-500 not-italic cursor-pointer"
-                          >点击/{{ !!status ? '重新' : '' }}上传</em
-                        >
+                      >点击/{{ !!status ? '重新' : '' }}上传</em
+                      >
                       </div>
                     </el-upload>
                   </div>
@@ -138,25 +158,25 @@
         >
           <div class="flex flex-col items-center gap-3">
             <el-icon :size="48" class="text-gray-400">
-              <Plus />
+              <Plus/>
             </el-icon>
             <span class="text-base font-medium text-gray-600">新增设备类别</span>
           </div>
         </div>
-        <el-empty description="暂无设备类别，请点击上方按钮添加" />
+        <el-empty description="暂无设备类别，请点击上方按钮添加"/>
       </div>
     </div>
 
     <el-dialog
       v-model="dialogVisible"
       :title="'新增设备类别'"
-      width="500px"
       append-to-body
       destroy-on-close
+      width="500px"
     >
       <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="类别名称：" prop="pointName">
-          <el-input v-model="form.pointName" placeholder="请输入类别名称" />
+          <el-input v-model="form.pointName" placeholder="请输入类别名称"/>
         </el-form-item>
       </el-form>
       <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
@@ -178,21 +198,21 @@
         </span>
       </template>
     </el-dialog>
-    <CategoryPointDrawer ref="categoryPointDrawerRef" />
+    <CategoryPointDrawer ref="categoryPointDrawerRef"/>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, computed, watch } from 'vue'
+<script lang="ts" setup>
+import { computed, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { UploadFilled, Plus, Download } from '@element-plus/icons-vue'
+import { Download, InfoFilled, Plus, UploadFilled } from '@element-plus/icons-vue'
 import type { IDeviceCategoryList, IDeviceCategoryOV } from '@/api/module/device/index.d'
 import type { FormInstance, FormRules, UploadFile } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import {
   createDeviceType,
-  uploadDeviceTypeFile,
   downloadDeviceTypeFile,
+  uploadDeviceTypeFile,
 } from '@/api/module/device/category'
 import { ChannelEnum } from '@/api/module/channel/index'
 import type { IChannelOV } from '@/api/module/channel/index.d'