UpdateDialog 更新对话框

展示检查、下载与安装状态，通过受控属性更新界面，通过事件通知操作。

检查更新

<template>
  <div class="update-check-demo">
    <AuButton type="primary" @click="open('idle')">检查更新</AuButton>
    <AuButton @click="open('latest')">已是最新</AuButton>
    <AuButton @click="open('error')">检查失败</AuButton>
    <AuUpdateDialog
      v-model="visible"
      v-model:auto-check="autoCheck"
      :status="status"
      app-name="示例应用"
      current-version="1.8.0"
      show-auto-check
      error-message="暂时无法连接更新服务，请检查网络连接后重试。"
      @check="check"
      @retry="check"
      @close="clearCheck"
    />
  </div>
</template>
<script setup>
import { onBeforeUnmount, ref } from 'vue';
import { AuButton, AuUpdateDialog } from 'aurora-plus';
const visible = ref(false);
const status = ref('idle');
const autoCheck = ref(true);
let checkTimer;
function clearCheck() {
  clearTimeout(checkTimer);
}
function open(nextStatus) {
  clearCheck();
  status.value = nextStatus;
  visible.value = true;
}
function check() {
  clearCheck();
  status.value = 'checking';
  // 示例模拟检查结果；实际应用在请求返回后设置状态。
  checkTimer = setTimeout(() => { status.value = 'latest'; }, 1500);
}
onBeforeUnmount(clearCheck);
</script>
<style scoped>
.update-check-demo { display: flex; flex-wrap: wrap; gap: 8px; }
</style>

发现新版本与下载

<template>
  <div class="update-available-demo">
    <AuButton type="primary" @click="open('available')">发现新版本</AuButton>
    <AuButton @click="open('ready')">下载完成</AuButton>
    <AuUpdateDialog
      v-model="visible"
      :status="status"
      app-name="示例应用"
      :current-version="currentVersion"
      latest-version="1.9.0"
      channel="稳定版"
      release-date="2026-10-09"
      :release-notes="releaseNotes"
      download-size="48.6 MB"
      :downloaded-size="`${(48.6 * progress / 100).toFixed(1)} MB`"
      :download-speed="status === 'downloading' ? '6.2 MB/s' : ''"
      :progress="progress"
      show-skip
      @download="download"
      @install="install"
      @close="clearTasks"
    />
  </div>
</template>
<script setup>
import { onBeforeUnmount, ref } from 'vue';
import { AuButton, AuUpdateDialog } from 'aurora-plus';
const visible = ref(false);
const status = ref('available');
const currentVersion = ref('1.8.0');
const progress = ref(0);
const releaseNotes = [
  { title: '新增功能', items: ['全新的专注模式，让写作更沉浸。', '支持为常用文档设置快捷入口。'] },
  { title: '体验优化', items: ['提升大型文档的打开速度。', '优化深色主题下的文字与控件对比度。'] },
  { title: '问题修复', items: ['修复切换工作区时偶尔丢失滚动位置的问题。'] },
];
let downloadTimer;
let installTimer;
function clearTasks() {
  clearInterval(downloadTimer);
  clearTimeout(installTimer);
}
function open(nextStatus) {
  clearTasks();
  currentVersion.value = '1.8.0';
  progress.value = nextStatus === 'ready' ? 100 : 0;
  status.value = nextStatus;
  visible.value = true;
}
function download() {
  clearTasks();
  progress.value = 0;
  status.value = 'downloading';
  // 仅模拟进度；实际应用传入下载任务报告的百分比。
  downloadTimer = setInterval(() => {
    progress.value = Math.min(100, progress.value + 8);
    if (progress.value === 100) {
      clearInterval(downloadTimer);
      status.value = 'ready';
    }
  }, 300);
}
function install() {
  clearTasks();
  status.value = 'installing';
  installTimer = setTimeout(() => {
    currentVersion.value = '1.9.0';
    status.value = 'latest';
  }, 1600);
}
onBeforeUnmount(clearTasks);
</script>
<style scoped>
.update-available-demo { display: flex; flex-wrap: wrap; gap: 8px; }
</style>

更新日志

release-notes 可直接传入日志原文，支持标题、列表、引用、链接、表格和代码块。原始 HTML 按文本展示；链接支持 HTTP、HTTPS 和邮件地址，图片支持 HTTP、HTTPS 地址。

<template>
  <AuButton type="primary" @click="visible = true">查看更新日志</AuButton>
  <AuUpdateDialog
    v-model="visible"
    status="available"
    app-name="示例应用"
    current-version="1.8.0"
    latest-version="1.9.0"
    :release-notes="releaseNotes"
    @download="visible = false"
  />
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, AuUpdateDialog } from 'aurora-plus';
const visible = ref(false);
const releaseNotes = [
  '## 新增功能',
  '',
  '- 支持 **专注模式**。',
  '- 支持常用文档快捷入口。',
  '  - 可将文档固定到收藏列表。',
  '',
  '### 体验优化',
  '',
  '1. 提升大型文档的打开速度。',
  '2. 修复切换工作区时丢失滚动位置的问题。',
  '',
  '> 安装更新前，请保存当前工作。',
  '',
  '可在 `设置` 中调整偏好，详见 [使用指南](https://auroracode553.github.io/aurora-plus/guide/getting-started)。',
].join('\n');
</script>

