From 7d9bf776db5c2bf9a644f9a5543f7077835fcfb9 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Tue, 20 Oct 2026 13:42:46 +0800
Subject: [PATCH] =?UTF-8?q?feat(seller):=20=E7=B4=A0=E6=9D=90=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=A1=B5=E9=87=8D=E6=9E=84=E5=B8=83=E5=B1=80=E5=B9=B6?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E4=B8=BB=E8=89=B2=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 双层卡片嵌套改为单面板，tabs 与操作按钮并入顶部工具栏
- 悬停/选中红色描边统一为 Element Plus 主色
- 复选框改为悬停/选中时显示，选中增加淡蓝遮罩
- 分组行编辑入口悬停显示，添加分组改为置顶虚线按钮
- 分页增加总数显示，空列表显示空状态
---
 .../src/views/sys/oss-manage/ossManage.scss   | 413 +++++++++++-------
 seller/src/views/sys/oss-manage/ossManage.vue | 342 +++++++--------
 2 files changed, 410 insertions(+), 345 deletions(-)

diff --git a/seller/src/views/sys/oss-manage/ossManage.scss b/seller/src/views/sys/oss-manage/ossManage.scss
index 9b22adc85..6c1355993 100644
--- a/seller/src/views/sys/oss-manage/ossManage.scss
+++ b/seller/src/views/sys/oss-manage/ossManage.scss
@@ -1,193 +1,274 @@
-// 弹窗选择器模式：固定内容区高度，避免空分组时布局塌陷
-.oss-manage-picker {
-  .category-tabs-card {
-    margin-bottom: 0;
-
-    :deep(.el-card__body) {
-      padding-bottom: 0;
-    }
+// 商家素材库（OSS 管理）样式：全部规则挂在 .oss-manage 根类下，避免全局污染
+.oss-manage {
+  // 单面板容器
+  .oss-panel {
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    overflow: hidden;
   }
 
-  > .el-row > .el-card {
-    border: none;
-    box-shadow: none;
-
-    :deep(.el-card__body) {
-      padding: 0 0 8px;
-    }
-  }
-
-  .oss-manage-box {
-    min-height: 520px;
-    align-items: stretch;
-
-    > .el-col {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .file-list,
-    .pic-list {
-      flex: 1;
-      min-height: 520px;
-    }
-
-    .pic-list {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .img-box {
-      flex: 1;
-      min-height: 400px;
-    }
-
-    .page-box {
-      flex-shrink: 0;
-      margin-top: auto;
-    }
-  }
-}
-
-.search {
-  .oss-operation {
-    margin-bottom: 2vh;
+  // 顶部工具行：左侧分类 tab + 右侧操作按钮
+  .oss-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    width: 100%;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 14px 16px;
+    border-bottom: 1px solid #ebeef5;
+  }
 
-    button {
-      margin-right: 5px;
+  .oss-tabs {
+    display: flex;
+    gap: 8px;
+
+    .oss-tab {
+      padding: 7px 18px;
+      border-radius: 16px;
+      font-size: 14px;
+      color: #606266;
+      cursor: pointer;
+      transition:
+        color 0.2s,
+        background 0.2s;
+
+      &:hover {
+        color: var(--el-color-primary);
+        background: var(--el-color-primary-light-9);
+      }
+
+      &.active {
+        color: #fff;
+        background: var(--el-color-primary);
+        font-weight: 500;
+      }
     }
   }
-}
 
-.none {
-  display: none;
-}
-
-.oss-manage-box {
-  .file-list {
-    height: 100%;
-    box-sizing: border-box;
-    border-right: 1px solid #e5e6eb;
-    padding: 20px 12px 28px;
-  }
-  .pic-list {
-    height: 100%;
-    box-sizing: border-box;
-    padding: 0 0 24px 0;
-  }
-  .img-box {
-    width: 100%;
+  .oss-actions {
     display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    justify-content: flex-start;
-    align-content: flex-start;
-    margin-top: 20px;
-    .img-item {
-      width: 120px;
-      height: 158px;
+    align-items: center;
+    gap: 10px;
+  }
+
+  // 内容区：左分组 + 右文件网格
+  .oss-manage-box {
+    .oss-side {
+      height: 100%;
       box-sizing: border-box;
-      margin: 0 13px 8px;
-      position: relative;
+      border-right: 1px solid #ebeef5;
+      padding: 14px 12px;
       display: flex;
       flex-direction: column;
-      align-items: center;
-      .card {
-        width: 120px;
-        height: 120px;
-        border-radius: 8px;
-        border: 2px solid transparent;
-        overflow: hidden;
-        box-sizing: border-box;
-        position: relative;
-        img,
-        .card-media {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-        .card-file {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background: #f5f7fa;
-          color: #909399;
-        }
-        .card-checkbox {
-          position: absolute;
-          top: 8px;
-          right: 8px;
-          z-index: 1000;
-          height: auto;
-          margin: 0;
+    }
 
-          :deep(.el-checkbox__label) {
-            display: none;
-          }
+    .oss-add-group {
+      margin-bottom: 10px;
+
+      .oss-add-group-btn {
+        width: 100%;
+        border-style: dashed;
+        color: #606266;
+
+        &:hover {
+          color: var(--el-color-primary);
+          border-color: var(--el-color-primary);
         }
-        .preview {
-          width: 100%;
-          height: 26px;
-          background-color: #ffffff;
-          color: #666666;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          display: flex;
-          flex-wrap: nowrap;
-          align-items: center;
-          justify-content: center;
-          box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
-          > div {
-            flex: 1;
+      }
+    }
+
+    .oss-main {
+      height: 100%;
+      box-sizing: border-box;
+      padding: 2px 16px 16px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .oss-grid {
+      flex: 1;
+      display: flex;
+      flex-wrap: wrap;
+      align-content: flex-start;
+      margin-top: 14px;
+
+      .oss-grid-item {
+        width: 120px;
+        margin: 0 14px 14px 0;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .oss-card {
+          width: 120px;
+          height: 120px;
+          border-radius: 6px;
+          border: 2px solid transparent;
+          overflow: hidden;
+          box-sizing: border-box;
+          position: relative;
+          transition: border-color 0.2s;
+
+          img,
+          .card-media {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+          }
+
+          .card-file {
+            width: 100%;
+            height: 100%;
             display: flex;
             align-items: center;
             justify-content: center;
-            height: 100%;
+            background: #f5f7fa;
+            color: #909399;
+          }
+
+          // 选中遮罩（盖在媒体上方、复选框与操作条下方）
+          &.is-checked::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: var(--el-color-primary);
+            opacity: 0.08;
+            z-index: 2;
+            pointer-events: none;
+          }
+
+          .oss-card-check {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            z-index: 3;
+            height: auto;
+            margin: 0;
+            opacity: 0;
+            transition: opacity 0.2s;
+
+            :deep(.el-checkbox__label) {
+              display: none;
+            }
+          }
+
+          .oss-card-ops {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 30px;
+            background: rgba(255, 255, 255, 0.96);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.2s;
+            z-index: 3;
+
+            > div {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 100%;
+              color: #606266;
+              cursor: pointer;
+
+              &:hover {
+                color: var(--el-color-primary);
+              }
+            }
+          }
+
+          &:hover {
+            border-color: var(--el-color-primary);
+
+            .oss-card-check {
+              opacity: 1;
+            }
+
+            .oss-card-ops {
+              opacity: 1;
+            }
+          }
+
+          &.is-checked {
+            border-color: var(--el-color-primary);
+
+            .oss-card-check {
+              opacity: 1;
+            }
+          }
+
+          &.oss-card-selectable {
+            cursor: pointer;
+
+            .oss-card-check {
+              opacity: 1;
+            }
           }
         }
+
+        .oss-name {
+          width: 120px;
+          margin-top: 6px;
+          font-size: 12px;
+          line-height: 1.4;
+          color: #606266;
+          text-align: center;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          cursor: pointer;
+        }
       }
-      .card:hover,
-      .custom-checkbox-card-checked {
-        border: 2px solid #ff5c58;
+    }
+
+    .oss-pager {
+      flex-shrink: 0;
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 16px;
+    }
+  }
+
+  // 弹窗选择器模式：去掉面板阴影，固定内容区最小高度，避免空分组时布局塌陷
+  &.oss-manage-picker {
+    .oss-panel {
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .oss-toolbar {
+      padding: 10px 12px;
+    }
+
+    .oss-manage-box {
+      min-height: 520px;
+      align-items: stretch;
+
+      > .el-col {
+        display: flex;
+        flex-direction: column;
       }
-      .oss-card-selectable {
-        cursor: pointer;
+
+      .oss-side,
+      .oss-main {
+        flex: 1;
+        min-height: 520px;
       }
-      .text {
-        width: 120px;
-        height: 36px;
-        cursor: pointer;
-        color: #252931;
-        font-size: 14px;
-        line-height: 36px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        text-align: center;
-        -webkit-line-clamp: 1;
-        -webkit-box-orient: vertical;
+
+      .oss-grid {
+        min-height: 400px;
+      }
+
+      .oss-pager {
+        margin-top: auto;
       }
     }
   }
-  .page-box {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
-  .pagination-box {
-    display: flex;
-    flex-direction: row-reverse;
-  }
-
-  .demo-tree-render .el-tree-node__label {
-    width: 94%;
-  }
 }
-
diff --git a/seller/src/views/sys/oss-manage/ossManage.vue b/seller/src/views/sys/oss-manage/ossManage.vue
index 0c5ebac36..943ad7299 100644
--- a/seller/src/views/sys/oss-manage/ossManage.vue
+++ b/seller/src/views/sys/oss-manage/ossManage.vue
@@ -1,24 +1,6 @@
 <style lang="scss">
 @import "./ossManage.scss";
 
-.group-row {
-  padding-top: 16px;
-  margin-top: 8px;
-  border-top: 1px solid #ededed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  > * {
-    margin-right: 10px;
-  }
-}
-
-.article-category {
-  flex: 2;
-  min-width: 200px;
-}
-
 .table {
   flex: 11;
 }
@@ -44,33 +26,24 @@
   gap: 10px;
 }
 
-.tab-empty {
-  padding: 48px 0;
-  color: #999;
-  text-align: center;
-}
-
-.tabs-card {
-  margin-bottom: 16px;
-}
-
 .oss-group-tree {
-  padding: 4px 8px 0;
+  flex: 1;
+  padding: 4px 4px 0;
 
   :deep(.el-tree-node__expand-icon) {
     display: none;
   }
 
   :deep(.el-tree-node) {
-    margin-bottom: 6px;
+    margin-bottom: 4px;
   }
 
   :deep(.el-tree-node__content) {
     padding: 0 10px !important;
-    height: 42px;
+    height: 38px;
     border-radius: 6px;
-    font-size: 15px;
-    line-height: 42px;
+    font-size: 14px;
+    line-height: 38px;
   }
 
   :deep(.el-tree-node__content:hover) {
@@ -78,8 +51,8 @@
   }
 
   :deep(.el-tree-node.is-current > .el-tree-node__content) {
-    background: #ecf5ff;
-    color: #409eff;
+    background: var(--el-color-primary-light-9);
+    color: var(--el-color-primary);
     font-weight: 500;
   }
 }
@@ -90,7 +63,11 @@
   justify-content: space-between;
   width: 100%;
   padding-right: 4px;
-  font-size: 15px;
+  font-size: 14px;
+
+  &:hover .oss-tree-more {
+    opacity: 1;
+  }
 }
 
 .oss-tree-more {
@@ -98,6 +75,12 @@
   color: #909399;
   padding: 0 4px;
   font-size: 16px;
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  &:hover {
+    color: var(--el-color-primary);
+  }
 }
 
 .file-preview-fallback {
@@ -124,157 +107,158 @@
 
 </style>
 <template>
-  <div class="search" :class="{ 'oss-manage-picker': isComponent }">
-    <el-card class="tabs-card category-tabs-card">
-      <el-tabs v-model="activeCategoryTab" @tab-change="handleCategoryTabChange">
-        <el-tab-pane label="图片" name="IMAGE" />
-        <el-tab-pane label="视频" name="VIDEO" />
-        <el-tab-pane label="文件" name="FILE" />
-      </el-tabs>
-    </el-card>
-    <el-row>
-      <el-card>
-        <div>
-          <el-row class="oss-manage-box">
-            <el-col v-if="canShowGroups" :span="isComponent ? 5 : 4">
-              <div class="file-list">
-                <div class="article-category mr_10">
-                  <el-tree
-                    :key="treeRenderKey"
-                    :data="treeData"
-                    node-key="value"
-                    :props="{ label: 'title', children: 'children' }"
-                    :indent="0"
-                    highlight-current
-                    class="demo-tree-render oss-group-tree"
-                    @node-click="handleTreeNodeClick"
+  <div class="search oss-manage" :class="{ 'oss-manage-picker': isComponent }">
+    <div class="oss-panel">
+      <div class="oss-toolbar">
+        <div class="oss-tabs">
+          <div
+            class="oss-tab"
+            :class="{ active: activeCategoryTab === 'IMAGE' }"
+            @click="handleCategoryTabChange('IMAGE')"
+          >图片</div>
+          <div
+            class="oss-tab"
+            :class="{ active: activeCategoryTab === 'VIDEO' }"
+            @click="handleCategoryTabChange('VIDEO')"
+          >视频</div>
+          <div
+            class="oss-tab"
+            :class="{ active: activeCategoryTab === 'FILE' }"
+            @click="handleCategoryTabChange('FILE')"
+          >文件</div>
+        </div>
+        <div class="oss-actions">
+          <el-upload
+            v-if="canUploadImages"
+            ref="upRef"
+            :action="sellerUrl + '/store/common/upload/file'"
+            :data="uploadData"
+            :headers="accessToken"
+            :before-upload="beforeUpload"
+            :on-error="handleError"
+            :on-success="handleSuccess"
+            :show-file-list="false"
+            multiple
+            style="display: inline-block"
+          >
+            <el-button type="primary">{{ uploadButtonText }}</el-button>
+          </el-upload>
+          <el-button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</el-button>
+        </div>
+      </div>
+
+      <el-row class="oss-manage-box">
+        <el-col v-if="canShowGroups" :span="isComponent ? 5 : 4">
+          <div class="oss-side">
+            <div v-if="!isComponent" class="oss-add-group">
+              <el-button class="oss-add-group-btn" @click="handleClickAddGroup">+ 添加分组</el-button>
+            </div>
+            <el-tree
+              :key="treeRenderKey"
+              :data="treeData"
+              node-key="value"
+              :props="{ label: 'title', children: 'children' }"
+              :indent="0"
+              highlight-current
+              class="demo-tree-render oss-group-tree"
+              @node-click="handleTreeNodeClick"
+            >
+              <template #default="{ data }">
+                <span v-if="data" class="oss-tree-node">
+                  <span>{{ data.title }}</span>
+                  <el-dropdown
+                    v-if="data.value !== '0' && !isComponent"
+                    trigger="click"
+                    @command="(cmd) => onTreeDropdownCommand(cmd, data)"
                   >
-                    <template #default="{ data }">
-                      <span v-if="data" class="oss-tree-node">
-                        <span>{{ data.title }}</span>
-                        <el-dropdown
-                          v-if="data.value !== '0' && !isComponent"
-                          trigger="click"
-                          @command="(cmd) => onTreeDropdownCommand(cmd, data)"
-                        >
-                          <span class="oss-tree-more" @click.stop>···</span>
-                          <template #dropdown>
-                            <el-dropdown-menu>
-                              <el-dropdown-item command="edit">编辑</el-dropdown-item>
-                              <el-dropdown-item command="delete">删除</el-dropdown-item>
-                            </el-dropdown-menu>
-                          </template>
-                        </el-dropdown>
-                      </span>
+                    <span class="oss-tree-more" @click.stop>···</span>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item command="edit">编辑</el-dropdown-item>
+                        <el-dropdown-item command="delete">删除</el-dropdown-item>
+                      </el-dropdown-menu>
                     </template>
-                  </el-tree>
-                  <div v-if="!isComponent" class="group-row flex">
-                    <el-button @click="handleClickAddGroup">添加分组</el-button>
-                  </div>
-                </div>
-              </div>
-            </el-col>
-            <el-col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
-              <div class="pic-list">
-                <div>
-                  <div class="oss-operation padding-row" style="display: flex; flex-direction: row-reverse">
-                    <div>
-                      <el-upload
-                        v-if="canUploadImages"
-                        ref="upRef"
-                        :action="sellerUrl + '/store/common/upload/file'"
-                        :data="uploadData"
-                        :headers="accessToken"
-                        :before-upload="beforeUpload"
-                        :on-error="handleError"
-                        :on-success="handleSuccess"
-                        :show-file-list="false"
-                        multiple
-                        style="display: inline-block"
-                      >
-                        <el-button>{{ uploadButtonText }}</el-button>
-                      </el-upload>
-                      <el-button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</el-button>
+                  </el-dropdown>
+                </span>
+              </template>
+            </el-tree>
+          </div>
+        </el-col>
+        <el-col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
+          <div class="oss-main">
+            <el-checkbox-group v-model="selectedOss" @change="selectOssChange">
+              <div class="oss-grid">
+                <div v-for="(item, index) in data" :key="index" class="oss-grid-item">
+                  <div
+                    class="oss-card"
+                    :class="{
+                      'is-checked': selectedOss.includes(item.id + ',' + item.url),
+                      'oss-card-selectable': isComponent && selectImage,
+                    }"
+                    @mouseenter="onMouseOver(item, index)"
+                    @mouseleave="onMouseOut(item, index)"
+                    @click="handleCardClick(item, $event)"
+                  >
+                    <el-checkbox
+                      :value="item.id + ',' + item.url"
+                      class="oss-card-check"
+                      @click.stop
+                    />
+                    <img v-if="isImageFile(item)" :src="item.url" alt="" />
+                    <video
+                      v-else-if="isVideoFile(item)"
+                      class="card-media"
+                      :src="item.url"
+                      muted
+                    />
+                    <div v-else class="card-file">
+                      <el-icon :size="28"><Document /></el-icon>
                     </div>
-                  </div>
-                </div>
-                <div>
-                  <el-checkbox-group v-model="selectedOss" @change="selectOssChange">
-                    <div class="img-box">
-                      <div v-for="(item, index) in data" :key="index" class="img-item">
-                        <div
-                          class="card"
-                          :class="{
-                            'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url),
-                            'oss-card-selectable': isComponent && selectImage,
-                          }"
-                          @mouseenter="onMouseOver(item, index)"
-                          @mouseleave="onMouseOut(item, index)"
-                          @click="handleCardClick(item, $event)"
-                        >
-                          <el-checkbox
-                            :value="item.id + ',' + item.url"
-                            class="card-checkbox"
-                            @click.stop
-                          />
-                          <img v-if="isImageFile(item)" :src="item.url" alt="" />
-                          <video
-                            v-else-if="isVideoFile(item)"
-                            class="card-media"
-                            :src="item.url"
-                            muted
-                          />
-                          <div v-else class="card-file">
-                            <el-icon :size="28"><Document /></el-icon>
-                          </div>
-                          <div v-if="item.isShowPreview" class="preview">
-                            <div @click.prevent="download(item)">
-                              <el-tooltip content="下载" placement="top">
-                                <el-icon :size="18"><Download /></el-icon>
-                              </el-tooltip>
-                            </div>
-                            <div @click.prevent="remove(item)">
-                              <el-tooltip content="删除" placement="top">
-                                <el-icon :size="18"><Delete /></el-icon>
-                              </el-tooltip>
-                            </div>
-                            <div
-                              @click.prevent="previewFile(item)"
-                            >
-                              <el-tooltip content="预览" placement="top">
-                                <el-icon :size="22"><View /></el-icon>
-                              </el-tooltip>
-                            </div>
-                          </div>
-                        </div>
-                        <el-tooltip :content="item.name" placement="bottom">
-                          <div class="text">{{ item.name }}</div>
+                    <div v-if="item.isShowPreview" class="oss-card-ops">
+                      <div @click.prevent="download(item)">
+                        <el-tooltip content="下载" placement="top">
+                          <el-icon :size="18"><Download /></el-icon>
+                        </el-tooltip>
+                      </div>
+                      <div @click.prevent="remove(item)">
+                        <el-tooltip content="删除" placement="top">
+                          <el-icon :size="18"><Delete /></el-icon>
+                        </el-tooltip>
+                      </div>
+                      <div
+                        @click.prevent="previewFile(item)"
+                      >
+                        <el-tooltip content="预览" placement="top">
+                          <el-icon :size="22"><View /></el-icon>
                         </el-tooltip>
                       </div>
                     </div>
-                  </el-checkbox-group>
-                </div>
-                <div class="page-box">
-                  <el-pagination
-                    v-model:current-page="searchForm.pageNumber"
-                    v-model:page-size="searchForm.pageSize"
-                    :total="total"
-                    layout="prev, pager, next, jumper"
-                    size="small"
-                    @current-change="pageChange"
-                  />
-                </div>
-                <div v-if="isComponent && selectImage && !hideSelectFooter" class="oss-select-footer">
-                  <el-button @click="handleSelectCancel">取消</el-button>
-                  <el-button type="primary" @click="handleSelectConfirm">确定</el-button>
+                  </div>
+                  <el-tooltip :content="item.name" placement="bottom">
+                    <div class="oss-name">{{ item.name }}</div>
+                  </el-tooltip>
                 </div>
               </div>
-            </el-col>
-          </el-row>
-
-        </div>
-      </el-card>
-    </el-row>
+            </el-checkbox-group>
+            <el-empty v-if="!loading && !data.length" description="暂无文件" :image-size="100" />
+            <div class="oss-pager">
+              <el-pagination
+                v-model:current-page="searchForm.pageNumber"
+                v-model:page-size="searchForm.pageSize"
+                :total="total"
+                layout="total, prev, pager, next, jumper"
+                size="small"
+                @current-change="pageChange"
+              />
+            </div>
+            <div v-if="isComponent && selectImage && !hideSelectFooter" class="oss-select-footer">
+              <el-button @click="handleSelectCancel">取消</el-button>
+              <el-button type="primary" @click="handleSelectConfirm">确定</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
     <el-dialog
       v-model="modalVisible"
       :close-on-click-modal="false"