From 9322218880d5f29d33e32318da68b52541d5b1c0 Mon Sep 17 00:00:00 2001
From: clown145 <kisaki520@qq.com>
Date: Tue, 6 Jan 2026 12:53:14 +0800
Subject: [PATCH] feat: supports to display plugin CHANGELOG.md (#4337)

* feat: optimize plugin update changelog feature, refactor to reuse ReadmeDialog and support independent view entry

* fix: distinguish error state from empty state in ReadmeDialog
---
 astrbot/dashboard/routes/plugin.py            |   50 +
 .../src/components/shared/ExtensionCard.vue   |  258 ++-
 .../src/components/shared/ReadmeDialog.vue    |  351 ++--
 .../src/i18n/locales/en-US/core/common.json   |    8 +
 .../locales/en-US/features/extension.json     |    5 +-
 .../src/i18n/locales/zh-CN/core/common.json   |    8 +
 .../locales/zh-CN/features/extension.json     |    3 +
 dashboard/src/views/ExtensionPage.vue         | 1645 ++++++++++++-----
 8 files changed, 1656 insertions(+), 672 deletions(-)

diff --git a/astrbot/dashboard/routes/plugin.py b/astrbot/dashboard/routes/plugin.py
index fd808c6c9..e6c03fe89 100644
--- a/astrbot/dashboard/routes/plugin.py
+++ b/astrbot/dashboard/routes/plugin.py
@@ -55,6 +55,7 @@ class PluginRoute(Route):
             "/plugin/on": ("POST", self.on_plugin),
             "/plugin/reload": ("POST", self.reload_plugins),
             "/plugin/readme": ("GET", self.get_plugin_readme),
+            "/plugin/changelog": ("GET", self.get_plugin_changelog),
             "/plugin/source/get": ("GET", self.get_custom_source),
             "/plugin/source/save": ("POST", self.save_custom_source),
         }
@@ -615,6 +616,55 @@ class PluginRoute(Route):
             logger.error(f"/api/plugin/readme: {traceback.format_exc()}")
             return Response().error(f"读取README文件失败: {e!s}").__dict__
 
+    async def get_plugin_changelog(self):
+        """获取插件更新日志
+
+        读取插件目录下的 CHANGELOG.md 文件内容。
+        """
+        plugin_name = request.args.get("name")
+        logger.debug(f"正在获取插件 {plugin_name} 的更新日志")
+
+        if not plugin_name:
+            return Response().error("插件名称不能为空").__dict__
+
+        # 查找插件
+        plugin_obj = None
+        for plugin in self.plugin_manager.context.get_all_stars():
+            if plugin.name == plugin_name:
+                plugin_obj = plugin
+                break
+
+        if not plugin_obj:
+            return Response().error(f"插件 {plugin_name} 不存在").__dict__
+
+        if not plugin_obj.root_dir_name:
+            return Response().error(f"插件 {plugin_name} 目录不存在").__dict__
+
+        plugin_dir = os.path.join(
+            self.plugin_manager.plugin_store_path,
+            plugin_obj.root_dir_name,
+        )
+
+        # 尝试多种可能的文件名
+        changelog_names = ["CHANGELOG.md", "changelog.md", "CHANGELOG", "changelog"]
+        for name in changelog_names:
+            changelog_path = os.path.join(plugin_dir, name)
+            if os.path.isfile(changelog_path):
+                try:
+                    with open(changelog_path, encoding="utf-8") as f:
+                        changelog_content = f.read()
+                    return (
+                        Response()
+                        .ok({"content": changelog_content}, "成功获取更新日志")
+                        .__dict__
+                    )
+                except Exception as e:
+                    logger.error(f"/api/plugin/changelog: {traceback.format_exc()}")
+                    return Response().error(f"读取更新日志失败: {e!s}").__dict__
+
+        # 没有找到 changelog 文件，返回 ok 但 content 为 null
+        return Response().ok({"content": None}, "该插件没有更新日志文件").__dict__
+
     async def get_custom_source(self):
         """获取自定义插件源"""
         sources = await sp.global_get("custom_plugin_sources", [])
diff --git a/dashboard/src/components/shared/ExtensionCard.vue b/dashboard/src/components/shared/ExtensionCard.vue
index 3c23d1f8f..3ad621b29 100644
--- a/dashboard/src/components/shared/ExtensionCard.vue
+++ b/dashboard/src/components/shared/ExtensionCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, computed, inject } from 'vue';
+import { ref, computed, inject } from "vue";
 import { useCustomizerStore } from "@/stores/customizer";
