@e-xi/xion 0.0.6

package/dist/renderer/components/settings-pages/xo-setting-page-remote-service.vue

@@ -0,0 +1,183 @@
+<!-- 设置 - 远程服务设置页面 -->
+<template>
+    <div class="page-mini page-settings-remote-service" v-if="dataLoader.loaded">
+        <xo-form-flex label="连接设置" :row-title-bold="props.rowTitleBold" :bottom-gap="props.formGap">
+            <xo-form-flex-row describe="服务端远程服务入口地址">
+                <template #title>
+                    <div class="remote-service-status-tag">
+                        <div class="title">远程服务地址</div>
+                        <el-tag
+                            class="tag"
+                            effect="light"
+                            size="small"
+                            disable-transitions
+                            :type="remoteServiceStore.statusOption.type"
+                            round
+                        >
+                            {{ remoteServiceStore.statusOption.label }}
+                        </el-tag>
+                    </div>
+                </template>
+                <el-input
+                    class="input-text"
+                    :disabled="!dataLoader.formData.enabled"
+                    v-model="dataLoader.formData.serviceUrl"
+                    @change="dataLoader.submit"
+                    placeholder="输入服务地址"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="心跳探测路径" describe="用于检测远程服务是否在线">
+                <el-input
+                    class="input-text"
+                    :disabled="!dataLoader.formData.enabled"
+                    v-model="dataLoader.formData.heartbeatPath"
+                    @change="dataLoader.submit"
+                    placeholder="输入心跳探测路径"
+                />
+            </xo-form-flex-row>
+        </xo-form-flex>
+
+        <xo-form-flex label="请求设置" :row-title-bold="props.rowTitleBold">
+            <xo-form-flex-row title="心跳发送间隔（秒）" describe="心跳发送间隔时间">
+                <el-input-number
+                    class="input-number"
+                    :min="5"
+                    :disabled="!dataLoader.formData.enabled"
+                    v-model="dataLoader.formData.heartbeatInterval"
+                    @change="dataLoader.submit"
+                    controls-position="right"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="连接超时（秒）" describe="指定时间内远程服务无响应视为连接失败">
+                <el-input-number
+                    class="input-number"
+                    :disabled="!dataLoader.formData.enabled"
+                    :min="3"
+                    v-model="dataLoader.formData.connectionTimeout"
+                    @change="dataLoader.submit"
+                    controls-position="right"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="重试次数" describe="连接失败时的重试次数">
+                <el-input-number
+                    class="input-number"
+                    :disabled="!dataLoader.formData.enabled"
+                    :min="1"
+                    v-model="dataLoader.formData.retryCount"
+                    @change="dataLoader.submit"
+                    controls-position="right"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="重试间隔（秒）" describe="每次重试的间隔时间">
+                <el-input-number
+                    class="input-number"
+                    :disabled="!dataLoader.formData.enabled"
+                    :min="3"
+                    v-model="dataLoader.formData.retryDelay"
+                    @change="dataLoader.submit"
+                    controls-position="right"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="低频探测间隔（秒）" describe="重试用完后持续低频探测的间隔时间">
+                <el-input-number
+                    class="input-number"
+                    :disabled="!dataLoader.formData.enabled"
+                    :min="30"
+                    v-model="dataLoader.formData.lowFrequencyProbeInterval"
+                    @change="dataLoader.submit"
+                    controls-position="right"
+                />
+            </xo-form-flex-row>
+        </xo-form-flex>
+    </div>
+</template>
+
+<script setup lang="ts">
+import XoFormFlexRow                          from '../form/xo-form-flex-row.vue'
+import XoFormFlex                             from '../form/xo-form-flex.vue'
+import type {XoPropsSettingPageRemoteService} from './types/setting-page-remote-service'
+import {useXoDataLoader}                      from '../../composables/index.js'
+import {useXoRemoteServiceStore}              from '../../store/index.js'
+import {onMounted}                            from 'vue'
+
+defineOptions({
+    name: 'XoSettingPageRemoteService',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingPageRemoteService>(), {
+    formGap     : 20,
+    rowTitleBold: true,
+})
+
+// 远程服务状态
+const remoteServiceStore = useXoRemoteServiceStore()
+
+// 加载数据
+onMounted(async () => {
+    await dataLoader.load()
+})
+
+// 表单加载器
+const dataLoader = useXoDataLoader({
+    // 加载数据
+    request: () => window.xion.remoteService.getSettings(),
+    // 加载成功
+    onLoadSuccess: (settings, formData) => {
+        // 更新表单数据
+        formData.enabled                   = settings.enabled
+        formData.serviceUrl                = settings.serviceUrl
+        formData.connectionTimeout         = settings.connectionTimeout / 1000
+        formData.retryCount                = settings.retryCount
+        formData.retryDelay                = settings.retryDelay / 1000
+        formData.lowFrequencyProbeInterval = settings.lowFrequencyProbeInterval / 1000
+        formData.heartbeatInterval         = settings.heartbeatInterval / 1000
+        formData.heartbeatPath             = settings.heartbeatPath
+    },
+    // 默认表单数据
+    form: (): XoRemoteService.UserSettings => ({}),
+    // 提交表单
+    onSubmit: (formData) => {
+        const copyData                     = structuredClone(formData)
+        copyData.connectionTimeout         = (formData.connectionTimeout ?? 0) * 1000
+        copyData.retryDelay                = (formData.retryDelay ?? 0) * 1000
+        copyData.lowFrequencyProbeInterval = (formData.lowFrequencyProbeInterval ?? 0) * 1000
+        copyData.heartbeatInterval         = (formData.heartbeatInterval ?? 0) * 1000
+        return window.xion.remoteService.setSettings(copyData)
+    },
+})
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+.page-settings-remote-service {
+    --xo-setting-page-remote-service-input-text-width   : 300px;
+    --xo-setting-page-remote-service-input-number-width : 100px;
+    --xo-setting-page-remote-service-status-tag-gap     : 6px;
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+.page-settings-remote-service {
+    position : relative;
+
+    .input-text {
+        width : var(--xo-setting-page-remote-service-input-text-width);
+    }
+
+    .input-number {
+        width : var(--xo-setting-page-remote-service-input-number-width);
+    }
+
+    .remote-service-status-tag {
+        display     : flex;
+        align-items : center;
+        gap         : var(--xo-setting-page-remote-service-status-tag-gap);
+
+        > .tag {
+            font-weight : normal;
+        }
+    }
+}
+</style>

package/dist/renderer/components/settings-pages/xo-setting-page-updater.vue

@@ -0,0 +1,350 @@
+<!-- 设置 - 更新设置页面组件 -->
+<template>
+    <div class="page-mini page-settings-updater" v-if="dataLoader.loaded">
+
+        <!-- logo -->
+        <div class="logo" v-if="props.logoSrc">
+            <img
+                :src="props.logoSrc"
+                :width="props.logoWidth"
+                :height="props.logoHeight ?? props.logoWidth"
+                :alt="appStore.info.name ?? 'logo'"
+            />
+        </div>
+        <xo-spacing-line :height="props.logoBottomGap" />
+
+        <!-- 应用信息 -->
+        <div class="app-info" v-if="appStore.info.name || appStore.info.version">
+            <div class="name" v-if="appStore.info.name">{{ appStore.info.name }}</div>
+            <div class="version" v-if="appStore.info.version">v{{ appStore.info.version }}</div>
+            <div class="copy-button" @click="copyAppVersion" title="复制版本信息">
+                <i class="icon xion-font xion-icon-copy2" />
+            </div>
+        </div>
+        <xo-spacing-line :height="props.appInfoBottomGap" />
+
+        <!-- 更新器检查 -->
+        <xo-updater type="check" check-button-size="large" check-button-type="primary" />
+        <xo-spacing-line :height="props.updaterBottomGap" />
+
+        <!-- 表单 -->
+        <xo-form-flex :row-title-bold="true">
+            <xo-form-flex-row
+                v-if="allowUserFeedUrl && updateMode.model !== false"
+                title="订阅地址（重启生效）"
+                describe="设置更新服务订阅地址"
+            >
+                <el-input
+                    class="input-text"
+                    v-model="feedUrl.model"
+                    readonly
+                    placeholder="系统默认订阅地址"
+                >
+                    <template #append>
+                        <el-button
+                            :disabled="updaterStore.disabledUntilRestart"
+                            @click="promptFeedUrl"
+                            :icon="Setting"
+                        />
+                    </template>
+                </el-input>
+            </xo-form-flex-row>
+            <xo-form-flex-row title="更新检查方式" describe="设置应用更新检查方式">
+                <xo-radio-group
+                    @change="updateMode.onChange"
+                    v-model="updateMode.model"
+                    :options="updateMode.options"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="自动检查更新延迟（秒）" describe="设置启动后检查更新的延迟时间">
+                <el-input-number
+                    class="input-number"
+                    controls-position="right"
+                    v-model="autoCheckDelay.model"
+                    @change="autoCheckDelay.onChange"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="自动下载更新包" describe="是否在发现新版本后自动下载">
+                <el-switch
+                    v-model="autoDownload.model"
+                    @change="autoDownload.onChange"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="禁用差分更新" describe="禁用后将下载完整更新包">
+                <el-switch
+                    v-model="disableDifferentialDownload.model"
+                    @change="disableDifferentialDownload.onChange"
+                    :disabled="updaterStore.isDownloading || updaterStore.isCancelling"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="退出时自动安装" describe="是否在应用退出时自动安装已下载的更新">
+                <el-switch
+                    v-model="autoInstallOnAppQuit.model"
+                    @change="autoInstallOnAppQuit.onChange"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="静默安装" describe="安装更新时是否隐藏界面">
+                <el-switch
+                    v-model="isSilent.model"
+                    @change="isSilent.onChange"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="安装后启动" describe="安装更新后是否强制启动">
+                <el-switch
+                    v-model="isForceRunAfter.model"
+                    @change="isForceRunAfter.onChange"
+                />
+            </xo-form-flex-row>
+        </xo-form-flex>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {Setting}                                                                     from '@element-plus/icons-vue'
+import XoFormFlexRow                                                                 from '../form/xo-form-flex-row.vue'
+import XoFormFlex                                                                    from '../form/xo-form-flex.vue'
+import XoRadioGroup                                                                  from '../radio-group/xo-radio-group.vue'
+import type {XoPropsSettingPageUpdater}                                              from './types/setting-page-updater'
+import XoSpacingLine                                                                 from '../spacing-line/xo-spacing-line.vue'
+import XoUpdater                                                                     from '../updater/xo-updater.vue'
+import {useXoDataLoader, useXoInput, useXoInputNumber, useXoRadioGroup, useXoSwitch} from '../../composables/index.js'
+import {useXoAppStore, useXoUpdaterStore}                                            from '../../store/index.js'
+import {MessageUtil}                                                                 from '../../utils/index.js'
+import {UpdateModeOptions}                                                           from '../../../shared/app/index.js'
+import {ValidatorUtil}                                                               from '../../../shared/utils/index.js'
+import {onMounted, ref}                                                              from 'vue'
+
+defineOptions({
+    name: 'XoSettingPageUpdater',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingPageUpdater>(), {
+    logoSrc         : undefined,
+    logoWidth       : 128,
+    logoHeight      : 128,
+    logoBottomGap   : 0,
+    appInfoBottomGap: 20,
+    updaterBottomGap: 20,
+})
+
+// 应用 Store
+const appStore = useXoAppStore()
+
+// 更新器 Store
+const updaterStore = useXoUpdaterStore()
+
+// 表单加载器
+const dataLoader = useXoDataLoader(
+    {
+        request      : () => window.xion.updater.getSettings(),
+        onLoadSuccess: (settings, formData) => {
+            // 初始化数据
+            allowUserFeedUrl.value = settings.allowUserFeedUrl
+
+            // 初始化表单绑定数据
+            feedUrl.model                     = settings.feedUrl ?? ''
+            updateMode.model                  = settings.enable
+            autoCheckDelay.model              = settings.autoCheckDelay / 1000
+            autoDownload.model                = settings.autoDownload
+            disableDifferentialDownload.model = settings.disableDifferentialDownload
+            autoInstallOnAppQuit.model        = settings.autoInstallOnAppQuit
+            isSilent.model                    = settings.isSilent
+            isForceRunAfter.model             = settings.isForceRunAfter
+
+            // 初始化提交表单数据
+            formData.feedUrl                     = settings.feedUrl
+            formData.enable                      = settings.enable
+            formData.autoCheckDelay              = settings.autoCheckDelay
+            formData.autoDownload                = settings.autoDownload
+            formData.disableDifferentialDownload = settings.disableDifferentialDownload
+            formData.autoInstallOnAppQuit        = settings.autoInstallOnAppQuit
+            formData.isSilent                    = settings.isSilent
+            formData.isForceRunAfter             = settings.isForceRunAfter
+        },
+        form         : (): XoUpdater.UserSettings => ({}),
+        onSubmit     : formData => window.xion.updater.setSettings(formData),
+    },
+)
+
+// 加载设置表单
+onMounted(async () => {
+    await dataLoader.load()
+})
+
+// 是否允许用户自定义订阅地址
+const allowUserFeedUrl = ref(false)
+
+// 订阅地址
+const feedUrl = useXoInput({
+    model: '',
+})
+
+// 应用启动模式
+const updateMode = useXoRadioGroup<XoApp.UpdateMode>({
+    model   : false,
+    options : UpdateModeOptions,
+    onChange: value => {
+        dataLoader.formData.enable = value
+        void dataLoader.submit()
+    },
+})
+
+// 自动检查更新延迟
+const autoCheckDelay = useXoInputNumber({
+    model   : 0,
+    onChange: value => {
+        dataLoader.formData.autoCheckDelay = (value ?? 0) * 1000
+        void dataLoader.submit()
+    },
+})
+
+// 自动下载
+const autoDownload = useXoSwitch<boolean>({
+    model   : false,
+    onChange: value => {
+        dataLoader.formData.autoDownload = value
+        void dataLoader.submit()
+    },
+})
+
+// 是否禁用差分更新
+const disableDifferentialDownload = useXoSwitch<boolean>({
+    model   : false,
+    onChange: value => {
+        dataLoader.formData.disableDifferentialDownload = value
+        void dataLoader.submit()
+    },
+})
+
+// 退出时自动安装
+const autoInstallOnAppQuit = useXoSwitch<boolean>({
+    model   : false,
+    onChange: value => {
+        dataLoader.formData.autoInstallOnAppQuit = value
+        void dataLoader.submit()
+    },
+})
+
+// 是否静默安装
+const isSilent = useXoSwitch<boolean>({
+    model   : false,
+    onChange: value => {
+        dataLoader.formData.isSilent = value
+        void dataLoader.submit()
+    },
+})
+
+// 安装后是否强制启动
+const isForceRunAfter = useXoSwitch<boolean>({
+    model   : false,
+    onChange: value => {
+        dataLoader.formData.isForceRunAfter = value
+        void dataLoader.submit()
+    },
+})
+
+// 设置订阅地址
+async function promptFeedUrl() {
+    const value = await MessageUtil.prompt(
+        '订阅地址必须使用 HTTPS 协议',
+        '订阅地址',
+        {
+            inputPlaceholder: '请输入订阅地址',
+            inputValidator  : ValidatorUtil.httpsFeedUrl,
+        },
+    )
+    if (value === undefined) return
+
+    // 更新表单数据
+    feedUrl.model = value
+
+    // 更新提交表单数据
+    dataLoader.formData.feedUrl = value
+
+    // 提交表单
+    await dataLoader.submit()
+
+    // 提示是否重启
+    const confirmed = await MessageUtil.confirm(
+        '设置成功，是否重启应用以生效？',
+        '提示',
+        {
+            type             : 'primary',
+            confirmButtonText: '立即重启',
+            cancelButtonText : '稍后',
+        },
+    )
+    if (confirmed) {
+        await window.xion.app.restart()
+    }
+}
+
+// 复制应用版本
+async function copyAppVersion() {
+    await window.xion.clipboard.writeText(`${appStore.info.name} v${appStore.info.version}`)
+    MessageUtil.success('复制成功')
+}
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+.page-settings-updater {
+    --xo-setting-page-updater-appinfo-gap                 : 6px;
+    --xo-setting-page-updater-appinfo-title-font-size     : 25px;
+    --xo-setting-page-updater-appinfo-title-font-weight   : bold;
+    --xo-setting-page-updater-appinfo-version-font-size   : inherit;
+    --xo-setting-page-updater-appinfo-version-font-weight : normal;
+    --xo-setting-page-updater-input-width-text            : 300px;
+    --xo-setting-page-updater-input-number-width          : 80px;
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.page-settings-updater {
+    > .logo {
+        .flex-center();
+        .no-user-select();
+    }
+
+    > .app-info {
+        .flex-justify-center();
+        align-items : baseline;
+        gap         : var(--xo-setting-page-updater-appinfo-gap);
+
+        .name {
+            font-size   : var(--xo-setting-page-updater-appinfo-title-font-size);
+            font-weight : var(--xo-setting-page-updater-appinfo-title-font-weight);
+        }
+
+        .version {
+            font-size   : var(--xo-setting-page-updater-appinfo-version-font-size);
+            font-weight : var(--xo-setting-page-updater-appinfo-version-font-weight);
+        }
+
+        .copy-button {
+            opacity : 0.66;
+            cursor  : pointer;
+
+            &:hover {
+                opacity : 1;
+            }
+
+            .icon {
+                font-size : inherit;
+            }
+        }
+    }
+
+    .input-text {
+        width : var(--xo-setting-page-updater-input-width-text);
+    }
+
+    .input-number {
+        width : var(--xo-setting-page-updater-input-number-width);
+    }
+}
+</style>

package/dist/renderer/components/shortcut-keys-record/types/shortcut-keys-record.d.ts

@@ -0,0 +1,25 @@
+// 快捷键录制组件属性
+export interface XoPropsShortcutKeysRecord {
+    // 已录制的快捷键，使用原始组合键数组（KeyboardEvent.code 小写值）
+    modelValue?: string[]
+    // 默认提示
+    placeholder?: string
+    // 录制中提示
+    recordingPlaceholder?: string
+    // 是否禁用
+    disabled?: boolean
+    // 是否只读
+    readonly?: boolean
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 快捷键录制
+        interface ShortcutKeysRecord extends XoPropsShortcutKeysRecord {
+        }
+    }
+}