From c67a63267f09d385c8e2016ff5ac958b84ba935c Mon Sep 17 00:00:00 2001
From: Estrella Pan <estrellaxd05@gmail.com>
Date: Fri, 9 Oct 2026 15:34:31 +0200
Subject: [PATCH] =?UTF-8?q?fix(webui):=20=E5=A4=84=E7=90=86=E5=B8=82?=
 =?UTF-8?q?=E5=9C=BA=E9=A1=B5=E4=B8=8E=E5=86=85=E7=BD=AE=E6=8F=92=E4=BB=B6?=
 =?UTF-8?q?=E6=96=87=E6=A1=88=E7=9A=84=E5=AE=A1=E6=9F=A5=E6=84=8F=E8=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 设置页与市场页通过 pluginSetVersion 在再次进入时互相同步；刷新逻辑合并为 refreshPluginState
- 安装成功后本地更新 installed_version，不再重新下载目录
- 选中的插件变化时关闭确认栏，避免装错插件
- 本机版本比目录新时不提示更新
- 内置插件文案只用于 source 为 builtin 的插件
- README：链接中的行内代码、段落中的“2024.”、分隔线、标题中的“C#”
---
 .../src/components/setting/config-plugins.vue | 32 +++++++-------
 webui/src/hooks/usePluginRefresh.ts           | 23 ++++++++++
 webui/src/pages/index/market/[[id]].vue       | 40 ++++++-----------
 webui/src/pages/index/market/market.test.ts   |  5 ++-
 webui/src/utils/__tests__/markdown.test.ts    | 18 ++++++--
 .../src/utils/__tests__/plugin-market.test.ts | 23 ++++++----
 webui/src/utils/markdown.ts                   | 21 +++++++--
 webui/src/utils/plugin-market.ts              | 15 ++++++-
 webui/src/utils/plugin-text.ts                | 43 +++++++++++++------
 webui/types/dts/auto-imports.d.ts             |  2 +
 10 files changed, 149 insertions(+), 73 deletions(-)
 create mode 100644 webui/src/hooks/usePluginRefresh.ts

diff --git a/webui/src/components/setting/config-plugins.vue b/webui/src/components/setting/config-plugins.vue
index 507f570b..c5cbcf7a 100644
--- a/webui/src/components/setting/config-plugins.vue
+++ b/webui/src/components/setting/config-plugins.vue
@@ -9,8 +9,7 @@ import PluginSchemaForm from './plugin-schema-form.vue';
 import type { PluginInfo, PluginsOverview } from '#/plugins';
 import { apiPlugins } from '@/api/plugins';
 import { useConfirm } from '@/hooks/useConfirm';
