From 6bfee8d072c0f2f55b8ccbe1c344d2ce4436234c Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Mon, 16 Jun 2025 17:07:00 +0800
Subject: [PATCH] fix(knowledge): knowledge shared

---
 ui/src/api/knowledge/document.ts              |   2 +-
 ui/src/api/shared/model.ts                    |  18 +
 ui/src/api/shared/tool.ts                     |  16 +
 ui/src/components/folder-tree/index.vue       |  16 +-
 ui/src/locales/lang/zh-CN/views/system.ts     |   2 +
 .../SharedWorkspace.vue                       | 142 -------
 .../model-shared-system/SharedWorkspace.vue   | 242 ++++++++++++
 .../component/ModelCard.vue                   |  48 ---
 ui/src/views/model/component/Provider.vue     |  44 +++
 ui/src/views/model/index.vue                  |   6 +-
 .../component/ParagraphCard.vue               |   3 +
 .../component/PermissionSetting.vue           |   2 +-
 ui/src/views/resource-authorization/index.vue |   2 +-
 .../tool-shared-system/SharedWorkspace.vue    | 368 ++++++++++++++++++
 ui/src/views/tool/index.vue                   |   6 +-
 15 files changed, 718 insertions(+), 199 deletions(-)
 create mode 100644 ui/src/views/model-shared-system/SharedWorkspace.vue
 create mode 100644 ui/src/views/tool-shared-system/SharedWorkspace.vue

