问卷编辑页面题型选择tab、团队空间列表按钮优化 (#337)

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

* feat: 团队空间列表按钮优化

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>

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;
       }

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;