未知进度与失败重试

<template>
  <div class="update-recovery-demo">
    <AuButton @click="open('downloading')">未知下载进度</AuButton>
    <AuButton @click="open('error')">下载失败与重试</AuButton>
    <AuUpdateDialog
      v-model="visible"
      :status="status"
      app-name="示例应用"
      current-version="1.8.0"
      latest-version="1.9.0"
      download-size="48.6 MB"
      :progress="null"
      progress-text="正在获取更新文件…"
      error-stage="download"
      error-message="下载连接已中断。你可以重新下载，或稍后再试。"
      @retry="retry"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { AuButton, AuUpdateDialog } from 'aurora-plus';
const visible = ref(false);
const status = ref('downloading');
function open(nextStatus) {
  status.value = nextStatus;
  visible.value = true;
}
function retry(stage) {
  if (stage === 'download') status.value = 'downloading';
}
</script>
<style scoped>
.update-recovery-demo { display: flex; flex-wrap: wrap; gap: 8px; }
</style>

更新源

source 表示选择偏好，active-source 表示当前操作实际使用的源；空 source 表示自动选择。

<template>
  <div class="update-sources-demo">
    <AuButton @click="open('checking')">多源检查中</AuButton>
    <AuButton type="primary" @click="open('available')">多源检查结果</AuButton>
    <AuButton @click="open('fallback')">备用源结果</AuButton>
    <AuButton @click="open('latest')">均无新版本</AuButton>
    <AuButton @click="open('error')">全部失败</AuButton>
    <AuUpdateDialog v-model="visible" v-bind="dialogProps" app-name="示例应用"
      :source-selectable="false" @check="open('checking')" @retry="requestCheck" @download="requestDownload">
    </AuUpdateDialog>
  </div>
</template>
<script setup>
import { ref, shallowRef } from 'vue';
import { AuButton, AuMessage, AuUpdateDialog } from 'aurora-plus';
const visible = ref(false);
const dialogProps = shallowRef({ status: 'idle', currentVersion: '1.8.0', sources: [] });
function open(scenario) {
  const fallback = scenario === 'fallback';
  const available = scenario === 'available' || fallback;
  const status = available ? 'available' : scenario;
  // 只演示更新服务的公开快照，不执行来源选择或版本比较。
  dialogProps.value = {
    status, currentVersion: '1.8.0', latestVersion: available ? '1.9.0' : '',
    activeSource: available ? (fallback ? 'gitee' : 'github') : '',
    sources: [
      { id: 'github', name: 'GitHub', status: fallback || scenario === 'error' ? 'error' : status,
        version: available && !fallback ? '1.9.0' : scenario === 'latest' ? '1.8.0' : '',
        message: fallback ? '暂时无法连接此更新源。' : '' },
      { id: 'gitee', name: 'Gitee', status, version: available ? '1.9.0' : scenario === 'latest' ? '1.8.0' : '' },
    ],
    releaseNotes: available ? [{ title: '体验优化', items: ['提升文档打开速度，优化编辑体验。'] }] : [],
    errorStage: 'check', errorMessage: scenario === 'error' ? '本次检查的更新源均不可用，请稍后重试。' : '',
  };
  visible.value = true;
}
function requestCheck() { AuMessage.info('应用收到重新检查请求。'); }
function requestDownload(version, { activeSource }) { AuMessage.info(`应用收到下载请求：${activeSource} · ${version}`); }
</script>
<style scoped>
.update-sources-demo { display: flex; flex-wrap: wrap; gap: 8px; }
</style>

检查中、下载中、下载完成、安装中及安装失败阶段禁止切换源。

UpdateSource

字段	说明	类型
id	必填、唯一、非空的源标识	string
name	展示名称，未传时显示 id	string
status	pending / checking / success / ready / available / latest / not-available / error；默认 pending	string
version	该源最近读取到的版本	string
message	提示文字；悬停可查看，手动选中时在列表下方展示	string
disabled	该源不可选择；默认 false	boolean
active	实际使用标记；未传 active-source 时从该标记获取源标识	boolean

全部源禁用或指定的源已不存在时，检查按钮不可用。

源状态 ready 表示已发现新版本；对话框状态 ready 表示下载完成。not-available 表示该源没有可更新版本。

操作语义

check、download、install、retry 只发出事件，不自动改变 status。cancel、later、skip 同时关闭窗口；关闭按钮、Escape 和实例 close() 只关闭窗口。

自定义更新说明正文使用 release-notes 插槽。

UpdateDialog API

Attributes