-import { refreshPluginProviders } from '@/hooks/usePluginProviders';
-import { refreshPluginUi } from '@/hooks/usePluginUi';
+import { pluginSetVersion, refreshPluginState } from '@/hooks/usePluginRefresh';
 import { idLabel } from '@/utils/id-label';
 import { fillSchemaDefaults, schemaFields } from '@/utils/plugin-schema';
 import {
@@ -27,13 +26,13 @@ const message = useMessage();
 const router = useRouter();
 const { confirm } = useConfirm();
 const configStore = useConfigStore();
-const { refreshGroup } = configStore;
 
 const overview = ref<PluginsOverview | null>(null);
 const drafts = ref<Record<string, Record<string, unknown>>>({});
 // 并发操作各自占用一个 key，互不覆盖对方的加载态
 const busy = ref(new Set<string>());
 const loadError = ref(false);
+let seenVersion = pluginSetVersion.value;
 
 const stateType = {
   active: 'success',
@@ -84,12 +83,8 @@ async function run(
   busy.value.add(key);
   try {
     apply(await action());
-    // 只刷新插件卡片保存的字段，保留未保存的下载器实例与 slots 修改
-    await refreshGroup('plugins', ['allow_unsigned', 'enabled', 'options']);
-    // 插件启停会增减下载器/通知渠道候选，同步刷新下拉框
-    await refreshPluginProviders();
-    // 启停也会增减插件的前端挂载点
-    await refreshPluginUi();
+    await refreshPluginState();
+    seenVersion = pluginSetVersion.value;
     return true;
   } catch {
     // 后端的具体原因（如验签失败）由 axios 拦截器另行提示
@@ -139,7 +134,7 @@ async function setEnabled(plugin: PluginInfo, enabled: boolean) {
     impact &&
     !(await confirm({
       title: t('config.plugins_set.disable_confirm_title', {
-        name: pluginName(t, plugin.id, plugin.name),
+        name: pluginName(t, plugin),
       }),
       body: impact,
       confirmText: t('config.plugins_set.disable'),
@@ -163,7 +158,7 @@ async function saveOptions(plugin: PluginInfo) {
 async function uninstall(plugin: PluginInfo) {
   const confirmed = await confirm({
     title: t('config.plugins_set.uninstall_confirm_title', {
-      name: pluginName(t, plugin.id, plugin.name),
+      name: pluginName(t, plugin),
     }),
     body: [impactText(plugin), t('config.plugins_set.uninstall_confirm_body')]
       .filter(Boolean)
@@ -181,6 +176,13 @@ async function uninstall(plugin: PluginInfo) {
 }
 
 onMounted(load);
+
+// 设置页被 KeepAlive 缓存：插件市场安装或更新后，再次进入时重新加载列表
+onActivated(() => {
+  if (seenVersion === pluginSetVersion.value) return;
+  seenVersion = pluginSetVersion.value;
+  return load();
+});
 </script>
 
 <template>
@@ -219,7 +221,7 @@ onMounted(load);
       >
         <header class="plugin__header">
           <div class="plugin__title">
-            <strong>{{ pluginName(t, plugin.id, plugin.name) }}</strong>
+            <strong>{{ pluginName(t, plugin) }}</strong>
             <span class="plugin__meta"
               >{{ plugin.id }} · v{{ plugin.version }}</span
             >
@@ -229,7 +231,7 @@ onMounted(load);
             :loading="busy.has(plugin.id)"
             :aria-label="
               $t('config.plugins_set.enabled_for', {
-                name: pluginName(t, plugin.id, plugin.name),
+                name: pluginName(t, plugin),
               })
             "
             @update:model-value="setEnabled(plugin, $event)"
@@ -247,7 +249,7 @@ onMounted(load);
         </div>
 
         <p v-if="plugin.description" class="plugin__desc">
-          {{ pluginDescription(t, plugin.id, plugin.description) }}
+          {{ pluginDescription(t, plugin) }}
         </p>
         <AbAlert
           v-if="plugin.error && plugin.error !== 'not_enabled'"
@@ -278,7 +280,7 @@ onMounted(load);
             <PluginSchemaForm
               v-model="drafts[plugin.id]"
               :fields="
-                localizeFields(t, plugin.id, schemaFields(plugin.config_schema))
+                localizeFields(t, plugin, schemaFields(plugin.config_schema))
               "
             />
             <div class="plugin__save">
diff --git a/webui/src/hooks/usePluginRefresh.ts b/webui/src/hooks/usePluginRefresh.ts
new file mode 100644
index 00000000..d28bf4fa
--- /dev/null
+++ b/webui/src/hooks/usePluginRefresh.ts
@@ -0,0 +1,23 @@
+import { refreshPluginProviders } from '@/hooks/usePluginProviders';
+import { refreshPluginUi } from '@/hooks/usePluginUi';
+
+/** 插件集合每变化一次加一；被 KeepAlive 缓存的页面再次进入时据此判断是否重新加载 */
+export const pluginSetVersion = ref(0);
+
+/**
+ * 插件安装、卸载、启停或改配置后调用：同步 config store 的 plugins 段（只刷新
+ * 插件卡片保存的字段，保留未保存的下载器实例与 slots 修改）、下载器/通知渠道
+ * 候选与插件前端挂载点。
+ */
+export async function refreshPluginState() {
+  pluginSetVersion.value++;
+  await Promise.all([
+    useConfigStore().refreshGroup('plugins', [
+      'allow_unsigned',
+      'enabled',
+      'options',
+    ]),
+    refreshPluginProviders(),
+    refreshPluginUi(),
+  ]);
+}
diff --git a/webui/src/pages/index/market/[[id]].vue b/webui/src/pages/index/market/[[id]].vue
index c843ae1c..1b5387ac 100644
--- a/webui/src/pages/index/market/[[id]].vue
+++ b/webui/src/pages/index/market/[[id]].vue
@@ -4,8 +4,7 @@ import MarketConfirm from '@/components/market/market-confirm.vue';
 import type { ApiError } from '#/api';
 import type { CatalogEntry, PluginInfo } from '#/plugins';
 import { apiPlugins } from '@/api/plugins';
-import { refreshPluginProviders } from '@/hooks/usePluginProviders';
-import { refreshPluginUi } from '@/hooks/usePluginUi';
+import { pluginSetVersion, refreshPluginState } from '@/hooks/usePluginRefresh';
 import { idLabel } from '@/utils/id-label';
 import { renderMarkdown } from '@/utils/markdown';
 import {
@@ -31,7 +30,6 @@ const message = useMessage();
 const route = useRoute();
 const router = useRouter();
 const { isMobile } = useBreakpointQuery();
-const { refreshGroup } = useConfigStore();
 
 // 目录：成功获取后写入 localStorage；目录不可达时显示上一次的目录（stale），
 // 此时安装与更新不可用。error 为 null 表示最近一次获取成功，'' 表示失败但后端没给原因。
@@ -74,21 +72,12 @@ async function loadInstalled() {
 
 onMounted(() => Promise.all([loadCatalog(), loadInstalled()]));
 
-// 页面被 KeepAlive 缓存；再次进入时按本机插件同步安装状态（设置页可能卸载过），不重新下载目录
-let activated = false;
-onActivated(async () => {
-  if (!activated) {
-    activated = true;
-    return;
-  }
-  await loadInstalled();
-  if (!catalog.value) return;
-  catalog.value = catalog.value.map((entry) => ({
-    ...entry,
-    installed_version:
-      installed.value.find((p) => p.id === entry.id && p.source === 'catalog')
-        ?.version ?? null,
-  }));
+// 页面被 KeepAlive 缓存：其它页面（如设置）改过插件后，再次进入时重新获取目录与安装状态
+let seenVersion = pluginSetVersion.value;
+onActivated(() => {
+  if (seenVersion === pluginSetVersion.value) return;
+  seenVersion = pluginSetVersion.value;
+  return Promise.all([loadCatalog(), loadInstalled()]);
 });
 
 // 相对时间每分钟刷新一次
@@ -156,7 +145,10 @@ const selected = computed(() => {
 const showDetail = computed(() => isMobile.value && Boolean(routeId.value));
 
 const confirming = ref(false);
-watch(routeId, () => (confirming.value = false));
+watch(
+  () => selected.value?.id,
+  () => (confirming.value = false)
+);
 
 function back() {
   if ((window.history.state as { back?: unknown } | null)?.back) router.back();
@@ -218,15 +210,11 @@ async function install(entry: CatalogEntry) {
       ? t('market.update_success', { name, version: entry.version })
       : t('market.install_success', { name })
   );
+  entry.installed_version = entry.version;
   confirming.value = false;
   busy.value = false;
-  // 与设置页插件卡片相同：同步 config store 的 plugins 段、Provider 候选与前端挂载点
-  await Promise.all([
-    loadCatalog(),
-    refreshGroup('plugins', ['allow_unsigned', 'enabled', 'options']),
-    refreshPluginProviders(),
-    refreshPluginUi(),
-  ]);
+  await refreshPluginState();
+  seenVersion = pluginSetVersion.value;
 }
 
 function pointLabel(id: string) {
diff --git a/webui/src/pages/index/market/market.test.ts b/webui/src/pages/index/market/market.test.ts
index 1ef23558..8331cb1a 100644
--- a/webui/src/pages/index/market/market.test.ts
+++ b/webui/src/pages/index/market/market.test.ts
@@ -165,7 +165,7 @@ describe('market page', () => {
     expect(w.findAll('.row-link')).toHaveLength(2);
   });
 
-  it('should install after the confirm step and refresh catalog, config and plugin UI', async () => {
+  it('should mark the plugin installed without a catalog refetch when the confirmed install succeeds', async () => {
     api.catalog.mockResolvedValue([entry()]);
     api.install.mockResolvedValue({ allow_unsigned: false, plugins: [] });
     const w = await mountPage();
@@ -178,7 +178,8 @@ describe('market page', () => {
     await flushPromises();
 
     expect(api.install).toHaveBeenCalledWith('bili');
-    expect(api.catalog).toHaveBeenCalledTimes(2);
+    expect(api.catalog).toHaveBeenCalledTimes(1);
+    expect(w.text()).toContain('market.state.installed');
     expect(refreshGroup).toHaveBeenCalledWith(
       'plugins',
       expect.arrayContaining(['enabled'])
diff --git a/webui/src/utils/__tests__/markdown.test.ts b/webui/src/utils/__tests__/markdown.test.ts
index e91e8e63..a897afb1 100644
--- a/webui/src/utils/__tests__/markdown.test.ts
+++ b/webui/src/utils/__tests__/markdown.test.ts
@@ -22,9 +22,19 @@ describe('renderMarkdown', () => {
       '[docs](https://a.io/x_y_z)',
       '<p><a href="https://a.io/x_y_z" target="_blank" rel="noopener noreferrer">docs</a></p>',
     ],
-  ])('should render %j', (source, html) => {
-    expect(renderMarkdown(source)).toBe(html);
-  });
+    [
+      '[`sdk`](https://a.io)',
+      '<p><a href="https://a.io" target="_blank" rel="noopener noreferrer"><code>sdk</code></a></p>',
+    ],
+    ['Released in\n2024. It works', '<p>Released in 2024. It works</p>'],
+    ['* * *', '<hr>'],
+    ['# C#', '<h3>C#</h3>'],
+  ])(
+    'should render %j as the expected HTML when it is the source',
+    (source, html) => {
+      expect(renderMarkdown(source)).toBe(html);
+    }
+  );
 
   it.each([
     [
@@ -40,7 +50,7 @@ describe('renderMarkdown', () => {
     ['[x](data:text/html,hi)', '<p>x</p>'],
     ['![pic](https://a.io/p.png)', '<p>pic</p>'],
     ['# <iframe src=x>', '<h3>&lt;iframe src=x&gt;</h3>'],
-  ])('should neutralise %j', (source, html) => {
+  ])('should neutralise the markup when the source is %j', (source, html) => {
     expect(renderMarkdown(source)).toBe(html);
   });
 
diff --git a/webui/src/utils/__tests__/plugin-market.test.ts b/webui/src/utils/__tests__/plugin-market.test.ts
index 41662204..a22d8baa 100644
--- a/webui/src/utils/__tests__/plugin-market.test.ts
+++ b/webui/src/utils/__tests__/plugin-market.test.ts
@@ -56,14 +56,19 @@ describe('categoriesOf', () => {
 
 describe('entryState', () => {
   it.each([
-    [null, 'available'],
-    ['0.2.0', 'installed'],
-    ['0.1.0', 'update'],
-  ] as const)('should be %s → %s', (installed, state) => {
-    expect(entryState(catalogEntry({ installed_version: installed }))).toBe(
-      state
-    );
-  });
+    ['available', null],
+    ['installed', '0.2.0'],
+    ['update', '0.1.0'],
+    ['update', '0.2.0-beta.1'],
+    ['installed', '0.3.0'],
+  ] as const)(
+    'should give state %s when the installed version is %s',
+    (state, installed) => {
+      expect(entryState(catalogEntry({ installed_version: installed }))).toBe(
+        state
+      );
+    }
+  );
 });
 
 describe('filterEntries', () => {
@@ -128,7 +133,7 @@ describe('filterEntries', () => {
 });
 
 describe('permissionDiff', () => {
-  it('should split kept, added and removed permissions', () => {
+  it('should split kept, added and removed permissions when an update changes them', () => {
     expect(
       permissionDiff(['filesystem', 'fs.write'], ['filesystem', 'network'])
     ).toEqual({
diff --git a/webui/src/utils/markdown.ts b/webui/src/utils/markdown.ts
index dd5d9cca..9208e734 100644
--- a/webui/src/utils/markdown.ts
+++ b/webui/src/utils/markdown.ts
@@ -38,10 +38,15 @@ function inline(raw: string): string {
         : text
     );
   html = emphasis(html);
-  return html.replace(/\uE000(\d+)\uE000/g, (_, i: string) => tokens[+i]);
+  // 链接文字里可能还有行内代码的占位符，逐层还原
+  const held = /\uE000(\d+)\uE000/g;
+  while (held.test(html))
+    html = html.replace(held, (_, i: string) => tokens[+i]);
+  return html;
 }
 
 const LIST_ITEM = /^\s*(?:([-*+])|(\d+)[.)])\s+(.*)$/;
+const RULE = /^\s*([-*_])(?:\s*\1){2,}\s*$/;
 
 export function renderMarkdown(source: string): string {
   const lines = source
@@ -77,7 +82,13 @@ export function renderMarkdown(source: string): string {
       code = [];
       continue;
     }
-    const heading = /^\s*(#{1,6})\s+(.*?)\s*#*\s*$/.exec(line);
+    if (RULE.test(line)) {
+      flush();
+      out.push('<hr>');
+      continue;
+    }
+    // 结尾的 # 只有与正文隔着空格时才是闭合符号（如 “C#” 保留）
+    const heading = /^\s*(#{1,6})\s+(.*?)(?:\s+#+)?\s*$/.exec(line);
     if (heading) {
       flush();
       // README 嵌在详情栏里，标题从 h3 起，不与页面标题争层级
@@ -86,7 +97,11 @@ export function renderMarkdown(source: string): string {
       continue;
     }
     const item = LIST_ITEM.exec(line);
-    if (item) {
+    // 有序列表只有从 1 开始才能打断段落，否则 “2024. 起” 这样的行会被当成列表
+    if (
+      item &&
+      !(paragraph.length && item[2] !== undefined && item[2] !== '1')
+    ) {
       const ordered = item[2] !== undefined;
       if (paragraph.length || (list && list.ordered !== ordered)) flush();
       list ??= { ordered, items: [] };
diff --git a/webui/src/utils/plugin-market.ts b/webui/src/utils/plugin-market.ts
index 23ee6428..c90826c4 100644
--- a/webui/src/utils/plugin-market.ts
+++ b/webui/src/utils/plugin-market.ts
@@ -47,9 +47,22 @@ export function categoriesOf(entry: CatalogEntry): MarketCategory[] {
   return MARKET_CATEGORIES.filter((c) => found.has(c));
 }
 
+// 按数字比较 x.y.z；数字部分相同时，带预发布后缀（如 -beta.1）的版本较旧
+function newerThan(a: string, b: string): boolean {
+  const [ra, pa] = a.split(/-(.*)/);
+  const [rb, pb] = b.split(/-(.*)/);
+  const order = ra.localeCompare(rb, undefined, { numeric: true });
+  if (order) return order > 0;
+  if (!pa || !pb) return !pa && Boolean(pb);
+  return pa.localeCompare(pb, undefined, { numeric: true }) > 0;
+}
+
 export function entryState(entry: CatalogEntry): MarketState {
   if (!entry.installed_version) return 'available';
-  return entry.installed_version === entry.version ? 'installed' : 'update';
+  // 本机版本比目录新（目录回退过）时不提示更新，避免“更新”成旧版本
+  return newerThan(entry.version, entry.installed_version)
+    ? 'update'
+    : 'installed';
 }
 
 export interface MarketFilter {
diff --git a/webui/src/utils/plugin-text.ts b/webui/src/utils/plugin-text.ts
index f68d8675..9d5084bd 100644
--- a/webui/src/utils/plugin-text.ts
+++ b/webui/src/utils/plugin-text.ts
@@ -1,39 +1,56 @@
 import { hasKey } from './id-label';
 import type { SchemaField } from './plugin-schema';
+import type { PluginInfo } from '#/plugins';
 
 type Translate = (key: string) => string;
+type Plugin = Pick<PluginInfo, 'id' | 'source'>;
 
 /**
  * 内置插件的名称、描述与配置字段文案：清单和 config_model 里只有中文，前端在
  * `builtin_plugins.<id>` 下为它们各配一份翻译。没有收录的插件（第三方）原样显示
  * 后端给的文字。
  */
-function root(pluginId: string): string {
-  return `builtin_plugins.${pluginId.replaceAll('-', '_')}`;
+function root(plugin: Plugin): string | null {
+  // 按 id 查找会让同 id 的第三方插件借用内置插件的文案
+  return plugin.source === 'builtin'
+    ? `builtin_plugins.${plugin.id.replaceAll('-', '_')}`
+    : null;
 }
 
-function pick(t: Translate, key: string, fallback: string): string {
-  return hasKey(key) ? t(key) : fallback;
+function pick(t: Translate, key: string | null, fallback: string): string {
+  return key !== null && hasKey(key) ? t(key) : fallback;
 }
 
-export function pluginName(t: Translate, id: string, fallback: string): string {
-  return pick(t, `${root(id)}.name`, fallback);
+export function pluginName(
+  t: Translate,
+  plugin: Plugin & { name: string }
+): string {
+  const base = root(plugin);
+  return pick(t, base && `${base}.name`, plugin.name);
 }
 
 export function pluginDescription(
   t: Translate,
-  id: string,
-  fallback: string
+  plugin: Plugin & { description: string }
 ): string {
-  return pick(t, `${root(id)}.description`, fallback);
+  const base = root(plugin);
+  return pick(t, base && `${base}.description`, plugin.description);
 }
 
 /** 字段文案：`fields.<key>.title / description`，对象数组的子字段嵌套在父字段下 */
 export function localizeFields(
   t: Translate,
-  id: string,
-  fields: SchemaField[],
-  parent = `${root(id)}.fields`
+  plugin: Plugin,
+  fields: SchemaField[]
+): SchemaField[] {
+  const base = root(plugin);
+  return base ? localizeUnder(t, `${base}.fields`, fields) : fields;
+}
+
+function localizeUnder(
+  t: Translate,
+  parent: string,
+  fields: SchemaField[]
 ): SchemaField[] {
   return fields.map((field) => {
     const base = `${parent}.${field.key}`;
@@ -41,7 +58,7 @@ export function localizeFields(
       ...field,
       label: pick(t, `${base}.title`, field.label),
       description: pick(t, `${base}.description`, field.description),
-      itemFields: localizeFields(t, id, field.itemFields, base),
+      itemFields: localizeUnder(t, base, field.itemFields),
     };
   });
 }
diff --git a/webui/types/dts/auto-imports.d.ts b/webui/types/dts/auto-imports.d.ts
index 292adc86..3b9a5ea1 100644
--- a/webui/types/dts/auto-imports.d.ts
+++ b/webui/types/dts/auto-imports.d.ts
@@ -96,12 +96,14 @@ declare global {
   const pluginDescription: typeof import('../../src/utils/plugin-text')['pluginDescription']
   const pluginName: typeof import('../../src/utils/plugin-text')['pluginName']
   const pluginReason: typeof import('../../src/utils/plugin-text')['pluginReason']
+  const pluginSetVersion: typeof import('../../src/hooks/usePluginRefresh')['pluginSetVersion']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readCachedCatalog: typeof import('../../src/utils/plugin-market')['readCachedCatalog']
   const readonly: typeof import('vue')['readonly']
   const ref: typeof import('vue')['ref']
   const refreshPluginProviders: typeof import('../../src/hooks/usePluginProviders')['refreshPluginProviders']
+  const refreshPluginState: typeof import('../../src/hooks/usePluginRefresh')['refreshPluginState']
   const refreshPluginUi: typeof import('../../src/hooks/usePluginUi')['refreshPluginUi']
   const relativeTime: typeof import('../../src/utils/relative-time')['relativeTime']
   const renderMarkdown: typeof import('../../src/utils/markdown')['renderMarkdown']