@e-xi/xion 0.0.6

package/dist/renderer/components/updater/xo-updater.vue

@@ -0,0 +1,1190 @@
+<!-- 更新器组件 -->
+<template>
+    <div class="xo-updater-wraper" :class="{'is-bean' : isBeanType}">
+        <!-- 检查类型 -->
+        <div class="xo-updater xo-updater--check"
+             v-if="isCheckType"
+             @click="handleCheckClick"
+             :style="checkStyle">
+            <slot name="disabled-button" v-if="updaterStore.disabledUntilRestart">
+                <el-button
+                    class="button"
+                    disabled
+                    :type="checkButtonType"
+                    :size="checkButtonSize">
+                    <template #icon>
+                        <i class="xion-font xion-icon-lock" />
+                    </template>
+                    {{ props.lockTitle }}
+                </el-button>
+            </slot>
+            <slot name="download-button" v-else-if="updaterStore.isAvailable">
+                <el-button
+                    class="button"
+                    :loading="downloadUpdate.loading"
+                    :type="checkButtonType"
+                    :size="checkButtonSize">
+                    <template #icon>
+                        <i class="xion-font xion-icon-arrows-down" />
+                    </template>
+                    下载新版本 v{{ updaterStore.version }}
+                </el-button>
+            </slot>
+            <slot name="downloading-button" v-else-if="updaterStore.isDownloading">
+                <el-button
+                    class="button"
+                    loading
+                    :type="checkButtonType"
+                    :size="checkButtonSize">
+                    <template #icon>
+                        <i class="xion-font xion-icon-downloading2" />
+                    </template>
+                    更新下载中 {{ updaterStore?.formattedProgress?.percent ?? '-' }}
+                </el-button>
+            </slot>
+            <slot name="cancelling-button" v-else-if="updaterStore.isCancelling">
+                <el-button
+                    class="button"
+                    loading
+                    disabled
+                    :type="checkButtonType"
+                    :size="checkButtonSize">
+                    <template #icon>
+                        <i class="xion-font xion-icon-time" />
+                    </template>
+                    {{ cancellingDescription }}
+                </el-button>
+            </slot>
+            <slot name="install-button" v-else-if="updaterStore.isDownloaded">
+                <el-button
+                    class="button"
+                    :loading="quitAndInstall.loading"
+                    :type="checkButtonType"
+                    :size="checkButtonSize">
+                    <template #icon>
+                        <i class="xion-font xion-icon-setup2" />
+                    </template>
+                    安装新版本 v{{ updaterStore.version }}
+                </el-button>
+            </slot>
+            <slot name="check-button" v-else>
+                <el-button
+                    class="button"
+                    :loading="checkForUpdates.loading || updaterStore.isChecking"
+                    :disabled="!updaterStore?.settings?.enable || updaterStore.isChecking"
+                    :type="checkButtonType"
+                    :size="checkButtonSize">
+                    <template #icon>
+                        <i class="xion-font xion-icon-download-cloud" />
+                    </template>
+                    检查更新
+                </el-button>
+            </slot>
+        </div>
+
+        <!-- 卡片类型 -->
+        <div class="xo-updater xo-updater--card" v-if="isCardType && componentVisible" :style="cardStyle">
+            <div class="card">
+                <div class="top-bar">
+                    <!-- 图标状态 -->
+                    <div class="state" :class="statusItem.class" v-if="statusItem">
+                        <i class="icon xion-font" :class="statusItem.icon" />
+                    </div>
+
+                    <!-- 标题 -->
+                    <div class="title">{{ props.title }}</div>
+
+                    <!-- 关闭按钮 -->
+                    <el-icon class="close" @click.stop="cardVisible.setFalse">
+                        <CloseBold />
+                    </el-icon>
+                </div>
+
+                <!-- 检查新版本 -->
+                <template v-if="updaterStore.isChecking">
+                    <div class="information" @click="detailsVisible.setTrue" :title="props.checkingTitle">
+                        {{ props.checkingTitle }}
+                    </div>
+                </template>
+
+                <!-- 有可用更新 -->
+                <template v-if="updaterStore.isAvailable">
+                    <div class="information" @click="detailsVisible.setTrue"
+                         :title="`${props.availableTitle} v${updaterStore.version} ${(releaseDate ?? '').substring(0, 10)}`">
+                        <p>{{ props.availableTitle }}</p>
+                        <span>v{{ updaterStore.version }}&nbsp;{{ (releaseDate ?? '').substring(0, 10) }}</span>
+                    </div>
+                    <div class="bottom-bar">
+                        <el-button size="small" class="button" type="primary" :loading="downloadUpdate.loading"
+                                   @click="downloadUpdate.run">
+                            {{ downloadUpdate.loading ? '下载准备...' : '下载更新' }}
+                        </el-button>
+                    </div>
+                </template>
+
+                <!-- 无可用更新 -->
+                <template v-if="updaterStore.isNotAvailable">
+                    <div class="information" @click="detailsVisible.setTrue" :title="props.notAvailableTitle">
+                        {{ props.notAvailableTitle }}
+                    </div>
+                </template>
+
+                <!-- 下载中 -->
+                <template v-if="updaterStore.isDownloading">
+                    <div class="information" @click="detailsVisible.setTrue" :title="props.downloadingTitle">
+                        <el-progress
+                            :duration="6"
+                            :show-text="false"
+                            :stroke-width="12"
+                            :percentage="updaterStore.progress?.percent ?? 0"
+                        />
+                        <div class="progress-state">
+                            <div>{{ updaterStore.formattedProgress?.bytesPerSecond ?? '-' }}</div>
+                            <div>{{ updaterStore.formattedProgress?.percent ?? '-' }}</div>
+                        </div>
+                    </div>
+                    <div class="bottom-bar">
+                        <el-button size="small" class="button" type="default"
+                                   :loading="cancelDownload.loading"
+                                   @click="cancelDownload.run">
+                            取消
+                        </el-button>
+                        <el-button size="small" class="button" type="primary" @click="detailsVisible.setTrue">
+                            详情
+                        </el-button>
+                    </div>
+                </template>
+
+                <!-- 正在取消下载 -->
+                <template v-if="updaterStore.isCancelling">
+                    <div class="information" @click="detailsVisible.setTrue" :title="cancellingDescription">
+                        {{ cancellingDescription }}
+                    </div>
+                    <div class="bottom-bar">
+                        <el-button size="small" class="button" type="default" loading disabled>
+                            取消中...
+                        </el-button>
+                    </div>
+                </template>
+
+                <!-- 下载完成 -->
+                <template v-if="updaterStore.isDownloaded">
+                    <div class="information" @click="detailsVisible.setTrue" :title="props.downloadedTitle">
+                        {{ props.downloadedTitle }}
+                    </div>
+                    <div class="bottom-bar">
+                        <el-button size="small" class="button" type="success"
+                                   :loading="quitAndInstall.loading"
+                                   @click="quitAndInstall.run">
+                            {{ updaterStore?.settings?.isForceRunAfter ? '重启升级' : '立即升级' }}
+                        </el-button>
+                    </div>
+                </template>
+
+                <!-- 更新错误 -->
+                <template v-if="updaterStore.isError">
+                    <div class="information" @click="detailsVisible.setTrue"
+                         :title="`${props.errorTitle}：${updaterStore.error?.message ?? ''}`">
+                        {{ props.errorTitle }}：{{ updaterStore.error?.message }}
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <!-- 豆子类型 -->
+        <el-tooltip
+            v-if="isBeanType && componentVisible && statusItem"
+            transition="none"
+            effect="light"
+            :hide-after="0"
+            :enterable="false"
+            :content="statusItem.title"
+            placement="bottom"
+        >
+            <div class="xo-updater xo-updater--bean" @click="detailsVisible.setTrue" :style="beanStyle">
+                <!-- 图标状态 -->
+                <div class="bean" :class="statusItem.class">
+                    <el-progress
+                        v-if="statusItem.status === 'downloading'"
+                        type="circle"
+                        :width="props.beanSize"
+                        :duration="6"
+                        stroke-linecap="butt"
+                        :show-text="false"
+                        :stroke-width="props.beanStrokeWidth"
+                        :percentage="updaterStore.progress?.percent ?? 0"
+                    />
+                    <i v-else class="icon xion-font" :class="statusItem.icon" />
+                </div>
+            </div>
+        </el-tooltip>
+
+        <!-- 更新详情弹窗 -->
+        <el-dialog
+            class="xo-updater xo-updater--details"
+            v-model="detailsVisible.isTrue"
+            :close-on-click-modal="false"
+            :draggable="true"
+            :show-close="true"
+            :append-to-body="true"
+            :width="props.detailsWidth">
+
+            <!-- 头部 -->
+            <template #header>
+                <div class="header">
+                    <!-- 空闲（禁用更新） -->
+                    <div class="state is-disabled" v-if="!updaterStore?.settings?.enable">
+                        <i class="icon xion-font xion-icon-error2" />
+                    </div>
+
+                    <!-- 图标状态 -->
+                    <div class="state" :class="statusItem.class" v-else-if="statusItem">
+                        <i class="icon xion-font" :class="statusItem.icon" />
+                    </div>
+
+                    <div class="title">{{ props.title }}</div>
+                </div>
+            </template>
+
+            <!-- body -->
+            <template #default>
+
+                <!-- 禁用更新 -->
+                <div class="body is-disabled" v-if="!updaterStore?.settings?.enable">
+                    {{ props.disabledTitle }}
+                </div>
+
+                <template v-else>
+                    <!-- 检查中 -->
+                    <div class="body is-checking" v-if="updaterStore.isChecking">
+                        {{ props.checkingTitle }}
+                    </div>
+
+                    <!-- 有可用更新 -->
+                    <div class="body is-available" v-if="updaterStore.isAvailable">
+                        <div class="release-info">
+                            <div class="row">
+                                <div class="name">最新版本：</div>
+                                <div class="value">v{{ updaterStore.version }}</div>
+                            </div>
+                            <div class="row">
+                                <div class="name">发布时间：</div>
+                                <div class="value">{{ releaseDate }}</div>
+                            </div>
+                            <div class="row" v-if="releaseNotes">
+                                <div class="name">更新说明：</div>
+                                <div class="value">
+                                    <div class="section" v-for="(section, i) in releaseNotes?.sections ?? []" :key="i">
+                                        <div class="section-title">{{ i + 1 }}. {{ section.title }}</div>
+                                        <div class="section-items" v-for="(item, j) in section?.items ?? []" :key="j">
+                                            <div class="section-item">{{ i + 1 }}.{{ j + 1 }}. {{ item }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 无可用更新 -->
+                    <div class="body is-not-available" v-if="updaterStore.isNotAvailable">
+                        {{ props.notAvailableTitle }}
+                    </div>
+
+                    <!-- 下载中 -->
+                    <div class="body is-downloading" v-if="updaterStore.isDownloading">
+                        <el-progress
+                            class="progress"
+                            :duration="6"
+                            :show-text="false"
+                            :stroke-width="props.detailsProgressStrokeWidth"
+                            :percentage="updaterStore.progress?.percent ?? 0"
+                        />
+                        <div class="progress-info">
+                            <div>速度 {{ updaterStore.formattedProgress?.bytesPerSecond ?? '-' }}</div>
+                            <div class="secondary">预计剩余 {{
+                                    updaterStore.formattedProgress?.remainingTime ?? '-'
+                                }}
+                            </div>
+                            <div>进度 <strong>{{ updaterStore.formattedProgress?.percent ?? '-' }}</strong></div>
+                        </div>
+                    </div>
+
+                    <!-- 正在取消下载 -->
+                    <div class="body is-cancelling" v-if="updaterStore.isCancelling">
+                        {{ cancellingDescription }}
+                    </div>
+
+                    <!-- 下载完成 -->
+                    <div class="body is-downloaded" v-if="updaterStore.isDownloaded">
+                        {{ props.downloadedTitle }} v{{ updaterStore.version }}
+                    </div>
+
+                    <!-- 更新错误 -->
+                    <div class="body is-error" v-if="updaterStore.isError">
+                        {{ props.errorTitle }}：{{ updaterStore.error?.message ?? '' }}
+                    </div>
+                </template>
+            </template>
+
+            <!-- 底部 -->
+            <template #footer>
+                <!-- 禁用更新 -->
+                <div class="footer-bar" v-if="!updaterStore?.settings?.enable">
+                    <el-button type="default" @click="detailsVisible.setFalse">关闭</el-button>
+                </div>
+
+                <template v-else>
+                    <!-- 检查中 -->
+                    <div class="footer-bar" v-if="updaterStore.isChecking">
+                        <el-button type="default" @click="detailsVisible.setFalse">关闭</el-button>
+                    </div>
+
+                    <!-- 有可用更新 -->
+                    <div class="footer-bar" v-if="updaterStore.isAvailable">
+                        <el-button type="default" @click="detailsVisible.setFalse">关闭</el-button>
+                        <el-button type="primary" :loading="downloadUpdate.loading" @click="downloadUpdate.run">
+                            {{ downloadUpdate.loading ? '下载准备...' : '下载更新' }}
+                        </el-button>
+                    </div>
+
+                    <!-- 无可用更新 -->
+                    <div class="footer-bar" v-if="updaterStore.isNotAvailable">
+                        <el-button type="default" @click="detailsVisible.setFalse">关闭</el-button>
+                    </div>
+
+                    <!-- 下载中 -->
+                    <div class="footer-bar" v-if="updaterStore.isDownloading">
+                        <el-button type="default" :loading="cancelDownload.loading" @click="cancelDownload.run">
+                            取消下载
+                        </el-button>
+                    </div>
+
+                    <!-- 正在取消下载 -->
+                    <div class="footer-bar" v-if="updaterStore.isCancelling">
+                        <el-button type="default" loading disabled>取消中...</el-button>
+                    </div>
+
+                    <!-- 下载完成 -->
+                    <div class="footer-bar" v-if="updaterStore.isDownloaded">
+                        <el-button type="default" @click="detailsVisible.setFalse">稍后再说</el-button>
+                        <el-button type="success" :loading="quitAndInstall.loading" @click="quitAndInstall.run">
+                            {{ updaterStore?.settings?.isForceRunAfter ? '重启升级' : '立即升级' }}
+                        </el-button>
+                    </div>
+
+                    <!-- 更新错误 -->
+                    <div class="footer-bar" v-if="updaterStore.isError">
+                        <el-button type="default" @click="detailsVisible.setFalse">关闭</el-button>
+                    </div>
+                </template>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {CloseBold}                                         from '@element-plus/icons-vue'
+import type {XoComponentUpdaterStatusItem, XoPropsUpdater} from './types/updater'
+import {useXoBoolean, useXoUpdaterAction}                  from '../../composables/index.js'
+import {useXoUpdaterStore}                                 from '../../store/index.js'
+import {MessageUtil, RendererUtil}                         from '../../utils/index.js'
+import dayjs                                               from 'dayjs'
+import {computed, onBeforeUnmount, ref, watch}             from 'vue'
+
+defineOptions({
+    name: 'XoUpdater',
+})
+
+//<editor-fold desc="属性">
+// 属性
+const props = withDefaults(defineProps<XoPropsUpdater>(), {
+    title: '版本更新',
+
+    beanSize       : 16,
+    beanStrokeWidth: 5,
+
+    cardIconSize: 16,
+    cardWidth   : undefined,
+
+    checkButtonType: 'primary',
+    checkButtonSize: 'default',
+
+    detailsWidth              : 500,
+    detailsProgressStrokeWidth: 16,
+
+    lockTitle        : '更新已锁定，重启后可用',
+    disabledTitle    : '版本更新已禁用',
+    checkingTitle    : '正在检查新版本',
+    availableTitle   : '发现新版本',
+    notAvailableTitle: '已是最新版本',
+    downloadingTitle : '更新下载中',
+    cancellingTitle  : '正在取消下载',
+    downloadedTitle  : '新版本就绪',
+    errorTitle       : '更新错误',
+
+    showChecking    : true,
+    showAvailable   : true,
+    showNotAvailable: false,
+    showDownloading : true,
+    showDownloaded  : true,
+    showError       : true,
+})
+//</editor-fold>
+
+//<editor-fold desc="更新器状态">
+// 更新器状态
+const updaterStore = useXoUpdaterStore()
+
+// 发布说明
+const releaseNotes = computed((): XoElectronBuilder.ReleaseNotes | null => {
+    const notes = updaterStore?.releaseNotes
+    if (!notes || typeof notes !== 'string') return null
+    return JSON.parse(notes) as XoElectronBuilder.ReleaseNotes
+})
+
+// 发布时间
+const releaseDate = computed(() => {
+    return dayjs(updaterStore.releaseDate).tz().format('YYYY-MM-DD HH:mm:ss')
+})
+//</editor-fold>
+
+//<editor-fold desc="取消下载">
+// 取消下载预估秒数
+const cancellingEstimateSeconds = ref<number | null>(null)
+
+// 取消下载已等待秒数
+const cancellingElapsedSeconds = ref(0)
+
+// 取消下载计时器
+let cancellingTimer: number | undefined
+
+// 清理取消下载计时器
+function clearCancellingTimer(): void {
+    if (cancellingTimer !== undefined) {
+        window.clearInterval(cancellingTimer)
+        cancellingTimer = undefined
+    }
+}
+
+// 监听取消下载状态
+watch(() => updaterStore.isCancelling, isCancelling => {
+    clearCancellingTimer()
+    cancellingEstimateSeconds.value = null
+    cancellingElapsedSeconds.value  = 0
+
+    if (!isCancelling) {
+        return
+    }
+
+    const estimate = updaterStore.progress?.remainingSeconds
+    if (estimate === null || estimate === undefined || !Number.isFinite(estimate)) {
+        return
+    }
+
+    const startedAt                 = Date.now()
+    cancellingEstimateSeconds.value = Math.max(0, Math.ceil(estimate))
+    cancellingTimer                 = window.setInterval(() => {
+        cancellingElapsedSeconds.value = Math.floor((Date.now() - startedAt) / 1000)
+    }, 1000)
+}, {immediate: true})
+
+// 取消下载说明
+const cancellingDescription = computed(() => {
+    const estimate = cancellingEstimateSeconds.value
+    if (estimate === null) {
+        return props.cancellingTitle
+    }
+
+    const remaining = estimate - cancellingElapsedSeconds.value
+    return remaining >= 0
+        ? `${props.cancellingTitle}，预计剩余 ${remaining} 秒`
+        : `${props.cancellingTitle}，超出预计 ${Math.abs(remaining)} 秒`
+})
+
+onBeforeUnmount(clearCancellingTimer)
+//</editor-fold>
+
+//<editor-fold desc="状态项">
+// 当前状态项
+const statusItem = computed<XoComponentUpdaterStatusItem | undefined>(() => {
+    switch (updaterStore.status) {
+        case 'checking':
+            return {
+                status: 'checking',
+                class : 'is-checking',
+                title : props.checkingTitle,
+                icon  : 'xion-icon-convert',
+            }
+        case 'available':
+            return {
+                status: 'available',
+                class : 'is-available',
+                title : `${props.availableTitle} v${updaterStore.version}`,
+                icon  : 'xion-icon-arrow-up2',
+            }
+        case 'not-available':
+            return {
+                status: 'not-available',
+                class : 'is-not-available',
+                title : props.notAvailableTitle,
+                icon  : 'xion-icon-right',
+            }
+        case 'downloading':
+            return {
+                status: 'downloading',
+                class : 'is-downloading',
+                title : props.downloadingTitle,
+                icon  : 'xion-icon-arrow-down2',
+            }
+        case 'cancelling':
+            return {
+                status: 'cancelling',
+                class : 'is-cancelling',
+                title : cancellingDescription.value,
+                icon  : 'xion-icon-convert',
+            }
+        case 'downloaded':
+            return {
+                status: 'downloaded',
+                class : 'is-downloaded',
+                title : props.downloadedTitle,
+                icon  : 'xion-icon-arrow-up2',
+            }
+        case 'error':
+            return {
+                status: 'error',
+                class : 'is-error',
+                title : `${props.errorTitle}：${updaterStore.error?.message ?? ''}`,
+                icon  : 'xion-icon-exclamation',
+            }
+        default:
+            return undefined
+    }
+})
+//</editor-fold>
+
+//<editor-fold desc="计算">
+// 是否为检查类型
+const isCheckType = computed(() => props.type === 'check')
+
+// 是否为卡片类型
+const isCardType = computed(() => props.type === 'card')
+
+// 是否为豆子类型
+const isBeanType = computed(() => props.type === 'bean')
+
+// 组件是否显示
+const componentVisible = computed(() => {
+    return !updaterStore.disabledUntilRestart
+        && cardVisible.isTrue
+        && ((updaterStore.isChecking && props.showChecking)
+            || (updaterStore.isAvailable && props.showAvailable)
+            || (updaterStore.isNotAvailable && props.showNotAvailable)
+            || (updaterStore.isDownloading && props.showDownloading)
+            || (updaterStore.isCancelling && props.showDownloading)
+            || (updaterStore.isDownloaded && props.showDownloaded)
+            || (updaterStore.isError && props.showError))
+})
+//</editor-fold>
+
+//<editor-fold desc="动态样式">
+// 检查 动态样式
+const checkStyle = computed(() => {
+    return {
+        '--xo-updater-js-check-width': RendererUtil.toCssSize(props.checkButtonWidth),
+    }
+})
+
+// 豆子 动态样式
+const beanStyle = computed(() => {
+    return {
+        '--xo-updater-js-bean-size': RendererUtil.toCssSize(props.beanSize),
+    }
+})
+
+// 卡片 动态样式
+const cardStyle = computed(() => {
+    return {
+        '--xo-updater-js-card-icon-size': RendererUtil.toCssSize(props.cardIconSize),
+        '--xo-updater-js-card-width'    : RendererUtil.toCssSize(props.cardWidth),
+    }
+})
+//</editor-fold>
+
+// 详情弹窗可见性
+const detailsVisible = useXoBoolean(false)
+
+// 卡片可见性
+const cardVisible = useXoBoolean(true)
+
+//<editor-fold desc="更新器操作">
+// 处理检查类型点击
+async function handleCheckClick(): Promise<void> {
+    detailsVisible.setTrue()
+
+    // 下载可用时 -> 下载更新
+    if (updaterStore.isAvailable) {
+        await downloadUpdate.run()
+        return
+    }
+
+    // 下载中或下载取消中 -> 显示详情
+    if (updaterStore.isDownloading || updaterStore.isCancelling) {
+        detailsVisible.setTrue()
+        return
+    }
+
+    // 下载完成 -> 退出并安装
+    if (updaterStore.isDownloaded) {
+        await quitAndInstall.run()
+        return
+    }
+
+    // 其他情况 -> 检查更新
+    await checkForUpdates.run()
+}
+
+// 检查更新
+const checkForUpdates = useXoUpdaterAction({
+    execute: () => updaterStore.checkForUpdates(),
+})
+
+// 下载更新
+const downloadUpdate = useXoUpdaterAction({
+    execute: () => updaterStore.downloadUpdate(),
+})
+
+// 取消下载
+const cancelDownload = useXoUpdaterAction({
+    execute: () => updaterStore.cancelDownload(),
+    after  : async cancelled => {
+        if (cancelled && !updaterStore.settings?.disableDifferentialDownload) {
+            await MessageUtil.alert(
+                '“差分更新”为开启状态，取消可能需要较长时间，请耐心等待。',
+                '提示',
+                {
+                    confirmButtonText: '知道了',
+                    customStyle      : {
+                        width: '350px',
+                    },
+                },
+            )
+        }
+        detailsVisible.setFalse()
+    },
+})
+
+// 退出并安装更新
+const quitAndInstall = useXoUpdaterAction({
+    execute: () => updaterStore.quitAndInstall(),
+})
+//</editor-fold>
+
+// 暴漏显示状态
+const emit = defineEmits<{
+    visibleChange: [visible: boolean]
+}>()
+
+watch(componentVisible, visible => {
+    emit('visibleChange', visible)
+}, {
+    immediate: true,
+})
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-updater {
+    // 图标（豆子|卡片）
+    --xo-updater-icon-font-size                                      : 10px;
+
+    // 检查
+    --xo-updater-check-width                                         : var(--xo-updater-js-check-width, 100%);
+    --xo-updater-check-icon-font-size                                : 16px;
+
+    // 豆子
+    --xo-updater-bean-size                                           : var(--xo-updater-js-bean-size, 16px);
+
+    // 卡片
+    --xo-updater-card-icon-size                                      : var(--xo-updater-js-card-icon-size, 16px);
+    --xo-updater-card-width                                          : var(--xo-updater-js-card-width, 100%);
+    --xo-updater-card-padding                                        : 10px;
+    --xo-updater-card-radius                                         : 10px;
+    --xo-updater-card-gap                                            : 8px;
+    --xo-updater-card-top-bar-gap                                    : 5px;
+    --xo-updater-card-information-padding                            : 10px;
+    --xo-updater-card-information-radius                             : 8px;
+    --xo-updater-card-information-font-size                          : 12px;
+
+    // 详情弹窗
+    --xo-updater-details-border-width                                : 1px;
+    --xo-updater-details-border-radius                               : 15px;
+    --xo-updater-details-padding                                     : 16px;
+    --xo-updater-details-header-icon-size                            : 25px;
+    --xo-updater-details-border-color                                : var(--xo-layout-body-border-color);
+    --xo-updater-details-header-gap                                  : 10px;
+    --xo-updater-details-header-title-font-size                      : 16px;
+    --xo-updater-details-header-title-icon-font-size                 : 14px;
+    --xo-updater-details-body-padding                                : 15px;
+    --xo-updater-details-body-radius                                 : 8px;
+    --xo-updater-details-body-font-size                              : 14px;
+    --xo-updater-details-release-info-max-height                     : 200px;
+    --xo-updater-details-release-info-row-gap                        : 8px;
+    --xo-updater-details-downloading-font-size                       : 12px;
+    --xo-updater-details-downloading-progress-info-padding           : 0 5px;
+    --xo-updater-details-downloading-progress-info-margin-top        : 6px;
+    --xo-updater-details-downloading-progress-info-secondary-opacity : 0.6;
+
+    /* 图标颜色 */
+
+    // 检查新版本
+    .color-opacity(--internal-updater-checking-hover-icon-bgcolor, var(--xo-updater-checking-icon-bgcolor), 80);
+    --xo-updater-checking-icon-bgcolor                               : var(--el-color-success);
+    --xo-updater-checking-icon-color                                 : var(--el-color-white);
+    --xo-updater-checking-hover-icon-bgcolor                         : var(--internal-updater-checking-hover-icon-bgcolor);
+    --xo-updater-checking-hover-icon-color                           : var(--xo-updater-checking-icon-color, var(--el-color-white));
+
+    // 有可用更新
+    .color-opacity(--internal-updater-available-hover-icon-bgcolor, var(--xo-updater-available-icon-bgcolor), 80);
+    --xo-updater-available-icon-bgcolor                              : var(--el-color-primary);
+    --xo-updater-available-icon-color                                : var(--el-color-white);
+    --xo-updater-available-hover-icon-bgcolor                        : var(--internal-updater-available-hover-icon-bgcolor);
+    --xo-updater-available-hover-icon-color                          : var(--xo-updater-available-icon-color, var(--el-color-white));
+
+    // 无可用更新
+    .color-opacity(--internal-updater-not-available-hover-icon-bgcolor, var(--xo-updater-not-available-icon-bgcolor), 80);
+    --xo-updater-not-available-icon-bgcolor                          : var(--el-color-success);
+    --xo-updater-not-available-icon-color                            : var(--el-color-white);
+    --xo-updater-not-available-hover-icon-bgcolor                    : var(--internal-updater-not-available-hover-icon-bgcolor);
+    --xo-updater-not-available-hover-icon-color                      : var(--xo-updater-not-available-icon-color, var(--el-color-white));
+
+    // 下载中
+    .color-opacity(--internal-updater-downloading-hover-icon-bgcolor, var(--xo-updater-downloading-icon-bgcolor), 80);
+    .color-opacity(--internal-updater-downloading-circle-track-color, var(--xo-updater-available-icon-bgcolor), 35);
+    --xo-updater-downloading-icon-bgcolor                            : var(--el-color-primary);
+    --xo-updater-downloading-icon-color                              : var(--el-color-white);
+    --xo-updater-downloading-hover-icon-bgcolor                      : var(--internal-updater-downloading-hover-icon-bgcolor);
+    --xo-updater-downloading-hover-icon-color                        : var(--xo-updater-downloading-icon-color, var(--el-color-white));
+    --xo-updater-downloading-circle-track-color                      : var(--internal-updater-downloading-circle-track-color);
+
+    // 正在取消下载
+    .color-opacity(--internal-updater-cancelling-hover-icon-bgcolor, var(--xo-updater-cancelling-icon-bgcolor), 80);
+    --xo-updater-cancelling-icon-bgcolor                             : var(--el-color-primary);
+    --xo-updater-cancelling-icon-color                               : var(--el-color-white);
+    --xo-updater-cancelling-hover-icon-bgcolor                       : var(--internal-updater-cancelling-hover-icon-bgcolor);
+    --xo-updater-cancelling-hover-icon-color                         : var(--xo-updater-cancelling-icon-color, var(--el-color-white));
+
+    // 下载完成
+    .color-opacity(--internal-updater-downloaded-hover-icon-bgcolor, var(--xo-updater-downloaded-icon-bgcolor), 80);
+    --xo-updater-downloaded-icon-bgcolor                             : var(--el-color-success);
+    --xo-updater-downloaded-icon-color                               : var(--el-color-white);
+    --xo-updater-downloaded-hover-icon-bgcolor                       : var(--internal-updater-downloaded-hover-icon-bgcolor);
+    --xo-updater-downloaded-hover-icon-color                         : var(--xo-updater-downloaded-icon-color, var(--el-color-white));
+
+    // 更新错误
+    .color-opacity(--internal-updater-error-hover-icon-bgcolor, var(--xo-updater-error-icon-bgcolor), 80);
+    --xo-updater-error-icon-bgcolor                                  : var(--el-color-danger);
+    --xo-updater-error-icon-color                                    : var(--el-color-white);
+    --xo-updater-error-hover-icon-bgcolor                            : var(--internal-updater-error-hover-icon-bgcolor);
+    --xo-updater-error-hover-icon-color                              : var(--xo-updater-error-icon-color, var(--el-color-white));
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+// 图标自动颜色
+.xo-updater-icon-color() {
+    // 检查新版本
+    &.is-checking {
+        background : var(--xo-updater-checking-icon-bgcolor);
+
+        > .icon {
+            color : var(--xo-updater-checking-icon-color);
+        }
+
+        &:hover {
+            background : var(--xo-updater-checking-hover-icon-bgcolor);
+
+            > .icon {
+                color : var(--xo-updater-checking-hover-icon-color);
+            }
+        }
+    }
+
+    // 有可用更新
+    &.is-available {
+        background : var(--xo-updater-available-icon-bgcolor);
+
+        > .icon {
+            color : var(--xo-updater-available-icon-color);
+        }
+
+        &:hover {
+            background : var(--xo-updater-available-hover-icon-bgcolor);
+
+            > .icon {
+                color : var(--xo-updater-available-hover-icon-color);
+            }
+        }
+    }
+
+    // 无可用更新
+    &.is-not-available {
+        background : var(--xo-updater-not-available-icon-bgcolor);
+
+        > .icon {
+            color : var(--xo-updater-not-available-icon-color);
+        }
+
+        &:hover {
+            background : var(--xo-updater-not-available-hover-icon-bgcolor);
+
+            > .icon {
+                color : var(--xo-updater-not-available-hover-icon-color);
+            }
+        }
+    }
+
+    // 下载中
+    &.is-downloading {
+
+        // 进度条
+        .el-progress-circle__track {
+            --el-fill-color-light : var(--xo-updater-downloading-circle-track-color);
+        }
+    }
+
+    // 下载中
+    &.is-downloading:not(.bean) {
+        background : var(--xo-updater-downloading-icon-bgcolor);
+
+        > .icon {
+            color : var(--xo-updater-downloading-icon-color);
+        }
+
+        &:hover {
+            background : var(--xo-updater-downloading-hover-icon-bgcolor);
+
+            > .icon {
+                color : var(--xo-updater-downloading-hover-icon-color);
+            }
+        }
+    }
+
+    // 正在取消下载
+    &.is-cancelling {
+        background : var(--xo-updater-cancelling-icon-bgcolor);
+
+        > .icon {
+            color : var(--xo-updater-cancelling-icon-color);
+        }
+
+        &:hover {
+            background : var(--xo-updater-cancelling-hover-icon-bgcolor);
+
+            > .icon {
+                color : var(--xo-updater-cancelling-hover-icon-color);
+            }
+        }
+    }
+
+    // 下载完成
+    &.is-downloaded {
+        background : var(--xo-updater-downloaded-icon-bgcolor);
+
+        > .icon {
+            color : var(--xo-updater-downloaded-icon-color);
+        }
+
+        &:hover {
+            background : var(--xo-updater-downloaded-hover-icon-bgcolor);
+
+            > .icon {
+                color : var(--xo-updater-downloaded-hover-icon-color);
+            }
+        }
+    }
+
+    // 更新错误, 更新禁用
+    &.is-error, &.is-disabled {
+        background : var(--xo-updater-error-icon-bgcolor);
+
+        > .icon {
+            color : var(--xo-updater-error-icon-color);
+        }
+
+        &:hover {
+            background : var(--xo-updater-error-hover-icon-bgcolor);
+
+            > .icon {
+                color : var(--xo-updater-error-hover-icon-color);
+            }
+        }
+    }
+}
+
+// 包裹层
+.xo-updater-wraper {
+    .flex-center();
+    width : 100%;
+
+    &.is-bean {
+        height : 100%;
+    }
+}
+
+// 检查类型
+.xo-updater--check {
+    .no-user-select();
+    width : var(--xo-updater-check-width);
+
+    .button {
+        .flex-center();
+        width : var(--xo-updater-check-width);
+
+        .icon {
+            font-size : var(--xo-updater-check-icon-font-size);
+        }
+    }
+}
+
+// 卡片类型
+.xo-updater--card {
+    .no-user-select();
+    width : var(--xo-updater-card-width);
+
+    > .card {
+        display        : flex;
+        flex-direction : column;
+        width          : 100%;
+        border-radius  : var(--xo-updater-card-radius);
+        padding        : var(--xo-updater-card-padding);
+        gap            : var(--xo-updater-card-gap);
+        background     : var(--xo-layout-body-bg-color);
+        border         : 1px solid var(--xo-layout-body-border-color);
+        overflow       : hidden;
+
+        > .top-bar {
+            .flex-align-center();
+            gap : var(--xo-updater-card-top-bar-gap);
+
+            > .state {
+                .flex-center();
+                .flex-fixed();
+                width         : var(--xo-updater-card-icon-size);
+                height        : var(--xo-updater-card-icon-size);
+                border-radius : 100px;
+
+                > .icon {
+                    font-size : var(--xo-updater-icon-font-size);
+                }
+
+                // 检查新版本
+                &.is-checking {
+                    background : var(--xo-updater-checking-icon-bgcolor);
+
+                    > .icon {
+                        color : var(--xo-updater-checking-icon-color);
+                    }
+                }
+
+                // 图标自动颜色
+                .xo-updater-icon-color();
+            }
+
+            > .title {
+                .flex-auto();
+                .text-ellipsis();
+            }
+
+            > .close {
+                .flex-fixed();
+                width         : var(--xo-updater-card-icon-size);
+                height        : var(--xo-updater-card-icon-size);
+                cursor        : pointer;
+                border-radius : 3px;
+
+                &:hover {
+                    background : var(--xo-close-button-hover-bgcolor);
+                    color      : var(--xo-close-button-hover-color);
+                }
+            }
+        }
+
+        > .information {
+            .text-ellipsis();
+            cursor        : pointer;
+            padding       : var(--xo-updater-card-information-padding);
+            border-radius : var(--xo-updater-card-information-radius);
+            font-size     : var(--xo-updater-card-information-font-size);
+            background    : var(--xo-global-title-bar-background);
+            text-align    : center;
+
+            > .progress-state {
+                display         : flex;
+                justify-content : space-between;
+                margin-top      : 5px;
+            }
+        }
+
+        > .bottom-bar {
+            display : flex;
+
+            .el-button + .el-button {
+                margin-left : 6px;
+            }
+
+            > .button {
+                .flex-auto();
+            }
+        }
+    }
+}
+
+// 豆子类型
+.xo-updater--bean {
+    .flex-center();
+    .no-user-select();
+    cursor : pointer;
+    width  : 100%;
+    height : 100%;
+
+    > .bean {
+        .flex-center();
+        width         : var(--xo-updater-bean-size);
+        height        : var(--xo-updater-bean-size);
+        min-width     : 16px;
+        min-height    : 16px;
+        border-radius : 100px;
+
+        > .icon {
+            font-size : var(--xo-updater-icon-font-size);
+        }
+
+        // 图标自动颜色
+        .xo-updater-icon-color();
+    }
+}
+
+// 更新详情页面
+.xo-updater--details {
+    .no-user-select();
+    --el-dialog-padding-primary : var(--xo-updater-details-padding);
+    --el-dialog-bg-color        : var(--xo-layout-body-bg-color);
+    border                      : var(--xo-updater-details-border-width) solid var(--xo-updater-details-border-color);
+    border-radius               : var(--xo-updater-details-border-radius);
+
+    > .el-dialog__header {
+        // 关闭按钮
+        > .el-dialog__headerbtn {
+            .flex-center();
+            top    : var(--xo-updater-details-padding);
+            right  : var(--xo-updater-details-padding);
+            height : var(--xo-updater-details-header-icon-size);
+            width  : var(--xo-updater-details-header-icon-size);
+
+            i {
+                color : var(--xo-text-color-primary);
+            }
+
+            &:hover {
+                background    : var(--xo-close-button-hover-bgcolor);
+                border-radius : 3px;
+
+                i {
+                    color : var(--xo-close-button-hover-color);
+                }
+            }
+        }
+
+        > .header {
+            .flex-align-center();
+            gap : var(--xo-updater-details-header-gap);
+
+            > .state {
+                .flex-center();
+                .flex-fixed();
+                width         : var(--xo-updater-details-header-icon-size);
+                height        : var(--xo-updater-details-header-icon-size);
+                border-radius : 100px;
+
+                > .icon {
+                    .flex-center();
+                    font-size : var(--xo-updater-details-header-title-icon-font-size);
+                }
+
+                // 图标自动颜色
+                .xo-updater-icon-color();
+            }
+
+            > .title {
+                .flex-auto();
+                font-size   : var(--xo-updater-details-header-title-font-size);
+                font-weight : bold;
+            }
+        }
+    }
+
+    > .el-dialog__body > .body {
+        padding       : var(--xo-updater-details-body-padding);
+        border-radius : var(--xo-updater-details-body-radius);
+        font-size     : var(--xo-updater-details-body-font-size);
+        background    : var(--xo-global-title-bar-background);
+        color         : var(--xo-text-color-primary);
+
+        &.is-available {
+            max-height : var(--xo-updater-details-release-info-max-height);
+            overflow-y : auto;
+
+            > .release-info {
+                .user-select();
+
+                > .row {
+                    padding-bottom : var(--xo-updater-details-release-info-row-gap);
+
+                    &:last-child {
+                        padding-bottom : 0;
+                    }
+
+                    > .name {
+                        font-weight : bold;
+                    }
+
+                    > .value {
+                        > .section {
+                            > .section-items {
+                                > .section-item {
+                                    text-indent : 1em;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        &.is-downloading {
+            font-size : var(--xo-updater-details-downloading-font-size);
+
+            > .progress-info {
+                .flex-align-center();
+                padding         : var(--xo-updater-details-downloading-progress-info-padding);
+                margin-top      : var(--xo-updater-details-downloading-progress-info-margin-top);
+                justify-content : space-between;
+
+                > .secondary {
+                    opacity : var(--xo-updater-details-downloading-progress-info-secondary-opacity);
+                }
+            }
+        }
+
+        &.is-error {
+            .user-select();
+        }
+    }
+}
+</style>