From 99a1eeb356d5615db5c71aae6f9fd0e52f38d5b5 Mon Sep 17 00:00:00 2001
From: ysansan <hippeauxie@gmail.com>
Date: Mon, 15 Jul 2024 11:24:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E5=8D=B7=E7=BC=96=E8=BE=91=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=A2=98=E5=9E=8B=E9=80=89=E6=8B=A9tab=E3=80=81?=
 =?UTF-8?q?=E5=9B=A2=E9=98=9F=E7=A9=BA=E9=97=B4=E5=88=97=E8=A1=A8=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E4=BC=98=E5=8C=96=20(#337)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat:问卷编辑页面题型选择tab优化

* feat: 团队空间列表按钮优化
---
 .../modules/questionModule/CatalogPanel.vue   |  7 ++-
 .../pages/list/components/SpaceList.vue       | 53 +++++++++++--------
 web/src/management/pages/list/index.vue       |  6 +--
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/web/src/management/pages/edit/modules/questionModule/CatalogPanel.vue b/web/src/management/pages/edit/modules/questionModule/CatalogPanel.vue
index 4de314ea..875efb4b 100644
--- a/web/src/management/pages/edit/modules/questionModule/CatalogPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/CatalogPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-tabs type="border-card" v-model="tabSelected" class="tab-box">
+  <el-tabs type="border-card" v-model="tabSelected" stretch class="tab-box">
     <el-tab-pane label="题型选择">
       <TypeList />
     </el-tab-pane>
@@ -27,8 +27,11 @@ const tabSelected = ref<string>('0')
     width: 100%;
   }
   :deep(.el-tabs__item) {
-    width: 50%;
     text-align: center;
   }
+
+  &.el-tabs--border-card :deep(.el-tabs__item:last-child.is-active) {
+    border-right-color: transparent;
+  }
 }
 </style>
diff --git a/web/src/management/pages/list/components/SpaceList.vue b/web/src/management/pages/list/components/SpaceList.vue
index a9237e96..4f104203 100644
--- a/web/src/management/pages/list/components/SpaceList.vue
+++ b/web/src/management/pages/list/components/SpaceList.vue
@@ -38,25 +38,13 @@
         class-name="table-options"
       >
         <template #default="scope">
-          <div class="tool-root">
-            <!-- <el-button text type="primary" class="tool-root-btn-text" :style="{ width: 50 + 'px' }" @click.stop="handleEnter(scope.row)">进入</el-button> -->
-            <el-button
-              text
-              type="primary"
-              class="tool-root-btn-text"
-              :style="{ width: 50 + 'px' }"
-              @click.stop="handleModify(scope.row._id)"
-              >{{ isAdmin(scope.row._id) ? '管理' : '查看' }}</el-button
-            >
-            <el-button
-              text
-              type="primary"
-              class="tool-root-btn-text"
-              :style="{ width: 50 + 'px' }"
-              @click.stop="handleDelete(scope.row._id)"
-              v-if="isAdmin(scope.row._id)"
-              >删除</el-button
-            >
+          <div class="space-tool-bar">
+            <ToolBar
+              :data="scope.row"
+              :tool-width="50"
+              :tools="getTools(scope.row)"
+              @click="handleClick"
+            />
           </div>
         </template>
       </el-table-column>
@@ -77,6 +65,7 @@ import 'element-plus/theme-chalk/src/message-box.scss'
 import { get, map } from 'lodash-es'
 import { spaceListConfig } from '@/management/config/listConfig'
 import SpaceModify from './SpaceModify.vue'
+import ToolBar from './ToolBar.vue'
 import { UserRole } from '@/management/utils/types/workSpace'
 
 const showSpaceModify = ref(false)
@@ -98,6 +87,15 @@ const isAdmin = (id: string) => {
   )
 }
 
+const getTools = (data: any) => {
+  const flag = isAdmin(data._id)
+  const tools = [{ key: 'modify', label: flag ? '管理' : '查看' }]
+  if (flag) {
+    tools.push({ key: 'delete', label: '删除' })
+  }
+  return tools
+}
+
 const handleModify = async (id: string) => {
   await store.dispatch('list/getSpaceDetail', id)
   modifyType.value = 'edit'
@@ -120,6 +118,15 @@ const handleDelete = (id: string) => {
     })
     .catch(() => {})
 }
+
+const handleClick = (key: string, data: any) => {
+  if (key === 'modify') {
+    handleModify(data._id)
+  } else if (key === 'delete') {
+    handleDelete(data._id)
+  }
+}
+
 const onCloseModify = () => {
   showSpaceModify.value = false
   store.dispatch('list/getSpaceList')
@@ -133,6 +140,7 @@ const onCloseModify = () => {
 .list-wrap {
   padding: 20px;
   background: #fff;
+
   .list-table {
     :deep(.el-table__header) {
       .tableview-header .el-table__cell {
@@ -143,12 +151,15 @@ const onCloseModify = () => {
         }
       }
     }
+
     :deep(.tableview-row) {
       .tableview-cell {
         padding: 5px 0;
+
         &.link {
           cursor: pointer;
         }
+
         .cell .cell-span {
           font-size: 14px;
         }
@@ -156,9 +167,7 @@ const onCloseModify = () => {
     }
     .tool-root {
       display: flex;
-      &:first-child {
-        margin-left: -10px;
-      }
+
       .tool-root-btn-text {
         font-weight: normal !important;
       }
diff --git a/web/src/management/pages/list/index.vue b/web/src/management/pages/list/index.vue
index 89ab66ee..e27e229d 100644
--- a/web/src/management/pages/list/index.vue
+++ b/web/src/management/pages/list/index.vue
@@ -22,7 +22,7 @@
           </h2>
           <div class="operation">
             <el-button
-              class="btn space-btn"
+              class="btn create-btn"
               type="default"
               @click="onSpaceCreate"
               v-if="spaceType == SpaceType.Group"
@@ -255,9 +255,7 @@ const handleLogout = () => {
       .create-btn {
         background: #4a4c5b;
       }
-      .space-btn {
-        background: $primary-color;
-      }
+      
       .btn {
         width: 132px;
         height: 32px;