From 3b137ac762cbe62ffb2dd92063459af4f2fe09e1 Mon Sep 17 00:00:00 2001
From: kterna <2569244273@qq.com>
Date: Tue, 8 Apr 2025 14:01:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=92=E4=BB=B6=E7=AE=A1=E7=90=86=E4=B8=AD?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E6=9C=AC=E5=9C=B0=E6=8F=92=E4=BB=B6=E7=9A=84?=
 =?UTF-8?q?readme?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/ExtensionCard.vue   |  12 +-
 .../src/components/shared/ReadmeDialog.vue    | 302 ++++++++++++++++++
 dashboard/src/views/ExtensionPage.vue         |  22 +-
 3 files changed, 334 insertions(+), 2 deletions(-)
 create mode 100644 dashboard/src/components/shared/ReadmeDialog.vue

diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index 18f84564..49cc87b7 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -24,7 +24,8 @@ const emit = defineEmits([
   'install',
   'uninstall',
   'toggle-activation',
-  'view-handlers'
+  'view-handlers',
+  'view-readme'
 ]);
 
 const open = (link: string | undefined) => {
@@ -70,6 +71,10 @@ const toggleActivation = () => {
 const viewHandlers = () => {
   emit('view-handlers', props.extension);
 };
+
+const viewReadme = () => {
+  emit('view-readme', props.extension);
+};
 </script>
 
 <template>
@@ -183,6 +188,11 @@ const viewHandlers = () => {
               @click="updateExtension" :block="$vuetify.display.xs">
               更新到 {{ extension.online_version || extension.version }}
             </v-btn>
+            
+            <v-btn prepend-icon="mdi-file-document-outline" color="info" variant="tonal" @click="viewReadme"
+              :block="$vuetify.display.xs">
+              查看文档
+            </v-btn>
           </div>
         </v-card-text>
 
diff --git a/dashboard/src/components/shared/ReadmeDialog.vue b/dashboard/src/components/shared/ReadmeDialog.vue
new file mode 100644
index 00000000..29257529
--- /dev/null
+++ b/dashboard/src/components/shared/ReadmeDialog.vue
@@ -0,0 +1,302 @@
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import axios from 'axios';
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false
+  },
+  pluginName: {
+    type: String,
+    default: ''
+  },
+  repoUrl: {
+    type: String,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:show']);
+
+const content = ref(null);
+const error = ref(null);
+const loading = ref(false);
+
+// 监听show的变化，当显示对话框时加载内容
+watch(() => props.show, (newVal) => {
+  if (newVal && props.pluginName) {
+    fetchReadme();
+  }
+});
+
+// 监听pluginName的变化
+watch(() => props.pluginName, (newVal) => {
+  if (props.show && newVal) {
+    fetchReadme();
+  }
+});
+
+// 获取README内容
+async function fetchReadme() {
+  if (!props.pluginName) return;
+  
+  loading.value = true;
+  content.value = null;
+  error.value = null;
+  
+  try {
+    // 从本地文件获取README
+    const res = await axios.get(`/api/plugin/readme?name=${props.pluginName}`);
+    if (res.data.status === 'ok') {
+      content.value = res.data.data.content;
+    } else {
+      error.value = res.data.message || '获取README失败';
+    }
+  } catch (err) {
+    error.value = err.message || '获取README时发生错误';
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 打开GitHub中的仓库
+function openRepoInNewTab() {
+  if (props.repoUrl) {
+    window.open(props.repoUrl, '_blank');
+  }
+}
+
+// 渲染Markdown内容
+function renderMarkdown(content) {
+  if (!content) return '';
+  
+  // 配置marked使用highlight.js进行语法高亮
+  marked.setOptions({
+    highlight: function(code, lang) {
+      if (lang && hljs.getLanguage(lang)) {
+        try {
+          return hljs.highlight(code, { language: lang }).value;
+        } catch (e) {
+          console.error(e);
+        }
+      }
+      return hljs.highlightAuto(code).value;
+    },
+    gfm: true, // GitHub Flavored Markdown
+    breaks: true, // Convert \n to <br>
+    headerIds: true, // Add id attributes to headers
+    mangle: false // Don't mangle email addresses
+  });
+  
+  return marked(content);
+}
+
+// 刷新README内容
+function refreshReadme() {
+  fetchReadme();
+}
+</script>
+
+<template>
+  <v-dialog v-model="_show" width="800" persistent>
+    <v-card>
+      <v-card-title class="d-flex justify-space-between align-center">
+        <span class="text-h5">插件说明文档</span>
+        <v-btn icon @click="$emit('update:show', false)">
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text style="height: 70vh; overflow-y: auto;">
+        <div class="d-flex justify-space-between mb-4">
+          <v-btn 
+            v-if="repoUrl"
+            color="primary" 
+            prepend-icon="mdi-github"
+            @click="openRepoInNewTab()" 
+          >
+            在GitHub中查看仓库
+          </v-btn>
+          <v-btn
+            color="secondary"
+            prepend-icon="mdi-refresh"
+            @click="refreshReadme()"
+          >
+            刷新文档
+          </v-btn>
+        </div>
+        
+        <!-- 加载中 -->
+        <div v-if="loading" class="d-flex flex-column align-center justify-center" style="height: 100%;">
+          <v-progress-circular indeterminate color="primary" size="64" class="mb-4"></v-progress-circular>
+          <p class="text-body-1 text-center">正在加载README文档...</p>
+        </div>
+        
+        <!-- 内容显示 -->
+        <div v-else-if="content" class="markdown-body" v-html="renderMarkdown(content)"></div>
+        
+        <!-- 错误提示 -->
+        <div v-else-if="error" class="d-flex flex-column align-center justify-center" style="height: 100%;">
+          <v-icon size="64" color="error" class="mb-4">mdi-alert-circle-outline</v-icon>
+          <p class="text-body-1 text-center mb-4">{{ error }}</p>
+        </div>
+        
+        <!-- 无内容提示 -->
+        <div v-else class="d-flex flex-column align-center justify-center" style="height: 100%;">
+          <v-icon size="64" color="warning" class="mb-4">mdi-file-question-outline</v-icon>
+          <p class="text-body-1 text-center mb-4">该插件未提供文档链接或GitHub仓库地址。<br>请查看插件市场或联系插件作者获取更多信息。</p>
+        </div>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" variant="tonal" @click="$emit('update:show', false)">
+          关闭
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style>
+.markdown-body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  padding: 8px 0;
+  color: #24292e;
+}
+
+.markdown-body h1, 
+.markdown-body h2, 
+.markdown-body h3, 
+.markdown-body h4, 
+.markdown-body h5, 
+.markdown-body h6 {
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-body h1 {
+  font-size: 2em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 0.3em;
+}
+
+.markdown-body h2 {
+  font-size: 1.5em;
+  border-bottom: 1px solid #eaecef;
+  padding-bottom: 0.3em;
+}
+
+.markdown-body p {
+  margin-top: 0;
+  margin-bottom: 16px;
+}
+
+.markdown-body code {
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 85%;
+}
+
+.markdown-body pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+  margin-bottom: 16px;
+}
+
+.markdown-body pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 2em;
+  margin-bottom: 16px;
+}
+
+.markdown-body img {
+  max-width: 100%;
+  margin: 8px 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 3px;
+}
+
+.markdown-body blockquote {
+  padding: 0 1em;
+  color: #6a737d;
+  border-left: 0.25em solid #dfe2e5;
+  margin-bottom: 16px;
+}
+
+.markdown-body a {
+  color: #0366d6;
+  text-decoration: none;
+}
+
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+
+.markdown-body table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  width: 100%;
+  overflow: auto;
+  margin-bottom: 16px;
+}
+
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid #dfe2e5;
+}
+
+.markdown-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #c6cbd1;
+}
+
+.markdown-body table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+
+.markdown-body hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: #e1e4e8;
+  border: 0;
+}
+</style>
+
+<script>
+export default {
+  name: 'ReadmeDialog',
+  computed: {
+    _show: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      }
+    }
+  }
+}
+</script> 
\ No newline at end of file
diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index 1b1171b1..33f78dd0 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -3,6 +3,7 @@ import ExtensionCard from '@/components/shared/ExtensionCard.vue';
 import WaitingForRestart from '@/components/shared/WaitingForRestart.vue';
 import AstrBotConfig from '@/components/shared/AstrBotConfig.vue';
 import ConsoleDisplayer from '@/components/shared/ConsoleDisplayer.vue';