-import { useModuleI18n } from '@/i18n/composables';
-import UninstallConfirmDialog from './UninstallConfirmDialog.vue';
+import { useModuleI18n } from "@/i18n/composables";
+import UninstallConfirmDialog from "./UninstallConfirmDialog.vue";
 
 const props = defineProps({
   extension: {
@@ -21,80 +21,114 @@ const props = defineProps({
 
 // 定义要发送到父组件的事件
 const emit = defineEmits([
-  'configure',
-  'update',
-  'reload',
-  'install',
-  'uninstall',
-  'toggle-activation',
-  'view-handlers',
-  'view-readme'
+  "configure",
+  "update",
+  "reload",
+  "install",
+  "uninstall",
+  "toggle-activation",
+  "view-handlers",
+  "view-readme",
+  "view-changelog",
 ]);
 
 const reveal = ref(false);
 const showUninstallDialog = ref(false);
 
 // 国际化
-const { tm } = useModuleI18n('features/extension');
+const { tm } = useModuleI18n("features/extension");
 
 // 操作函数
 const configure = () => {
-  emit('configure', props.extension);
+  emit("configure", props.extension);
 };
 
 const updateExtension = () => {
-  emit('update', props.extension);
+  emit("update", props.extension);
 };
 
 const reloadExtension = () => {
-  emit('reload', props.extension);
+  emit("reload", props.extension);
 };
 
 const $confirm = inject("$confirm");
 
 const installExtension = async () => {
-  emit('install', props.extension);
+  emit("install", props.extension);
 };
 
 const uninstallExtension = async () => {
   showUninstallDialog.value = true;
 };
 
-const handleUninstallConfirm = (options: { deleteConfig: boolean; deleteData: boolean }) => {
+const handleUninstallConfirm = (options: {
+  deleteConfig: boolean;
+  deleteData: boolean;
+}) => {
   emit("uninstall", props.extension, options);
 };
 
 const toggleActivation = () => {
-  emit('toggle-activation', props.extension);
+  emit("toggle-activation", props.extension);
 };
 
 const viewHandlers = () => {
-  emit('view-handlers', props.extension);
+  emit("view-handlers", props.extension);
 };
 
 const viewReadme = () => {
-  emit('view-readme', props.extension);
+  emit("view-readme", props.extension);
+};
+
+const viewChangelog = () => {
+  emit("view-changelog", props.extension);
 };
 </script>
 
 <template>
-  <v-card class="mx-auto d-flex flex-column" elevation="0" :style="{
-    position: 'relative',
-    backgroundColor: useCustomizerStore().uiTheme === 'PurpleTheme' ? marketMode ? '#f8f0dd' : '#ffffff' : '#282833',
-    color: useCustomizerStore().uiTheme === 'PurpleTheme' ? '#000000dd' : '#ffffff'
-  }">
-    <v-card-text style="padding: 16px; padding-bottom: 0px; display: flex; gap: 16px; width: 100%;">
+  <v-card
+    class="mx-auto d-flex flex-column"
+    elevation="0"
+    :style="{
+      position: 'relative',
+      backgroundColor:
+        useCustomizerStore().uiTheme === 'PurpleTheme'
+          ? marketMode
+            ? '#f8f0dd'
+            : '#ffffff'
+          : '#282833',
+      color:
+        useCustomizerStore().uiTheme === 'PurpleTheme'
+          ? '#000000dd'
+          : '#ffffff',
+    }"
+  >
+    <v-card-text
+      style="
+        padding: 16px;
+        padding-bottom: 0px;
+        display: flex;
+        gap: 16px;
+        width: 100%;
+      "
+    >
       <div v-if="extension?.logo">
-        <img :src="extension.logo" :alt="extension.name" cover width="100"/>
+        <img :src="extension.logo" :alt="extension.name" cover width="100" />
       </div>
 
-      <div style="overflow-x: auto;">
+      <div style="overflow-x: auto">
         <!-- Top-right three-dot menu -->
-        <div style="position: absolute; right: 8px; top: 8px; z-index: 5;">
+        <div style="position: absolute; right: 8px; top: 8px; z-index: 5">
           <v-menu offset-y>
             <template v-slot:activator="{ props: menuProps }">
-              <v-btn icon variant="text" aria-label="more" v-if="extension?.repo" :href="extension?.repo"
-                target="_blank">
+              <v-btn
+                icon
+                variant="text"
+                aria-label="more"
+                v-if="extension?.repo"
+                :href="extension?.repo"
+                target="_blank"
+              >
                 <v-icon icon="mdi-github"></v-icon>
               </v-btn>
               <v-btn v-bind="menuProps" icon variant="text" aria-label="more">
@@ -104,16 +138,30 @@ const viewReadme = () => {
 
             <v-list>
               <v-list-item @click="viewReadme">
-                <v-list-item-title>📄 {{ tm('buttons.viewDocs') }}</v-list-item-title>
+                <v-list-item-title
+                  >📄 {{ tm("buttons.viewDocs") }}</v-list-item-title
+                >
               </v-list-item>
 
-              <v-list-item v-if="marketMode && !extension?.installed" @click="installExtension">
+              <v-list-item v-if="!marketMode" @click="viewChangelog">
+                <v-list-item-title
+                  >📝 {{ tm("pluginChangelog.menuTitle") }}</v-list-item-title
+                >
+              </v-list-item>
+
+              <v-list-item
+                v-if="marketMode && !extension?.installed"
+                @click="installExtension"
+              >
                 <v-list-item-title>
-                  {{ tm('buttons.install') }}</v-list-item-title>
+                  {{ tm("buttons.install") }}</v-list-item-title
+                >
               </v-list-item>
 
               <v-list-item v-if="marketMode && extension?.installed">
-                <v-list-item-title class="text--disabled">{{ tm('status.installed') }}</v-list-item-title>
+                <v-list-item-title class="text--disabled">{{
+                  tm("status.installed")
+                }}</v-list-item-title>
               </v-list-item>
 
               <!-- Divider between market actions and plugin actions -->
@@ -122,34 +170,49 @@ const viewReadme = () => {
               <template v-if="!marketMode">
                 <v-list-item @click="configure">
                   <v-list-item-title>
-                    {{ tm('card.actions.pluginConfig') }}</v-list-item-title>
+                    {{ tm("card.actions.pluginConfig") }}</v-list-item-title
+                  >
                 </v-list-item>
 
                 <v-list-item @click="uninstallExtension">
-                  <v-list-item-title class="text-error">{{ tm('card.actions.uninstallPlugin') }}</v-list-item-title>
+                  <v-list-item-title class="text-error">{{
+                    tm("card.actions.uninstallPlugin")
+                  }}</v-list-item-title>
                 </v-list-item>
 
                 <v-list-item @click="reloadExtension">
-                  <v-list-item-title>{{ tm('card.actions.reloadPlugin') }}</v-list-item-title>
+                  <v-list-item-title>{{
+                    tm("card.actions.reloadPlugin")
+                  }}</v-list-item-title>
                 </v-list-item>
 
                 <v-list-item @click="toggleActivation">
                   <v-list-item-title>
-                    {{ extension.activated ? tm('buttons.disable') : tm('buttons.enable') }}{{
-                      tm('card.actions.togglePlugin') }}
+                    {{
+                      extension.activated
+                        ? tm("buttons.disable")
+                        : tm("buttons.enable")
+                    }}{{ tm("card.actions.togglePlugin") }}
                   </v-list-item-title>
                 </v-list-item>
 
                 <v-list-item @click="viewHandlers">
-                  <v-list-item-title>{{ tm('card.actions.viewHandlers') }} ({{ extension.handlers.length
-                  }})</v-list-item-title>
+                  <v-list-item-title
+                    >{{ tm("card.actions.viewHandlers") }} ({{
+                      extension.handlers.length
+                    }})</v-list-item-title
+                  >
                 </v-list-item>
 
                 <v-list-item @click="updateExtension">
                   <v-list-item-title>
-                    {{ extension.has_update 
-                        ? tm('card.actions.updateTo') + ' ' + extension.online_version 
-                        : tm('card.actions.reinstall') }}
+                    {{
+                      extension.has_update
+                        ? tm("card.actions.updateTo") +
+                          " " +
+                          extension.online_version
+                        : tm("card.actions.reinstall")
+                    }}
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -157,23 +220,59 @@ const viewReadme = () => {
           </v-menu>
         </div>
 
-        <div style="width: 100%; margin-bottom: 24px;">
+        <div style="width: 100%; margin-bottom: 24px">
           <!-- 最多一行 -->
-          <div class="text-caption"
-            style="color: gray; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 84px;">
+          <div
+            class="text-caption"
+            style="
+              color: gray;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              margin-right: 84px;
+            "
+          >
             {{ extension.author }} / {{ extension.name }}
           </div>
-          <p class="text-h3 font-weight-black extension-title" :class="{ 'text-h4': $vuetify.display.xs }">
-            <span class="extension-title__text">{{ extension.display_name?.length ? extension.display_name : extension.name }}</span>
-            <v-tooltip location="top" v-if="extension?.has_update && !marketMode">
+          <p
+            class="text-h3 font-weight-black extension-title"
+            :class="{ 'text-h4': $vuetify.display.xs }"
+          >
+            <span class="extension-title__text">{{
+              extension.display_name?.length
+                ? extension.display_name
+                : extension.name
+            }}</span>
+            <v-tooltip
+              location="top"
+              v-if="extension?.has_update && !marketMode"
+            >
               <template v-slot:activator="{ props: tooltipProps }">
-                <v-icon v-bind="tooltipProps" color="warning" class="ml-2" icon="mdi-update" size="small"></v-icon>
+                <v-icon
+                  v-bind="tooltipProps"
+                  color="warning"
+                  class="ml-2"
+                  icon="mdi-update"
+                  size="small"
+                ></v-icon>
               </template>
-              <span>{{ tm("card.status.hasUpdate") }}: {{ extension.online_version }}</span>
+              <span
+                >{{ tm("card.status.hasUpdate") }}:
+                {{ extension.online_version }}</span
+              >
             </v-tooltip>
-            <v-tooltip location="top" v-if="!extension.activated && !marketMode">
+            <v-tooltip
+              location="top"
+              v-if="!extension.activated && !marketMode"
+            >
               <template v-slot:activator="{ props: tooltipProps }">
-                <v-icon v-bind="tooltipProps" color="error" class="ml-2" icon="mdi-cancel" size="small"></v-icon>
+                <v-icon
+                  v-bind="tooltipProps"
+                  color="error"
+                  class="ml-2"
+                  icon="mdi-cancel"
+                  size="small"
+                ></v-icon>
               </template>
               <span>{{ tm("card.status.disabled") }}</span>
             </v-tooltip>
@@ -184,34 +283,58 @@ const viewReadme = () => {
               <v-icon icon="mdi-source-branch" start></v-icon>
               {{ extension.version }}
             </v-chip>
-            <v-chip v-if="extension?.has_update" color="warning" label size="small" class="ml-2">
+            <v-chip
+              v-if="extension?.has_update"
+              color="warning"
+              label
+              size="small"
+              class="ml-2"
+            >
               <v-icon icon="mdi-arrow-up-bold" start></v-icon>
               {{ extension.online_version }}
             </v-chip>
-            <v-chip color="primary" label size="small" class="ml-2" v-if="extension.handlers?.length" @click="viewHandlers" style="cursor: pointer;">
+            <v-chip
+              color="primary"
+              label
+              size="small"
+              class="ml-2"
+              v-if="extension.handlers?.length"
+              @click="viewHandlers"
+              style="cursor: pointer"
+            >
               <v-icon icon="mdi-cogs" start></v-icon>
-              {{ extension.handlers?.length }}{{ tm("card.status.handlersCount") }}
+              {{ extension.handlers?.length
+              }}{{ tm("card.status.handlersCount") }}
             </v-chip>
-            <v-chip v-for="tag in extension.tags" :key="tag" :color="tag === 'danger' ? 'error' : 'primary'" label
-              size="small" class="ml-2">
-              {{ tag === 'danger' ? tm('tags.danger') : tag }}
+            <v-chip
+              v-for="tag in extension.tags"
+              :key="tag"
+              :color="tag === 'danger' ? 'error' : 'primary'"
+              label
+              size="small"
+              class="ml-2"
+            >
+              {{ tag === "danger" ? tm("tags.danger") : tag }}
             </v-chip>
           </div>
 
-          <div class="mt-2" :class="{ 'text-caption': $vuetify.display.xs }" style="overflow-y: auto; height: 70px; font-size: 90%;">
+          <div
+            class="mt-2"
+            :class="{ 'text-caption': $vuetify.display.xs }"
+            style="overflow-y: auto; height: 70px; font-size: 90%"
+          >
             {{ extension.desc }}
           </div>
         </div>
       </div>
-
     </v-card-text>
 
     <v-card-actions class="extension-actions">
       <v-btn color="primary" size="small" @click="viewReadme">
-        {{ tm('buttons.viewDocs') }}
+        {{ tm("buttons.viewDocs") }}
       </v-btn>
-      <v-btn v-if="!marketMode" color="primary"  size="small" @click="configure">
-        {{ tm('card.actions.pluginConfig') }}
+      <v-btn v-if="!marketMode" color="primary" size="small" @click="configure">
+        {{ tm("card.actions.pluginConfig") }}
       </v-btn>
     </v-card-actions>
   </v-card>
@@ -221,7 +344,6 @@ const viewReadme = () => {
     v-model="showUninstallDialog"
     @confirm="handleUninstallConfirm"
   />
-
 </template>
 
 <style scoped>
@@ -241,7 +363,7 @@ const viewReadme = () => {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding-top: 6px
+  padding-top: 6px;
 }
 
 @media (max-width: 600px) {
diff --git a/dashboard/src/components/shared/ReadmeDialog.vue b/dashboard/src/components/shared/ReadmeDialog.vue
index 86b4514c0..12b57363c 100644
--- a/dashboard/src/components/shared/ReadmeDialog.vue
+++ b/dashboard/src/components/shared/ReadmeDialog.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref, watch, onMounted, computed } from 'vue';
-import axios from 'axios';
-import { MarkdownRender, enableKatex, enableMermaid } from 'markstream-vue';
-import 'markstream-vue/index.css';
-import 'katex/dist/katex.min.css';
-import 'highlight.js/styles/github.css';
-import { useI18n } from '@/i18n/composables';
+import { ref, watch, onMounted, computed } from "vue";
+import axios from "axios";
+import { MarkdownRender, enableKatex, enableMermaid } from "markstream-vue";
+import "markstream-vue/index.css";
+import "katex/dist/katex.min.css";
+import "highlight.js/styles/github.css";
+import { useI18n } from "@/i18n/composables";
 
 enableKatex();
 enableMermaid();
@@ -13,19 +13,25 @@ enableMermaid();
 const props = defineProps({
   show: {
     type: Boolean,
-    default: false
+    default: false,
   },
   pluginName: {
     type: String,
-    default: ''
+    default: "",
   },
   repoUrl: {
     type: String,
-    default: null
-  }
+    default: null,
+  },
+  // 模式: 'readme' 或 'changelog'
+  mode: {
+    type: String,
+    default: "readme",
+    validator: (value) => ["readme", "changelog"].includes(value),
+  },
 });
 
-const emit = defineEmits(['update:show']);
+const emit = defineEmits(["update:show"]);
 
 // 国际化
 const { t } = useI18n();
@@ -33,39 +39,83 @@ const { t } = useI18n();
 const content = ref(null);
 const error = ref(null);
 const loading = ref(false);
+const isEmpty = ref(false); // 请求成功但无内容
+
+// 根据模式返回不同的配置
+const modeConfig = computed(() => {
+  if (props.mode === "changelog") {
+    return {
+      title: t("core.common.changelog.title"),
+      loading: t("core.common.changelog.loading"),
+      emptyTitle: t("core.common.changelog.empty.title"),
+      emptySubtitle: t("core.common.changelog.empty.subtitle"),
+      apiPath: "/api/plugin/changelog",
+    };
+  }
+  return {
+    title: t("core.common.readme.title"),
+    loading: t("core.common.readme.loading"),
+    emptyTitle: t("core.common.readme.empty.title"),
+    emptySubtitle: t("core.common.readme.empty.subtitle"),
+    apiPath: "/api/plugin/readme",
+  };
+});
 
 // 监听show的变化，当显示对话框时加载内容
-watch(() => props.show, (newVal) => {
-  if (newVal && props.pluginName) {
-    fetchReadme();
-  }
-});
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal && props.pluginName) {
+      fetchContent();
+    }
+  },
+);
 
 // 监听pluginName的变化
-watch(() => props.pluginName, (newVal) => {
-  if (props.show && newVal) {
-    fetchReadme();
-  }
-});
+watch(
+  () => props.pluginName,
+  (newVal) => {
+    if (props.show && newVal) {
+      fetchContent();
+    }
+  },
+);
 
-// 获取README内容
-async function fetchReadme() {
+// 监听mode的变化
+watch(
+  () => props.mode,
+  () => {
+    if (props.show && props.pluginName) {
+      fetchContent();
+    }
+  },
+);
+
+// 获取内容
+async function fetchContent() {
   if (!props.pluginName) return;
-  
+
   loading.value = true;
   content.value = null;
   error.value = null;
-  
+  isEmpty.value = false;
+
   try {
-    // 从本地文件获取README
-    const res = await axios.get(`/api/plugin/readme?name=${props.pluginName}`);
-    if (res.data.status === 'ok') {
-      content.value = res.data.data.content;
+    const res = await axios.get(
+      `${modeConfig.value.apiPath}?name=${props.pluginName}`,
+    );
+    if (res.data.status === "ok") {
+      if (res.data.data.content) {
+        content.value = res.data.data.content;
+      } else {
+        // 请求成功但无内容
+        isEmpty.value = true;
+      }
     } else {
-      error.value = res.data.message || t('core.common.readme.errors.fetchFailed');
+      error.value = res.data.message;
     }
   } catch (err) {
-    error.value = err.message || t('core.common.readme.errors.fetchError');
+    error.value = err.message;
   } finally {
     loading.value = false;
   }
@@ -74,14 +124,13 @@ async function fetchReadme() {
 // 打开GitHub中的仓库
 function openRepoInNewTab() {
   if (props.repoUrl) {
-    window.open(props.repoUrl, '_blank');
+    window.open(props.repoUrl, "_blank");
   }
 }
 
-
-// 刷新README内容
-function refreshReadme() {
-  fetchReadme();
+// 刷新内容
+function refreshContent() {
+  fetchContent();
 }
 
 // 计算属性处理双向绑定
@@ -90,8 +139,8 @@ const _show = computed({
     return props.show;
   },
   set(value) {
-    emit('update:show', value);
-  }
+    emit("update:show", value);
+  },
 });
 </script>
 
@@ -99,59 +148,98 @@ const _show = computed({
   <v-dialog v-model="_show" width="800">
     <v-card>
       <v-card-title class="d-flex justify-space-between align-center">
-        <span class="text-h5">{{ t('core.common.readme.title') }}</span>
+        <span class="text-h5">{{ modeConfig.title }}</span>
         <v-btn icon @click="$emit('update:show', false)" variant="text">
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </v-card-title>
       <v-divider></v-divider>
-      <v-card-text style="height: 70vh; overflow-y: auto;">
+      <v-card-text style="height: 70vh; overflow-y: auto">
         <div class="d-flex justify-space-between mb-4">
-          <v-btn 
+          <v-btn
             v-if="repoUrl"
-            color="primary" 
+            color="primary"
             prepend-icon="mdi-github"
-            @click="openRepoInNewTab()" 
+            @click="openRepoInNewTab()"
           >
-            {{ t('core.common.readme.buttons.viewOnGithub') }}
+            {{ t("core.common.readme.buttons.viewOnGithub") }}
           </v-btn>
           <v-btn
             color="secondary"
             prepend-icon="mdi-refresh"
-            @click="refreshReadme()"
+            @click="refreshContent()"
           >
-            {{ t('core.common.readme.buttons.refresh') }}
+            {{ t("core.common.readme.buttons.refresh") }}
           </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">{{ t('core.common.readme.loading') }}</p>
+        <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">{{ modeConfig.loading }}</p>
         </div>
-        
+
         <!-- 内容显示 -->
         <div v-else-if="content" class="markdown-body">
-          <MarkdownRender :content="content" :typewriter="false" class="markdown-content" />
+          <MarkdownRender
+            :content="content"
+            :typewriter="false"
+            class="markdown-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
+          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-2">
+            {{ t("core.common.error") }}
+          </p>
+          <p class="text-body-2 text-center text-medium-emphasis">
+            {{ 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">{{ t('core.common.readme.empty.title') }}<br>{{ t('core.common.readme.empty.subtitle') }}</p>
+        <div
+          v-else-if="isEmpty"
+          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-2">
+            {{ modeConfig.emptyTitle }}
+          </p>
+          <p class="text-body-2 text-center text-medium-emphasis">
+            {{ modeConfig.emptySubtitle }}
+          </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)">
-          {{ t('core.common.close') }}
+        <v-btn
+          color="primary"
+          variant="tonal"
+          @click="$emit('update:show', false)"
+        >
+          {{ t("core.common.close") }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -160,10 +248,11 @@ const _show = computed({
 
 <style>
 .markdown-body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-    line-height: 1.6;
-    padding: 8px 0;
-    color: var(--v-theme-secondaryText);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif;
+  line-height: 1.6;
+  padding: 8px 0;
+  color: var(--v-theme-secondaryText);
 }
 
 .markdown-body h1,
@@ -172,120 +261,120 @@ const _show = computed({
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    font-weight: 600;
-    line-height: 1.25;
+  margin-top: 24px;
+  margin-bottom: 16px;
+  font-weight: 600;
+  line-height: 1.25;
 }
 
 .markdown-body h1 {
-    font-size: 2em;
-    border-bottom: 1px solid var(--v-theme-border);
-    padding-bottom: 0.3em;
+  font-size: 2em;
+  border-bottom: 1px solid var(--v-theme-border);
+  padding-bottom: 0.3em;
 }
 
 .markdown-body h2 {
-    font-size: 1.5em;
-    border-bottom: 1px solid var(--v-theme-border);
-    padding-bottom: 0.3em;
+  font-size: 1.5em;
+  border-bottom: 1px solid var(--v-theme-border);
+  padding-bottom: 0.3em;
 }
 
 .markdown-body p {
-    margin-top: 0;
-    margin-bottom: 16px;
+  margin-top: 0;
+  margin-bottom: 16px;
 }
 
 .markdown-body code {
-    padding: 0.2em 0.4em;
-    margin: 0;
-    background-color: var(--v-theme-codeBg);
-    border-radius: 3px;
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-    font-size: 85%;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: var(--v-theme-codeBg);
+  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: var(--v-theme-containerBg);
-    border-radius: 3px;
-    margin-bottom: 16px;
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: var(--v-theme-containerBg);
+  border-radius: 3px;
+  margin-bottom: 16px;
 }
 
 .markdown-body pre code {
-    background-color: transparent;
-    padding: 0;
+  background-color: transparent;
+  padding: 0;
 }
 
 .markdown-body ul,
 .markdown-body ol {
-    padding-left: 2em;
-    margin-bottom: 16px;
+  padding-left: 2em;
+  margin-bottom: 16px;
 }
 
 .markdown-body img {
-    max-width: 100%;
-    margin: 8px 0;
-    box-sizing: border-box;
-    background-color: var(--v-theme-background);
-    border-radius: 3px;
+  max-width: 100%;
+  margin: 8px 0;
+  box-sizing: border-box;
+  background-color: var(--v-theme-background);
+  border-radius: 3px;
 }
 
 .markdown-body blockquote {
-    padding: 0 1em;
-    color: var(--v-theme-secondaryText);
-    border-left: 0.25em solid var(--v-theme-border);
-    margin-bottom: 16px;
+  padding: 0 1em;
+  color: var(--v-theme-secondaryText);
+  border-left: 0.25em solid var(--v-theme-border);
+  margin-bottom: 16px;
 }
 
 .markdown-body a {
-    color: var(--v-theme-primary);
-    text-decoration: none;
+  color: var(--v-theme-primary);
+  text-decoration: none;
 }
 
 .markdown-body a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 .markdown-body table {
-    border-spacing: 0;
-    border-collapse: collapse;
-    width: 100%;
-    overflow: auto;
-    margin-bottom: 16px;
+  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 var(--v-theme-background);
+  padding: 6px 13px;
+  border: 1px solid var(--v-theme-background);
 }
 
 .markdown-body table tr {
-    background-color: var(--v-theme-surface);
-    border-top: 1px solid var(--v-theme-border);
+  background-color: var(--v-theme-surface);
+  border-top: 1px solid var(--v-theme-border);
 }
 
 .markdown-body table tr:nth-child(2n) {
-    background-color: var(--v-theme-background);
+  background-color: var(--v-theme-background);
 }
 
 .markdown-body hr {
-    height: 0.25em;
-    padding: 0;
-    margin: 24px 0;
-    background-color: var(--v-theme-containerBg);
-    border: 0;
+  height: 0.25em;
+  padding: 0;
+  margin: 24px 0;
+  background-color: var(--v-theme-containerBg);
+  border: 0;
 }
 </style>
 
 <script>
 export default {
-  name: 'ReadmeDialog',
+  name: "ReadmeDialog",
   components: {
-    MarkdownRender
+    MarkdownRender,
   },
   computed: {
     _show: {
@@ -293,9 +382,9 @@ export default {
         return this.show;
       },
       set(value) {
-        this.$emit('update:show', value);
-      }
-    }
-  }
-}
-</script> 
+        this.$emit("update:show", value);
+      },
+    },
+  },
+};
+</script>
diff --git a/dashboard/src/i18n/locales/en-US/core/common.json b/dashboard/src/i18n/locales/en-US/core/common.json
index 70d545d21..a8c27bdc8 100644
--- a/dashboard/src/i18n/locales/en-US/core/common.json
+++ b/dashboard/src/i18n/locales/en-US/core/common.json
@@ -62,6 +62,14 @@
       "subtitle": "Please check the extension marketplace or contact the extension author for more information."
     }
   },
+  "changelog": {
+    "title": "Changelog",
+    "loading": "Loading changelog...",
+    "empty": {
+      "title": "No changelog available for this plugin",
+      "subtitle": "Developers can add a CHANGELOG.md file in the plugin directory to provide changelog"
+    }
+  },
   "editor": {
     "fullscreen": "Fullscreen Edit",
     "editingTitle": "Editing Content"
diff --git a/dashboard/src/i18n/locales/en-US/features/extension.json b/dashboard/src/i18n/locales/en-US/features/extension.json
index 275ff596d..94de58b97 100644
--- a/dashboard/src/i18n/locales/en-US/features/extension.json
+++ b/dashboard/src/i18n/locales/en-US/features/extension.json
@@ -212,5 +212,8 @@
     "pairs": "command conflicts",
     "goToManage": "Go to Manage",
     "later": "Later"
+  },
+  "pluginChangelog": {
+    "menuTitle": "View Changelog"
   }
-}
\ No newline at end of file
+}
diff --git a/dashboard/src/i18n/locales/zh-CN/core/common.json b/dashboard/src/i18n/locales/zh-CN/core/common.json
index 21ba41fab..4e1712f40 100644
--- a/dashboard/src/i18n/locales/zh-CN/core/common.json
+++ b/dashboard/src/i18n/locales/zh-CN/core/common.json
@@ -62,6 +62,14 @@
       "subtitle": "请查看插件市场或联系插件作者获取更多信息。"
     }
   },
+  "changelog": {
+    "title": "更新日志",
+    "loading": "正在加载更新日志...",
+    "empty": {
+      "title": "该插件未提供更新日志",
+      "subtitle": "开发者可在插件目录下添加 CHANGELOG.md 文件来提供更新日志"
+    }
+  },
   "editor": {
     "fullscreen": "全屏编辑",
     "editingTitle": "编辑内容"
diff --git a/dashboard/src/i18n/locales/zh-CN/features/extension.json b/dashboard/src/i18n/locales/zh-CN/features/extension.json
index e1c5a6c46..a493f575a 100644
--- a/dashboard/src/i18n/locales/zh-CN/features/extension.json
+++ b/dashboard/src/i18n/locales/zh-CN/features/extension.json
@@ -212,5 +212,8 @@
     "pairs": "对指令冲突",
     "goToManage": "前往处理",
     "later": "稍后处理"
+  },
+  "pluginChangelog": {
+    "menuTitle": "查看更新日志"
   }
 }
diff --git a/dashboard/src/views/ExtensionPage.vue b/dashboard/src/views/ExtensionPage.vue
index 8406bcd95..4424c1254 100644
--- a/dashboard/src/views/ExtensionPage.vue
+++ b/dashboard/src/views/ExtensionPage.vue
@@ -1,35 +1,35 @@
 <script setup>
-import ExtensionCard from '@/components/shared/ExtensionCard.vue';
-import AstrBotConfig from '@/components/shared/AstrBotConfig.vue';
-import ConsoleDisplayer from '@/components/shared/ConsoleDisplayer.vue';
-import ReadmeDialog from '@/components/shared/ReadmeDialog.vue';
-import ProxySelector from '@/components/shared/ProxySelector.vue';
-import UninstallConfirmDialog from '@/components/shared/UninstallConfirmDialog.vue';
-import McpServersSection from '@/components/extension/McpServersSection.vue';
-import ComponentPanel from '@/components/extension/componentPanel/index.vue';
-import axios from 'axios';
-import { pinyin } from 'pinyin-pro';
-import { useCommonStore } from '@/stores/common';
-import { useI18n, useModuleI18n } from '@/i18n/composables';
-import defaultPluginIcon from '@/assets/images/plugin_icon.png';
+import ExtensionCard from "@/components/shared/ExtensionCard.vue";
+import AstrBotConfig from "@/components/shared/AstrBotConfig.vue";
+import ConsoleDisplayer from "@/components/shared/ConsoleDisplayer.vue";
+import ReadmeDialog from "@/components/shared/ReadmeDialog.vue";
+import ProxySelector from "@/components/shared/ProxySelector.vue";
+import UninstallConfirmDialog from "@/components/shared/UninstallConfirmDialog.vue";
+import McpServersSection from "@/components/extension/McpServersSection.vue";
+import ComponentPanel from "@/components/extension/componentPanel/index.vue";
+import axios from "axios";
+import { pinyin } from "pinyin-pro";
+import { useCommonStore } from "@/stores/common";
+import { useI18n, useModuleI18n } from "@/i18n/composables";
+import defaultPluginIcon from "@/assets/images/plugin_icon.png";
 
-import { ref, computed, onMounted, reactive, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, computed, onMounted, reactive, watch } from "vue";
+import { useRouter } from "vue-router";
 
 const commonStore = useCommonStore();
 const { t } = useI18n();
-const { tm } = useModuleI18n('features/extension');
+const { tm } = useModuleI18n("features/extension");
 const router = useRouter();
 
 // 检查指令冲突并提示
 const conflictDialog = reactive({
   show: false,
-  count: 0
+  count: 0,
 });
 const checkAndPromptConflicts = async () => {
   try {
-    const res = await axios.get('/api/commands');
-    if (res.data.status === 'ok') {
+    const res = await axios.get("/api/commands");
+    if (res.data.status === "ok") {
       const conflicts = res.data.data.summary?.conflicts || 0;
       if (conflicts > 0) {
         conflictDialog.count = conflicts;
@@ -37,18 +37,18 @@ const checkAndPromptConflicts = async () => {
       }
     }
   } catch (err) {
-    console.debug('Failed to check command conflicts:', err);
+    console.debug("Failed to check command conflicts:", err);
   }
 };
 const handleConflictConfirm = () => {
-  activeTab.value = 'commands';
+  activeTab.value = "commands";
 };
 
 const fileInput = ref(null);
-const activeTab = ref('installed');
+const activeTab = ref("installed");
 const extension_data = reactive({
   data: [],
-  message: ""
+  message: "",
 });
 const showReserved = ref(false);
 const snack_message = ref("");
@@ -57,14 +57,14 @@ const snack_success = ref("success");
 const configDialog = ref(false);
 const extension_config = reactive({
   metadata: {},
-  config: {}
+  config: {},
 });
 const pluginMarketData = ref([]);
 const loadingDialog = reactive({
   show: false,
   title: "",
   statusCode: 0, // 0: loading, 1: success, 2: error,
-  result: ""
+  result: "",
 });
 const showPluginInfoDialog = ref(false);
 const selectedPlugin = ref({});
@@ -73,21 +73,28 @@ const updatingAll = ref(false);
 
 const readmeDialog = reactive({
   show: false,
-  pluginName: '',
-  repoUrl: null
+  pluginName: "",
+  repoUrl: null,
 });
 
 // 强制更新确认对话框
 const forceUpdateDialog = reactive({
   show: false,
-  extensionName: ''
+  extensionName: "",
+});
+
+// 插件更新日志对话框（复用 ReadmeDialog）
+const changelogDialog = reactive({
+  show: false,
+  pluginName: "",
+  repoUrl: null,
 });
 
 // 新增变量支持列表视图
 // 从 localStorage 恢复显示模式，默认为 false（卡片视图）
 const getInitialListViewMode = () => {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    return localStorage.getItem('pluginListViewMode') === 'true';
+  if (typeof window !== "undefined" && window.localStorage) {
+    return localStorage.getItem("pluginListViewMode") === "true";
   }
   return false;
 };
@@ -121,18 +128,24 @@ const originalSourceUrl = ref("");
 const extension_url = ref("");
 const dialog = ref(false);
 const upload_file = ref(null);
-const uploadTab = ref('file');
+const uploadTab = ref("file");
 const showPluginFullName = ref(false);
 const marketSearch = ref("");
 const debouncedMarketSearch = ref("");
 const refreshingMarket = ref(false);
-const sortBy = ref('default'); // default, stars, author, updated
-const sortOrder = ref('desc'); // desc (降序) or asc (升序)
+const sortBy = ref("default"); // default, stars, author, updated
+const sortOrder = ref("desc"); // desc (降序) or asc (升序)
 
 // 插件市场拼音搜索
-const normalizeStr = (s) => (s ?? '').toString().toLowerCase().trim();
-const toPinyinText = (s) => pinyin(s ?? '', { toneType: 'none' }).toLowerCase().replace(/\s+/g, '');
-const toInitials = (s) => pinyin(s ?? '', { pattern: 'first', toneType: 'none' }).toLowerCase().replace(/\s+/g, '');
+const normalizeStr = (s) => (s ?? "").toString().toLowerCase().trim();
+const toPinyinText = (s) =>
+  pinyin(s ?? "", { toneType: "none" })
+    .toLowerCase()
+    .replace(/\s+/g, "");
+const toInitials = (s) =>
+  pinyin(s ?? "", { pattern: "first", toneType: "none" })
+    .toLowerCase()
+    .replace(/\s+/g, "");
 const marketCustomFilter = (value, query, item) => {
   const q = normalizeStr(query);
   if (!q) return true;
@@ -156,28 +169,32 @@ const marketCustomFilter = (value, query, item) => {
 };
 
 const plugin_handler_info_headers = computed(() => [
-  { title: tm('table.headers.eventType'), key: 'event_type_h' },
-  { title: tm('table.headers.description'), key: 'desc', maxWidth: '250px' },
-  { title: tm('table.headers.specificType'), key: 'type' },
-  { title: tm('table.headers.trigger'), key: 'cmd' },
+  { title: tm("table.headers.eventType"), key: "event_type_h" },
+  { title: tm("table.headers.description"), key: "desc", maxWidth: "250px" },
+  { title: tm("table.headers.specificType"), key: "type" },
+  { title: tm("table.headers.trigger"), key: "cmd" },
 ]);
 
 // 插件表格的表头定义
 const pluginHeaders = computed(() => [
-  { title: tm('table.headers.name'), key: 'name', width: '200px' },
-  { title: tm('table.headers.description'), key: 'desc', maxWidth: '250px' },
-  { title: tm('table.headers.version'), key: 'version', width: '100px' },
-  { title: tm('table.headers.author'), key: 'author', width: '100px' },
-  { title: tm('table.headers.status'), key: 'activated', width: '100px' },
-  { title: tm('table.headers.actions'), key: 'actions', sortable: false, width: '220px' }
+  { title: tm("table.headers.name"), key: "name", width: "200px" },
+  { title: tm("table.headers.description"), key: "desc", maxWidth: "250px" },
+  { title: tm("table.headers.version"), key: "version", width: "100px" },
+  { title: tm("table.headers.author"), key: "author", width: "100px" },
+  { title: tm("table.headers.status"), key: "activated", width: "100px" },
+  {
+    title: tm("table.headers.actions"),
+    key: "actions",
+    sortable: false,
+    width: "220px",
+  },
 ]);
 
-
 // 过滤要显示的插件
 const filteredExtensions = computed(() => {
   const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
   if (!showReserved.value) {
-    return data.filter(ext => !ext.reserved);
+    return data.filter((ext) => !ext.reserved);
   }
   return data;
 });
@@ -189,14 +206,15 @@ const filteredPlugins = computed(() => {
   }
 
   const search = pluginSearch.value.toLowerCase();
-  return filteredExtensions.value.filter(plugin => {
-    return plugin.name?.toLowerCase().includes(search) ||
+  return filteredExtensions.value.filter((plugin) => {
+    return (
+      plugin.name?.toLowerCase().includes(search) ||
       plugin.desc?.toLowerCase().includes(search) ||
-      plugin.author?.toLowerCase().includes(search);
+      plugin.author?.toLowerCase().includes(search)
+    );
   });
 });
 
-
 // 过滤后的插件市场数据（带搜索）
 const filteredMarketPlugins = computed(() => {
   if (!debouncedMarketSearch.value) {
@@ -204,11 +222,13 @@ const filteredMarketPlugins = computed(() => {
   }
 
   const search = debouncedMarketSearch.value.toLowerCase();
-  return pluginMarketData.value.filter(plugin => {
+  return pluginMarketData.value.filter((plugin) => {
     // 使用自定义过滤器
-    return marketCustomFilter(plugin.name, search, plugin) ||
+    return (
+      marketCustomFilter(plugin.name, search, plugin) ||
       marketCustomFilter(plugin.desc, search, plugin) ||
-      marketCustomFilter(plugin.author, search, plugin);
+      marketCustomFilter(plugin.author, search, plugin)
+    );
   });
 });
 
@@ -217,32 +237,32 @@ const sortedPlugins = computed(() => {
   let plugins = [...filteredMarketPlugins.value];
 
   // 根据排序选项排序
-  if (sortBy.value === 'stars') {
+  if (sortBy.value === "stars") {
     // 按 star 数排序
     plugins.sort((a, b) => {
       const starsA = a.stars ?? 0;
       const starsB = b.stars ?? 0;
-      return sortOrder.value === 'desc' ? starsB - starsA : starsA - starsB;
+      return sortOrder.value === "desc" ? starsB - starsA : starsA - starsB;
     });
-  } else if (sortBy.value === 'author') {
+  } else if (sortBy.value === "author") {
     // 按作者名字典序排序
     plugins.sort((a, b) => {
-      const authorA = (a.author ?? '').toLowerCase();
-      const authorB = (b.author ?? '').toLowerCase();
+      const authorA = (a.author ?? "").toLowerCase();
+      const authorB = (b.author ?? "").toLowerCase();
       const result = authorA.localeCompare(authorB);
-      return sortOrder.value === 'desc' ? -result : result;
+      return sortOrder.value === "desc" ? -result : result;
     });
-  } else if (sortBy.value === 'updated') {
+  } else if (sortBy.value === "updated") {
     // 按更新时间排序
     plugins.sort((a, b) => {
       const dateA = a.updated_at ? new Date(a.updated_at).getTime() : 0;
       const dateB = b.updated_at ? new Date(b.updated_at).getTime() : 0;
-      return sortOrder.value === 'desc' ? dateB - dateA : dateA - dateB;
+      return sortOrder.value === "desc" ? dateB - dateA : dateA - dateB;
     });
   } else {
     // default: 推荐插件排在前面
-    const pinned = plugins.filter(plugin => plugin?.pinned);
-    const notPinned = plugins.filter(plugin => !plugin?.pinned);
+    const pinned = plugins.filter((plugin) => plugin?.pinned);
+    const notPinned = plugins.filter((plugin) => !plugin?.pinned);
     return [...pinned, ...notPinned];
   }
 
@@ -263,7 +283,7 @@ const paginatedPlugins = computed(() => {
 });
 
 const updatableExtensions = computed(() => {
-  return extension_data?.data?.filter(ext => ext.has_update) || [];
+  return extension_data?.data?.filter((ext) => ext.has_update) || [];
 });
 
 // 方法
@@ -279,7 +299,7 @@ const toast = (message, success) => {
 
 const resetLoadingDialog = () => {
   loadingDialog.show = false;
-  loadingDialog.title = tm('dialogs.loading.title');
+  loadingDialog.title = tm("dialogs.loading.title");
   loadingDialog.statusCode = 0;
   loadingDialog.result = "";
 };
@@ -294,7 +314,7 @@ const onLoadingDialogResult = (statusCode, result, timeToClose = 2000) => {
 const getExtensions = async () => {
   loading_.value = true;
   try {
-    const res = await axios.get('/api/plugin/get');
+    const res = await axios.get("/api/plugin/get");
     Object.assign(extension_data, res.data);
     checkUpdate();
   } catch (err) {
@@ -308,7 +328,7 @@ const checkUpdate = () => {
   const onlinePluginsMap = new Map();
   const onlinePluginsNameMap = new Map();
 
-  pluginMarketData.value.forEach(plugin => {
+  pluginMarketData.value.forEach((plugin) => {
     if (plugin.repo) {
       onlinePluginsMap.set(plugin.repo.toLowerCase(), plugin);
     }
@@ -316,7 +336,7 @@ const checkUpdate = () => {
   });
 
   const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  data.forEach(extension => {
+  data.forEach((extension) => {
     const repoKey = extension.repo?.toLowerCase();
     const onlinePlugin = repoKey ? onlinePluginsMap.get(repoKey) : null;
     const onlinePluginByName = onlinePluginsNameMap.get(extension.name);
@@ -324,23 +344,30 @@ const checkUpdate = () => {
 
     if (matchedPlugin) {
       extension.online_version = matchedPlugin.version;
-      extension.has_update = extension.version !== matchedPlugin.version &&
-        matchedPlugin.version !== tm('status.unknown');
+      extension.has_update =
+        extension.version !== matchedPlugin.version &&
+        matchedPlugin.version !== tm("status.unknown");
     } else {
       extension.has_update = false;
     }
   });
 };
 
-const uninstallExtension = async (extension_name, optionsOrSkipConfirm = false) => {
+const uninstallExtension = async (
+  extension_name,
+  optionsOrSkipConfirm = false,
+) => {
   let deleteConfig = false;
   let deleteData = false;
   let skipConfirm = false;
 
   // 处理参数：可能是布尔值（旧的 skipConfirm）或对象（新的选项）
-  if (typeof optionsOrSkipConfirm === 'boolean') {
+  if (typeof optionsOrSkipConfirm === "boolean") {
     skipConfirm = optionsOrSkipConfirm;
-  } else if (typeof optionsOrSkipConfirm === 'object' && optionsOrSkipConfirm !== null) {
+  } else if (
+    typeof optionsOrSkipConfirm === "object" &&
+    optionsOrSkipConfirm !== null
+  ) {
     deleteConfig = optionsOrSkipConfirm.deleteConfig || false;
     deleteData = optionsOrSkipConfirm.deleteData || false;
     skipConfirm = true; // 如果传递了选项对象，说明已经确认过了
@@ -354,9 +381,9 @@ const uninstallExtension = async (extension_name, optionsOrSkipConfirm = false)
   }
 
   // 执行卸载
-  toast(tm('messages.uninstalling') + " " + extension_name, "primary");
+  toast(tm("messages.uninstalling") + " " + extension_name, "primary");
   try {
-    const res = await axios.post('/api/plugin/uninstall', {
+    const res = await axios.post("/api/plugin/uninstall", {
       name: extension_name,
       delete_config: deleteConfig,
       delete_data: deleteData,
@@ -383,21 +410,21 @@ const handleUninstallConfirm = (options) => {
 
 const updateExtension = async (extension_name, forceUpdate = false) => {
   // 查找插件信息
-  const ext = extension_data.data?.find(e => e.name === extension_name);
-  
+  const ext = extension_data.data?.find((e) => e.name === extension_name);
+
   // 如果没有检测到更新且不是强制更新，则弹窗确认
   if (!ext?.has_update && !forceUpdate) {
     forceUpdateDialog.extensionName = extension_name;
     forceUpdateDialog.show = true;
     return;
   }
-  
-  loadingDialog.title = tm('status.loading');
+
+  loadingDialog.title = tm("status.loading");
   loadingDialog.show = true;
   try {
-    const res = await axios.post('/api/plugin/update', {
+    const res = await axios.post("/api/plugin/update", {
       name: extension_name,
-      proxy: localStorage.getItem('selectedGitHubProxy') || ""
+      proxy: localStorage.getItem("selectedGitHubProxy") || "",
     });
 
     if (res.data.status === "error") {
@@ -408,14 +435,20 @@ const updateExtension = async (extension_name, forceUpdate = false) => {
     Object.assign(extension_data, res.data);
     onLoadingDialogResult(1, res.data.message);
     setTimeout(async () => {
-      toast(tm('messages.refreshing'), "info", 2000);
+      toast(tm("messages.refreshing"), "info", 2000);
       try {
         await getExtensions();
-        toast(tm('messages.refreshSuccess'), "success");
+        toast(tm("messages.refreshSuccess"), "success");
 
+        // 更新完成后弹出更新日志
+        viewChangelog({
+          name: extension_name,
+          repo: ext?.repo || null,
+        });
       } catch (error) {
-        const errorMsg = error.response?.data?.message || error.message || String(error);
-        toast(`${tm('messages.refreshFailed')}: ${errorMsg}`, "error");
+        const errorMsg =
+          error.response?.data?.message || error.message || String(error);
+        toast(`${tm("messages.refreshFailed")}: ${errorMsg}`, "error");
       }
     }, 1000);
   } catch (err) {
@@ -427,50 +460,56 @@ const updateExtension = async (extension_name, forceUpdate = false) => {
 const confirmForceUpdate = () => {
   const name = forceUpdateDialog.extensionName;
   forceUpdateDialog.show = false;
-  forceUpdateDialog.extensionName = '';
+  forceUpdateDialog.extensionName = "";
   updateExtension(name, true);
 };
 
 const updateAllExtensions = async () => {
   if (updatingAll.value || updatableExtensions.value.length === 0) return;
   updatingAll.value = true;
-  loadingDialog.title = tm('status.loading');
+  loadingDialog.title = tm("status.loading");
   loadingDialog.statusCode = 0;
   loadingDialog.result = "";
   loadingDialog.show = true;
 
-  const targets = updatableExtensions.value.map(ext => ext.name);
+  const targets = updatableExtensions.value.map((ext) => ext.name);
   try {
-    const res = await axios.post('/api/plugin/update-all', {
+    const res = await axios.post("/api/plugin/update-all", {
       names: targets,
-      proxy: localStorage.getItem('selectedGitHubProxy') || ""
+      proxy: localStorage.getItem("selectedGitHubProxy") || "",
     });
 
     if (res.data.status === "error") {
-      onLoadingDialogResult(2, res.data.message || tm('messages.updateAllFailed', {
-        failed: targets.length,
-        total: targets.length
-      }), -1);
+      onLoadingDialogResult(
+        2,
+        res.data.message ||
+          tm("messages.updateAllFailed", {
+            failed: targets.length,
+            total: targets.length,
+          }),
+        -1,
+      );
       return;
     }
 
     const results = res.data.data?.results || [];
-    const failures = results.filter(r => r.status !== 'ok');
+    const failures = results.filter((r) => r.status !== "ok");
     try {
       await getExtensions();
     } catch (err) {
-      const errorMsg = err.response?.data?.message || err.message || String(err);
-      failures.push({ name: 'refresh', status: 'error', message: errorMsg });
+      const errorMsg =
+        err.response?.data?.message || err.message || String(err);
+      failures.push({ name: "refresh", status: "error", message: errorMsg });
     }
 
     if (failures.length === 0) {
-      onLoadingDialogResult(1, tm('messages.updateAllSuccess'));
+      onLoadingDialogResult(1, tm("messages.updateAllSuccess"));
     } else {
-      const failureText = tm('messages.updateAllFailed', {
+      const failureText = tm("messages.updateAllFailed", {
         failed: failures.length,
-        total: targets.length
+        total: targets.length,
       });
-      const detail = failures.map(f => `${f.name}: ${f.message}`).join('\n');
+      const detail = failures.map((f) => `${f.name}: ${f.message}`).join("\n");
       onLoadingDialogResult(2, `${failureText}\n${detail}`, -1);
     }
   } catch (err) {
@@ -483,7 +522,7 @@ const updateAllExtensions = async () => {
 
 const pluginOn = async (extension) => {
   try {
-    const res = await axios.post('/api/plugin/on', { name: extension.name });
+    const res = await axios.post("/api/plugin/on", { name: extension.name });
     if (res.data.status === "error") {
       toast(res.data.message, "error");
       return;
@@ -499,7 +538,7 @@ const pluginOn = async (extension) => {
 
 const pluginOff = async (extension) => {
   try {
-    const res = await axios.post('/api/plugin/off', { name: extension.name });
+    const res = await axios.post("/api/plugin/off", { name: extension.name });
     if (res.data.status === "error") {
       toast(res.data.message, "error");
       return;
@@ -515,10 +554,11 @@ const openExtensionConfig = async (extension_name) => {
   curr_namespace.value = extension_name;
   configDialog.value = true;
   try {
-    const res = await axios.get('/api/config/get?plugin_name=' + extension_name);
+    const res = await axios.get(
+      "/api/config/get?plugin_name=" + extension_name,
+    );
     extension_config.metadata = res.data.data.metadata;
     extension_config.config = res.data.data.config;
-
   } catch (err) {
     toast(err, "error");
   }
@@ -526,7 +566,10 @@ const openExtensionConfig = async (extension_name) => {
 
 const updateConfig = async () => {
   try {
-    const res = await axios.post('/api/config/plugin/update?plugin_name=' + curr_namespace.value, extension_config.config);
+    const res = await axios.post(
+      "/api/config/plugin/update?plugin_name=" + curr_namespace.value,
+      extension_config.config,
+    );
     if (res.data.status === "ok") {
       toast(res.data.message, "success");
     } else {
@@ -548,12 +591,12 @@ const showPluginInfo = (plugin) => {
 
 const reloadPlugin = async (plugin_name) => {
   try {
-    const res = await axios.post('/api/plugin/reload', { name: plugin_name });
+    const res = await axios.post("/api/plugin/reload", { name: plugin_name });
     if (res.data.status === "error") {
       toast(res.data.message, "error");
       return;
     }
-    toast(tm('messages.reloadSuccess'), "success");
+    toast(tm("messages.reloadSuccess"), "success");
     getExtensions();
   } catch (err) {
     toast(err, "error");
@@ -566,15 +609,22 @@ const viewReadme = (plugin) => {
   readmeDialog.show = true;
 };
 
+// 查看更新日志
+const viewChangelog = (plugin) => {
+  changelogDialog.pluginName = plugin.name;
+  changelogDialog.repoUrl = plugin.repo;
+  changelogDialog.show = true;
+};
+
 // 为表格视图创建一个处理安装插件的函数
 const handleInstallPlugin = async (plugin) => {
-  if (plugin.tags && plugin.tags.includes('danger')) {
+  if (plugin.tags && plugin.tags.includes("danger")) {
     selectedDangerPlugin.value = plugin;
     dangerConfirmDialog.value = true;
   } else {
     extension_url.value = plugin.repo;
     dialog.value = true;
-    uploadTab.value = 'url';
+    uploadTab.value = "url";
   }
 };
 
@@ -583,7 +633,7 @@ const confirmDangerInstall = () => {
   if (selectedDangerPlugin.value) {
     extension_url.value = selectedDangerPlugin.value.repo;
     dialog.value = true;
-    uploadTab.value = 'url';
+    uploadTab.value = "url";
   }
   dangerConfirmDialog.value = false;
   selectedDangerPlugin.value = null;
@@ -598,51 +648,51 @@ const cancelDangerInstall = () => {
 // 自定义插件源管理方法
 const loadCustomSources = async () => {
   try {
-    const res = await axios.get('/api/plugin/source/get');
+    const res = await axios.get("/api/plugin/source/get");
     if (res.data.status === "ok") {
-        customSources.value = res.data.data;
+      customSources.value = res.data.data;
     } else {
-        toast(res.data.message, "error");
+      toast(res.data.message, "error");
     }
   } catch (e) {
-    console.warn('Failed to load custom sources:', e);
+    console.warn("Failed to load custom sources:", e);
     customSources.value = [];
   }
-  
+
   // 加载当前选中的插件源
-  const currentSource = localStorage.getItem('selectedPluginSource');
+  const currentSource = localStorage.getItem("selectedPluginSource");
   if (currentSource) {
     selectedSource.value = currentSource;
   }
 };
 
 const saveCustomSources = async () => {
-    try {
-        const res = await axios.post('/api/plugin/source/save', {
-            sources: customSources.value
-        });
-        if (res.data.status !== "ok") {
-            toast(res.data.message, "error");
-        }
-    } catch (e) {
-        toast(e, "error");
+  try {
+    const res = await axios.post("/api/plugin/source/save", {
+      sources: customSources.value,
+    });
+    if (res.data.status !== "ok") {
+      toast(res.data.message, "error");
     }
+  } catch (e) {
+    toast(e, "error");
+  }
 };
 
 const addCustomSource = () => {
   editingSource.value = false;
-  originalSourceUrl.value = '';
-  sourceName.value = '';
-  sourceUrl.value = '';
+  originalSourceUrl.value = "";
+  sourceName.value = "";
+  sourceUrl.value = "";
   showSourceDialog.value = true;
 };
 
 const selectPluginSource = (sourceUrl) => {
   selectedSource.value = sourceUrl;
   if (sourceUrl) {
-    localStorage.setItem('selectedPluginSource', sourceUrl);
+    localStorage.setItem("selectedPluginSource", sourceUrl);
   } else {
-    localStorage.removeItem('selectedPluginSource');
+    localStorage.removeItem("selectedPluginSource");
   }
   // 重新加载插件市场数据
   refreshPluginMarket();
@@ -651,7 +701,9 @@ const selectPluginSource = (sourceUrl) => {
 // 获取当前选中的源对象
 const selectedSourceObj = computed(() => {
   if (!selectedSource.value) return null;
-  return customSources.value.find(s => s.url === selectedSource.value) || null;
+  return (
+    customSources.value.find((s) => s.url === selectedSource.value) || null
+  );
 });
 
 const editCustomSource = (source) => {
@@ -671,18 +723,20 @@ const removeCustomSource = (source) => {
 
 const confirmRemoveSource = () => {
   if (sourceToRemove.value) {
-    customSources.value = customSources.value.filter(s => s.url !== sourceToRemove.value.url);
+    customSources.value = customSources.value.filter(
+      (s) => s.url !== sourceToRemove.value.url,
+    );
     saveCustomSources();
-    
+
     // 如果删除的是当前选中的源，切换到默认源
     if (selectedSource.value === sourceToRemove.value.url) {
       selectedSource.value = null;
-      localStorage.removeItem('selectedPluginSource');
+      localStorage.removeItem("selectedPluginSource");
       // 重新加载插件市场数据
       refreshPluginMarket();
     }
-    
-    toast(tm('market.sourceRemoved'), 'success');
+
+    toast(tm("market.sourceRemoved"), "success");
     showRemoveSourceDialog.value = false;
     sourceToRemove.value = null;
   }
@@ -690,9 +744,9 @@ const confirmRemoveSource = () => {
 
 const saveCustomSource = () => {
   const normalizedUrl = sourceUrl.value.trim();
-  
+
   if (!sourceName.value.trim() || !normalizedUrl) {
-    toast(tm('messages.fillSourceNameAndUrl'), 'error');
+    toast(tm("messages.fillSourceNameAndUrl"), "error");
     return;
   }
 
@@ -700,54 +754,59 @@ const saveCustomSource = () => {
   try {
     new URL(normalizedUrl);
   } catch (e) {
-    toast(tm('messages.invalidUrl'), 'error');
+    toast(tm("messages.invalidUrl"), "error");
     return;
   }
 
   if (editingSource.value) {
     // 编辑模式：更新现有源
-    const index = customSources.value.findIndex(s => s.url === originalSourceUrl.value);
+    const index = customSources.value.findIndex(
+      (s) => s.url === originalSourceUrl.value,
+    );
     if (index !== -1) {
       customSources.value[index] = {
         name: sourceName.value.trim(),
-        url: normalizedUrl
+        url: normalizedUrl,
       };
-      
+
       // 如果编辑的是当前选中的源，更新选中源
       if (selectedSource.value === originalSourceUrl.value) {
         selectedSource.value = normalizedUrl;
-        localStorage.setItem('selectedPluginSource', selectedSource.value);
+        localStorage.setItem("selectedPluginSource", selectedSource.value);
         // 重新加载插件市场数据
         refreshPluginMarket();
       }
     }
   } else {
     // 添加模式：检查是否已存在
-    if (customSources.value.some(source => source.url === normalizedUrl)) {
-      toast(tm('market.sourceExists'), 'error');
+    if (customSources.value.some((source) => source.url === normalizedUrl)) {
+      toast(tm("market.sourceExists"), "error");
       return;
     }
 
     customSources.value.push({
       name: sourceName.value.trim(),
-      url: normalizedUrl
+      url: normalizedUrl,
     });
   }
 
   saveCustomSources();
-  toast(editingSource.value ? tm('market.sourceUpdated') : tm('market.sourceAdded'), 'success');
-  
+  toast(
+    editingSource.value ? tm("market.sourceUpdated") : tm("market.sourceAdded"),
+    "success",
+  );
+
   // 重置表单
-  sourceName.value = '';
-  sourceUrl.value = '';
+  sourceName.value = "";
+  sourceUrl.value = "";
   editingSource.value = false;
-  originalSourceUrl.value = '';
+  originalSourceUrl.value = "";
   showSourceDialog.value = false;
 };
 
 // 插件市场显示完整插件名称
 const trimExtensionName = () => {
-  pluginMarketData.value.forEach(plugin => {
+  pluginMarketData.value.forEach((plugin) => {
     if (plugin.name) {
       let name = plugin.name.trim().toLowerCase();
       if (name.startsWith("astrbot_plugin_")) {
@@ -761,12 +820,14 @@ const trimExtensionName = () => {
 
 const checkAlreadyInstalled = () => {
   const data = Array.isArray(extension_data?.data) ? extension_data.data : [];
-  const installedRepos = new Set(data.map(ext => ext.repo?.toLowerCase()));
-  const installedNames = new Set(data.map(ext => ext.name));
+  const installedRepos = new Set(data.map((ext) => ext.repo?.toLowerCase()));
+  const installedNames = new Set(data.map((ext) => ext.name));
 
   for (let i = 0; i < pluginMarketData.value.length; i++) {
     const plugin = pluginMarketData.value[i];
-    plugin.installed = installedRepos.has(plugin.repo?.toLowerCase()) || installedNames.has(plugin.name);
+    plugin.installed =
+      installedRepos.has(plugin.repo?.toLowerCase()) ||
+      installedNames.has(plugin.name);
   }
 
   let installed = [];
@@ -783,53 +844,60 @@ const checkAlreadyInstalled = () => {
 
 const newExtension = async () => {
   if (extension_url.value === "" && upload_file.value === null) {
-    toast(tm('messages.fillUrlOrFile'), "error");
+    toast(tm("messages.fillUrlOrFile"), "error");
     return;
   }
 
   if (extension_url.value !== "" && upload_file.value !== null) {
-    toast(tm('messages.dontFillBoth'), "error");
+    toast(tm("messages.dontFillBoth"), "error");
     return;
   }
   loading_.value = true;
-  loadingDialog.title = tm('status.loading');
+  loadingDialog.title = tm("status.loading");
   loadingDialog.show = true;
   if (upload_file.value !== null) {
-    toast(tm('messages.installing'), "primary");
+    toast(tm("messages.installing"), "primary");
     const formData = new FormData();
-    formData.append('file', upload_file.value);
-    axios.post('/api/plugin/install-upload', formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data'
-      }
-    }).then(async (res) => {
-      loading_.value = false;
-      if (res.data.status === "error") {
-        onLoadingDialogResult(2, res.data.message, -1);
-        return;
-      }
-      upload_file.value = null;
-      onLoadingDialogResult(1, res.data.message);
-      dialog.value = false;
-      await getExtensions();
+    formData.append("file", upload_file.value);
+    axios
+      .post("/api/plugin/install-upload", formData, {
+        headers: {
+          "Content-Type": "multipart/form-data",
+        },
+      })
+      .then(async (res) => {
+        loading_.value = false;
+        if (res.data.status === "error") {
+          onLoadingDialogResult(2, res.data.message, -1);
+          return;
+        }
+        upload_file.value = null;
+        onLoadingDialogResult(1, res.data.message);
+        dialog.value = false;
+        await getExtensions();
 
-      viewReadme({
-        name: res.data.data.name,
-        repo: res.data.data.repo || null
+        viewReadme({
+          name: res.data.data.name,
+          repo: res.data.data.repo || null,
+        });
+
+        await checkAndPromptConflicts();
+      })
+      .catch((err) => {
+        loading_.value = false;
+        onLoadingDialogResult(2, err, -1);
       });
-      
-      await checkAndPromptConflicts();
-    }).catch((err) => {
-      loading_.value = false;
-      onLoadingDialogResult(2, err, -1);
-    });
   } else {
-    toast(tm('messages.installingFromUrl') + " " + extension_url.value, "primary");
-    axios.post('/api/plugin/install',
-      {
+    toast(
+      tm("messages.installingFromUrl") + " " + extension_url.value,
+      "primary",
+    );
+    axios
+      .post("/api/plugin/install", {
         url: extension_url.value,
-        proxy: localStorage.getItem('selectedGitHubProxy') || ""
-      }).then(async (res) => {
+        proxy: localStorage.getItem("selectedGitHubProxy") || "",
+      })
+      .then(async (res) => {
         loading_.value = false;
         toast(res.data.message, res.data.status === "ok" ? "success" : "error");
         if (res.data.status === "error") {
@@ -843,13 +911,14 @@ const newExtension = async () => {
 
         viewReadme({
           name: res.data.data.name,
-          repo: res.data.data.repo || null
+          repo: res.data.data.repo || null,
         });
-        
+
         await checkAndPromptConflicts();
-      }).catch((err) => {
+      })
+      .catch((err) => {
         loading_.value = false;
-        toast(tm('messages.installFailed') + " " + err, "error");
+        toast(tm("messages.installFailed") + " " + err, "error");
         onLoadingDialogResult(2, err, -1);
       });
   }
@@ -860,16 +929,19 @@ const refreshPluginMarket = async () => {
   refreshingMarket.value = true;
   try {
     // 强制刷新插件市场数据
-    const data = await commonStore.getPluginCollections(true, selectedSource.value);
+    const data = await commonStore.getPluginCollections(
+      true,
+      selectedSource.value,
+    );
     pluginMarketData.value = data;
     trimExtensionName();
     checkAlreadyInstalled();
     checkUpdate();
     currentPage.value = 1; // 重置到第一页
 
-    toast(tm('messages.refreshSuccess'), "success");
+    toast(tm("messages.refreshSuccess"), "success");
   } catch (err) {
-    toast(tm('messages.refreshFailed') + " " + err, "error");
+    toast(tm("messages.refreshFailed") + " " + err, "error");
   } finally {
     refreshingMarket.value = false;
   }
@@ -878,7 +950,7 @@ const refreshPluginMarket = async () => {
 // 生命周期
 onMounted(async () => {
   await getExtensions();
-  
+
   // 加载自定义插件源
   loadCustomSources();
 
@@ -886,27 +958,30 @@ onMounted(async () => {
   let urlParams;
   if (window.location.hash) {
     // For hash mode (#/path?param=value)
-    const hashQuery = window.location.hash.split('?')[1] || '';
+    const hashQuery = window.location.hash.split("?")[1] || "";
     urlParams = new URLSearchParams(hashQuery);
   } else {
     // For history mode (/path?param=value)
     urlParams = new URLSearchParams(window.location.search);
   }
   console.log("URL Parameters:", urlParams.toString());
-  const plugin_name = urlParams.get('open_config');
+  const plugin_name = urlParams.get("open_config");
   if (plugin_name) {
     console.log(`Opening config for plugin: ${plugin_name}`);
     openExtensionConfig(plugin_name);
   }
 
   try {
-    const data = await commonStore.getPluginCollections(false, selectedSource.value);
+    const data = await commonStore.getPluginCollections(
+      false,
+      selectedSource.value,
+    );
     pluginMarketData.value = data;
     trimExtensionName();
     checkAlreadyInstalled();
     checkUpdate();
   } catch (err) {
-    toast(tm('messages.getMarketDataFailed') + " " + err, "error");
+    toast(tm("messages.getMarketDataFailed") + " " + err, "error");
   }
 });
 
@@ -926,12 +1001,10 @@ watch(marketSearch, (newVal) => {
 
 // 监听显示模式变化并保存到 localStorage
 watch(isListView, (newVal) => {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    localStorage.setItem('pluginListViewMode', String(newVal));
+  if (typeof window !== "undefined" && window.localStorage) {
+    localStorage.setItem("pluginListViewMode", String(newVal));
   }
 });
-
-
 </script>
 
 <template>
@@ -939,94 +1012,161 @@ watch(isListView, (newVal) => {
     <v-col cols="12" md="12">
       <v-card variant="flat" style="background-color: transparent">
         <!-- 标签页 -->
-        <v-card-text style="padding: 0px 12px;">
+        <v-card-text style="padding: 0px 12px">
           <!-- 标签栏和搜索栏 - 响应式布局 -->
           <div class="mb-4 d-flex flex-wrap">
             <!-- 标签栏 -->
             <v-tabs v-model="activeTab" color="primary">
               <v-tab value="installed">
                 <v-icon class="mr-2">mdi-puzzle</v-icon>
-                {{ tm('tabs.installedPlugins') }}
+                {{ tm("tabs.installedPlugins") }}
               </v-tab>
               <v-tab value="mcp">
                 <v-icon class="mr-2">mdi-server-network</v-icon>
-                {{ tm('tabs.installedMcpServers') }}
+                {{ tm("tabs.installedMcpServers") }}
               </v-tab>
               <v-tab value="market">
                 <v-icon class="mr-2">mdi-store</v-icon>
-                {{ tm('tabs.market') }}
+                {{ tm("tabs.market") }}
               </v-tab>
               <v-tab value="components">
                 <v-icon class="mr-2">mdi-wrench</v-icon>
-                {{ tm('tabs.handlersOperation') }}
+                {{ tm("tabs.handlersOperation") }}
               </v-tab>
             </v-tabs>
 
             <!-- 搜索栏 - 在移动端时独占一行 -->
-            <div style="flex-grow: 1; min-width: 250px; max-width: 400px; margin-left: auto; margin-top: 8px;">
-              <v-text-field v-if="activeTab === 'market'" v-model="marketSearch" density="compact"
-                :label="tm('search.marketPlaceholder')" prepend-inner-icon="mdi-magnify" variant="solo-filled" flat
-                hide-details single-line>
+            <div
+              style="
+                flex-grow: 1;
+                min-width: 250px;
+                max-width: 400px;
+                margin-left: auto;
+                margin-top: 8px;
+              "
+            >
+              <v-text-field
+                v-if="activeTab === 'market'"
+                v-model="marketSearch"
+                density="compact"
+                :label="tm('search.marketPlaceholder')"
+                prepend-inner-icon="mdi-magnify"
+                variant="solo-filled"
+                flat
+                hide-details
+                single-line
+              >
               </v-text-field>
-              <v-text-field v-else-if="activeTab === 'installed'" v-model="pluginSearch" density="compact" :label="tm('search.placeholder')"
-                prepend-inner-icon="mdi-magnify" variant="solo-filled" flat hide-details single-line>
+              <v-text-field
+                v-else-if="activeTab === 'installed'"
+                v-model="pluginSearch"
+                density="compact"
+                :label="tm('search.placeholder')"
+                prepend-inner-icon="mdi-magnify"
+                variant="solo-filled"
+                flat
+                hide-details
+                single-line
+              >
               </v-text-field>
             </div>
-
           </div>
 
-
           <!-- 已安装插件标签页内容 -->
           <v-tab-item v-show="activeTab === 'installed'">
             <v-row class="mb-4">
               <v-col cols="12" class="d-flex align-center flex-wrap ga-2">
-                <v-btn-group variant="outlined" density="comfortable" color="primary">
-                  <v-btn @click="isListView = false" :color="!isListView ? 'primary' : undefined"
-                    :variant="!isListView ? 'flat' : 'outlined'">
+                <v-btn-group
+                  variant="outlined"
+                  density="comfortable"
+                  color="primary"
+                >
+                  <v-btn
+                    @click="isListView = false"
+                    :color="!isListView ? 'primary' : undefined"
+                    :variant="!isListView ? 'flat' : 'outlined'"
+                  >
                     <v-icon>mdi-view-grid</v-icon>
                   </v-btn>
-                  <v-btn @click="isListView = true" :color="isListView ? 'primary' : undefined"
-                    :variant="isListView ? 'flat' : 'outlined'">
+                  <v-btn
+                    @click="isListView = true"
+                    :color="isListView ? 'primary' : undefined"
+                    :variant="isListView ? 'flat' : 'outlined'"
+                  >
                     <v-icon>mdi-view-list</v-icon>
                   </v-btn>
                 </v-btn-group>
 
                 <v-btn class="ml-2" variant="tonal" @click="toggleShowReserved">
-                  <v-icon>{{ showReserved ? 'mdi-eye-off' : 'mdi-eye' }}</v-icon>
-                  {{ showReserved ? tm('buttons.hideSystemPlugins') : tm('buttons.showSystemPlugins') }}
+                  <v-icon>{{
+                    showReserved ? "mdi-eye-off" : "mdi-eye"
+                  }}</v-icon>
+                  {{
+                    showReserved
+                      ? tm("buttons.hideSystemPlugins")
+                      : tm("buttons.showSystemPlugins")
+                  }}
                 </v-btn>
 
-                <v-btn class="ml-2" color="warning" variant="tonal" :disabled="updatableExtensions.length === 0"
-                  :loading="updatingAll" @click="updateAllExtensions">
+                <v-btn
+                  class="ml-2"
+                  color="warning"
+                  variant="tonal"
+                  :disabled="updatableExtensions.length === 0"
+                  :loading="updatingAll"
+                  @click="updateAllExtensions"
+                >
                   <v-icon>mdi-update</v-icon>
-                  {{ tm('buttons.updateAll') }}
+                  {{ tm("buttons.updateAll") }}
                 </v-btn>
 
-                <v-btn class="ml-2" color="primary" variant="tonal" @click="dialog = true">
+                <v-btn
+                  class="ml-2"
+                  color="primary"
+                  variant="tonal"
+                  @click="dialog = true"
+                >
                   <v-icon>mdi-plus</v-icon>
-                  {{ tm('buttons.install') }}
+                  {{ tm("buttons.install") }}
                 </v-btn>
 
                 <v-col cols="12" sm="auto" class="ml-auto">
                   <v-dialog max-width="500px" v-if="extension_data.message">
                     <template v-slot:activator="{ props }">
-                      <v-btn v-bind="props" icon size="small" color="error" class="ml-2" variant="tonal">
+                      <v-btn
+                        v-bind="props"
+                        icon
+                        size="small"
+                        color="error"
+                        class="ml-2"
+                        variant="tonal"
+                      >
                         <v-icon>mdi-alert-circle</v-icon>
                       </v-btn>
                     </template>
                     <template v-slot:default="{ isActive }">
                       <v-card class="rounded-lg">
                         <v-card-title class="headline d-flex align-center">
-                          <v-icon color="error" class="mr-2">mdi-alert-circle</v-icon>
-                          {{ tm('dialogs.error.title') }}
+                          <v-icon color="error" class="mr-2"
+                            >mdi-alert-circle</v-icon
+                          >
+                          {{ tm("dialogs.error.title") }}
                         </v-card-title>
                         <v-card-text>
-                          <p class="text-body-1">{{ extension_data.message }}</p>
-                          <p class="text-caption mt-2">{{ tm('dialogs.error.checkConsole') }}</p>
+                          <p class="text-body-1">
+                            {{ extension_data.message }}
+                          </p>
+                          <p class="text-caption mt-2">
+                            {{ tm("dialogs.error.checkConsole") }}
+                          </p>
                         </v-card-text>
                         <v-card-actions>
                           <v-spacer></v-spacer>
-                          <v-btn color="primary" @click="isActive.value = false">{{ tm('buttons.close') }}</v-btn>
+                          <v-btn
+                            color="primary"
+                            @click="isActive.value = false"
+                            >{{ tm("buttons.close") }}</v-btn
+                          >
                         </v-card-actions>
                       </v-card>
                     </template>
@@ -1039,50 +1179,113 @@ watch(isListView, (newVal) => {
               <!-- 表格视图 -->
               <div v-if="isListView">
                 <v-card class="rounded-lg overflow-hidden elevation-1">
-                  <v-data-table :headers="pluginHeaders" :items="filteredPlugins" :loading="loading_" item-key="name"
-                    hover>
+                  <v-data-table
+                    :headers="pluginHeaders"
+                    :items="filteredPlugins"
+                    :loading="loading_"
+                    item-key="name"
+                    hover
+                  >
                     <template v-slot:loader>
                       <v-row class="py-8 d-flex align-center justify-center">
-                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
-                        <span class="ml-2">{{ tm('status.loading') }}</span>
+                        <v-progress-circular
+                          indeterminate
+                          color="primary"
+                        ></v-progress-circular>
+                        <span class="ml-2">{{ tm("status.loading") }}</span>
                       </v-row>
                     </template>
 
                     <template v-slot:item.name="{ item }">
                       <div class="d-flex align-center py-2">
-                        <div v-if="item.logo" class="mr-3" style="flex-shrink: 0;">
-                          <img :src="item.logo" :alt="item.name"
-                            style="height: 40px; width: 40px; border-radius: 8px; object-fit: cover;" />
+                        <div
+                          v-if="item.logo"
+                          class="mr-3"
+                          style="flex-shrink: 0"
+                        >
+                          <img
+                            :src="item.logo"
+                            :alt="item.name"
+                            style="
+                              height: 40px;
+                              width: 40px;
+                              border-radius: 8px;
+                              object-fit: cover;
+                            "
+                          />
                         </div>
-                        <div v-else class="mr-3" style="flex-shrink: 0;">
-                          <img :src="defaultPluginIcon" :alt="item.name"
-                            style="height: 40px; width: 40px; border-radius: 8px; object-fit: cover;" />
+                        <div v-else class="mr-3" style="flex-shrink: 0">
+                          <img
+                            :src="defaultPluginIcon"
+                            :alt="item.name"
+                            style="
+                              height: 40px;
+                              width: 40px;
+                              border-radius: 8px;
+                              object-fit: cover;
+                            "
+                          />
                         </div>
                         <div>
                           <div class="text-subtitle-1 font-weight-medium">
-                            {{ item.display_name && item.display_name.length ? item.display_name : item.name }}
+                            {{
+                              item.display_name && item.display_name.length
+                                ? item.display_name
+                                : item.name
+                            }}
                           </div>
-                          <div v-if="item.display_name && item.display_name.length" class="text-caption text-medium-emphasis mt-1">
+                          <div
+                            v-if="item.display_name && item.display_name.length"
+                            class="text-caption text-medium-emphasis mt-1"
+                          >
                             {{ item.name }}
                           </div>
-                          <div v-if="item.reserved" class="d-flex align-center mt-1">
-                            <v-chip color="primary" size="x-small" class="font-weight-medium">{{ tm('status.system')
-                              }}</v-chip>
+                          <div
+                            v-if="item.reserved"
+                            class="d-flex align-center mt-1"
+                          >
+                            <v-chip
+                              color="primary"
+                              size="x-small"
+                              class="font-weight-medium"
+                              >{{ tm("status.system") }}</v-chip
+                            >
                           </div>
                         </div>
                       </div>
                     </template>
 
                     <template v-slot:item.desc="{ item }">
-                      <div class="text-body-2 text-medium-emphasis mt-2 mb-2" style="display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;">{{ item.desc }}</div>
+                      <div
+                        class="text-body-2 text-medium-emphasis mt-2 mb-2"
+                        style="
+                          display: -webkit-box;
+                          -webkit-line-clamp: 3;
+                          line-clamp: 3;
+                          -webkit-box-orient: vertical;
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                        "
+                      >
+                        {{ item.desc }}
+                      </div>
                     </template>
 
                     <template v-slot:item.version="{ item }">
                       <div class="d-flex align-center">
                         <span class="text-body-2">{{ item.version }}</span>
-                        <v-icon v-if="item.has_update" color="warning" size="small" class="ml-1">mdi-alert</v-icon>
+                        <v-icon
+                          v-if="item.has_update"
+                          color="warning"
+                          size="small"
+                          class="ml-1"
+                          >mdi-alert</v-icon
+                        >
                         <v-tooltip v-if="item.has_update" activator="parent">
-                          <span>{{ tm('messages.hasUpdate') }} {{ item.online_version }}</span>
+                          <span
+                            >{{ tm("messages.hasUpdate") }}
+                            {{ item.online_version }}</span
+                          >
                         </v-tooltip>
                       </div>
                     </template>
@@ -1092,65 +1295,135 @@ watch(isListView, (newVal) => {
                     </template>
 
                     <template v-slot:item.activated="{ item }">
-                      <v-chip :color="item.activated ? 'success' : 'error'" size="small" class="font-weight-medium"
-                        :variant="item.activated ? 'flat' : 'outlined'">
-                        {{ item.activated ? tm('status.enabled') : tm('status.disabled') }}
+                      <v-chip
+                        :color="item.activated ? 'success' : 'error'"
+                        size="small"
+                        class="font-weight-medium"
+                        :variant="item.activated ? 'flat' : 'outlined'"
+                      >
+                        {{
+                          item.activated
+                            ? tm("status.enabled")
+                            : tm("status.disabled")
+                        }}
                       </v-chip>
                     </template>
 
                     <template v-slot:item.actions="{ item }">
                       <div class="d-flex align-center">
-                        <v-btn-group density="comfortable" variant="text" color="primary">
-                          <v-btn v-if="!item.activated" icon size="small" color="success" @click="pluginOn(item)">
+                        <v-btn-group
+                          density="comfortable"
+                          variant="text"
+                          color="primary"
+                        >
+                          <v-btn
+                            v-if="!item.activated"
+                            icon
+                            size="small"
+                            color="success"
+                            @click="pluginOn(item)"
+                          >
                             <v-icon>mdi-play</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.enable') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.enable")
+                            }}</v-tooltip>
                           </v-btn>
-                          <v-btn v-else icon size="small" color="error" @click="pluginOff(item)">
+                          <v-btn
+                            v-else
+                            icon
+                            size="small"
+                            color="error"
+                            @click="pluginOff(item)"
+                          >
                             <v-icon>mdi-pause</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.disable') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.disable")
+                            }}</v-tooltip>
                           </v-btn>
 
-                          <v-btn icon size="small" @click="reloadPlugin(item.name)">
+                          <v-btn
+                            icon
+                            size="small"
+                            @click="reloadPlugin(item.name)"
+                          >
                             <v-icon>mdi-refresh</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.reload') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.reload")
+                            }}</v-tooltip>
                           </v-btn>
 
-                          <v-btn icon size="small" @click="openExtensionConfig(item.name)">
+                          <v-btn
+                            icon
+                            size="small"
+                            @click="openExtensionConfig(item.name)"
+                          >
                             <v-icon>mdi-cog</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.configure') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.configure")
+                            }}</v-tooltip>
                           </v-btn>
 
-                          <v-btn icon size="small" @click="showPluginInfo(item)">
+                          <v-btn
+                            icon
+                            size="small"
+                            @click="showPluginInfo(item)"
+                          >
                             <v-icon>mdi-information</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.viewInfo') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.viewInfo")
+                            }}</v-tooltip>
                           </v-btn>
 
-                          <v-btn v-if="item.repo" icon size="small" @click="viewReadme(item)">
+                          <v-btn
+                            v-if="item.repo"
+                            icon
+                            size="small"
+                            @click="viewReadme(item)"
+                          >
                             <v-icon>mdi-book-open-page-variant</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.viewDocs') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.viewDocs")
+                            }}</v-tooltip>
                           </v-btn>
 
-                          <v-btn icon size="small" @click="updateExtension(item.name)">
+                          <v-btn
+                            icon
+                            size="small"
+                            @click="updateExtension(item.name)"
+                          >
                             <v-icon>mdi-update</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.update') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.update")
+                            }}</v-tooltip>
                           </v-btn>
 
-                          <v-btn icon size="small" color="error" @click="uninstallExtension(item.name)"
-                            :disabled="item.reserved">
+                          <v-btn
+                            icon
+                            size="small"
+                            color="error"
+                            @click="uninstallExtension(item.name)"
+                            :disabled="item.reserved"
+                          >
                             <v-icon>mdi-delete</v-icon>
-                            <v-tooltip activator="parent" location="top">{{ tm('tooltips.uninstall') }}</v-tooltip>
+                            <v-tooltip activator="parent" location="top">{{
+                              tm("tooltips.uninstall")
+                            }}</v-tooltip>
                           </v-btn>
                         </v-btn-group>
-
-
                       </div>
                     </template>
 
                     <template v-slot:no-data>
                       <div class="text-center pa-8">
-                        <v-icon size="64" color="info" class="mb-4">mdi-puzzle-outline</v-icon>
-                        <div class="text-h5 mb-2">{{ tm('empty.noPlugins') }}</div>
-                        <div class="text-body-1 mb-4">{{ tm('empty.noPluginsDesc') }}</div>
+                        <v-icon size="64" color="info" class="mb-4"
+                          >mdi-puzzle-outline</v-icon
+                        >
+                        <div class="text-h5 mb-2">
+                          {{ tm("empty.noPlugins") }}
+                        </div>
+                        <div class="text-body-1 mb-4">
+                          {{ tm("empty.noPluginsDesc") }}
+                        </div>
                       </div>
                     </template>
                   </v-data-table>
@@ -1161,22 +1434,44 @@ watch(isListView, (newVal) => {
               <div v-else>
                 <v-row v-if="filteredPlugins.length === 0" class="text-center">
                   <v-col cols="12" class="pa-2">
-                    <v-icon size="64" color="info" class="mb-4">mdi-puzzle-outline</v-icon>
-                    <div class="text-h5 mb-2">{{ tm('empty.noPlugins') }}</div>
-                    <div class="text-body-1 mb-4">{{ tm('empty.noPluginsDesc') }}</div>
+                    <v-icon size="64" color="info" class="mb-4"
+                      >mdi-puzzle-outline</v-icon
+                    >
+                    <div class="text-h5 mb-2">{{ tm("empty.noPlugins") }}</div>
+                    <div class="text-body-1 mb-4">
+                      {{ tm("empty.noPluginsDesc") }}
+                    </div>
                   </v-col>
                 </v-row>
 
                 <v-row>
-                  <v-col cols="12" md="6" lg="4" v-for="extension in filteredPlugins" :key="extension.name"
-                    class="pb-2">
-                    <ExtensionCard :extension="extension" class="rounded-lg"
-                      style="background-color: rgb(var(--v-theme-mcpCardBg));"
+                  <v-col
+                    cols="12"
+                    md="6"
+                    lg="4"
+                    v-for="extension in filteredPlugins"
+                    :key="extension.name"
+                    class="pb-2"
+                  >
+                    <ExtensionCard
+                      :extension="extension"
+                      class="rounded-lg"
+                      style="background-color: rgb(var(--v-theme-mcpCardBg))"
                       @configure="openExtensionConfig(extension.name)"
-                      @uninstall="(ext, options) => uninstallExtension(ext.name, options)"
-                      @update="updateExtension(extension.name)" @reload="reloadPlugin(extension.name)"
-                      @toggle-activation="extension.activated ? pluginOff(extension) : pluginOn(extension)"
-                      @view-handlers="showPluginInfo(extension)" @view-readme="viewReadme(extension)">
+                      @uninstall="
+                        (ext, options) => uninstallExtension(ext.name, options)
+                      "
+                      @update="updateExtension(extension.name)"
+                      @reload="reloadPlugin(extension.name)"
+                      @toggle-activation="
+                        extension.activated
+                          ? pluginOff(extension)
+                          : pluginOn(extension)
+                      "
+                      @view-handlers="showPluginInfo(extension)"
+                      @view-readme="viewReadme(extension)"
+                      @view-changelog="viewChangelog(extension)"
+                    >
                     </ExtensionCard>
                   </v-col>
                 </v-row>
@@ -1186,7 +1481,11 @@ watch(isListView, (newVal) => {
 
           <!-- 指令面板标签页内容 -->
           <v-tab-item v-show="activeTab === 'components'">
-            <v-card class="rounded-lg" variant="flat" style="background-color: transparent;">
+            <v-card
+              class="rounded-lg"
+              variant="flat"
+              style="background-color: transparent"
+            >
               <v-card-text class="pa-0">
                 <ComponentPanel :active="activeTab === 'components'" />
               </v-card-text>
@@ -1195,7 +1494,11 @@ watch(isListView, (newVal) => {
 
           <!-- 已安装的 MCP 服务器标签页内容 -->
           <v-tab-item v-show="activeTab === 'mcp'">
-            <v-card class="rounded-lg" variant="flat" style="background-color: transparent;">
+            <v-card
+              class="rounded-lg"
+              variant="flat"
+              style="background-color: transparent"
+            >
               <v-card-text class="pa-0">
                 <McpServersSection />
               </v-card-text>
@@ -1204,18 +1507,32 @@ watch(isListView, (newVal) => {
 
           <!-- 插件市场标签页内容 -->
           <v-tab-item v-show="activeTab === 'market'">
-
             <!-- 插件源管理区域 -->
             <div class="mb-6">
-              <div class="d-flex align-center pa-1 pl-2 pr-2" style="background: rgb(var(--v-theme-surface-variant), 0.1); border-radius: 12px; border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));">
-                
+              <div
+                class="d-flex align-center pa-1 pl-2 pr-2"
+                style="
+                  background: rgb(var(--v-theme-surface-variant), 0.1);
+                  border-radius: 12px;
+                  border: 1px solid
+                    rgba(var(--v-border-color), var(--v-border-opacity));
+                "
+              >
                 <!-- 左侧：源选择 -->
-                <div class="d-flex align-center flex-grow-1" style="min-width: 0;">
-                  <v-icon color="primary" class="ml-2 mr-2" size="small">mdi-source-branch</v-icon>
-                  <span class="text-caption text-medium-emphasis text-uppercase font-weight-bold mr-2" style="letter-spacing: 0.05em; white-space: nowrap;">
-                    {{ tm('market.source') }}
+                <div
+                  class="d-flex align-center flex-grow-1"
+                  style="min-width: 0"
+                >
+                  <v-icon color="primary" class="ml-2 mr-2" size="small"
+                    >mdi-source-branch</v-icon
+                  >
+                  <span
+                    class="text-caption text-medium-emphasis text-uppercase font-weight-bold mr-2"
+                    style="letter-spacing: 0.05em; white-space: nowrap"
+                  >
+                    {{ tm("market.source") }}
                   </span>
-                  
+
                   <v-menu offset-y>
                     <template v-slot:activator="{ props }">
                       <v-btn
@@ -1225,17 +1542,35 @@ watch(isListView, (newVal) => {
                         :ripple="false"
                         height="32"
                       >
-                        <span class="text-body-2 font-weight-medium text-high-emphasis text-truncate" style="max-width: 200px;">
-                          {{ selectedSource ? customSources.find(s => s.url === selectedSource)?.name : tm('market.defaultSource') }}
+                        <span
+                          class="text-body-2 font-weight-medium text-high-emphasis text-truncate"
+                          style="max-width: 200px"
+                        >
+                          {{
+                            selectedSource
+                              ? customSources.find(
+                                  (s) => s.url === selectedSource,
+                                )?.name
+                              : tm("market.defaultSource")
+                          }}
                         </span>
-                        <v-icon right size="small" class="ml-1 text-medium-emphasis">mdi-chevron-down</v-icon>
-                        <v-tooltip activator="parent" location="top">{{ selectedSource || tm('market.defaultOfficialSource') }}</v-tooltip>
+                        <v-icon
+                          right
+                          size="small"
+                          class="ml-1 text-medium-emphasis"
+                          >mdi-chevron-down</v-icon
+                        >
+                        <v-tooltip activator="parent" location="top">{{
+                          selectedSource || tm("market.defaultOfficialSource")
+                        }}</v-tooltip>
                       </v-btn>
                     </template>
                     <v-list density="compact" nav class="pa-2">
-                       <v-list-subheader class="font-weight-bold text-caption text-uppercase mb-1">
-                          {{ tm('market.availableSources') }}
-                        </v-list-subheader>
+                      <v-list-subheader
+                        class="font-weight-bold text-caption text-uppercase mb-1"
+                      >
+                        {{ tm("market.availableSources") }}
+                      </v-list-subheader>
                       <v-list-item
                         :value="null"
                         @click="selectPluginSource(null)"
@@ -1244,12 +1579,21 @@ watch(isListView, (newVal) => {
                         :active="selectedSource === null"
                       >
                         <template v-slot:prepend>
-                          <v-icon icon="mdi-shield-check" size="small" class="mr-2"></v-icon>
+                          <v-icon
+                            icon="mdi-shield-check"
+                            size="small"
+                            class="mr-2"
+                          ></v-icon>
                         </template>
-                        <v-list-item-title>{{ tm('market.defaultSource') }}</v-list-item-title>
+                        <v-list-item-title>{{
+                          tm("market.defaultSource")
+                        }}</v-list-item-title>
                       </v-list-item>
-                      
-                      <v-divider class="my-1" v-if="customSources.length > 0"></v-divider>
+
+                      <v-divider
+                        class="my-1"
+                        v-if="customSources.length > 0"
+                      ></v-divider>
 
                       <v-list-item
                         v-for="source in customSources"
@@ -1260,22 +1604,35 @@ watch(isListView, (newVal) => {
                         color="primary"
                         :active="selectedSource === source.url"
                       >
-                         <template v-slot:prepend>
-                          <v-icon icon="mdi-link-variant" size="small" class="mr-2"></v-icon>
+                        <template v-slot:prepend>
+                          <v-icon
+                            icon="mdi-link-variant"
+                            size="small"
+                            class="mr-2"
+                          ></v-icon>
                         </template>
                         <v-list-item-title>{{ source.name }}</v-list-item-title>
-                        <v-list-item-subtitle class="text-caption">{{ source.url }}</v-list-item-subtitle>
+                        <v-list-item-subtitle class="text-caption">{{
+                          source.url
+                        }}</v-list-item-subtitle>
                       </v-list-item>
                     </v-list>
                   </v-menu>
                 </div>
 
                 <!-- 垂直分隔线 -->
-                <div style="height: 20px; width: 1px; background-color: rgba(var(--v-border-color), 0.15); margin: 0 8px;"></div>
-                
+                <div
+                  style="
+                    height: 20px;
+                    width: 1px;
+                    background-color: rgba(var(--v-border-color), 0.15);
+                    margin: 0 8px;
+                  "
+                ></div>
+
                 <!--右侧：操作按钮组-->
                 <div class="d-flex align-center">
-                   <v-tooltip location="top" :text="tm('market.addSource')">
+                  <v-tooltip location="top" :text="tm('market.addSource')">
                     <template v-slot:activator="{ props }">
                       <v-btn
                         v-bind="props"
@@ -1286,13 +1643,13 @@ watch(isListView, (newVal) => {
                         color="primary"
                         @click="addCustomSource"
                       ></v-btn>
-                     </template>
+                    </template>
                   </v-tooltip>
 
                   <template v-if="selectedSourceObj">
                     <v-tooltip location="top" :text="tm('market.editSource')">
                       <template v-slot:activator="{ props }">
-                         <v-btn
+                        <v-btn
                           v-bind="props"
                           icon="mdi-pencil-outline"
                           size="small"
@@ -1305,7 +1662,7 @@ watch(isListView, (newVal) => {
                       </template>
                     </v-tooltip>
 
-                     <v-tooltip location="top" :text="tm('market.removeSource')">
+                    <v-tooltip location="top" :text="tm('market.removeSource')">
                       <template v-slot:activator="{ props }">
                         <v-btn
                           v-bind="props"
@@ -1321,7 +1678,6 @@ watch(isListView, (newVal) => {
                     </v-tooltip>
                   </template>
                 </div>
-
               </div>
             </div>
 
@@ -1329,55 +1685,108 @@ watch(isListView, (newVal) => {
 
             <!-- FAB Button -->
             <v-tooltip :text="tm('market.installPlugin')" location="left">
-               <template v-slot:activator="{ props }">
+              <template v-slot:activator="{ props }">
                 <button
                   v-bind="props"
                   type="button"
                   class="v-btn v-btn--elevated v-btn--icon v-theme--PurpleThemeDark bg-darkprimary v-btn--density-default v-btn--size-x-large v-btn--variant-elevated fab-button"
-                  style="position: fixed; right: 52px; bottom: 52px; z-index: 10000; border-radius: 16px;" 
+                  style="
+                    position: fixed;
+                    right: 52px;
+                    bottom: 52px;
+                    z-index: 10000;
+                    border-radius: 16px;
+                  "
                   @click="dialog = true"
                 >
                   <span class="v-btn__overlay"></span>
                   <span class="v-btn__underlay"></span>
                   <span class="v-btn__content" data-no-activator="">
-                    <i class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default" aria-hidden="true" style="font-size: 32px;"></i>
+                    <i
+                      class="mdi-plus mdi v-icon notranslate v-theme--PurpleThemeDark v-icon--size-default"
+                      aria-hidden="true"
+                      style="font-size: 32px"
+                    ></i>
                   </span>
                 </button>
               </template>
             </v-tooltip>
 
             <div class="mt-4">
-              <div class="d-flex align-center mb-2" style="justify-content: space-between; flex-wrap: wrap; gap: 8px;">
-                <div class="d-flex align-center" style="gap: 6px;">
-                  <h2>{{ tm('market.allPlugins') }}({{ filteredMarketPlugins.length }})</h2>
-                  <v-btn icon variant="text" @click="refreshPluginMarket" :loading="refreshingMarket">
+              <div
+                class="d-flex align-center mb-2"
+                style="
+                  justify-content: space-between;
+                  flex-wrap: wrap;
+                  gap: 8px;
+                "
+              >
+                <div class="d-flex align-center" style="gap: 6px">
+                  <h2>
+                    {{ tm("market.allPlugins") }}({{
+                      filteredMarketPlugins.length
+                    }})
+                  </h2>
+                  <v-btn
+                    icon
+                    variant="text"
+                    @click="refreshPluginMarket"
+                    :loading="refreshingMarket"
+                  >
                     <v-icon>mdi-refresh</v-icon>
                   </v-btn>
                 </div>
 
-                <div class="d-flex align-center" style="gap: 8px; flex-wrap: wrap;">
-                  <v-pagination v-model="currentPage" :length="totalPages" :total-visible="5" size="small"
-                    density="comfortable"></v-pagination>
+                <div
+                  class="d-flex align-center"
+                  style="gap: 8px; flex-wrap: wrap"
+                >
+                  <v-pagination
+                    v-model="currentPage"
+                    :length="totalPages"
+                    :total-visible="5"
+                    size="small"
+                    density="comfortable"
+                  ></v-pagination>
 
                   <!-- 排序选择器 -->
-                  <v-select v-model="sortBy" :items="[
-                    { title: tm('sort.default'), value: 'default' },
-                    { title: tm('sort.stars'), value: 'stars' },
-                    { title: tm('sort.author'), value: 'author' },
-                    { title: tm('sort.updated'), value: 'updated' }
-                  ]" density="compact" variant="outlined" hide-details style="max-width: 150px;">
+                  <v-select
+                    v-model="sortBy"
+                    :items="[
+                      { title: tm('sort.default'), value: 'default' },
+                      { title: tm('sort.stars'), value: 'stars' },
+                      { title: tm('sort.author'), value: 'author' },
+                      { title: tm('sort.updated'), value: 'updated' },
+                    ]"
+                    density="compact"
+                    variant="outlined"
+                    hide-details
+                    style="max-width: 150px"
+                  >
                     <template v-slot:prepend-inner>
                       <v-icon size="small">mdi-sort</v-icon>
                     </template>
                   </v-select>
 
                   <!-- 排序方向切换按钮 -->
-                  <v-btn icon v-if="sortBy !== 'default'" @click="sortOrder = sortOrder === 'desc' ? 'asc' : 'desc'"
-                    variant="text" density="compact">
-                    <v-icon>{{ sortOrder === 'desc' ? 'mdi-sort-descending' : 'mdi-sort-ascending'
+                  <v-btn
+                    icon
+                    v-if="sortBy !== 'default'"
+                    @click="sortOrder = sortOrder === 'desc' ? 'asc' : 'desc'"
+                    variant="text"
+                    density="compact"
+                  >
+                    <v-icon>{{
+                      sortOrder === "desc"
+                        ? "mdi-sort-descending"
+                        : "mdi-sort-ascending"
                     }}</v-icon>
                     <v-tooltip activator="parent" location="top">
-                      {{ sortOrder === 'desc' ? tm('sort.descending') : tm('sort.ascending') }}
+                      {{
+                        sortOrder === "desc"
+                          ? tm("sort.descending")
+                          : tm("sort.ascending")
+                      }}
                     </v-tooltip>
                   </v-btn>
                   <!-- <v-switch v-model="showPluginFullName" :label="tm('market.showFullName')" hide-details
@@ -1385,50 +1794,140 @@ watch(isListView, (newVal) => {
                 </div>
               </div>
 
-              <v-row style="min-height: 26rem;">
-                <v-col v-for="plugin in paginatedPlugins" :key="plugin.name" cols="12" md="6" lg="4">
-                  <v-card class="rounded-lg d-flex flex-column plugin-card" elevation="0"
-                    style=" height: 12rem; position: relative;">
-
+              <v-row style="min-height: 26rem">
+                <v-col
+                  v-for="plugin in paginatedPlugins"
+                  :key="plugin.name"
+                  cols="12"
+                  md="6"
+                  lg="4"
+                >
+                  <v-card
+                    class="rounded-lg d-flex flex-column plugin-card"
+                    elevation="0"
+                    style="height: 12rem; position: relative"
+                  >
                     <!-- 推荐标记 -->
-                    <v-chip v-if="plugin?.pinned" color="warning" size="x-small" label
-                      style="position: absolute; right: 8px; top: 8px; z-index: 10; height: 20px; font-weight: bold;">
+                    <v-chip
+                      v-if="plugin?.pinned"
+                      color="warning"
+                      size="x-small"
+                      label
+                      style="
+                        position: absolute;
+                        right: 8px;
+                        top: 8px;
+                        z-index: 10;
+                        height: 20px;
+                        font-weight: bold;
+                      "
+                    >
                       🥳 推荐
                     </v-chip>
 
                     <v-card-text
-                      style="padding: 12px; padding-bottom: 8px; display: flex; gap: 12px; width: 100%; flex: 1; overflow: hidden;">
-                      <div style="flex-shrink: 0;">
-                        <img :src="plugin?.logo || defaultPluginIcon" :alt="plugin.name"
-                          style="height: 75px; width: 75px; border-radius: 8px; object-fit: cover;" />
+                      style="
+                        padding: 12px;
+                        padding-bottom: 8px;
+                        display: flex;
+                        gap: 12px;
+                        width: 100%;
+                        flex: 1;
+                        overflow: hidden;
+                      "
+                    >
+                      <div style="flex-shrink: 0">
+                        <img
+                          :src="plugin?.logo || defaultPluginIcon"
+                          :alt="plugin.name"
+                          style="
+                            height: 75px;
+                            width: 75px;
+                            border-radius: 8px;
+                            object-fit: cover;
+                          "
+                        />
                       </div>
 
-                      <div style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
+                      <div
+                        style="
+                          flex: 1;
+                          overflow: hidden;
+                          display: flex;
+                          flex-direction: column;
+                        "
+                      >
                         <!-- Display Name -->
-                        <div class="font-weight-bold"
-                          style="margin-bottom: 4px; line-height: 1.3; font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                          <span style="overflow: hidden; text-overflow: ellipsis;">
-                            {{ plugin.display_name?.length ? plugin.display_name :
-                              (showPluginFullName ? plugin.name : plugin.trimmedName) }}
+                        <div
+                          class="font-weight-bold"
+                          style="
+                            margin-bottom: 4px;
+                            line-height: 1.3;
+                            font-size: 1.2rem;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                          "
+                        >
+                          <span
+                            style="overflow: hidden; text-overflow: ellipsis"
+                          >
+                            {{
+                              plugin.display_name?.length
+                                ? plugin.display_name
+                                : showPluginFullName
+                                ? plugin.name
+                                : plugin.trimmedName
+                            }}
                           </span>
                         </div>
 
                         <!-- Author with link -->
-                        <div class="d-flex align-center" style="gap: 4px; margin-bottom: 6px;">
-                          <v-icon icon="mdi-account" size="x-small"
-                            style="color: rgba(var(--v-theme-on-surface), 0.5);"></v-icon>
-                          <a v-if="plugin?.social_link" :href="plugin.social_link" target="_blank"
+                        <div
+                          class="d-flex align-center"
+                          style="gap: 4px; margin-bottom: 6px"
+                        >
+                          <v-icon
+                            icon="mdi-account"
+                            size="x-small"
+                            style="color: rgba(var(--v-theme-on-surface), 0.5)"
+                          ></v-icon>
+                          <a
+                            v-if="plugin?.social_link"
+                            :href="plugin.social_link"
+                            target="_blank"
                             class="text-subtitle-2 font-weight-medium"
-                            style="text-decoration: none; color: rgb(var(--v-theme-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                            style="
+                              text-decoration: none;
+                              color: rgb(var(--v-theme-primary));
+                              white-space: nowrap;
+                              overflow: hidden;
+                              text-overflow: ellipsis;
+                            "
+                          >
                             {{ plugin.author }}
                           </a>
-                          <span v-else class="text-subtitle-2 font-weight-medium"
-                            style="color: rgb(var(--v-theme-primary)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                          <span
+                            v-else
+                            class="text-subtitle-2 font-weight-medium"
+                            style="
+                              color: rgb(var(--v-theme-primary));
+                              white-space: nowrap;
+                              overflow: hidden;
+                              text-overflow: ellipsis;
+                            "
+                          >
                             {{ plugin.author }}
                           </span>
-                          <div class="d-flex align-center text-subtitle-2 ml-2"
-                            style="color: rgba(var(--v-theme-on-surface), 0.7);">
-                            <v-icon icon="mdi-source-branch" size="x-small" style="margin-right: 2px;"></v-icon>
+                          <div
+                            class="d-flex align-center text-subtitle-2 ml-2"
+                            style="color: rgba(var(--v-theme-on-surface), 0.7)"
+                          >
+                            <v-icon
+                              icon="mdi-source-branch"
+                              size="x-small"
+                              style="margin-right: 2px"
+                            ></v-icon>
                             <span>{{ plugin.version }}</span>
                           </div>
                         </div>
@@ -1439,54 +1938,116 @@ watch(isListView, (newVal) => {
                         </div>
 
                         <!-- Stats: Stars & Updated & Version -->
-                        <div class="d-flex align-center" style="gap: 8px; margin-top: auto;">
-                          <div v-if="plugin.stars !== undefined" class="d-flex align-center text-subtitle-2"
-                            style="color: rgba(var(--v-theme-on-surface), 0.7);">
-                            <v-icon icon="mdi-star" size="x-small" style="margin-right: 2px;"></v-icon>
+                        <div
+                          class="d-flex align-center"
+                          style="gap: 8px; margin-top: auto"
+                        >
+                          <div
+                            v-if="plugin.stars !== undefined"
+                            class="d-flex align-center text-subtitle-2"
+                            style="color: rgba(var(--v-theme-on-surface), 0.7)"
+                          >
+                            <v-icon
+                              icon="mdi-star"
+                              size="x-small"
+                              style="margin-right: 2px"
+                            ></v-icon>
                             <span>{{ plugin.stars }}</span>
                           </div>
-                          <div v-if="plugin.updated_at" class="d-flex align-center text-subtitle-2"
-                            style="color: rgba(var(--v-theme-on-surface), 0.7);">
-                            <v-icon icon="mdi-clock-outline" size="x-small" style="margin-right: 2px;"></v-icon>
-                            <span>{{ new Date(plugin.updated_at).toLocaleString() }}</span>
+                          <div
+                            v-if="plugin.updated_at"
+                            class="d-flex align-center text-subtitle-2"
+                            style="color: rgba(var(--v-theme-on-surface), 0.7)"
+                          >
+                            <v-icon
+                              icon="mdi-clock-outline"
+                              size="x-small"
+                              style="margin-right: 2px"
+                            ></v-icon>
+                            <span>{{
+                              new Date(plugin.updated_at).toLocaleString()
+                            }}</span>
                           </div>
                         </div>
                       </div>
                     </v-card-text>
 
                     <!-- Actions -->
-                    <v-card-actions style="gap: 6px; padding: 8px 12px; padding-top: 0;">
-                      <v-chip v-for="tag in plugin.tags?.slice(0, 2)" :key="tag"
-                        :color="tag === 'danger' ? 'error' : 'primary'" label size="x-small" style="height: 20px;">
-                        {{ tag === 'danger' ? tm('tags.danger') : tag }}
+                    <v-card-actions
+                      style="gap: 6px; padding: 8px 12px; padding-top: 0"
+                    >
+                      <v-chip
+                        v-for="tag in plugin.tags?.slice(0, 2)"
+                        :key="tag"
+                        :color="tag === 'danger' ? 'error' : 'primary'"
+                        label
+                        size="x-small"
+                        style="height: 20px"
+                      >
+                        {{ tag === "danger" ? tm("tags.danger") : tag }}
                       </v-chip>
-                      <v-menu v-if="plugin.tags && plugin.tags.length > 2" open-on-hover offset-y>
+                      <v-menu
+                        v-if="plugin.tags && plugin.tags.length > 2"
+                        open-on-hover
+                        offset-y
+                      >
                         <template v-slot:activator="{ props: menuProps }">
-                          <v-chip v-bind="menuProps" color="grey" label size="x-small"
-                            style="height: 20px; cursor: pointer;">
+                          <v-chip
+                            v-bind="menuProps"
+                            color="grey"
+                            label
+                            size="x-small"
+                            style="height: 20px; cursor: pointer"
+                          >
                             +{{ plugin.tags.length - 2 }}
                           </v-chip>
                         </template>
                         <v-list density="compact">
-                          <v-list-item v-for="tag in plugin.tags.slice(2)" :key="tag">
-                            <v-chip :color="tag === 'danger' ? 'error' : 'primary'" label size="small">
-                              {{ tag === 'danger' ? tm('tags.danger') : tag }}
+                          <v-list-item
+                            v-for="tag in plugin.tags.slice(2)"
+                            :key="tag"
+                          >
+                            <v-chip
+                              :color="tag === 'danger' ? 'error' : 'primary'"
+                              label
+                              size="small"
+                            >
+                              {{ tag === "danger" ? tm("tags.danger") : tag }}
                             </v-chip>
                           </v-list-item>
                         </v-list>
                       </v-menu>
                       <v-spacer></v-spacer>
-                      <v-btn v-if="plugin?.repo" color="secondary" size="x-small" variant="tonal" :href="plugin.repo"
-                        target="_blank" style="height: 24px;">
+                      <v-btn
+                        v-if="plugin?.repo"
+                        color="secondary"
+                        size="x-small"
+                        variant="tonal"
+                        :href="plugin.repo"
+                        target="_blank"
+                        style="height: 24px"
+                      >
                         <v-icon icon="mdi-github" start size="x-small"></v-icon>
                         仓库
                       </v-btn>
-                      <v-btn v-if="!plugin?.installed" color="primary" size="x-small"
-                        @click="handleInstallPlugin(plugin)" variant="flat" style="height: 24px;">
-                        {{ tm('buttons.install') }}
+                      <v-btn
+                        v-if="!plugin?.installed"
+                        color="primary"
+                        size="x-small"
+                        @click="handleInstallPlugin(plugin)"
+                        variant="flat"
+                        style="height: 24px"
+                      >
+                        {{ tm("buttons.install") }}
                       </v-btn>
-                      <v-chip v-else color="success" size="x-small" label style="height: 20px;">
-                        ✓ {{ tm('status.installed') }}
+                      <v-chip
+                        v-else
+                        color="success"
+                        size="x-small"
+                        label
+                        style="height: 20px"
+                      >
+                        ✓ {{ tm("status.installed") }}
                       </v-chip>
                     </v-card-actions>
                   </v-card>
@@ -1495,14 +2056,23 @@ watch(isListView, (newVal) => {
 
               <!-- 底部分页控件 -->
               <div class="d-flex justify-center mt-4" v-if="totalPages > 1">
-                <v-pagination v-model="currentPage" :length="totalPages" :total-visible="7" size="small"></v-pagination>
+                <v-pagination
+                  v-model="currentPage"
+                  :length="totalPages"
+                  :total-visible="7"
+                  size="small"
+                ></v-pagination>
               </div>
             </div>
           </v-tab-item>
 
           <v-row v-if="loading_">
             <v-col cols="12" class="d-flex justify-center">
-              <v-progress-circular indeterminate color="primary" size="48"></v-progress-circular>
+              <v-progress-circular
+                indeterminate
+                color="primary"
+                size="48"
+              ></v-progress-circular>
             </v-col>
           </v-row>
         </v-card-text>
@@ -1519,9 +2089,15 @@ watch(isListView, (newVal) => {
           color="primary"
           class="text-none"
         >
-          {{ tm('market.devDocs') }}
+          {{ tm("market.devDocs") }}
         </v-btn>
-        <div style="height: 24px; width: 1px; background-color: rgba(var(--v-theme-on-surface), 0.12);"></div>
+        <div
+          style="
+            height: 24px;
+            width: 1px;
+            background-color: rgba(var(--v-theme-on-surface), 0.12);
+          "
+        ></div>
         <v-btn
           variant="text"
           prepend-icon="mdi-github"
@@ -1530,7 +2106,7 @@ watch(isListView, (newVal) => {
           color="primary"
           class="text-none"
         >
-          {{ tm('market.submitRepo') }}
+          {{ tm("market.submitRepo") }}
         </v-btn>
       </div>
     </v-col>
@@ -1539,16 +2115,29 @@ watch(isListView, (newVal) => {
   <!-- 配置对话框 -->
   <v-dialog v-model="configDialog" width="1000">
     <v-card>
-      <v-card-title class="text-h5">{{ tm('dialogs.config.title') }}</v-card-title>
+      <v-card-title class="text-h5">{{
+        tm("dialogs.config.title")
+      }}</v-card-title>
       <v-card-text>
-        <AstrBotConfig v-if="extension_config.metadata" :metadata="extension_config.metadata"
-          :iterable="extension_config.config" :metadataKey="curr_namespace" />
-        <p v-else>{{ tm('dialogs.config.noConfig') }}</p>
+        <AstrBotConfig
+          v-if="extension_config.metadata"
+          :metadata="extension_config.metadata"
+          :iterable="extension_config.config"
+          :metadataKey="curr_namespace"
+        />
+        <p v-else>{{ tm("dialogs.config.noConfig") }}</p>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="blue-darken-1" variant="text" @click="updateConfig">{{ tm('buttons.saveAndClose') }}</v-btn>
-        <v-btn color="blue-darken-1" variant="text" @click="configDialog = false">{{ tm('buttons.close') }}</v-btn>
+        <v-btn color="blue-darken-1" variant="text" @click="updateConfig">{{
+          tm("buttons.saveAndClose")
+        }}</v-btn>
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="configDialog = false"
+          >{{ tm("buttons.close") }}</v-btn
+        >
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -1557,20 +2146,34 @@ watch(isListView, (newVal) => {
   <v-dialog v-model="loadingDialog.show" width="700" persistent>
     <v-card>
       <v-card-title class="text-h5">{{ loadingDialog.title }}</v-card-title>
-      <v-card-text style="max-height: calc(100vh - 200px); overflow-y: auto;">
-        <v-progress-linear v-if="loadingDialog.statusCode === 0" indeterminate color="primary"
-          class="mb-4"></v-progress-linear>
+      <v-card-text style="max-height: calc(100vh - 200px); overflow-y: auto">
+        <v-progress-linear
+          v-if="loadingDialog.statusCode === 0"
+          indeterminate
+          color="primary"
+          class="mb-4"
+        ></v-progress-linear>
 
         <div v-if="loadingDialog.statusCode !== 0" class="py-8 text-center">
-          <v-icon class="mb-6" :color="loadingDialog.statusCode === 1 ? 'success' : 'error'"
-            :icon="loadingDialog.statusCode === 1 ? 'mdi-check-circle-outline' : 'mdi-alert-circle-outline'"
-            size="128"></v-icon>
+          <v-icon
+            class="mb-6"
+            :color="loadingDialog.statusCode === 1 ? 'success' : 'error'"
+            :icon="
+              loadingDialog.statusCode === 1
+                ? 'mdi-check-circle-outline'
+                : 'mdi-alert-circle-outline'
+            "
+            size="128"
+          ></v-icon>
           <div class="text-h4 font-weight-bold">{{ loadingDialog.result }}</div>
         </div>
 
-        <div style="margin-top: 32px;">
-          <h3>{{ tm('dialogs.loading.logs') }}</h3>
-          <ConsoleDisplayer historyNum="10" style="height: 200px; margin-top: 16px; margin-bottom: 24px;">
+        <div style="margin-top: 32px">
+          <h3>{{ tm("dialogs.loading.logs") }}</h3>
+          <ConsoleDisplayer
+            historyNum="10"
+            style="height: 200px; margin-top: 16px; margin-bottom: 24px"
+          >
           </ConsoleDisplayer>
         </div>
       </v-card-text>
@@ -1579,7 +2182,12 @@ watch(isListView, (newVal) => {
 
       <v-card-actions class="pa-4">
         <v-spacer></v-spacer>
-        <v-btn color="blue-darken-1" variant="text" @click="resetLoadingDialog">{{ tm('buttons.close') }}</v-btn>
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="resetLoadingDialog"
+          >{{ tm("buttons.close") }}</v-btn
+        >
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -1587,12 +2195,18 @@ watch(isListView, (newVal) => {
   <!-- 插件信息对话框 -->
   <v-dialog v-model="showPluginInfoDialog" width="1200">
     <v-card>
-      <v-card-title class="text-h5">{{ selectedPlugin.name }} {{ tm('buttons.viewInfo') }}</v-card-title>
+      <v-card-title class="text-h5"
+        >{{ selectedPlugin.name }} {{ tm("buttons.viewInfo") }}</v-card-title
+      >
       <v-card-text>
-        <v-data-table style="font-size: 17px;" :headers="plugin_handler_info_headers" :items="selectedPlugin.handlers"
-          item-key="name">
+        <v-data-table
+          style="font-size: 17px"
+          :headers="plugin_handler_info_headers"
+          :items="selectedPlugin.handlers"
+          item-key="name"
+        >
           <template v-slot:header.id="{ column }">
-            <p style="font-weight: bold;">{{ column.title }}</p>
+            <p style="font-weight: bold">{{ column.title }}</p>
           </template>
           <template v-slot:item.event_type="{ item }">
             {{ item.event_type }}
@@ -1606,51 +2220,84 @@ watch(isListView, (newVal) => {
             </v-chip>
           </template>
           <template v-slot:item.cmd="{ item }">
-            <span style="font-weight: bold;">{{ item.cmd }}</span>
+            <span style="font-weight: bold">{{ item.cmd }}</span>
           </template>
         </v-data-table>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="blue-darken-1" variant="text" @click="showPluginInfoDialog = false">{{ tm('buttons.close')
-          }}</v-btn>
+        <v-btn
+          color="blue-darken-1"
+          variant="text"
+          @click="showPluginInfoDialog = false"
+          >{{ tm("buttons.close") }}</v-btn
+        >
       </v-card-actions>
     </v-card>
   </v-dialog>
 
-  <v-snackbar :timeout="2000" elevation="24" :color="snack_success" v-model="snack_show">
+  <v-snackbar
+    :timeout="2000"
+    elevation="24"
+    :color="snack_success"
+    v-model="snack_show"
+  >
     {{ snack_message }}
   </v-snackbar>
 
-  <ReadmeDialog v-model:show="readmeDialog.show" :plugin-name="readmeDialog.pluginName"
-    :repo-url="readmeDialog.repoUrl" />
+  <ReadmeDialog
+    v-model:show="readmeDialog.show"
+    :plugin-name="readmeDialog.pluginName"
+    :repo-url="readmeDialog.repoUrl"
+  />
+
+  <!-- 插件更新日志对话框（复用 ReadmeDialog） -->
+  <ReadmeDialog
+    v-model:show="changelogDialog.show"
+    :plugin-name="changelogDialog.pluginName"
+    :repo-url="changelogDialog.repoUrl"
+    mode="changelog"
+  />
 
   <!-- 卸载插件确认对话框（列表模式用） -->
-  <UninstallConfirmDialog v-model="showUninstallDialog" @confirm="handleUninstallConfirm" />
+  <UninstallConfirmDialog
+    v-model="showUninstallDialog"
+    @confirm="handleUninstallConfirm"
+  />
 
   <!-- 指令冲突提示对话框 -->
   <v-dialog v-model="conflictDialog.show" max-width="420">
     <v-card class="rounded-lg">
       <v-card-title class="d-flex align-center pa-4">
         <v-icon color="warning" class="mr-2">mdi-alert-circle</v-icon>
-        {{ tm('conflicts.title') }}
+        {{ tm("conflicts.title") }}
       </v-card-title>
       <v-card-text class="px-4 pb-2">
         <div class="d-flex align-center mb-3">
-          <v-chip color="warning" variant="tonal" size="large" class="font-weight-bold">
+          <v-chip
+            color="warning"
+            variant="tonal"
+            size="large"
+            class="font-weight-bold"
+          >
             {{ conflictDialog.count }}
           </v-chip>
-          <span class="ml-2 text-body-1">{{ tm('conflicts.pairs') }}</span>
+          <span class="ml-2 text-body-1">{{ tm("conflicts.pairs") }}</span>
         </div>
-        <p class="text-body-2" style="color: rgba(var(--v-theme-on-surface), 0.7);">
-          {{ tm('conflicts.message') }}
+        <p
+          class="text-body-2"
+          style="color: rgba(var(--v-theme-on-surface), 0.7)"
+        >
+          {{ tm("conflicts.message") }}
         </p>
       </v-card-text>
       <v-card-actions class="pa-4 pt-2">
         <v-spacer></v-spacer>
-        <v-btn variant="text" @click="conflictDialog.show = false">{{ tm('conflicts.later') }}</v-btn>
+        <v-btn variant="text" @click="conflictDialog.show = false">{{
+          tm("conflicts.later")
+        }}</v-btn>
         <v-btn color="warning" variant="flat" @click="handleConflictConfirm">
-          {{ tm('conflicts.goToManage') }}
+          {{ tm("conflicts.goToManage") }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -1661,18 +2308,18 @@ watch(isListView, (newVal) => {
     <v-card>
       <v-card-title class="text-h5 d-flex align-center">
         <v-icon color="warning" class="mr-2">mdi-alert-circle</v-icon>
-        {{ tm('dialogs.danger_warning.title') }}
+        {{ tm("dialogs.danger_warning.title") }}
       </v-card-title>
       <v-card-text>
-        <div>{{ tm('dialogs.danger_warning.message') }}</div>
+        <div>{{ tm("dialogs.danger_warning.message") }}</div>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn color="grey" @click="cancelDangerInstall">
-          {{ tm('dialogs.danger_warning.cancel') }}
+          {{ tm("dialogs.danger_warning.cancel") }}
         </v-btn>
         <v-btn color="warning" @click="confirmDangerInstall">
-          {{ tm('dialogs.danger_warning.confirm') }}
+          {{ tm("dialogs.danger_warning.confirm") }}
         </v-btn>
       </v-card-actions>
     </v-card>
@@ -1680,38 +2327,65 @@ watch(isListView, (newVal) => {
 
   <!-- 上传插件对话框 -->
   <v-dialog v-model="dialog" width="500">
-    <div class="v-card v-card--density-default rounded-lg v-card--variant-elevated">
+    <div
+      class="v-card v-card--density-default rounded-lg v-card--variant-elevated"
+    >
       <div class="v-card__loader">
-        <v-progress-linear :indeterminate="loading_" color="primary" height="2" :active="loading_"></v-progress-linear>
+        <v-progress-linear
+          :indeterminate="loading_"
+          color="primary"
+          height="2"
+          :active="loading_"
+        ></v-progress-linear>
       </div>
 
-      <div class="v-card-title text-h5">{{ tm('dialogs.install.title') }}</div>
-      
+      <div class="v-card-title text-h5">{{ tm("dialogs.install.title") }}</div>
+
       <div class="v-card-text">
         <v-tabs v-model="uploadTab" color="primary">
-          <v-tab value="file">{{ tm('dialogs.install.fromFile') }}</v-tab>
-          <v-tab value="url">{{ tm('dialogs.install.fromUrl') }}</v-tab>
+          <v-tab value="file">{{ tm("dialogs.install.fromFile") }}</v-tab>
+          <v-tab value="url">{{ tm("dialogs.install.fromUrl") }}</v-tab>
         </v-tabs>
 
         <v-window v-model="uploadTab" class="mt-4">
           <v-window-item value="file">
             <div class="d-flex flex-column align-center justify-center pa-4">
-              <v-file-input ref="fileInput" v-model="upload_file" :label="tm('upload.selectFile')" accept=".zip"
-                hide-details hide-input class="d-none"></v-file-input>
+              <v-file-input
+                ref="fileInput"
+                v-model="upload_file"
+                :label="tm('upload.selectFile')"
+                accept=".zip"
+                hide-details
+                hide-input
+                class="d-none"
+              ></v-file-input>
 
-              <v-btn color="primary" size="large" prepend-icon="mdi-upload" @click="$refs.fileInput.click()" elevation="2">
-                {{ tm('buttons.selectFile') }}
+              <v-btn
+                color="primary"
+                size="large"
+                prepend-icon="mdi-upload"
+                @click="$refs.fileInput.click()"
+                elevation="2"
+              >
+                {{ tm("buttons.selectFile") }}
               </v-btn>
 
               <div class="text-body-2 text-medium-emphasis mt-2">
-                {{ tm('messages.supportedFormats') }}
+                {{ tm("messages.supportedFormats") }}
               </div>
 
               <div v-if="upload_file" class="mt-4 text-center">
-                <v-chip color="primary" size="large" closable @click:close="upload_file = null">
+                <v-chip
+                  color="primary"
+                  size="large"
+                  closable
+                  @click:close="upload_file = null"
+                >
                   {{ upload_file.name }}
                   <template v-slot:append>
-                    <span class="text-caption ml-2">({{ (upload_file.size / 1024).toFixed(1) }}KB)</span>
+                    <span class="text-caption ml-2"
+                      >({{ (upload_file.size / 1024).toFixed(1) }}KB)</span
+                    >
                   </template>
                 </v-chip>
               </div>
@@ -1720,10 +2394,16 @@ watch(isListView, (newVal) => {
 
           <v-window-item value="url">
             <div class="pa-4">
-              <v-text-field v-model="extension_url" :label="tm('upload.enterUrl')" variant="outlined"
-                prepend-inner-icon="mdi-link" hide-details class="rounded-lg mb-4"
-                placeholder="https://github.com/username/repo"></v-text-field>
-              
+              <v-text-field
+                v-model="extension_url"
+                :label="tm('upload.enterUrl')"
+                variant="outlined"
+                prepend-inner-icon="mdi-link"
+                hide-details
+                class="rounded-lg mb-4"
+                placeholder="https://github.com/username/repo"
+              ></v-text-field>
+
               <ProxySelector></ProxySelector>
             </div>
           </v-window-item>
@@ -1732,8 +2412,12 @@ watch(isListView, (newVal) => {
 
       <div class="v-card-actions">
         <v-spacer></v-spacer>
-        <v-btn color="grey" variant="text" @click="dialog = false">{{ tm('buttons.cancel') }}</v-btn>
-        <v-btn color="primary" variant="text" @click="newExtension">{{ tm('buttons.install') }}</v-btn>
+        <v-btn color="grey" variant="text" @click="dialog = false">{{
+          tm("buttons.cancel")
+        }}</v-btn>
+        <v-btn color="primary" variant="text" @click="newExtension">{{
+          tm("buttons.install")
+        }}</v-btn>
       </div>
     </div>
   </v-dialog>
@@ -1741,7 +2425,9 @@ watch(isListView, (newVal) => {
   <!-- 添加/编辑自定义插件源对话框 -->
   <v-dialog v-model="showSourceDialog" width="500">
     <v-card>
-      <v-card-title class="text-h5">{{ editingSource ? tm('market.editSource') : tm('market.addSource') }}</v-card-title>
+      <v-card-title class="text-h5">{{
+        editingSource ? tm("market.editSource") : tm("market.addSource")
+      }}</v-card-title>
       <v-card-text>
         <div class="pa-2">
           <v-text-field
@@ -1753,7 +2439,7 @@ watch(isListView, (newVal) => {
             class="mb-4"
             placeholder="我的插件源"
           ></v-text-field>
-          
+
           <v-text-field
             v-model="sourceUrl"
             :label="tm('market.sourceUrl')"
@@ -1762,16 +2448,20 @@ watch(isListView, (newVal) => {
             hide-details
             placeholder="https://example.com/plugins.json"
           ></v-text-field>
-          
+
           <div class="text-caption text-medium-emphasis mt-2">
-            {{ tm('messages.enterJsonUrl') }}
+            {{ tm("messages.enterJsonUrl") }}
           </div>
         </div>
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="grey" variant="text" @click="showSourceDialog = false">{{ tm('buttons.cancel') }}</v-btn>
-        <v-btn color="primary" variant="text" @click="saveCustomSource">{{ tm('buttons.save') }}</v-btn>
+        <v-btn color="grey" variant="text" @click="showSourceDialog = false">{{
+          tm("buttons.cancel")
+        }}</v-btn>
+        <v-btn color="primary" variant="text" @click="saveCustomSource">{{
+          tm("buttons.save")
+        }}</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -1781,10 +2471,10 @@ watch(isListView, (newVal) => {
     <v-card>
       <v-card-title class="text-h5 d-flex align-center">
         <v-icon color="warning" class="mr-2">mdi-alert-circle</v-icon>
-        {{ tm('dialogs.uninstall.title') }}
+        {{ tm("dialogs.uninstall.title") }}
       </v-card-title>
       <v-card-text>
-        <div>{{ tm('market.confirmRemoveSource') }}</div>
+        <div>{{ tm("market.confirmRemoveSource") }}</div>
         <div v-if="sourceToRemove" class="mt-2">
           <strong>{{ sourceToRemove.name }}</strong>
           <div class="text-caption">{{ sourceToRemove.url }}</div>
@@ -1792,8 +2482,15 @@ watch(isListView, (newVal) => {
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="grey" variant="text" @click="showRemoveSourceDialog = false">{{ tm('buttons.cancel') }}</v-btn>
-        <v-btn color="error" variant="text" @click="confirmRemoveSource">{{ tm('buttons.deleteSource') }}</v-btn>
+        <v-btn
+          color="grey"
+          variant="text"
+          @click="showRemoveSourceDialog = false"
+          >{{ tm("buttons.cancel") }}</v-btn
+        >
+        <v-btn color="error" variant="text" @click="confirmRemoveSource">{{
+          tm("buttons.deleteSource")
+        }}</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -1803,15 +2500,19 @@ watch(isListView, (newVal) => {
     <v-card class="rounded-lg">
       <v-card-title class="text-h6 d-flex align-center">
         <v-icon color="info" class="mr-2">mdi-information-outline</v-icon>
-        {{ tm('dialogs.forceUpdate.title') }}
+        {{ tm("dialogs.forceUpdate.title") }}
       </v-card-title>
       <v-card-text>
-        {{ tm('dialogs.forceUpdate.message') }}
+        {{ tm("dialogs.forceUpdate.message") }}
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn variant="text" @click="forceUpdateDialog.show = false">{{ tm('buttons.cancel') }}</v-btn>
-        <v-btn color="primary" variant="flat" @click="confirmForceUpdate">{{ tm('dialogs.forceUpdate.confirm') }}</v-btn>
+        <v-btn variant="text" @click="forceUpdateDialog.show = false">{{
+          tm("buttons.cancel")
+        }}</v-btn>
+        <v-btn color="primary" variant="flat" @click="confirmForceUpdate">{{
+          tm("dialogs.forceUpdate.confirm")
+        }}</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>