From dcb74fcdf4cd4112560ce98f1240bfcca55c2023 Mon Sep 17 00:00:00 2001
From: inter <inter@qq.com>
Date: Mon, 8 Sep 2025 16:38:10 +0800
Subject: [PATCH] Add File

---
 frontend/src/views/system/workspace/index.vue | 970 ++++++++++++++++++
 1 file changed, 970 insertions(+)
 create mode 100644 frontend/src/views/system/workspace/index.vue

diff --git a/frontend/src/views/system/workspace/index.vue b/frontend/src/views/system/workspace/index.vue
new file mode 100644
index 0000000..d74112b
--- /dev/null
+++ b/frontend/src/views/system/workspace/index.vue
@@ -0,0 +1,970 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, reactive } from 'vue'
+import {
+  workspaceList,
+  workspaceUserList,
+  workspaceDelete,
+  workspaceUwsDelete,
+  workspaceCreate,
+  workspaceUpdate,
+  workspaceUwsUpdate,
+} from '@/api/workspace'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import arrow_down from '@/assets/svg/arrow-down.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import icon_form_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
+import assigned from '@/assets/svg/icon_assigned_outlined.svg'
+import AuthorizedWorkspaceDialog from './AuthorizedWorkspaceDialog.vue'
+import rename from '@/assets/svg/icon_rename_outlined.svg'
+import icon_member from '@/assets/svg/icon_member.svg'
+import SuccessFilled from '@/assets/svg/gou_icon.svg'
+import CircleCloseFilled from '@/assets/svg/icon_ban_filled.svg'
+import { useI18n } from 'vue-i18n'
+import delIcon from '@/assets/svg/icon_delete.svg'
+import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
+import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
+
+const { t } = useI18n()
+const multipleSelectionAll = ref<any[]>([])
+const tableList = ref([] as any[])
+const keyword = ref('')
+const keywordsMember = ref('')
+const oldKeywordsMember = ref('')
+const workspaceFormRef = ref()
+const authorizedWorkspaceDialog = ref()
+const tableListWithSearch = computed(() => {
+  if (!keyword.value) return tableList.value
+  return tableList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(keyword.value.toLowerCase())
+  )
+})
+const workspaceForm = reactive({
+  name: '',
+  id: '',
+})
+
+const userTypeList = [
+  {
+    name: t('workspace.administrator'),
+    value: 1,
+  },
+  {
+    name: t('workspace.ordinary_member'),
+    value: 0,
+  },
+]
+
+const handleUserTypeChange = (val: any, row: any) => {
+  workspaceUwsUpdate({
+    uid: row.id,
+    oid: currentTable.value.id,
+    weight: val,
+  }).then(() => {
+    ElMessage({
+      type: 'success',
+      message: t('common.save_success'),
+    })
+    search()
+  })
+}
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('workspace.workspace_name'),
+      trigger: 'blur',
+    },
+  ],
+}
+const fieldListWithSearch = computed(() => {
+  if (!keyword.value) return fieldList.value
+  return fieldList.value.filter((ele: any) =>
+    ele.name.toLowerCase().includes(keywordsMember.value.toLowerCase())
+  )
+})
+const currentTable = ref<any>({ id: 1, name: '' })
+const init = () => {
+  workspaceList().then((res) => {
+    tableList.value = res
+    if (currentTable.value.id) {
+      tableList.value.forEach((ele: any) => {
+        if (ele.id === currentTable.value.id) {
+          currentTable.value.name = ele.name
+        }
+      })
+    }
+  })
+}
+
+const duplicateName = async () => {
+  const res = await workspaceList()
+  const names = res.filter((ele: any) => ele.id !== workspaceForm.id).map((ele: any) => ele.name)
+  if (names.includes(workspaceForm.name)) {
+    ElMessage.error(t('embedded.duplicate_name'))
+    return
+  }
+
+  const req = workspaceForm.id ? workspaceUpdate : workspaceCreate
+  req(workspaceForm).then(() => {
+    ElMessage({
+      type: 'success',
+      message: t('common.save_success'),
+    })
+    init()
+    fieldDialog.value = false
+  })
+}
+
+onMounted(() => {
+  init()
+})
+const fieldDialog = ref<boolean>(false)
+const multipleTableRef = ref()
+const isIndeterminate = ref(true)
+const checkAll = ref(false)
+const fieldList = ref<any>([])
+const pageInfo = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+})
+
+const clickTable = (table: any) => {
+  currentTable.value = table
+  pageInfo.currentPage = 1
+  search()
+}
+const cancelDelete = () => {
+  handleToggleRowSelection(false)
+  multipleSelectionAll.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
+}
+const deleteBatchUser = () => {
+  ElMessageBox.confirm(
+    t('workspace.selected_2_members', { msg: multipleSelectionAll.value.length }),
+    {
+      confirmButtonType: 'danger',
+      confirmButtonText: t('workspace.remove'),
+      cancelButtonText: t('common.cancel'),
+      customClass: 'confirm-no_icon',
+      autofocus: false,
+    }
+  ).then(() => {
+    workspaceUwsDelete({
+      uid_list: multipleSelectionAll.value.map((ele) => ele.id),
+      oid: currentTable.value.id,
+    }).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      multipleSelectionAll.value = []
+      search()
+    })
+  })
+}
+const deleteHandler = (row: any) => {
+  ElMessageBox.confirm(t('workspace.member_feng_yibudao', { msg: row.name }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('workspace.remove'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    workspaceUwsDelete({
+      uid_list: [row.id],
+      oid: currentTable.value.id,
+    }).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      search()
+    })
+  })
+}
+const handleSelectionChange = (val: any[]) => {
+  const ids = fieldList.value.map((ele: any) => ele.id)
+  multipleSelectionAll.value = [
+    ...multipleSelectionAll.value.filter((ele) => !ids.includes(ele.id)),
+    ...val,
+  ]
+  isIndeterminate.value = !(val.length === 0 || val.length === fieldList.value.length)
+  checkAll.value = val.length === fieldList.value.length
+}
+const handleCheckAllChange = (val: any) => {
+  isIndeterminate.value = false
+  handleSelectionChange(val ? fieldList.value : [])
+  if (val) {
+    handleToggleRowSelection()
+  } else {
+    multipleTableRef.value.clearSelection()
+  }
+}
+
+const handleToggleRowSelection = (check: boolean = true) => {
+  let i = 0
+  const ids = multipleSelectionAll.value.map((ele: any) => ele.id)
+  for (const key in fieldList.value) {
+    if (ids.includes((fieldList.value[key] as any).id)) {
+      i += 1
+      multipleTableRef.value.toggleRowSelection(fieldList.value[key], check)
+    }
+  }
+  checkAll.value = i === fieldList.value.length
+  isIndeterminate.value = !(i === 0 || i === fieldList.value.length)
+}
+
+const handleAddMember = () => {
+  authorizedWorkspaceDialog.value.open(currentTable.value.id)
+}
+
+const refresh = () => {
+  search()
+}
+const search = () => {
+  workspaceUserList(
+    { oid: currentTable.value.id, keyword: keywordsMember.value },
+    pageInfo.currentPage,
+    pageInfo.pageSize
+  ).then((res) => {
+    fieldList.value = res.items.sort((a: any, b: any) => b.weight - a.weight)
+    pageInfo.total = res.total
+    oldKeywordsMember.value = keywordsMember.value
+  })
+}
+
+const closeField = () => {
+  fieldDialog.value = false
+}
+
+const saveField = () => {
+  workspaceFormRef.value.validate((res: any) => {
+    if (res) {
+      duplicateName()
+    }
+  })
+}
+
+const delWorkspace = (row: any) => {
+  ElMessageBox.confirm(t('workspace.workspace_de_workspace', { msg: row.name }), {
+    confirmButtonType: 'danger',
+    tip: t('workspace.operate_with_caution'),
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    workspaceDelete(row.id).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      init()
+    })
+  })
+}
+
+const addWorkspace = (row: any) => {
+  if (row) {
+    workspaceForm.name = row.name
+    workspaceForm.id = row.id
+  } else {
+    workspaceForm.name = ''
+    workspaceForm.id = ''
+  }
+  fieldDialog.value = true
+}
+
+const handleSizeChange = (val: number) => {
+  pageInfo.pageSize = val
+  pageInfo.currentPage = 1
+  search()
+}
+const handleCurrentChange = (val: number) => {
+  pageInfo.currentPage = val
+  search()
+}
+</script>
+
+<template>
+  <div class="workspace no-padding">
+    <div class="side-list">
+      <div class="select-table_top">
+        {{ $t('user.workspace') }}
+
+        <el-tooltip
+          :offset="12"
+          effect="dark"
+          :content="$t('workspace.add_workspace')"
+          placement="top"
+        >
+          <el-icon size="18" @click="addWorkspace">
+            <icon_add_outlined></icon_add_outlined>
+          </el-icon>
+        </el-tooltip>
+      </div>
+      <el-input
+        v-model="keyword"
+        clearable
+        style="width: 232px"
+        :placeholder="$t('datasource.search')"
+      >
+        <template #prefix>
+          <el-icon>
+            <icon_searchOutline_outlined class="svg-icon" />
+          </el-icon>
+        </template>
+      </el-input>
+
+      <div class="list-content">
+        <el-scrollbar>
+          <div
+            v-for="ele in tableListWithSearch"
+            :key="ele.name"
+            class="model"
+            :class="currentTable.name === ele.name && 'isActive'"
+            :title="ele.name"
+            @click="clickTable(ele)"
+          >
+            <el-icon size="16">
+              <icon_form_outlined></icon_form_outlined>
+            </el-icon>
+            <span class="name">{{ ele.name }}</span>
+
+            <el-popover
+              trigger="click"
+              :teleported="false"
+              popper-class="popover-card"
+              placement="bottom"
+            >
+              <template #reference>
+                <el-icon
+                  class="more"
+                  size="16"
+                  style="margin-left: auto; color: #646a73"
+                  @click.stop
+                >
+                  <icon_more_outlined></icon_more_outlined>
+                </el-icon>
+              </template>
+              <div class="content">
+                <div class="item" @click.stop="addWorkspace(ele)">
+                  <el-icon size="16">
+                    <rename></rename>
+                  </el-icon>
+                  {{ $t('dashboard.rename') }}
+                </div>
+                <div v-if="ele.id !== 1" class="item" @click.stop="delWorkspace(ele)">
+                  <el-icon size="16">
+                    <delIcon></delIcon>
+                  </el-icon>
+                  {{ $t('dashboard.delete') }}
+                </div>
+              </div>
+            </el-popover>
+          </div>
+        </el-scrollbar>
+
+        <div v-if="!!keyword && !tableListWithSearch.length" class="no-result">
+          {{ $t('workspace.relevant_content_found') }}
+        </div>
+      </div>
+      <EmptyBackground
+        v-if="!!keyword && !tableListWithSearch.length"
+        :description="$t('datasource.relevant_content_found')"
+        img-type="tree"
+        style="width: 100%"
+      />
+    </div>
+
+    <div v-if="currentTable.name" class="info-table">
+      <div class="table-name">
+        <div class="name">
+          {{ currentTable.name }}
+          <span class="line"></span>
+          <el-icon style="margin: 0 4px 0 8px" size="16">
+            <icon_member></icon_member>
+          </el-icon>
+          {{ pageInfo.total }}
+        </div>
+        <div class="notes">
+          <el-button type="primary" @click="handleAddMember">
+            <template #icon>
+              <icon_add_outlined></icon_add_outlined>
+            </template>
+            {{ $t('workspace.add_member') }}
+          </el-button>
+          <el-input
+            v-model="keywordsMember"
+            clearable
+            style="width: 232px"
+            :placeholder="$t('workspace.name_username_email')"
+            @blur="search"
+          >
+            <template #prefix>
+              <el-icon>
+                <icon_searchOutline_outlined class="svg-icon" />
+              </el-icon>
+            </template>
+          </el-input>
+        </div>
+      </div>
+      <div class="table-content" :class="multipleSelectionAll.length && 'show-pagination_height'">
+        <div class="preview-or-schema">
+          <el-table
+            ref="multipleTableRef"
+            :data="fieldListWithSearch"
+            style="width: 100%"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" />
+            <el-table-column prop="name" :label="$t('user.name')" width="160" />
+            <el-table-column prop="account" :label="$t('user.account')" width="160" />
+            <el-table-column prop="status" :label="$t('user.user_status')">
+              <template #default="scope">
+                <div
+                  class="user-status-container"
+                  :class="[scope.row.status ? 'active' : 'disabled']"
+                >
+                  <el-icon size="16">
+                    <SuccessFilled v-if="scope.row.status" />
+                    <CircleCloseFilled v-else />
+                  </el-icon>
+                  <span>{{ $t(`user.${scope.row.status ? 'enabled' : 'disabled'}`) }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="email" :label="$t('user.email')" width="204" />
+            <el-table-column
+              class-name="user-source"
+              prop="weight"
+              :label="$t('workspace.member_type')"
+              width="120"
+            >
+              <template #default="scope">
+                <el-popover popper-class="system-workspace_user" placement="bottom">
+                  <template #reference>
+                    <div style="display: flex; align-items: center; justify-content: space-between">
+                      <span>{{
+                        scope.row.weight === 1
+                          ? t('workspace.administrator')
+                          : t('workspace.ordinary_member')
+                      }}</span>
+                      <el-icon style="display: none" size="16">
+                        <arrow_down></arrow_down>
+                      </el-icon>
+                    </div>
+                  </template>
+                  <div class="popover">
+                    <div class="popover-content">
+                      <div
+                        v-for="ele in userTypeList"
+                        :key="ele.name"
+                        class="popover-item"
+                        :class="ele.name === scope.row.user_source && 'isActive'"
+                        @click="handleUserTypeChange(ele.value, scope.row)"
+                      >
+                        <div class="model-name">{{ ele.name }}</div>
+                        <el-icon size="16" class="done">
+                          <icon_done_outlined></icon_done_outlined>
+                        </el-icon>
+                      </div>
+                    </div>
+                  </div>
+                </el-popover>
+              </template>
+            </el-table-column>
+            <el-table-column fixed="right" width="80" :label="t('ds.actions')">
+              <template #default="scope">
+                <div class="field-comment">
+                  <el-tooltip
+                    :offset="14"
+                    effect="dark"
+                    :content="$t('workspace.remove')"
+                    placement="top"
+                  >
+                    <el-icon class="action-btn" size="16" @click="deleteHandler(scope.row)">
+                      <assigned></assigned>
+                    </el-icon>
+                  </el-tooltip>
+                </div>
+              </template>
+            </el-table-column>
+            <template #empty>
+              <EmptyBackground
+                v-if="!oldKeywordsMember && !fieldListWithSearch.length"
+                :description="$t('workspace.no_user')"
+                img-type="noneWhite"
+              />
+
+              <EmptyBackground
+                v-if="!!oldKeywordsMember && !fieldListWithSearch.length"
+                :description="$t('datasource.relevant_content_found')"
+                img-type="tree"
+              />
+            </template>
+          </el-table>
+        </div>
+      </div>
+      <div v-if="fieldListWithSearch.length" class="pagination-container">
+        <el-pagination
+          v-model:current-page="pageInfo.currentPage"
+          v-model:page-size="pageInfo.pageSize"
+          :page-sizes="[10, 20, 30]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pageInfo.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+      <div v-if="multipleSelectionAll.length" class="bottom-select">
+        <el-checkbox
+          v-model="checkAll"
+          :indeterminate="isIndeterminate"
+          @change="handleCheckAllChange"
+        >
+          {{ $t('datasource.select_all') }}
+        </el-checkbox>
+
+        <button class="danger-button" @click="deleteBatchUser">{{ $t('workspace.remove') }}</button>
+
+        <span class="selected">{{
+          $t('user.selected_2_items', { msg: multipleSelectionAll.length })
+        }}</span>
+
+        <el-button text @click="cancelDelete">
+          {{ $t('common.cancel') }}
+        </el-button>
+      </div>
+    </div>
+  </div>
+  <AuthorizedWorkspaceDialog
+    ref="authorizedWorkspaceDialog"
+    @refresh="refresh"
+  ></AuthorizedWorkspaceDialog>
+  <el-dialog
+    v-model="fieldDialog"
+    :title="$t(workspaceForm.id ? 'workspace.rename_a_workspace' : 'workspace.add_workspace')"
+    width="420"
+    destroy-on-close
+    :close-on-click-modal="false"
+    @before-closed="closeField"
+  >
+    <el-form
+      ref="workspaceFormRef"
+      :model="workspaceForm"
+      label-width="180px"
+      label-position="top"
+      :rules="rules"
+      class="form-content_error"
+      @submit.prevent
+    >
+      <el-form-item prop="name" :label="t('workspace.workspace_name')">
+        <el-input
+          v-model="workspaceForm.name"
+          clearable
+          maxlength="50"
+          :placeholder="
+            $t('datasource.please_enter') + $t('common.empty') + $t('workspace.workspace_name')
+          "
+        />
+      </el-form-item>
+    </el-form>
+
+    <div style="display: flex; justify-content: flex-end; margin-top: 20px">
+      <el-button secondary @click="closeField">{{ t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="saveField">{{
+        t(workspaceForm.id ? 'common.save' : 'model.add')
+      }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped>
+.workspace {
+  height: 100%;
+  position: relative;
+  .side-list {
+    width: 280px;
+    padding: 8px 16px;
+    height: 100%;
+    border-right: 1px solid #1f232926;
+    position: relative;
+    .select-table_top {
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px;
+      font-weight: 500;
+
+      .ed-icon {
+        cursor: pointer;
+        color: var(--ed-color-primary);
+        position: relative;
+
+        &:hover {
+          &::after {
+            display: block;
+          }
+        }
+
+        &::after {
+          content: '';
+          display: none;
+          position: absolute;
+          width: 26px;
+          height: 26px;
+          background: var(--ed-color-primary-1a, #1cba901a);
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          border-radius: 6px;
+        }
+      }
+    }
+
+    .ed-input {
+      margin: 8px;
+    }
+
+    .list-content {
+      height: calc(100% - 100px);
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding-left: 16px;
+
+      .more {
+        display: none;
+        &.ed-icon {
+          position: relative;
+          cursor: pointer;
+          margin-top: 4px;
+
+          &::after {
+            content: '';
+            background-color: #1f23291a;
+            position: absolute;
+            border-radius: 6px;
+            width: 24px;
+            height: 24px;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            display: none;
+          }
+
+          &:hover {
+            &::after {
+              display: block;
+            }
+          }
+        }
+      }
+
+      .no-result {
+        margin-top: 72px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        text-align: center;
+        color: #646a73;
+      }
+      .model {
+        width: calc(100% - 16px);
+        height: 40px;
+        display: flex;
+        align-items: center;
+        padding-left: 8px;
+        border-radius: 4px;
+        cursor: pointer;
+        padding-right: 8px;
+        margin-bottom: 2px;
+
+        .name {
+          margin-left: 8px;
+          font-weight: 500;
+          font-size: 14px;
+          line-height: 22px;
+          max-width: 80%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        &:hover {
+          background: #1f23291a;
+          .more {
+            display: block;
+          }
+        }
+
+        &.isActive {
+          background: var(--ed-color-primary-1a, #1cba901a);
+          color: var(--ed-color-primary);
+        }
+      }
+    }
+  }
+  .info-table {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: calc(100% - 280px);
+    height: 100%;
+    .table-name {
+      padding: 16px 24px 0 24px;
+
+      .name {
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        display: flex;
+        align-items: center;
+        .line {
+          height: 16px;
+          width: 1px;
+          background: #bbbfc4;
+          margin-left: 8px;
+        }
+      }
+
+      .notes {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 16px 0;
+      }
+    }
+
+    .pagination-container {
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      margin-top: 16px;
+    }
+
+    .table-content {
+      padding: 0 24px 16px 24px;
+      height: calc(100% - 168px);
+      overflow-y: auto;
+
+      &.show-pagination_height {
+        height: calc(100% - 220px);
+      }
+
+      .preview-or-schema {
+        :deep(.user-source) {
+          cursor: pointer;
+          &:hover {
+            .ed-icon {
+              display: block !important;
+              transform: rotate(180deg);
+            }
+          }
+        }
+        .user-status-container {
+          display: flex;
+          align-items: center;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+
+          .ed-icon {
+            margin-right: 8px;
+          }
+        }
+        .field-comment {
+          height: 24px;
+          .ed-icon {
+            position: relative;
+            cursor: pointer;
+            margin-top: 4px;
+
+            &::after {
+              content: '';
+              background-color: #1f23291a;
+              position: absolute;
+              border-radius: 6px;
+              width: 24px;
+              height: 24px;
+              transform: translate(-50%, -50%);
+              top: 50%;
+              left: 50%;
+              display: none;
+            }
+
+            &:hover {
+              &::after {
+                display: block;
+              }
+            }
+          }
+        }
+
+        .preview-num {
+          margin: 12px 0;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 22px;
+          color: #646a73;
+        }
+      }
+    }
+
+    .bottom-select {
+      position: absolute;
+      height: 64px;
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      border-top: 1px solid #1f232926;
+      display: flex;
+      align-items: center;
+      background-color: #fff;
+      padding-left: 24px;
+      z-index: 10;
+
+      .danger-button {
+        border: 1px solid var(--ed-color-danger);
+        color: var(--ed-color-danger);
+        border-radius: var(--ed-border-radius-base);
+        min-width: 80px;
+        height: 32px;
+        line-height: 32px;
+        text-align: center;
+        cursor: pointer;
+        margin: 0 16px;
+        background-color: transparent;
+      }
+
+      .selected {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #646a73;
+        margin-right: 12px;
+      }
+    }
+  }
+}
+</style>
+<style lang="less">
+.popover-card.popover-card.popover-card {
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border-radius: 4px;
+  border: 1px solid #dee0e3;
+  width: 120px !important;
+  min-width: 120px !important;
+  padding: 0;
+  .content {
+    position: relative;
+    &::after {
+      position: absolute;
+      content: '';
+      top: 40px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: #dee0e3;
+    }
+    .item {
+      position: relative;
+      padding-left: 12px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .ed-icon {
+        margin-right: 8px;
+        color: #646a73;
+      }
+      &:hover {
+        &::after {
+          display: block;
+        }
+      }
+
+      &::after {
+        content: '';
+        width: 112px;
+        height: 32px;
+        border-radius: 4px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #1f23291a;
+        display: none;
+      }
+    }
+  }
+}
+
+.system-workspace_user.system-workspace_user {
+  padding: 0;
+  width: 120px !important;
+  min-width: 120px !important;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border: 1px solid #dee0e3;
+
+  .popover {
+    .popover-content {
+      padding: 4px;
+      position: relative;
+      &::after {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 40px;
+        width: 100%;
+        height: 1px;
+        background: #1f232926;
+      }
+    }
+    .popover-item {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+      padding-right: 8px;
+      position: relative;
+      border-radius: 4px;
+      cursor: pointer;
+      &:hover {
+        background: #1f23291a;
+      }
+
+      &:nth-child(2) {
+        margin: 9px 0 0 0;
+      }
+
+      .model-name {
+        margin-left: 8px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .done {
+        margin-left: auto;
+        display: none;
+      }
+
+      &.isActive {
+        color: var(--ed-color-primary);
+
+        .done {
+          display: block;
+        }
+      }
+    }
+  }
+}
+</style>