+import ReadmeDialog from '@/components/shared/ReadmeDialog.vue';
 import axios from 'axios';
 import { useCommonStore } from '@/stores/common';
 
@@ -35,6 +36,12 @@ const selectedPlugin = ref({});
 const curr_namespace = ref("");
 const wfr = ref(null);
 
+const readmeDialog = reactive({
+  show: false,
+  pluginName: '',
+  repoUrl: null
+});
+
 const plugin_handler_info_headers = [
   { title: '行为类型', key: 'event_type_h' },
   { title: '描述', key: 'desc', maxWidth: '250px' },
@@ -225,6 +232,12 @@ const reloadPlugin = async (plugin_name) => {
   }
 };
 
+const viewReadme = (plugin) => {
+  readmeDialog.pluginName = plugin.name;
+  readmeDialog.repoUrl = plugin.repo;
+  readmeDialog.show = true;
+};
+
 // 生命周期
 onMounted(async () => {
   await getExtensions();
@@ -279,7 +292,8 @@ onMounted(async () => {
         @update="updateExtension(extension.name)"
         @reload="reloadPlugin(extension.name)"
         @toggle-activation="extension.activated ? pluginOff(extension) : pluginOn(extension)"
-        @view-handlers="showPluginInfo(extension)">
+        @view-handlers="showPluginInfo(extension)"
+        @view-readme="viewReadme(extension)">
       </ExtensionCard>
     </v-col>
   </v-row>
@@ -365,4 +379,10 @@ onMounted(async () => {
   </v-snackbar>
 
   <WaitingForRestart ref="wfr"></WaitingForRestart>
+  
+  <ReadmeDialog
+    v-model:show="readmeDialog.show"
+    :plugin-name="readmeDialog.pluginName"
+    :repo-url="readmeDialog.repoUrl"
+  />
 </template>
\ No newline at end of file