From 1b56707503c57b34e5a1a08f5833187b0aac4ede Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Thu, 9 Oct 2025 16:50:41 +0800
Subject: [PATCH] feat: add ToolStoreDescDrawer component and integrate with
 ToolListContainer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--story=1019826 --user=刘瑞斌 工具- 工具商店的工具，点击面板可以打开详情抽屉 https://www.tapd.cn/62980211/s/1782377
---
 .../tool/component/ToolListContainer.vue      | 12 +++
 .../tool/component/ToolStoreDescDrawer.vue    | 89 +++++++++++++++++++
 2 files changed, 101 insertions(+)
 create mode 100644 ui/src/views/tool/component/ToolStoreDescDrawer.vue

diff --git a/ui/src/views/tool/component/ToolListContainer.vue b/ui/src/views/tool/component/ToolListContainer.vue
index dc0ff564d..79cc60ac4 100644
--- a/ui/src/views/tool/component/ToolListContainer.vue
+++ b/ui/src/views/tool/component/ToolListContainer.vue
@@ -359,6 +359,7 @@
     ref="ResourceAuthorizationDrawerRef"
     v-if="apiType === 'workspace'"
   />
+  <ToolStoreDescDrawer ref="toolStoreDescDrawerRef" />
 </template>
 
 <script lang="ts" setup>
@@ -383,6 +384,7 @@ import permissionMap from '@/permission'
 import useStore from '@/stores'
 import { t } from '@/locales'
 import ToolStoreApi from '@/api/tool/store.ts'
+import ToolStoreDescDrawer from "@/views/tool/component/ToolStoreDescDrawer.vue";
 const route = useRoute()
 const { folder, user, tool } = useStore()
 onBeforeRouteLeave((to, from) => {
@@ -473,12 +475,22 @@ function openAuthorizedWorkspaceDialog(row: any) {
   }
 }
 
+const toolStoreDescDrawerRef = ref<InstanceType<typeof ToolStoreDescDrawer>>()
 function openCreateDialog(data?: any) {
   // mcp工具
   if (data?.tool_type === 'MCP') {
     openCreateMcpDialog(data)
     return
   }
+  // 有版本号的展示readme，是商店更新过来的
+  if (data?.version) {
+    let readMe = ''
+    storeTools.value.filter((item) => item.id === data.template_id).forEach((item) => {
+      readMe = item.readMe
+    })
+    toolStoreDescDrawerRef.value?.open(readMe, data)
+    return
+  }
   // 有template_id的不允许编辑，是模板转换来的
   if (data?.template_id) {
     return
diff --git a/ui/src/views/tool/component/ToolStoreDescDrawer.vue b/ui/src/views/tool/component/ToolStoreDescDrawer.vue
new file mode 100644
index 000000000..8cca14424
--- /dev/null
+++ b/ui/src/views/tool/component/ToolStoreDescDrawer.vue
@@ -0,0 +1,89 @@
+<template>
+  <el-drawer v-model="visibleInternalDesc" size="60%" :append-to-body="true">
+    <template #header>
+      <div class="flex align-center" style="margin-left: -8px">
+        <el-button class="cursor mr-4" link @click.prevent="visibleInternalDesc = false">
+          <el-icon :size="20">
+            <Back />
+          </el-icon>
+        </el-button>
+        <h4>详情</h4>
+      </div>
+    </template>
+
+    <div>
+      <div class="card-header">
+        <div class="flex-between">
+          <div class="title flex align-center">
+            <el-avatar
+              v-if="isAppIcon(toolDetail?.icon)"
+              shape="square"
+              :size="64"
+              style="background: none"
+              class="mr-8"
+            >
+              <img :src="toolDetail?.icon" alt="" />
+            </el-avatar>
+            <el-avatar
+              v-else-if="toolDetail?.name"
+              :name="toolDetail?.name"
+              pinyinColor
+              shape="square"
+              :size="64"
+              class="mr-8"
+            />
+            <div class="ml-16">
+              <h3 class="mb-8">{{ toolDetail.name }}</h3>
+              <el-text type="info" v-if="toolDetail?.desc">
+                {{ toolDetail.desc }}
+              </el-text>
+            </div>
+          </div>
+        </div>
+
+        <div class="mt-16">
+          <el-text type="info">
+            <div>{{ $t('common.author') }}: MaxKB</div>
+          </el-text>
+        </div>
+      </div>
+      <MdPreview
+        ref="editorRef"
+        editorId="preview-only"
+        :modelValue="markdownContent"
+        style="background: none"
+        noImgZoomIn
+      />
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { cloneDeep } from 'lodash'
+import { isAppIcon } from '@/utils/common'
+const emit = defineEmits(['refresh', 'addTool'])
+
+const visibleInternalDesc = ref(false)
+const markdownContent = ref('')
+const toolDetail = ref<any>({})
+
+watch(visibleInternalDesc, (bool) => {
+  if (!bool) {
+    markdownContent.value = ''
+  }
+})
+
+const open = (data: any, detail: any) => {
+  toolDetail.value = detail
+  if (data) {
+    markdownContent.value = cloneDeep(data)
+  }
+  visibleInternalDesc.value = true
+}
+
+defineExpose({
+  open
+})
+</script>
+<style lang="scss"></style>