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,7 +16,7 @@
           :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"
@@ -36,57 +36,76 @@
                 <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)">
+                    <div class="flex items-center gap-8">
-                      点位详情
+                      <el-tooltip
-                    </el-button>
+                        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"
-                      effect="light"
-                      class="rounded-md"
                       >
                         已上传
                       </el-tag>
                       <el-tag
                         v-else
+                        class="rounded-md"
+                        effect="light"
                         size="small"
                         type="info"
-                      effect="light"
-                      class="rounded-md"
                       >
                         未上传
                       </el-tag>
                     </div>
                   </div>
+                </div>
                 <div>
                   <div class="space-y-2 mb-3">
                     <div class="text-sm">
                       <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
+                        <el-tooltip
-                          class="ml-2"
+                          :disabled="!fileName"
-                          v-if="!!status"
+                          content="点表文件详情"
-                          @click.stop="handleDownload(categoryName as string)"
+                          effect="dark"
+                          placement="top"
                         >
-                          <el-button type="primary" :icon="Download" link>下载</el-button>
+                          <el-button
-                        </div>
+                            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,19 +124,20 @@
                     </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
@@ -150,9 +170,9 @@
     <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">
@@ -182,17 +202,17 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
-import { ref, reactive, computed, watch } from 'vue'
+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'