feat: workspace dropdown

ui/src/api/workspace.ts

@@ -6,6 +6,13 @@ import type { pageRequest, PageList } from '@/api/type/common'
 
 const prefix = '/system/workspace'
 
+/**
+ * 获取首页的工作空间下拉列表
+ */
+const getWorkspaceListByUser: (loading?: Ref<boolean>) => Promise<Result<WorkspaceItem[]>> = (loading) => {
+  return get('/workspace/by_user', undefined, loading)
+}
+
 /**
  * 获取添加成员时的工作空间下拉列表
  */
@@ -30,6 +37,16 @@ const CreateOrUpdateWorkspace: (
   return post(`${prefix}`, data, undefined, loading)
 }
 
+/**
+ * 删除工作空间前的校验
+ */
+const deleteWorkspaceCheck: (workspace_id: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  workspace_id,
+  loading,
+) => {
+  return get(`${prefix}/${workspace_id}/check`, undefined, loading)
+}
+
 /**
  * 删除工作空间
  */
@@ -94,4 +111,6 @@ export default {
   CreateWorkspaceMember,
   deleteWorkspaceMember,
   getWorkspaceRoleList,
+  getWorkspaceListByUser,
+  deleteWorkspaceCheck
 }

ui/src/layout/layout-header/UserHeader.vue

@@ -4,6 +4,8 @@
     <div class="logo mt-4">
       <LogoFull />
     </div>
+    <el-divider direction="vertical" class="ml-24 mr-24" />
+    <Workspace />
     <div class="flex-between w-full">
       <div></div>
       <TopMenu></TopMenu>
@@ -16,6 +18,7 @@
 import TopMenu from './top-menu/index.vue'
 import Avatar from './avatar/index.vue'
 import TopAbout from './top-about/index.vue'
+import Workspace from './workspace/index.vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()