属性	说明	类型	默认值
modelValue / v-model	是否显示	boolean	false
status	当前更新状态，见下表	string	idle
title	对话框顶部标题	string	软件更新
width	宽度，数字按 px 处理，受视口约束	string / number	480
appName	应用名称	string	''
description	替换当前状态的说明文字	string	''
currentVersion	当前版本，按原样展示	string	''
latestVersion	最新版本，按原样展示	string	''
channel	版本渠道标签，如稳定版	string	''
releaseDate	发布时间的展示文本	string	''
releaseNotes	日志原文或更新说明数组；分组 items 按纯文本展示	string / (string | UpdateReleaseNote | UpdateVersionNote)[]	[]
releaseUrl	完整更新说明链接，在新窗口打开	string	''
progress	下载百分比；null 表示未知进度	number / null	null
progressText	自定义检查、下载或安装进度文案	string	''
downloadSize	更新文件总大小的展示文本	string	''
downloadedSize	已下载大小的展示文本	string	''
downloadSpeed	下载速度的展示文本	string	''
errorStage	失败阶段：check / download / install	string	check
errorMessage	失败详情	string	''
showAutoCheck	显示自动检查选项	boolean	false
autoCheck / v-model:auto-check	自动检查选项值	boolean	false
showSkip	发现新版本时显示跳过操作	boolean	false
sources	更新源展示列表；不传时隐藏源区域	UpdateSource[]	[]
source / v-model:source	指定的更新源标识；空字符串表示自动选择	string	''
activeSource	当前任务实际使用的源标识，优先于源列表 active 标记	string	''
sourceSelectable	是否允许手动选择源	boolean	true
sourceDisabled	额外禁止切换源	boolean	false

其余 AuDialog 属性同样适用，例如 append-to-body、lock-scroll、show-close、close-on-press-escape、close-on-click-modal、max-height 与 z-index。

Status

值	界面	默认操作
idle	检查入口与当前版本	关闭、检查更新
checking	检查中与循环进度	取消检查
available	新版本、发布信息与更新说明	稍后提醒、下载更新，可选跳过
latest	当前版本已是最新	关闭、再次检查
downloading	更新说明与下载进度	取消下载
ready	下载完成与安装提示	稍后提醒、安装更新
installing	安装中与循环进度	关闭、禁用的安装按钮
error	失败原因及对应阶段	关闭、重新检查 / 下载 / 安装

UpdateReleaseNote

const releaseNotes = [
  { title: '新增功能', items: ['支持专注模式。', '增加常用文档快捷入口。'] },
  { title: '问题修复', items: ['修复切换工作区时丢失滚动位置的问题。'] },
];

title 为可选分组标题，items 为该组的字符串数组。

UpdateVersionNote

字段	说明	类型
version	可选版本标题，按纯文本展示	string
note	更新日志原文	string

renderReleaseNotesMarkdown

需要在其他区域展示同一份日志时，可调用 renderReleaseNotesMarkdown(notes) 获取 HTML。参数支持字符串或由字符串、UpdateVersionNote 组成的数组；空内容返回空字符串，样式由调用方提供。

<template>
  <div v-html="notesHtml"></div>
</template>

<script setup>
import { computed } from 'vue';
import { renderReleaseNotesMarkdown } from 'aurora-plus';

const notes = '## 新增功能\n\n- 支持 **专注模式**。';
const notesHtml = computed(() => renderReleaseNotesMarkdown(notes));
</script>

Events

事件	说明	参数
update:modelValue	请求关闭窗口	false
update:autoCheck	自动检查选项变化	boolean
update:source	请求切换选中的源	id: string
source-change	用户切换源；空 id 表示自动选择	(id: string, previousId: string)
check	请求检查更新	context: UpdateSourceContext
download	请求下载新版本	(latestVersion: string, context: UpdateSourceContext)
install	请求安装新版本	latestVersion: string
retry	请求重试失败阶段	(stage: 'check' / 'download' / 'install', context: UpdateSourceContext)
cancel	请求取消检查或下载，同时关闭	'checking' / 'downloading'
later	请求稍后提醒，同时关闭	'available' / 'ready'
skip	请求跳过此版本，同时关闭	latestVersion: string
open / opened	开始打开 / 打开过渡完成	—
close	内部关闭窗口	reason: string
closed	关闭过渡完成	—

操作按钮产生的关闭原因为 cancel、later、skip 或 dismiss，其余原因沿用 AuDialog。

UpdateSourceContext 为 { source: string, activeSource: string }；未配置源时两字段均为空字符串。

Slots

插槽	作用域参数	说明
icon		替换状态图标，可放置应用图标
release-notes		替换更新说明正文
default		补充正文，如安装提示
sources		替换整个源区域；sources 为整理后的展示字段，select(id) 遵循任务锁定规则，select('') 请求自动选择
footer		替换操作区；业务操作方法只在对应状态发出事件

Exposes

方法或属性	说明
close(reason?)	关闭窗口，默认原因为 api
dialogRef	内部 AuDialog 实例引用