feat(Model Configuration): Supported Authorized Space

frontend/src/api/workspace.ts

@@ -15,3 +15,8 @@ export const workspaceDelete = (id: any) => request.delete(`/system/workspace/${
 export const workspaceList = () => request.get('/system/workspace')
 export const workspaceDetail = (id: any) => request.get(`/system/workspace/${id}`)
 export const uwsOption = (params: any) => request.get('system/workspace/uws/option', { params })
+
+export const workspaceModelMapping = (aiModelId: any) =>
+  request.get(`/system/aimodel/${aiModelId}/ws_mapping`)
+export const workspaceModelMappingUpdate = (aiModelId: any, data: any) =>
+  request.put(`/system/aimodel/${aiModelId}/ws_mapping`, data)

frontend/src/i18n/en.json

@@ -32,6 +32,16 @@
     "enter_variable_name": "Please Enter Variable Name",
     "enter_variable_value": "Please Enter Variable Value"
   },
+  "authorized_space": {
+    "authorized_space": "Authorized Space",
+    "authorized_space_list": "Authorized Space List",
+    "select_space": "Select Space",
+    "modify_authorized_space": "Modify Authorized Space",
+    "workspaces_authorized": "Authorized {num} Workspaces",
+    "number_of_members": "Number of Members",
+    "delete_selected_workspaces": "Are you sure you want to delete the selected {msg} workspaces?",
+    "delete_workspace": "Are you sure you want to delete the workspace: {msg}?"
+  },
   "sync": {
     "records": "Displaying {num} records out of {total}",
     "confirm_upload": "Confirm Upload",

frontend/src/i18n/ko-KR.json

@@ -32,6 +32,16 @@
     "enter_variable_name": "변수 이름을 입력하세요",
     "enter_variable_value": "변수 값을 입력하세요"
   },
+  "authorized_space": {
+    "authorized_space": "권한 있는 공간",
+    "authorized_space_list": "권한 있는 공간 목록",
+    "select_space": "공간 선택",
+    "modify_authorized_space": "권한 있는 공간 수정",
+    "workspaces_authorized": "{num}개의 권한 있는 작업 공간",
+    "number_of_members": "회원 수",
+    "delete_selected_workspaces": "선택한 {msg}개의 작업 공간을 삭제하시겠습니까?",
+    "delete_workspace": "작업 공간을 삭제하시겠습니까: {msg}?"
+  },
   "sync": {
     "records": "{total}개 중 {num}개의 레코드 표시",
     "confirm_upload": "업로드 확인",

frontend/src/i18n/zh-CN.json

@@ -32,6 +32,16 @@
     "enter_variable_name": "请输入变量名称",
     "enter_variable_value": "请输入变量值"
   },
+  "authorized_space": {
+    "authorized_space": "授权空间",
+    "authorized_space_list": "授权空间列表",
+    "select_space": "选择空间",
+    "modify_authorized_space": "修改授权空间",
+    "workspaces_authorized": "已授权 {num} 个工作空间",
+    "number_of_members": "成员数量",
+    "delete_selected_workspaces": "是否删除选中的 {msg} 个工作空间？",
+    "delete_workspace": "是否删除工作空间：{msg}？"
+  },
   "sync": {
     "records": "显示 {num} 条数据，共 {total} 条",
     "confirm_upload": "确定上传",

frontend/src/i18n/zh-TW.json

@@ -32,6 +32,16 @@
     "enter_variable_name": "請輸入變數名稱",
     "enter_variable_value": "請輸入變數值"
   },
+  "authorized_space": {
+    "authorized_space": "授權空間",
+    "authorized_space_list": "授權空間列表",
+    "select_space": "選擇空間",
+    "modify_authorized_space": "修改授權空間",
+    "workspaces_authorized": "已授權 {num} 個工作空間",
+    "number_of_members": "成員數量",
+    "delete_selected_workspaces": "是否刪除選中的 {msg} 個工作空間？",
+    "delete_workspace": "是否刪除工作空間：{msg}？"
+  },
   "sync": {
     "records": "顯示 {num} 筆資料，共 {total} 筆",
     "confirm_upload": "確定上傳",

frontend/src/views/system/model/Card.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import delIcon from '@/assets/svg/icon_delete.svg'
+import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
+import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
+import icon_describe_outlined from '@/assets/svg/icon_describe_outlined.svg'
 import edit from '@/assets/svg/icon_edit_outlined.svg'
 import { get_supplier } from '@/entity/supplier'
-import { computed, ref } from 'vue'
+import { computed, ref, unref } from 'vue'
 const props = withDefaults(
   defineProps<{
     name: string
@@ -12,6 +15,7 @@ const props = withDefaults(
     id?: string
     isDefault?: boolean
     supplier?: number
+    num?: number
   }>(),
   {
     name: '-',
@@ -20,6 +24,7 @@ const props = withDefaults(
     id: '-',
     isDefault: false,
     supplier: 0,
+    num: 0,
   }
 )
 const errorMsg = ref('')
@@ -38,7 +43,7 @@ const showErrorMask = (msg?: string) => {
     errorMsg.value = ''
   }, 3000)
 }
-const emits = defineEmits(['edit', 'del', 'default'])
+const emits = defineEmits(['edit', 'del', 'default', 'authorizedSpace', 'editworkspaceList'])
 
 const handleDefault = () => {
   emits('default')
@@ -52,6 +57,18 @@ const handleEdit = () => {
   emits('edit')
 }
 
+const handleEditWorkspaceList = () => {
+  emits('editworkspaceList')
+}
+const handleAuthorizedSpace = () => {
+  emits('authorizedSpace')
+}
+const buttonRef = ref()
+const popoverRef = ref()
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
+
 defineExpose({ showErrorMask })
 </script>
 
@@ -77,6 +94,27 @@ defineExpose({ showErrorMask })
       <span class="type">{{ $t('model.basic_model') }}</span>
       <span class="value"> {{ baseModel }}</span>
     </div>
+    <div v-if="false" class="type-value">
+      <span class="type">{{ $t('authorized_space.authorized_space') }}</span>
+      <span class="value" style="display: flex; align-items: center">
+        {{ $t('permission.2', { msg: num }) }}
+        <el-tooltip
+          effect="dark"
+          :content="$t('authorized_space.authorized_space_list')"
+          placement="top"
+          offset="12"
+        >
+          <el-icon
+            class="hover-icon_with_bg"
+            style="cursor: pointer; margin-left: 8px"
+            size="16"
+            @click="handleEditWorkspaceList"
+          >
+            <icon_describe_outlined></icon_describe_outlined>
+          </el-icon>
+        </el-tooltip>
+      </span>
+    </div>
     <div class="methods">
       <el-tooltip
         v-if="isDefault"
@@ -104,12 +142,41 @@ defineExpose({ showErrorMask })
         </el-icon>
         {{ $t('dashboard.edit') }}
       </el-button>
-      <el-button secondary @click="handleDel">
-        <el-icon style="margin-right: 4px" size="16">
-          <delIcon></delIcon>
-        </el-icon>
-        {{ $t('dashboard.delete') }}
-      </el-button>
+
+      <el-icon
+        ref="buttonRef"
+        v-click-outside="onClickOutside"
+        class="more"
+        size="16"
+        style="color: #646a73"
+        @click.stop
+      >
+        <icon_more_outlined></icon_more_outlined>
+      </el-icon>
+      <el-popover
+        ref="popoverRef"
+        :virtual-ref="buttonRef"
+        virtual-triggering
+        trigger="click"
+        :teleported="false"
+        popper-class="popover-card_workspace"
+        placement="bottom-start"
+      >
+        <div class="content">
+          <div class="item" @click.stop="handleAuthorizedSpace">
+            <el-icon size="16">
+              <icon_moments_categories_outlined></icon_moments_categories_outlined>
+            </el-icon>
+            {{ $t('authorized_space.authorized_space') }}
+          </div>
+          <div class="item" @click.stop="handleDel">
+            <el-icon size="16">
+              <delIcon></delIcon>
+            </el-icon>
+            {{ $t('dashboard.delete') }}
+          </div>
+        </div>
+      </el-popover>
     </div>
   </div>
 </template>
@@ -167,14 +234,45 @@ defineExpose({ showErrorMask })
   .methods {
     margin-top: 16px;
     align-items: center;
-    display: none;
+    display: flex;
 
     .divide {
       height: 14px;
       width: 1px;
       background-color: #1f232926;
       margin: 0 12px;
     }
+    .more {
+      position: relative;
+      cursor: pointer;
+      margin-left: 12px;
+      width: 32px;
+      height: 32px;
+
+      svg {
+        position: relative;
+        z-index: 10;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        border-radius: 6px;
+        width: 30px;
+        height: 30px;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        left: 50%;
+        background: #fff;
+        border: 1px solid #d9dcdf;
+      }
+
+      &:hover {
+        &::after {
+          background-color: #f5f6f7;
+        }
+      }
+    }
   }
 
   &:hover {
@@ -208,3 +306,61 @@ defineExpose({ showErrorMask })
   }
 }
 </style>
+
+<style lang="less">
+.popover-card_workspace.popover-card_workspace.popover-card_workspace {
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border-radius: 6px;
+  border: 1px solid #dee0e3;
+  width: fit-content !important;
+  min-width: 120px !important;
+  padding: 0;
+
+  .content {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 39px !important;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: #dee0e3;
+    }
+
+    .item {
+      position: relative;
+      padding: 0 12px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      .ed-icon {
+        margin-right: 8px;
+        color: #646a73;
+      }
+
+      &:hover {
+        &::after {
+          display: block;
+        }
+      }
+
+      &::after {
+        content: '';
+        width: calc(100% - 8px);
+        height: 32px;
+        border-radius: 6px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #1f23291a;
+        display: none;
+      }
+    }
+  }
+}
+</style>

frontend/src/views/system/model/Model.vue

@@ -16,6 +16,7 @@ import { getModelTypeName } from '@/entity/CommonEntity.ts'
 import { useI18n } from 'vue-i18n'
 import { get_supplier } from '@/entity/supplier'
 import { highlightKeyword } from '@/utils/xss'
+import AuthorizedWorkspaceDialogForModel from '@/views/system/workspace/AuthorizedWorkspaceDialogForModel.vue'
 
 interface Model {
   name: string
@@ -249,6 +250,15 @@ const deleteHandler = (item: any) => {
   })
 }
 
+const AuthorizedWorkspaceDialogForModelRef = ref()
+
+const handleAuthorizedSpace = (item: any) => {
+  AuthorizedWorkspaceDialogForModelRef.value.open(item.id)
+}
+const handleEditWorkspaceList = (item: any) => {
+  AuthorizedWorkspaceDialogForModelRef.value.open(item.id)
+}
+
 const clickModel = (ele: any) => {
   activeStep.value = 1
   supplierChang(ele)
@@ -394,6 +404,8 @@ const submit = (item: any) => {
             @edit="handleEditModel(ele)"
             @del="deleteHandler"
             @default="handleDefault(ele)"
+            @authorized-space="handleAuthorizedSpace(ele)"
+            @edit-workspace-list="handleEditWorkspaceList(ele)"
           ></card>
         </el-col>
       </el-row>
@@ -468,6 +480,7 @@ const submit = (item: any) => {
       </template>
     </el-drawer>
   </div>
+  <AuthorizedWorkspaceDialogForModel ref="AuthorizedWorkspaceDialogForModelRef" @refresh="search" />
 </template>
 
 <style lang="less" scoped>