ui/src/layout/layout-header/workspace/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-dropdown placement="bottom-start">
+    <el-button text>
+      <AppIcon iconName="app-wordspace" style="font-size: 18px"></AppIcon>
+      <span class="dropdown-title ellipsis">
+        {{ currentWorkspace?.name }}
+      </span>
+      <el-icon class="el-icon--right">
+        <CaretBottom />
+      </el-icon>
+    </el-button>
+    <template #dropdown>
+      <el-dropdown-menu v-loading="loading">
+        <el-dropdown-item v-for="item in workspaceList" :key="item.id"
+          :class="item.id === currentWorkspace?.id ? 'active' : ''" @click="changeWorkspace(item)">
+          <AppIcon class="mr-8" iconName="app-wordspace" style="font-size: 16px"></AppIcon>
+          <span class="dropdown-item ellipsis">
+            {{ item.name }}
+          </span>
+          <el-icon v-show="item.id === currentWorkspace?.id" class="ml-8" style="font-size: 16px;margin-right: 0;">
+            <Check />
+          </el-icon>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue'
+import WorkspaceApi from '@/api/workspace'
+import type { WorkspaceItem } from '@/api/type/workspace'
+
+const loading = ref(false)
+const workspaceList = ref<WorkspaceItem[]>([])
+const currentWorkspace = ref()
+
+async function getWorkspaceList() {
+  try {
+    const res = await WorkspaceApi.getWorkspaceListByUser(loading);
+    workspaceList.value = res.data
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+onBeforeMount(async () => {
+  await getWorkspaceList()
+  const id = localStorage.getItem('workspace_id') ?? 'default'
+  currentWorkspace.value = workspaceList.value.find(item => item.id === id)
+})
+
+function changeWorkspace(item: WorkspaceItem) {
+  if (item.id === currentWorkspace.value.id) return
+  currentWorkspace.value = item
+  localStorage.setItem('workspace_id', item.id as string)
+  window.location.reload()
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-button.is-text) {
+  color: var(--el-text-color-primary);
+  max-height: 32px;
+}
+
+.dropdown-title {
+  max-width: 155px;
+  font-size: 14px;
+}
+
+.dropdown-item {
+  max-width: 230px;
+}
+
+:deep(.el-dropdown-menu__item.active) {
+  color: var(--el-color-primary);
+}
+</style>

ui/src/locales/lang/en-US/common.ts

@@ -18,6 +18,7 @@ export default {
   modifySuccess: 'Successful',
   cancel: 'Cancel',
   confirm: 'OK',
+  close: 'Close',
   tip: 'Tips',
   add: 'Add',
   refresh: 'Refresh',

ui/src/locales/lang/en-US/views/workspace.ts

@@ -1,11 +1,15 @@
 export default {
-  // TODO
-  title: '工作空间',
-  list: '工作空间列表',
-  name: '工作空间名称',
+  title: 'Workspace',
+  list: 'Workspace list',
+  name: 'Workspace name',
+  delete: {
+    confirmTitle: 'Confirm to delete workspace:',
+    confirmContent: 'After deletion, all members in this space will be removed. Please proceed with caution.',
+    confirmContentNotDelete: 'This workspace contains knowledge base resources and application resources, and cannot be deleted.',
+  },
   member: {
     delete: {
-      confirmTitle: '是否移除成员：',
+      confirmTitle: 'Confirm to remove member:',
     }
   }
-}
+};

ui/src/locales/lang/zh-CN/common.ts

@@ -20,6 +20,7 @@ export default {
   addSuccess: '添加成功',
   cancel: '取消',
   confirm: '确定',
+  close: '关闭',
   tip: '提示',
   refresh: '刷新',
   search: '搜索',

ui/src/locales/lang/zh-CN/views/workspace.ts

@@ -2,6 +2,11 @@ export default {
   title: '工作空间',
   list: '工作空间列表',
   name: '工作空间名称',
+  delete: {
+    confirmTitle: '是否删除工作空间：',
+    confirmContent: '删除后，该空间下的成员都会被移除，请谨慎操作。',
+    confirmContentNotDelete: '该工作空间下存在 知识库资源、应用资源，无法删除。',
+  },
   member: {
     delete: {
       confirmTitle: '是否移除成员：',

ui/src/locales/lang/zh-Hant/common.ts

@@ -18,6 +18,7 @@ export default {
   modifySuccess: '修改成功',
   cancel: '取消',
   confirm: '確認',
+  close: '關閉',
   tip: '提示',
   add: '新增',
   refresh: '重新整理',

ui/src/locales/lang/zh-Hant/views/workspace.ts

@@ -1,11 +1,15 @@
 export default {
-  // TODO
-  title: '工作空间',
-  list: '工作空间列表',
-  name: '工作空间名称',
+  title: '工作空間',
+  list: '工作空間列表',
+  name: '工作空間名稱',
+  delete: {
+    confirmTitle: '是否刪除工作空間：',
+    confirmContent: '刪除後，該空間下的成員都會被移除，請謹慎操作。',
+    confirmContentNotDelete: '該工作空間下存在知識庫資源、應用資源，無法刪除。',
+  },
   member: {
     delete: {
-      confirmTitle: '是否移除成员：',
+      confirmTitle: '是否移除成員：',
     }
   }
-}
+};

ui/src/views/role/component/Member.vue

@@ -6,26 +6,24 @@
       </el-button>
       <div class="flex complex-search">
         <el-select class="complex-search__left" v-model="searchType" style="width: 120px">
-          <el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
+          <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
         </el-select>
         <el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
-                  :placeholder="$t('common.inputPlaceholder')" style="width: 220px" clearable/>
+          :placeholder="$t('common.inputPlaceholder')" style="width: 220px" clearable />
       </div>
     </div>
-    <app-table class="mt-16" :data="tableData" :pagination-config="paginationConfig"
-               @sizeChange="handleSizeChange"
-               @changePage="getList" v-loading="loading">
-      <el-table-column prop="nick_name" :label="$t('views.userManage.form.nick_name.label')"/>
-      <el-table-column prop="username" :label="$t('views.userManage.form.username.label')"/>
-      <el-table-column prop="workspace_name" :label="$t('views.role.member.workspace')"
-                       v-if="currentRole?.type !==RoleTypeEnum.ADMIN"/>
+    <app-table class="mt-16" :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
+      @changePage="getList" v-loading="loading">
+      <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
+      <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
+      <el-table-column v-if="props.currentRole?.type !== RoleTypeEnum.ADMIN" prop="workspace_name"
+        :label="$t('views.role.member.workspace')" />
       <el-table-column :label="$t('common.operation')" width="100" fixed="right">
         <template #default="{ row }">
-          <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`"
-                      placement="top">
+          <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
             <el-button type="primary" text @click.stop="handleDelete(row)">
               <el-icon>
-                <Delete/>
+                <Delete />
               </el-icon>
             </el-button>
           </el-tooltip>
@@ -33,17 +31,17 @@
       </el-table-column>
     </app-table>
   </div>
-  <AddMemberDrawer ref="addMemberDrawerRef" :currentRole="props.currentRole" @refresh="getList"/>
+  <AddMemberDrawer ref="addMemberDrawerRef" :currentRole="props.currentRole" @refresh="getList" />
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref, reactive, watch} from 'vue'
+import { onMounted, ref, reactive, watch } from 'vue'
 import RoleApi from '@/api/system/role'
-import type {RoleItem, RoleMemberItem} from '@/api/type/role'
-import {MsgSuccess, MsgConfirm} from '@/utils/message'
-import {t} from '@/locales'
+import type { RoleItem, RoleMemberItem } from '@/api/type/role'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { t } from '@/locales'
 import AddMemberDrawer from './AddMemberDrawer.vue'
-import {RoleTypeEnum} from "@/enums/system.ts";
+import { RoleTypeEnum } from '@/enums/system'
 
 const props = defineProps<{
   currentRole?: RoleItem

ui/src/views/workspace/component/Member.vue

@@ -13,8 +13,8 @@
   </div>
   <app-table :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
     @changePage="getList" v-loading="loading">
-    <el-table-column prop="nick_name" :label="$t('views.userManage.form.nick_name.label')" />
-    <el-table-column prop="username" :label="$t('views.userManage.form.username.label')" />
+    <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
+    <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
     <el-table-column prop="role_name" :label="$t('views.role.member.role')" />
     <el-table-column :label="$t('common.operation')" width="100" fixed="right">
       <template #default="{ row }">

ui/src/views/workspace/index.vue

@@ -6,29 +6,25 @@
         <div class="workspace-left border-r p-16">
           <div class="workspace-left_title">
             <h4 class="medium">{{ $t('views.workspace.list') }}</h4>
-            <el-tooltip effect="dark"
-                        :content="`${$t('common.create')}${$t('views.workspace.title')}`"
-                        placement="top">
+            <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.workspace.title')}`" placement="top">
               <el-button type="primary" text @click="createOrUpdateWorkspace()">
                 <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
             </el-tooltip>
           </div>
           <div class="p-8">
-            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
-                      clearable/>
+            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
           </div>
           <div class="list-height-left">
             <el-scrollbar v-loading="loading">
-              <common-list :data="filterList" @click="clickWorkspace"
-                           :default-active="currentWorkspace?.id">
+              <common-list :data="filterList" @click="clickWorkspace" :default-active="currentWorkspace?.id">
                 <template #default="{ row }">
                   <div class="flex-between">
                     <span>{{ row.name }}</span>
                     <el-dropdown :teleported="false">
                       <el-button text>
                         <el-icon class="color-secondary">
-                          <MoreFilled/>
+                          <MoreFilled />
                         </el-icon>
                       </el-button>
                       <template #dropdown>
@@ -62,30 +58,29 @@
         <div class="workspace-right" v-loading="loading">
           <div class="flex align-center" style="margin-bottom: 20px;">
             <h4 class="medium">{{ currentWorkspace?.name }}</h4>
-            <el-divider direction="vertical" class="mr-8 ml-8"/>
-            <AppIcon iconName="app-wordspace" style="font-size: 16px"
-                     class="color-input-placeholder"></AppIcon>
+            <el-divider direction="vertical" class="mr-8 ml-8" />
+            <AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
             <span class="color-input-placeholder ml-4">
               {{ currentWorkspace?.user_count }}
             </span>
           </div>
-          <Member :currentWorkspace="currentWorkspace"/>
+          <Member :currentWorkspace="currentWorkspace" />
         </div>
       </div>
     </el-card>
 
-    <CreateOrUpdateWorkspaceDialog ref="createOrUpdateWorkspaceDialogRef" @refresh="refresh"/>
+    <CreateOrUpdateWorkspaceDialog ref="createOrUpdateWorkspaceDialogRef" @refresh="refresh" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import {onMounted, ref, watch} from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import WorkspaceApi from '@/api/workspace'
-import {t} from '@/locales'
+import { t } from '@/locales'
 import Member from './component/Member.vue'
 import CreateOrUpdateWorkspaceDialog from './component/CreateOrUpdateWorkspaceDialog.vue'
-import type {WorkspaceItem} from '@/api/type/workspace'
-import {MsgSuccess, MsgConfirm} from '@/utils/message'
+import type { WorkspaceItem } from '@/api/type/workspace'
+import { MsgSuccess, MsgConfirm } from '@/utils/message'
 
 const filterText = ref('')
 const loading = ref(false)
@@ -137,25 +132,43 @@ function createOrUpdateWorkspace(item?: WorkspaceItem) {
   createOrUpdateWorkspaceDialogRef.value?.open(item);
 }
 
-// TODO 该工作空间下存在 知识库资源、应用资源，无法删除
-function deleteWorkspace(item: WorkspaceItem) {
-  MsgConfirm(
-    `${t('views.workspace.delete.confirmTitle')}${item.name} ?`,
-    t('views.workspace.delete.confirmMessage'),
-    {
-      confirmButtonText: t('common.confirm'),
-      confirmButtonClass: 'danger',
-    },
-  )
-    .then(() => {
-      WorkspaceApi.deleteWorkspace(item.id as string, loading).then(async () => {
-        MsgSuccess(t('common.deleteSuccess'))
-        await getWorkspace()
-        currentWorkspace.value = item.id === currentWorkspace.value?.id ? list.value[0] : currentWorkspace.value
+async function check(id: string) {
+  try {
+    return await WorkspaceApi.deleteWorkspaceCheck(id);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+async function deleteWorkspace(item: WorkspaceItem) {
+  // 判断是否能删除
+  const canDelete = await check(item.id as string);
+  if (canDelete) {
+    MsgConfirm(
+      `${t('views.workspace.delete.confirmTitle')}${item.name} ?`,
+      t('views.workspace.delete.confirmContent'),
+      {
+        confirmButtonText: t('common.confirm'),
+        confirmButtonClass: 'danger',
+      },
+    )
+      .then(() => {
+        WorkspaceApi.deleteWorkspace(item.id as string, loading).then(async () => {
+          MsgSuccess(t('common.deleteSuccess'))
+          await getWorkspace()
+          currentWorkspace.value = item.id === currentWorkspace.value?.id ? list.value[0] : currentWorkspace.value
+        })
       })
-    })
-    .catch(() => {
-    })
+  } else {
+    MsgConfirm(
+      `${t('views.workspace.delete.confirmTitle')}${item.name} ?`,
+      t('views.workspace.delete.confirmContentNotDelete'),
+      {
+        showConfirmButton: false,
+        cancelButtonText: t('common.close'),
+      },
+    )
+  }
 }
 </script>