diff --git a/ui/src/api/knowledge/document.ts b/ui/src/api/knowledge/document.ts
index 7aeec324a..9182e11f6 100644
--- a/ui/src/api/knowledge/document.ts
+++ b/ui/src/api/knowledge/document.ts
@@ -228,7 +228,7 @@ const postMulDocument: (
   data: any,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (knowledge_id, data, loading) => {
-  return post(`${prefix}/${knowledge_id}/document/bach_create`, data, {}, loading, 1000 * 60 * 5)
+  return put(`${prefix}/${knowledge_id}/document/batch_create`, data, {}, loading, 1000 * 60 * 5)
 }
 
 /**
diff --git a/ui/src/api/shared/model.ts b/ui/src/api/shared/model.ts
index ed7c30443..467294a0f 100644
--- a/ui/src/api/shared/model.ts
+++ b/ui/src/api/shared/model.ts
@@ -10,6 +10,7 @@ import type {
 import type { FormField } from '@/components/dynamics-form/type'
 
 const prefix = '/system/shared'
+const workspace_id = localStorage.getItem('workspace_id') || 'default'
 
 /**
  * 获得模型列表
@@ -118,6 +119,21 @@ const deleteModel: (model_id: string, loading?: Ref<boolean>) => Promise<Result<
 ) => {
   return del(`${prefix}/model/${model_id}`, undefined, {}, loading)
 }
+
+
+
+const getSharedWorkspaceModel: (loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  loading,
+) => {
+  return get(`${prefix}/workspace/${workspace_id}/model`, {}, loading)
+}
+
+const getSharedWorkspaceModelPage: (
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (param: any, loading) => {
+  return get(`${prefix}/workspace/${workspace_id}/model`, param, loading)
+}
 export default {
   getModel,
   createModel,
@@ -128,4 +144,6 @@ export default {
   pauseDownload,
   getModelParamsForm,
   updateModelParamsForm,
+  getSharedWorkspaceModel,
+  getSharedWorkspaceModelPage
 }
diff --git a/ui/src/api/shared/tool.ts b/ui/src/api/shared/tool.ts
index f82d59bc3..17dc07244 100644
--- a/ui/src/api/shared/tool.ts
+++ b/ui/src/api/shared/tool.ts
@@ -5,6 +5,7 @@ import type { pageRequest } from '@/api/type/common'
 import type { toolData } from '@/api/type/tool'
 
 const prefix = '/system/shared'
+const workspace_id = localStorage.getItem('workspace_id') || 'default'
 
 /**
  * 获得工具文件夹列表
@@ -120,6 +121,19 @@ const postPylint: (code: string, loading?: Ref<boolean>) => Promise<Result<any>>
   return post(`${prefix}/tool/pylint`, { code }, {}, loading)
 }
 
+const getSharedWorkspaceTool: (loading?: Ref<boolean>) => Promise<Result<Array<any>>> = (
+  loading,
+) => {
+  return get(`${prefix}/workspace/${workspace_id}/tool`, {}, loading)
+}
+
+const getSharedWorkspaceToolPage: (
+  param: any,
+  loading?: Ref<boolean>,
+) => Promise<Result<Array<any>>> = (param: any, loading) => {
+  return get(`${prefix}/workspace/${workspace_id}/tool`, param, loading)
+}
+
 export default {
   getToolByFolder,
   getToolList,
@@ -132,4 +146,6 @@ export default {
   exportTool,
   putToolIcon,
   delTool,
+  getSharedWorkspaceTool,
+  getSharedWorkspaceToolPage
 }
diff --git a/ui/src/components/folder-tree/index.vue b/ui/src/components/folder-tree/index.vue
index cd1dbba4c..75b03e219 100644
--- a/ui/src/components/folder-tree/index.vue
+++ b/ui/src/components/folder-tree/index.vue
@@ -9,12 +9,12 @@
     />
     <div
       @click="handleSharedNodeClick"
-      v-if="isShared"
+      v-if="!!shareTitle"
       class="shared-knowledge"
       :class="currentNodeKey === 'share' && 'active'"
     >
-      <AppIcon iconName="app-folder-share-active" style="font-size: 18px"></AppIcon>
-      <span class="ml-8 lighter">{{ $t('views.system.share_knowledge') }}</span>
+      <AppIcon :iconName="iconName" style="font-size: 18px"></AppIcon>
+      <span class="ml-8 lighter">{{ $t(shareTitle) }}</span>
     </div>
     <el-tree
       ref="treeRef"
@@ -55,6 +55,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  iconName: {
+    type: String,
+    default: 'app-folder-share-active',
+  },
+  shareTitle: {
+    type: String,
+    default: 'views.system.share_knowledge',
+  },
 })
 interface Tree {
   name: string
@@ -87,7 +95,7 @@ const handleNodeClick = (data: Tree) => {
 
 const handleSharedNodeClick = () => {
   treeRef.value?.setCurrentKey(undefined)
-  emit('handleNodeClick', { id: 'share', name: t('views.system.share_knowledge') })
+  emit('handleNodeClick', { id: 'share', name: t(props.shareTitle) })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/ui/src/locales/lang/zh-CN/views/system.ts b/ui/src/locales/lang/zh-CN/views/system.ts
index 6fb85f4b8..aa699987e 100644
--- a/ui/src/locales/lang/zh-CN/views/system.ts
+++ b/ui/src/locales/lang/zh-CN/views/system.ts
@@ -3,6 +3,8 @@ export default {
   subTitle: '系统设置',
   shared: '共享',
   shared_resources: '共享资源',
+  share_tool: '共享工具',
+  share_model: '共享模型',
   share_knowledge: '共享知识库',
   authorized_workspace: '授权工作空间',
   test: '测试连接',
diff --git a/ui/src/views/knowledge-shared-system/SharedWorkspace.vue b/ui/src/views/knowledge-shared-system/SharedWorkspace.vue
index c20471065..f3115d287 100644
--- a/ui/src/views/knowledge-shared-system/SharedWorkspace.vue
+++ b/ui/src/views/knowledge-shared-system/SharedWorkspace.vue
@@ -32,88 +32,6 @@
               <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
             </el-select>
           </div>
-          <el-dropdown trigger="click">
-            <el-button type="primary" class="ml-8">
-              {{ $t('common.create') }}
-              <el-icon class="el-icon--right">
-                <arrow-down />
-              </el-icon>
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu class="create-dropdown">
-                <el-dropdown-item @click="openCreateDialog(CreateKnowledgeDialog)">
-                  <div class="flex">
-                    <el-avatar class="avatar-blue mt-4" shape="square" :size="32">
-                      <img src="@/assets/knowledge/icon_document.svg" style="width: 58%" alt="" />
-                    </el-avatar>
-                    <div class="pre-wrap ml-8">
-                      <div class="lighter">
-                        {{ $t('views.knowledge.knowledgeType.generalKnowledge') }}
-                      </div>
-                      <el-text type="info" size="small"
-                        >{{ $t('views.knowledge.knowledgeType.generalInfo') }}
-                      </el-text>
-                    </div>
-                  </div>
-                </el-dropdown-item>
-                <el-dropdown-item @click="openCreateDialog(CreateWebKnowledgeDialog)">
-                  <div class="flex">
-                    <el-avatar class="avatar-purple mt-4" shape="square" :size="32">
-                      <img src="@/assets/knowledge/icon_web.svg" style="width: 58%" alt="" />
-                    </el-avatar>
-                    <div class="pre-wrap ml-8">
-                      <div class="lighter">
-                        {{ $t('views.knowledge.knowledgeType.webKnowledge') }}
-                      </div>
-                      <el-text type="info" size="small"
-                        >{{ $t('views.knowledge.knowledgeType.webInfo') }}
-                      </el-text>
-                    </div>
-                  </div>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <div class="flex">
-                    <el-avatar
-                      class="avatar-purple mt-4"
-                      shape="square"
-                      :size="32"
-                      style="background: none"
-                    >
-                      <img src="@/assets/knowledge/logo_lark.svg" alt="" />
-                    </el-avatar>
-                    <div class="pre-wrap ml-8">
-                      <div class="lighter">
-                        {{ $t('views.knowledge.knowledgeType.larkKnowledge') }}
-                      </div>
-                      <el-text type="info" size="small"
-                        >{{ $t('views.knowledge.knowledgeType.larkInfo') }}
-                      </el-text>
-                    </div>
-                  </div>
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <div class="flex">
-                    <el-avatar
-                      class="avatar-purple mt-4"
-                      shape="square"
-                      :size="32"
-                      style="background: none"
-                    >
-                      <img src="@/assets/knowledge/logo_yuque.svg" alt="" />
-                    </el-avatar>
-                    <div class="pre-wrap ml-8">
-                      <div class="lighter">
-                        {{ $t('views.knowledge.knowledgeType.yuqueKnowledge') }}
-                      </div>
-                      <el-text type="info" size="small"
-                        >{{ $t('views.knowledge.knowledgeType.yuqueInfo') }}
-                      </el-text>
-                    </div>
-                  </div>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
         </div>
       </template>
       <div v-loading.fullscreen.lock="paginationConfig.current_page === 1 && loading">
@@ -195,66 +113,6 @@
                       </div>
                     </div>
                   </template>
-                  <template #mouseEnter>
-                    <div @click.stop>
-                      <el-dropdown trigger="click">
-                        <el-button text @click.stop>
-                          <el-icon>
-                            <MoreFilled />
-                          </el-icon>
-                        </el-button>
-                        <template #dropdown>
-                          <el-dropdown-menu>
-                            <el-dropdown-item
-                              icon="Refresh"
-                              @click.stop="syncKnowledge(item)"
-                              v-if="item.type === 1"
-                              >{{ $t('views.knowledge.setting.sync') }}
-                            </el-dropdown-item>
-                            <el-dropdown-item @click.stop="reEmbeddingKnowledge(item)">
-                              <AppIcon iconName="app-vectorization"></AppIcon>
-                              {{ $t('views.knowledge.setting.vectorization') }}
-                            </el-dropdown-item>
-
-                            <el-dropdown-item
-                              icon="Connection"
-                              @click.stop="openGenerateDialog(item)"
-                              >{{ $t('views.document.generateQuestion.title') }}</el-dropdown-item
-                            >
-                            <el-dropdown-item
-                              icon="Lock"
-                              @click.stop="openAuthorizedWorkspaceDialog(item)"
-                              >{{ $t('views.system.authorized_workspace') }}</el-dropdown-item
-                            >
-                            <el-dropdown-item
-                              icon="Setting"
-                              @click.stop="
-                                router.push({
-                                  path: `/knowledge/system/${item.id}/settingShared`,
-                                  query: {
-                                    from: 'shared',
-                                  },
-                                })
-                              "
-                            >
-                              {{ $t('common.setting') }}</el-dropdown-item
-                            >
-                            <el-dropdown-item @click.stop="exportKnowledge(item)">
-                              <AppIcon iconName="app-export"></AppIcon
-                              >{{ $t('views.document.setting.export') }} Excel</el-dropdown-item
-                            >
-                            <el-dropdown-item @click.stop="exportZipKnowledge(item)">
-                              <AppIcon iconName="app-export"></AppIcon
-                              >{{ $t('views.document.setting.export') }} ZIP</el-dropdown-item
-                            >
-                            <el-dropdown-item icon="Delete" @click.stop="deleteKnowledge(item)">{{
-                              $t('common.delete')
-                            }}</el-dropdown-item>
-                          </el-dropdown-menu>
-                        </template>
-                      </el-dropdown>
-                    </div>
-                  </template>
                 </CardBox>
               </el-col>
             </template>
diff --git a/ui/src/views/model-shared-system/SharedWorkspace.vue b/ui/src/views/model-shared-system/SharedWorkspace.vue
new file mode 100644
index 000000000..b7f4475ca
--- /dev/null
+++ b/ui/src/views/model-shared-system/SharedWorkspace.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="model-shared">
+    <ContentContainer
+        :header="t('views.system.share_model')"
+        v-loading="list_model_loading"
+      >
+        <template #search>
+          <div class="flex">
+            <div class="flex-between complex-search">
+              <el-select
+                class="complex-search__left"
+                v-model="search_type"
+                style="width: 120px"
+                @change="search_type_change"
+              >
+                <el-option :label="$t('common.creator')" value="create_user" />
+                <el-option
+                  :label="$t('views.model.modelForm.permissionType.label')"
+                  value="permission_type"
+                />
+                <el-option
+                  :label="$t('views.model.modelForm.model_type.label')"
+                  value="model_type"
+                />
+                <el-option :label="$t('views.model.modelForm.modeName.label')" value="name" />
+              </el-select>
+              <el-input
+                v-if="search_type === 'name'"
+                v-model="model_search_form.name"
+                @change="list_model"
+                :placeholder="$t('common.searchBar.placeholder')"
+                style="width: 220px"
+                clearable
+              />
+              <el-select
+                v-else-if="search_type === 'create_user'"
+                v-model="model_search_form.create_user"
+                @change="list_model"
+                clearable
+                style="width: 220px"
+              >
+                <el-option
+                  v-for="u in user_options"
+                  :key="u.id"
+                  :value="u.id"
+                  :label="u.username"
+                />
+              </el-select>
+              <el-select
+                v-else-if="search_type === 'permission_type'"
+                v-model="model_search_form.permission_type"
+                clearable
+                @change="list_model"
+                style="width: 220px"
+              >
+                <el-option :label="$t('common.public')" value="PUBLIC" />
+                <el-option :label="$t('common.private')" value="PRIVATE" />
+              </el-select>
+              <el-select
+                v-else-if="search_type === 'model_type'"
+                v-model="model_search_form.model_type"
+                clearable
+                @change="list_model"
+                style="width: 220px"
+              >
+                <template v-for="item in modelTypeList" :key="item.value">
+                  <el-option :label="item.text" :value="item.value" />
+                </template>
+              </el-select>
+            </div>
+          </div>
+        </template>
+
+        <div class="model-list-height">
+          <el-scrollbar>
+            <el-row v-if="model_split_list.length > 0" :gutter="15" class="w-full">
+              <template v-for="(row, index) in model_split_list" :key="index">
+                <el-col
+                  :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="8"
+                  :xl="6"
+                  class="mb-16"
+                  v-for="(model, i) in row"
+                  :key="i"
+                >
+                  <ModelCard
+                    @change="list_model"
+                    :updateModelById="updateModelById"
+                    :model="model"
+                    :provider_list="provider_list"
+                  >
+                  </ModelCard>
+                </el-col>
+              </template>
+            </el-row>
+            <el-empty :description="$t('common.noData')" v-else />
+          </el-scrollbar>
+        </div>
+      </ContentContainer>
+
+      <CreateModelDialog
+        ref="createModelRef"
+        @submit="list_model"
+        @change="openCreateModel($event)"
+      ></CreateModelDialog>
+
+      <SelectProviderDialog
+        ref="selectProviderRef"
+        @change="(provider, modelType) => openCreateModel(provider, modelType)"
+      ></SelectProviderDialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue'
+import ProviderApi from '@/api/shared/provider'
+import ModelApi from '@/api/shared/model'
+import type { Provider, Model } from '@/api/type/model'
+import ModelCard from '@/views/model-shared-system/component/ModelCard.vue'
+import ProviderComponent from '@/views/model-shared-system/component/Provider.vue'
+import { splitArray } from '@/utils/common'
+import { modelTypeList, allObj } from '@/views/model-shared-system/component/data'
+import CreateModelDialog from '@/views/model-shared-system/component/CreateModelDialog.vue'
+import iconMap from '@/components/app-icon/icons/common'
+import SelectProviderDialog from '@/views/model-shared-system/component/SelectProviderDialog.vue'
+import useStore from '@/stores/modules-shared-system'
+import { t } from '@/locales'
+
+const { model } = useStore()
+const rightOutlined = iconMap['right-outlined'].iconReader()
+
+const commonList1 = ref()
+const commonList2 = ref()
+const loading = ref<boolean>(false)
+
+const active_provider = ref<Provider>()
+const search_type = ref('name')
+const model_search_form = ref<{
+  name: string
+  create_user: string
+  permission_type: string
+  model_type: string
+}>({
+  name: '',
+  create_user: '',
+  permission_type: '',
+  model_type: '',
+})
+const user_options = ref<any[]>([])
+const list_model_loading = ref<boolean>(false)
+const provider_list = ref<Array<Provider>>([])
+
+const model_list = ref<Array<Model>>([])
+
+const updateModelById = (model_id: string, model: Model) => {
+  model_list.value
+    .filter((m) => m.id == model_id)
+    .forEach((m) => {
+      m.status = model.status
+    })
+}
+const model_split_list = computed(() => {
+  return splitArray(model_list.value, 2)
+})
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
+const clickListHandle = (item: Provider) => {
+  active_provider.value = item
+  list_model()
+  if (active_provider.value.provider === '') {
+    commonList1.value.clearCurrent()
+    commonList2.value.clearCurrent()
+  }
+}
+
+const openCreateModel = (provider?: Provider, model_type?: string) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider, model_type)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
+const list_model = () => {
+  const params = active_provider.value?.provider ? { provider: active_provider.value.provider } : {}
+  ModelApi
+    .getSharedWorkspaceModelPage({ ...model_search_form.value, ...params }, list_model_loading)
+    .then((ok: any) => {
+      model_list.value = ok.data
+      const v = model_list.value.map((m) => ({ id: m.user_id, username: m.username }))
+      if (user_options.value.length === 0) {
+        user_options.value = Array.from(new Map(v.map((item) => [item.id, item])).values())
+      }
+    })
+}
+
+const search_type_change = () => {
+  model_search_form.value = { name: '', create_user: '', permission_type: '', model_type: '' }
+}
+
+onMounted(() => {
+  ProviderApi.getProvider(loading).then((ok) => {
+    active_provider.value = allObj
+    provider_list.value = [allObj, ...ok.data]
+
+    list_model()
+  })
+})
+</script>
+
+<style lang="scss" scoped>
+.model-shared {
+  height: 100%;
+
+  .shared-header {
+    color: #646a73;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 21px;
+
+    :deep(.el-icon i) {
+      height: 12px;
+    }
+
+    .sub-title {
+      color: #1f2329;
+    }
+  }
+
+  .h-full {
+    border-radius: 8px;
+    box-shadow: 0px 2px 4px 0px #1f23291f;
+    background: #fff;
+  }
+}
+</style>
diff --git a/ui/src/views/model-shared-system/component/ModelCard.vue b/ui/src/views/model-shared-system/component/ModelCard.vue
index 3e1bf3731..bcfa7ac58 100644
--- a/ui/src/views/model-shared-system/component/ModelCard.vue
+++ b/ui/src/views/model-shared-system/component/ModelCard.vue
@@ -61,54 +61,6 @@
         </el-button>
       </div>
     </div>
-
-    <template #mouseEnter>
-      <el-dropdown trigger="click">
-        <el-button text @click.stop>
-          <el-icon>
-            <MoreFilled />
-          </el-icon>
-        </el-button>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item icon="Lock" @click.stop="openAuthorizedWorkspaceDialog(model)">{{
-              $t('views.system.authorized_workspace')
-            }}</el-dropdown-item>
-            <el-dropdown-item
-              icon="EditPen"
-              :disabled="!is_permisstion"
-              text
-              @click.stop="openEditModel"
-            >
-              {{ $t('common.modify') }}
-            </el-dropdown-item>
-
-            <el-dropdown-item
-              v-if="
-                currentModel.model_type === 'TTS' ||
-                currentModel.model_type === 'LLM' ||
-                currentModel.model_type === 'IMAGE' ||
-                currentModel.model_type === 'TTI'
-              "
-              :disabled="!is_permisstion"
-              icon="Setting"
-              @click.stop="openParamSetting"
-            >
-              {{ $t('views.model.modelForm.title.paramSetting') }}
-            </el-dropdown-item>
-            <el-dropdown-item
-              divided
-              icon="Delete"
-              :disabled="!is_permisstion"
-              text
-              @click.stop="deleteModel"
-            >
-              {{ $t('common.delete') }}
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </template>
     <EditModel ref="editModelRef" @submit="emit('change')"></EditModel>
     <ParamSettingDialog ref="paramSettingRef" :model="model" />
     <AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef"></AuthorizedWorkspace>
diff --git a/ui/src/views/model/component/Provider.vue b/ui/src/views/model/component/Provider.vue
index fd551cc8b..0fd00a533 100644
--- a/ui/src/views/model/component/Provider.vue
+++ b/ui/src/views/model/component/Provider.vue
@@ -2,6 +2,15 @@
   <div class="provider-list">
     <el-scrollbar>
       <div class="p-8">
+        <div
+          @click="handleSharedNodeClick"
+          class="shared-knowledge"
+          v-if="isShared"
+          :class="currentNodeKey === 'share' && 'active'"
+        >
+          <AppIcon iconName="app-folder-share-active" style="font-size: 18px"></AppIcon>
+          <span class="ml-8 lighter">{{ $t('views.system.share_model') }}</span>
+        </div>
         <div
           class="all-mode flex cursor"
           @click="clickListHandle(allObj as Provider)"
@@ -96,6 +105,7 @@ import { modelTypeList, allObj } from '@/views/model/component/data'
 const props = defineProps<{
   data: Array<Provider>
   loading: boolean
+  isShared?: boolean
   active?: Provider
 }>()
 const emit = defineEmits(['click'])
@@ -130,6 +140,10 @@ watch(
 const clickListHandle = (item: Provider) => {
   emit('click', item)
 }
+
+const handleSharedNodeClick = () => {
+  emit('click', { id: 'share' })
+}
 </script>
 <style lang="scss" scoped>
 .provider-list {
@@ -174,5 +188,35 @@ const clickListHandle = (item: Provider) => {
       padding-bottom: 0 !important;
     }
   }
+  .shared-knowledge {
+    padding-left: 8px;
+    display: flex;
+    align-items: center;
+    height: 40px;
+    position: relative;
+    margin-bottom: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--app-text-color-light-1);
+      color: var(--el-menu-text-color);
+    }
+
+    &.active {
+      color: var(--el-color-primary);
+      background: var(--el-color-primary-light-9);
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -4px;
+      background-color: #1f232926;
+      left: 0;
+      width: 100%;
+      height: 1px;
+    }
+  }
 }
 </style>
diff --git a/ui/src/views/model/index.vue b/ui/src/views/model/index.vue
index 54b6e36b7..433d31c93 100644
--- a/ui/src/views/model/index.vue
+++ b/ui/src/views/model/index.vue
@@ -6,10 +6,13 @@
         :data="provider_list"
         @click="clickListHandle"
         :loading="loading"
+        shareTitle="views.system.share_tool"
+        isShared
         :active="active_provider"
       />
     </template>
-    <ContentContainer :header="active_provider?.name" v-loading="list_model_loading">
+    <SharedWorkspace v-if="active_provider && active_provider.id === 'share'"></SharedWorkspace>
+    <ContentContainer v-else :header="active_provider?.name" v-loading="list_model_loading">
       <template #search>
         <div class="flex">
           <div class="flex-between complex-search">
@@ -123,6 +126,7 @@ import ProviderComponent from '@/views/model/component/Provider.vue'
 import { splitArray } from '@/utils/common'
 import { modelTypeList, allObj } from '@/views/model/component/data'
 import CreateModelDialog from '@/views/model/component/CreateModelDialog.vue'
+import SharedWorkspace from '@/views/model-shared-system/SharedWorkspace.vue'
 import SelectProviderDialog from '@/views/model/component/SelectProviderDialog.vue'
 import useStore from '@/stores'
 import { t } from '@/locales'
diff --git a/ui/src/views/paragraph-shared-system/component/ParagraphCard.vue b/ui/src/views/paragraph-shared-system/component/ParagraphCard.vue
index 8883af440..6b8a46619 100644
--- a/ui/src/views/paragraph-shared-system/component/ParagraphCard.vue
+++ b/ui/src/views/paragraph-shared-system/component/ParagraphCard.vue
@@ -165,15 +165,18 @@ function refreshMigrateParagraph() {}
   border: 1px solid #ffffff;
   box-shadow: none !important;
   position: relative;
+  overflow: inherit;
   &:hover {
     background: rgba(31, 35, 41, 0.1);
     border: 1px solid #dee0e3;
   }
   .paragraph-box-operation {
     position: absolute;
+    overflow: inherit;
     right: 0;
     top: 0;
     border: 1px solid #dee0e3;
+    z-index: 10;
   }
 }
 </style>
diff --git a/ui/src/views/resource-authorization/component/PermissionSetting.vue b/ui/src/views/resource-authorization/component/PermissionSetting.vue
index b249eb582..fdd5a6a35 100644
--- a/ui/src/views/resource-authorization/component/PermissionSetting.vue
+++ b/ui/src/views/resource-authorization/component/PermissionSetting.vue
@@ -7,7 +7,7 @@
     clearable
   />
   <div class="pt-0">
-    <el-table row-key="id" :data="filterData" :max-height="tableHeight">
+    <el-table default-expand-all row-key="id" :data="filterData" :max-height="tableHeight">
       <el-table-column class-name="folder-flex" prop="name" :label="$t('common.name')">
         <template #default="{ row }">
           <div class="flex align-center">
diff --git a/ui/src/views/resource-authorization/index.vue b/ui/src/views/resource-authorization/index.vue
index e44f31a0c..6f068a1ef 100644
--- a/ui/src/views/resource-authorization/index.vue
+++ b/ui/src/views/resource-authorization/index.vue
@@ -139,7 +139,7 @@ function submitPermissions() {
 function clickMemberHandle(item: any) {
   currentUser.value = item.id
   currentType.value = item.type
-  ResourcePermissions(item.id)
+  getWholeTree(item.id)
 }
 
 function getMember(id?: string) {
diff --git a/ui/src/views/tool-shared-system/SharedWorkspace.vue b/ui/src/views/tool-shared-system/SharedWorkspace.vue
new file mode 100644
index 000000000..f9178bc64
--- /dev/null
+++ b/ui/src/views/tool-shared-system/SharedWorkspace.vue
@@ -0,0 +1,368 @@
+<template>
+  <div class="tool-shared">
+    <ContentContainer :header="$t('views.system.share_tool')">
+      <template #search>
+        <div class="flex">
+          <div class="flex-between complex-search">
+            <el-select
+              class="complex-search__left"
+              v-model="search_type"
+              style="width: 120px"
+              @change="search_type_change"
+            >
+              <el-option :label="$t('common.creator')" value="create_user" />
+
+              <el-option :label="$t('views.model.modelForm.modeName.label')" value="name" />
+            </el-select>
+            <el-input
+              v-if="search_type === 'name'"
+              v-model="search_form.name"
+              @change="getList"
+              :placeholder="$t('common.searchBar.placeholder')"
+              style="width: 220px"
+              clearable
+            />
+            <el-select
+              v-else-if="search_type === 'create_user'"
+              v-model="search_form.create_user"
+              @change="getList"
+              clearable
+              style="width: 220px"
+            >
+              <el-option v-for="u in user_options" :key="u.id" :value="u.id" :label="u.username" />
+            </el-select>
+          </div>
+        </div>
+      </template>
+
+      <div>
+        <el-row v-if="toolList.length > 0" :gutter="15">
+          <template v-for="(item, index) in toolList" :key="index">
+            <el-col
+              v-if="item.resource_type === 'folder'"
+              :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="8"
+              :xl="6"
+              class="mb-16"
+            >
+              <CardBox
+                :title="item.name"
+                :description="item.desc || $t('common.noData')"
+                class="cursor"
+              >
+                <template #icon>
+                  <el-avatar shape="square" :size="32" style="background: none">
+                    <AppIcon iconName="app-folder" style="font-size: 32px"></AppIcon>
+                  </el-avatar>
+                </template>
+                <template #subTitle>
+                  <el-text class="color-secondary lighter" size="small">
+                    {{ $t('common.creator') }}: {{ item.username }}
+                  </el-text>
+                </template>
+              </CardBox>
+            </el-col>
+            <el-col v-else :xs="24" :sm="12" :md="12" :lg="8" :xl="6" class="mb-16">
+              <CardBox isShared :title="item.name" :description="item.desc" class="cursor">
+                <template #icon>
+                  <el-avatar
+                    v-if="isAppIcon(item?.icon)"
+                    shape="square"
+                    :size="32"
+                    style="background: none"
+                    class="mr-8"
+                  >
+                    <img :src="item?.icon" alt="" />
+                  </el-avatar>
+                  <el-avatar v-else class="avatar-green" shape="square" :size="32">
+                    <img src="@/assets/node/icon_tool.svg" style="width: 58%" alt="" />
+                  </el-avatar>
+                </template>
+                <template #subTitle>
+                  <el-text class="color-secondary lighter" size="small">
+                    {{ $t('common.creator') }}: {{ item.username }}
+                  </el-text>
+                </template>
+
+                <template #footer>
+                  <div v-if="item.is_active" class="flex align-center">
+                    <el-icon class="color-success mr-8" style="font-size: 16px">
+                      <SuccessFilled />
+                    </el-icon>
+                    <span class="color-secondary">
+                      {{ $t('common.status.enabled') }}
+                    </span>
+                  </div>
+                  <div v-else class="flex align-center">
+                    <AppIcon iconName="app-disabled" class="color-secondary mr-8"></AppIcon>
+                    <span class="color-secondary">
+                      {{ $t('common.status.disabled') }}
+                    </span>
+                  </div>
+                </template>
+              </CardBox>
+            </el-col>
+          </template>
+        </el-row>
+        <el-empty :description="$t('common.noData')" v-else />
+      </div>
+    </ContentContainer>
+    <InitParamDrawer ref="InitParamDrawerRef" @refresh="refresh" />
+    <ToolFormDrawer ref="ToolFormDrawerRef" @refresh="refresh" :title="ToolDrawertitle" />
+    <AuthorizedWorkspace ref="AuthorizedWorkspaceDialogRef"></AuthorizedWorkspace>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, reactive, computed } from 'vue'
+import { cloneDeep, get } from 'lodash'
+import ToolApi from '@/api/shared/tool'
+import useStore from '@/stores/modules-shared-system'
+import InitParamDrawer from '@/views/tool-shared-system/component/InitParamDrawer.vue'
+import ToolFormDrawer from './ToolFormDrawer.vue'
+import { t } from '@/locales'
+import { isAppIcon } from '@/utils/common'
+import iconMap from '@/components/app-icon/icons/common'
+import AuthorizedWorkspace from '@/views/knowledge-shared-system/AuthorizedWorkspace.vue'
+import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+
+const { folder, user } = useStore()
+const rightOutlined = iconMap['right-outlined'].iconReader()
+const InitParamDrawerRef = ref()
+const search_type = ref('name')
+const search_form = ref<{
+  name: string
+  create_user: string
+}>({
+  name: '',
+  create_user: '',
+})
+const user_options = ref<any[]>([])
+
+const AuthorizedWorkspaceDialogRef = ref()
+function openAuthorizedWorkspaceDialog(row: any) {
+  if (AuthorizedWorkspaceDialogRef.value) {
+    AuthorizedWorkspaceDialogRef.value.open(row, 'Tool')
+  }
+}
+const loading = ref(false)
+const changeStateloading = ref(false)
+const paginationConfig = reactive({
+  current_page: 1,
+  page_size: 30,
+  total: 0,
+})
+
+const folderList = ref<any[]>([])
+const toolList = ref<any[]>([])
+const currentFolder = ref<any>({})
+
+const search_type_change = () => {
+  search_form.value = { name: '', create_user: '' }
+}
+const canEdit = (row: any) => {
+  return user.userInfo?.id === row?.user_id
+}
+
+const ToolFormDrawerRef = ref()
+const ToolDrawertitle = ref('')
+
+function openCreateDialog(data?: any) {
+  // 有template_id的不允许编辑，是模板转换来的
+  if (data?.template_id) {
+    return
+  }
+  ToolDrawertitle.value = data ? t('views.tool.editTool') : t('views.tool.createTool')
+  if (data) {
+    if (data?.permission_type !== 'PUBLIC' || canEdit(data)) {
+      ToolApi.getToolById(data?.id, changeStateloading).then((res) => {
+        ToolFormDrawerRef.value.open(res.data)
+      })
+    }
+  } else {
+    ToolFormDrawerRef.value.open(data)
+  }
+}
+
+function getList() {
+  const params = {
+    folder_id: currentFolder.value?.id || 'root',
+    scope: 'WORKSPACE',
+  }
+  ToolApi.getSharedWorkspaceToolPage(params, loading).then((res) => {
+    toolList.value = [...res.data]
+  })
+}
+
+function getFolder() {
+  const params = {}
+  folder.asyncGetFolder('TOOL', params, loading).then((res: any) => {
+    folderList.value = res.data
+    currentFolder.value = res.data?.[0] || {}
+    getList()
+  })
+}
+
+async function changeState(row: any) {
+  if (row.is_active) {
+    MsgConfirm(
+      `${t('views.tool.disabled.confirmTitle')}${row.name} ?`,
+      t('views.tool.disabled.confirmMessage'),
+      {
+        confirmButtonText: t('common.status.disable'),
+        confirmButtonClass: 'danger',
+      },
+    ).then(() => {
+      const obj = {
+        is_active: !row.is_active,
+      }
+      ToolApi.putTool(row.id, obj, changeStateloading)
+        .then(() => {
+          return true
+        })
+        .catch(() => {
+          return false
+        })
+    })
+  } else {
+    const res = await ToolApi.getToolById(row.id, changeStateloading)
+    if (
+      !res.data.init_params &&
+      res.data.init_field_list &&
+      res.data.init_field_list.length > 0 &&
+      res.data.init_field_list.filter((item: any) => item.default_value && item.show_default_value)
+        .length !== res.data.init_field_list.length
+    ) {
+      InitParamDrawerRef.value.open(res.data, !row.is_active)
+      return false
+    }
+    const obj = {
+      is_active: !row.is_active,
+    }
+    ToolApi.putTool(row.id, obj, changeStateloading)
+      .then(() => {
+        return true
+      })
+      .catch(() => {
+        return false
+      })
+  }
+}
+
+function refresh(data: any) {
+  if (data) {
+    const index = toolList.value.findIndex((v) => v.id === data.id)
+    // if (user.userInfo && data.user_id === user.userInfo.id) {
+    //   data.username = user.userInfo.username
+    // } else {
+    //   data.username = userOptions.value.find((v) => v.value === data.user_id)?.label
+    // }
+    toolList.value.splice(index, 1, data)
+  }
+  paginationConfig.total = 0
+  paginationConfig.current_page = 1
+  toolList.value = []
+  getList()
+}
+
+function folderClickHandel(row: any) {
+  currentFolder.value = row
+  toolList.value = []
+  getList()
+}
+
+function copyTool(row: any) {
+  ToolDrawertitle.value = t('views.tool.copyTool')
+  const obj = cloneDeep(row)
+  delete obj['id']
+  obj['name'] = obj['name'] + `  ${t('views.tool.form.title.copy')}`
+  ToolFormDrawerRef.value.open(obj)
+}
+
+function exportTool(row: any) {
+  ToolApi.exportTool(row.id, row.name, loading).catch((e: any) => {
+    if (e.response.status !== 403) {
+      e.response.data.text().then((res: string) => {
+        MsgError(`${t('views.application.tip.ExportError')}:${JSON.parse(res).message}`)
+      })
+    }
+  })
+}
+
+function deleteTool(row: any) {
+  MsgConfirm(
+    `${t('views.tool.delete.confirmTitle')}${row.name} ?`,
+    t('views.tool.delete.confirmMessage'),
+    {
+      confirmButtonText: t('common.confirm'),
+      cancelButtonText: t('common.cancel'),
+      confirmButtonClass: 'danger',
+    },
+  )
+    .then(() => {
+      ToolApi.delTool(row.id, loading).then(() => {
+        const index = toolList.value.findIndex((v) => v.id === row.id)
+        toolList.value.splice(index, 1)
+        MsgSuccess(t('common.deleteSuccess'))
+      })
+    })
+    .catch(() => {})
+}
+
+function configInitParams(item: any) {
+  ToolApi.getToolById(item?.id, changeStateloading).then((res) => {
+    InitParamDrawerRef.value.open(res.data)
+  })
+}
+
+// function importTool(file: any) {
+//   const formData = new FormData()
+//   formData.append('file', file.raw, file.name)
+//   elUploadRef.value.clearFiles()
+//   ToolApi
+//     .postImportTool(formData, loading)
+//     .then(async (res: any) => {
+//       if (res?.data) {
+//         searchHandle()
+//       }
+//     })
+//     .catch((e: any) => {
+//       if (e.code === 400) {
+//         MsgConfirm(t('common.tip'), t('views.application.tip.professionalMessage'), {
+//           cancelButtonText: t('common.confirm'),
+//           confirmButtonText: t('common.professional')
+//         }).then(() => {
+//           window.open('https://maxkb.cn/pricing.html', '_blank')
+//         })
+//       }
+//     })
+// }
+
+onMounted(() => {
+  getFolder()
+})
+</script>
+
+<style lang="scss" scoped>
+.tool-shared {
+  padding-left: 8px;
+  .shared-header {
+    color: #646a73;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    display: flex;
+    align-items: center;
+
+    :deep(.el-icon i) {
+      height: 12px;
+    }
+
+    .sub-title {
+      color: #1f2329;
+    }
+  }
+}
+</style>
diff --git a/ui/src/views/tool/index.vue b/ui/src/views/tool/index.vue
index ecf466a3a..fd65706ed 100644
--- a/ui/src/views/tool/index.vue
+++ b/ui/src/views/tool/index.vue
@@ -6,10 +6,13 @@
         :data="folderList"
         :currentNodeKey="currentFolder?.id"
         @handleNodeClick="folderClickHandel"
+        shareTitle="views.system.share_tool"
+        isShared
         class="p-8"
       />
     </template>
-    <ContentContainer :header="currentFolder?.name">
+    <SharedWorkspace v-if="currentFolder.id === 'share'"></SharedWorkspace>
+    <ContentContainer v-else :header="currentFolder?.name">
       <template #search>
         <div class="flex">
           <div class="flex-between complex-search">
@@ -198,6 +201,7 @@ import ToolFormDrawer from './ToolFormDrawer.vue'
 import { t } from '@/locales'
 import { isAppIcon } from '@/utils/common'
 import { MsgSuccess, MsgConfirm, MsgError } from '@/utils/message'
+import SharedWorkspace from '@/views/tool-shared-system/SharedWorkspace.vue'
 
 const { folder, user } = useStore()