feat(plugin): add release version install actions (#494)

2026-07-02 13:01:33 +08:00 · 2026-06-18 15:48:09 +08:00
parent d28360a161
commit a771dc5354
9 changed files with 433 additions and 29 deletions
--- a/src/components/dialog/PluginMarketDetailDialog.vue
+++ b/src/components/dialog/PluginMarketDetailDialog.vue
@@ -6,8 +6,12 @@ import { getLogoUrl } from '@/utils/imageUtils'
 import { useToast } from 'vue-toastification'
 import { useI18n } from 'vue-i18n'
 import { openSharedDialog } from '@/composables/useSharedDialog'
+import { useConfirm } from '@/composables/useConfirm'

 const ProgressDialog = defineAsyncComponent(() => import('@/components/dialog/ProgressDialog.vue'))
+const PluginVersionHistoryDialog = defineAsyncComponent(
+  () => import('@/components/dialog/PluginVersionHistoryDialog.vue'),
+)

 // 多语言
 const { t } = useI18n()
@@ -15,6 +19,8 @@ const { t } = useI18n()
 // 提示框
 const $toast = useToast()

+const createConfirm = useConfirm()
+
 // 输入参数
 const props = defineProps({
  modelValue: {
@@ -47,6 +53,7 @@ const imageRef = ref<any>()
 const imageLoadError = ref(false)

 let progressDialogController: ReturnType<typeof openSharedDialog> | null = null
+let versionHistoryDialogController: ReturnType<typeof openSharedDialog> | null = null

 /** 打开插件安装进度弹窗。 */
 function showInstallProgress(text: string) {
@@ -97,24 +104,38 @@ function visitPluginPage() {
 }

 /** 安装插件并通知父级刷新市场列表。 */
-async function installPlugin() {
-  if (props.plugin?.system_version_compatible === false) {
+async function installPlugin(releaseVersion?: string, repoUrl?: string) {
+  if (!releaseVersion && props.plugin?.system_version_compatible === false) {
    $toast.error(props.plugin?.system_version_message || t('plugin.incompatibleSystemVersion'))
    return
  }

+  if (releaseVersion) {
+    const isConfirmed = await createConfirm({
+      title: t('common.confirm'),
+      content: t('plugin.confirmInstallOldRelease', {
+        name: props.plugin?.plugin_name,
+        version: releaseVersion,
+      }),
+      confirmText: t('common.confirm'),
+    })
+
+    if (!isConfirmed) return
+  }
+
  try {
    showInstallProgress(
      t('plugin.installing', {
        name: props.plugin?.plugin_name,
-        version: props?.plugin?.plugin_version,
+        version: releaseVersion || props?.plugin?.plugin_version,
      }),
    )

    const result: { [key: string]: any } = await api.get(`plugin/install/${props.plugin?.id}`, {
      params: {
-        repo_url: props.plugin?.repo_url,
-        force: props.plugin?.has_update,
+        repo_url: repoUrl || props.plugin?.repo_url,
+        release_version: releaseVersion,
+        force: props.plugin?.has_update || Boolean(releaseVersion),
      },
    })

@@ -122,6 +143,8 @@ async function installPlugin() {

    if (result.success) {
      $toast.success(t('plugin.installSuccess', { name: props.plugin?.plugin_name }))
+      versionHistoryDialogController?.close()
+      versionHistoryDialogController = null
      visible.value = false
      emit('install')
    } else {
@@ -133,8 +156,22 @@ async function installPlugin() {
  }
 }

+/** 打开版本历史并支持从 Release 资产安装指定版本。 */
+function showUpdateHistory() {
+  versionHistoryDialogController?.close()
+  versionHistoryDialogController = openSharedDialog(
+    PluginVersionHistoryDialog,
+    { plugin: props.plugin, actionMode: 'install' },
+    {
+      update: installPlugin,
+    },
+    { closeOn: ['close', 'update:modelValue'] },
+  )
+}
+
 onUnmounted(() => {
  closeInstallProgress()
+  versionHistoryDialogController?.close()
 })
 </script>

@@ -191,9 +228,17 @@ onUnmounted(() => {
                  :text="props.plugin?.system_version_message || t('plugin.incompatibleSystemVersion')"
                />
                <div class="text-center text-md-left">
+                  <VBtn
+                    variant="tonal"
+                    @click="showUpdateHistory"
+                    prepend-icon="mdi-update"
+                    class="me-2"
+                  >
+                    {{ t('plugin.versionHistory') }}
+                  </VBtn>
                  <VBtn
                    color="primary"
-                    @click="installPlugin"
+                    @click="installPlugin()"
                    prepend-icon="mdi-download"
                    :disabled="props.plugin?.system_version_compatible === false"
                  >
--- a/src/components/dialog/PluginVersionHistoryDialog.vue
+++ b/src/components/dialog/PluginVersionHistoryDialog.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import api from '@/api'
-import type { Plugin } from '@/api/types'
+import type { Plugin, PluginReleaseVersion, PluginReleaseVersionsResponse } from '@/api/types'
 import VersionHistory from '@/components/misc/VersionHistory.vue'
 import { useI18n } from 'vue-i18n'

 // 多语言
-const { t } = useI18n()
+const { t, locale } = useI18n()

 // 输入参数
 const props = defineProps({
@@ -21,14 +21,25 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  actionMode: {
+    type: String as PropType<'install' | 'update'>,
+    default: 'update',
+  },
 })

 // 定义触发的自定义事件
-const emit = defineEmits(['update:modelValue', 'close', 'update'])
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'close'): void
+  (event: 'update', releaseVersion?: string, repoUrl?: string): void
+}>()

 const loading = ref(false)
 const loadError = ref('')
 const pluginDetail = ref<Plugin | null>(null)
+const releaseLoading = ref(false)
+const releaseError = ref('')
+const releaseDetail = ref<PluginReleaseVersionsResponse | null>(null)

 // 弹窗显示状态
 const visible = computed({
@@ -41,19 +52,66 @@ const visible = computed({

 const resolvedPlugin = computed(() => pluginDetail.value ?? props.plugin)

-const resolvedHistory = computed(() => resolvedPlugin.value?.history || {})
+const resolvedHistory = computed(() => {
+  const history = { ...(resolvedPlugin.value?.history || {}) }
+  releaseItems.value.forEach(item => {
+    const key = normalizeHistoryVersion(item.version)
+    if (!(key in history)) history[key] = item.body || ''
+  })
+  return history
+})

 const hasHistory = computed(() => Object.keys(resolvedHistory.value).length > 0)

+const latestActionText = computed(() => props.actionMode === 'install' ? t('plugin.installReleaseVersion') : t('plugin.updateToLatest'))
+
+const releaseItems = computed(() => releaseDetail.value?.items || [])
+
+const releaseByHistoryVersion = computed(() => {
+  const releaseMap = new Map<string, PluginReleaseVersion>()
+  releaseItems.value.forEach(item => {
+    releaseMap.set(normalizeHistoryVersion(item.version), item)
+  })
+  return releaseMap
+})
+
+function normalizeHistoryVersion(version: string) {
+  return version.startsWith('v') ? version : `v${version}`
+}
+
+function formatReleaseDate(value?: string) {
+  if (!value) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return value
+  return date.toLocaleDateString(locale.value)
+}
+
+function releaseItemByHistoryVersion(version: string) {
+  return releaseByHistoryVersion.value.get(version)
+}
+
 async function loadPluginHistory() {
  if (!props.plugin?.id) {
    pluginDetail.value = null
    loadError.value = ''
+    releaseDetail.value = null
+    releaseError.value = ''
    return
  }

  loading.value = true
  loadError.value = ''
+  releaseDetail.value = null
+  releaseError.value = ''
+
+  // 插件市场条目已经携带远端信息；history 接口只查询已安装插件，
+  // 未安装插件打开版本历史时只能基于传入的市场数据和 Release 列表展示。
+  if (props.actionMode === 'install' && props.plugin?.repo_url) {
+    pluginDetail.value = null
+    loading.value = false
+    loadPluginReleases(props.plugin, false)
+    return
+  }

  try {
    pluginDetail.value = await api.get(`plugin/history/${props.plugin.id}`, {
@@ -61,6 +119,7 @@ async function loadPluginHistory() {
        force: true,
      },
    })
+    loadPluginReleases(pluginDetail.value ?? props.plugin, true)
  } catch (error) {
    pluginDetail.value = null
    loadError.value = t('plugin.updateHistoryLoadFailed')
@@ -70,35 +129,107 @@ async function loadPluginHistory() {
  }
 }

+async function loadPluginReleases(plugin: Plugin | null | undefined = resolvedPlugin.value, force = false) {
+  if (!plugin?.id || !plugin?.repo_url) {
+    releaseDetail.value = null
+    releaseError.value = ''
+    return
+  }
+
+  releaseLoading.value = true
+  releaseError.value = ''
+
+  try {
+    releaseDetail.value = await api.get(`plugin/releases/${plugin.id}`, {
+      params: {
+        repo_url: plugin.repo_url,
+        force,
+      },
+    })
+  } catch (error) {
+    releaseDetail.value = null
+    releaseError.value = t('plugin.releaseVersionsLoadFailed')
+    console.error(error)
+  } finally {
+    releaseLoading.value = false
+  }
+}
+
 /** 触发插件更新操作。 */
-function handleUpdate() {
-  emit('update')
+function handleUpdate(releaseItem?: PluginReleaseVersion) {
+  emit('update', releaseItem?.is_latest ? undefined : releaseItem?.version, resolvedPlugin.value?.repo_url)
 }

 watch(
  () => [visible.value, props.plugin?.id],
  ([isVisible]) => {
-    if (isVisible) loadPluginHistory()
+    if (isVisible) {
+      loadPluginHistory()
+    }
  },
  { immediate: true },
 )
 </script>

 <template>
-  <VDialog v-if="visible" v-model="visible" width="600" max-height="85vh" scrollable>
+  <VDialog v-if="visible" v-model="visible" width="680" max-height="85vh" scrollable>
    <VCard :title="t('plugin.updateHistoryTitle', { name: resolvedPlugin?.plugin_name })">
      <VDialogCloseBtn v-model="visible" />
      <VDivider />
+      <VProgressLinear v-if="releaseLoading && !loading" indeterminate color="primary" height="2" />
      <div v-if="loading" class="plugin-version-history-dialog__loading">
        <VProgressCircular indeterminate color="primary" />
      </div>
      <VCardText v-else-if="loadError && !hasHistory">
        <VAlert type="warning" variant="tonal" density="compact" :text="loadError" />
      </VCardText>
-      <VCardText v-else-if="!hasHistory">
+      <VCardText v-else-if="!hasHistory && !releaseLoading">
        <VAlert type="info" variant="tonal" density="compact" :text="t('plugin.updateHistoryEmpty')" />
      </VCardText>
-      <VersionHistory v-else :history="resolvedHistory" />
+      <template v-else>
+        <VCardText v-if="releaseError" class="pb-0">
+          <VAlert type="warning" variant="tonal" density="compact" :text="releaseError" />
+        </VCardText>
+        <VersionHistory :history="resolvedHistory">
+          <template #action="{ version }">
+            <div class="plugin-release-action" v-if="releaseItemByHistoryVersion(version)">
+              <template v-if="releaseItemByHistoryVersion(version)">
+                <div class="plugin-release-action__meta">
+                  <VChip v-if="releaseItemByHistoryVersion(version)?.is_current" size="x-small" color="success" variant="tonal">
+                    {{ t('plugin.currentVersion') }}
+                  </VChip>
+                  <VChip v-if="releaseItemByHistoryVersion(version)?.is_latest" size="x-small" color="primary" variant="tonal">
+                    {{ t('plugin.latestVersion') }}
+                  </VChip>
+                  <span v-if="formatReleaseDate(releaseItemByHistoryVersion(version)?.published_at)" class="text-caption text-medium-emphasis">
+                    {{ formatReleaseDate(releaseItemByHistoryVersion(version)?.published_at) }}
+                  </span>
+                </div>
+                <VBtn
+                  size="small"
+                  min-width="5.5rem"
+                  :block="$vuetify.display.xs"
+                  :color="releaseItemByHistoryVersion(version)?.is_latest ? 'primary' : undefined"
+                  :variant="releaseItemByHistoryVersion(version)?.is_latest ? 'flat' : 'tonal'"
+                  :disabled="
+                    releaseItemByHistoryVersion(version)?.is_current ||
+                    (releaseItemByHistoryVersion(version)?.is_latest && resolvedPlugin?.system_version_compatible === false)
+                  "
+                  @click.stop="handleUpdate(releaseItemByHistoryVersion(version))"
+                >
+                  {{
+                    releaseItemByHistoryVersion(version)?.is_current
+                      ? t('plugin.installed')
+                      : releaseItemByHistoryVersion(version)?.is_latest
+                        ? latestActionText
+                        : t('plugin.installReleaseVersion')
+                  }}
+                </VBtn>
+              </template>
+            </div>
+          </template>
+        </VersionHistory>
+      </template>
      <template v-if="props.showUpdateAction">
        <VDivider />
        <VCardItem>
@@ -110,7 +241,7 @@ watch(
            class="mb-3"
            :text="resolvedPlugin?.system_version_message || t('plugin.incompatibleSystemVersion')"
          />
-          <VBtn @click="handleUpdate" block :disabled="resolvedPlugin?.system_version_compatible === false">
+          <VBtn @click="handleUpdate()" block :disabled="resolvedPlugin?.system_version_compatible === false">
            <template #prepend>
              <VIcon icon="mdi-arrow-up-circle-outline" />
            </template>
@@ -129,4 +260,33 @@ watch(
  align-items: center;
  justify-content: center;
 }
+
+.plugin-release-action,
+.plugin-release-action__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.plugin-release-action {
+  justify-content: flex-end;
+  min-width: 10rem;
+}
+
+.plugin-release-action__meta {
+  justify-content: flex-end;
+}
+
+@media (max-width: 600px) {
+  .plugin-release-action,
+  .plugin-release-action__meta {
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  .plugin-release-action {
+    min-width: 0;
+  }
+}
 </style>