@e-xi/xion 0.0.6

package/dist/renderer/components/settings-components/xo-setting-shortcut-keys-record.vue

@@ -0,0 +1,74 @@
+<!-- 设置 - 快捷键录制 组件 -->
+<template>
+    <xo-shortcut-keys-record
+        class="xo-setting--shortcut-keys-record"
+        v-model="keys"
+        @change="onChange"
+        :style="style"
+    />
+</template>
+
+<script setup lang="ts">
+import type {XoPropsSettingShortcutKeysRecord}   from './types/setting-shortcut-keys-record'
+import XoShortcutKeysRecord                      from '../shortcut-keys-record/xo-shortcut-keys-record.vue'
+import {ContextUtil, RendererUtil, ShortcutUtil} from '../../utils/index.js'
+import {computed, inject}                        from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoSettingShortcutKeysRecord',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingShortcutKeysRecord>(), {
+    center: true,
+})
+
+// 表单 flex 上下文
+const formFlexContext = inject(ContextUtil.FormFlexKey, undefined)
+
+// 绑定值
+const keys = defineModel<string[]>({default: []})
+
+// 样式
+const style = computed(() => {
+    return {
+        '--xo-setting--shortcut-keys-record--value-align': props.center ? 'center' : 'left',
+        'width'                                          : RendererUtil.toCssSize(props.width ?? formFlexContext?.inputWidth),
+    }
+})
+
+// 快捷键变化
+const onChange = (keys: string[]): void => {
+    let key: XoShortcut.Key | undefined
+
+    // 全局快捷键
+    if (props.scope === 'global') {
+        key = ShortcutUtil.globalKey(props.shortcutId, keys)
+    }
+
+    // 应用快捷键
+    else if (props.scope === 'app') {
+        key = ShortcutUtil.appKey(props.shortcutId, keys)
+    }
+
+    if (key) {
+        void window.xion.app.setShortcut(key)
+    }
+}
+</script>
+
+<style lang="less">
+.xo-shortcut-keys-record.xo-setting--shortcut-keys-record {
+    --xo-setting--shortcut-keys-record--value-align : left;
+}
+</style>
+
+<style lang="less">
+.xo-shortcut-keys-record.xo-setting--shortcut-keys-record {
+
+    .el-input__inner {
+        text-align : var(--xo-setting--shortcut-keys-record--value-align);
+    }
+}
+</style>

package/dist/renderer/components/settings-components/xo-setting-window-material.vue

@@ -0,0 +1,83 @@
+<!-- 设置 - 窗口材质组件 -->
+<template>
+    <el-select
+        class="xo-setting--window-material"
+        v-model="material"
+        @change="onChange"
+        :style="style"
+        :teleported="false"
+        :placeholder="placeholder"
+    >
+        <el-option v-for="(item, i) in materials" :key="i" :label="item.label" :value="item.value">
+            <div class="select-item">
+                <div class="label">{{ item.label }}</div>
+                <div class="material">{{ materialUpper ? item.value.toUpperCase() : item.value }}</div>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsSettingWindowMaterial}   from './types/setting-window-material'
+import {ContextUtil, RendererUtil}           from '../../utils/index.js'
+import {WindowMaterialsOptions as materials} from '../../../shared/app/index.js'
+import {computed, inject}                    from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoSettingWindowMaterial',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingWindowMaterial>(), {
+    placeholder  : '选择窗口材质',
+    materialUpper: false,
+    valueCenter  : true,
+})
+
+// 表单 flex 上下文
+const formFlexContext = inject(ContextUtil.FormFlexKey, undefined)
+
+// 样式
+const style = computed(() => {
+    return {
+        '--xo-setting--window-material--value-align': props.valueCenter ? 'center' : 'left',
+        'width'                                     : RendererUtil.toCssSize(props.width ?? formFlexContext?.inputWidth),
+    }
+})
+
+// 绑定值
+const material = defineModel<XoApp.WindowMaterial>({default: 'none'})
+
+// 窗口材质变化
+const onChange = (material: XoApp.WindowMaterial): void => {
+    void window.xion.app.setWindowMaterial(material)
+}
+</script>
+
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-setting--window-material {
+    --xo-setting--window-material--value-align : left;
+
+    .el-select__placeholder {
+        text-align : var(--xo-setting--window-material--value-align);
+    }
+
+    .select-item {
+        display         : flex;
+        justify-content : space-between;
+        width           : 100%;
+
+        > .label {
+            font-weight : normal;
+        }
+
+        > .material {
+            font-size : 12px;
+            .color-opacity(color, var(--el-text-color-regular), 66);
+        }
+    }
+}
+</style>

package/dist/renderer/components/settings-pages/types/setting-page-folder.d.ts

@@ -0,0 +1,41 @@
+// 设置 - 目录管理页面组件 路径选项
+export interface XoComponentSettingPageFolderPathOption {
+    // 标题
+    title: string
+    // 路径
+    path: string
+}
+
+// 设置 - 目录管理页面组件属性
+export interface XoPropsSettingPageFolder {
+    // 用户目录标签
+    userFormLabel?: string
+    // 表单间距
+    formGap?: number
+    // 用户自定义路径选项列表
+    paths?: XoComponent.SettingPageFolderPathOption[]
+    // 是否显示基础路径
+    showBasePaths?: boolean
+    // 是否标题加粗
+    rowTitleBold?: boolean
+}
+
+// 全局类型
+declare global {
+
+    // 组件
+    namespace XoComponent {
+
+        // 设置 - 目录管理页面组件 路径选项
+        interface SettingPageFolderPathOption extends XoComponentSettingPageFolderPathOption {
+        }
+    }
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 目录管理页面
+        interface SettingPageFolder extends XoPropsSettingPageFolder {
+        }
+    }
+}

package/dist/renderer/components/settings-pages/types/setting-page-general.d.ts

@@ -0,0 +1,23 @@
+// 设置 - 通用设置页面组件属性
+export interface XoPropsSettingPageGeneral {
+    // 扩展的全局快捷键
+    globalShortcutKeys?: XoComponent.ShortcutKeysRecordOption[]
+    // 扩展的应用快捷键
+    appShortcutKeys?: XoComponent.ShortcutKeysRecordOption[]
+    // 输入框、下拉框宽度
+    inputWidth?: number
+    // 表单底部间距
+    bottomGap?: number
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 通用设置页面
+        interface SettingPageGeneral extends XoPropsSettingPageGeneral {
+        }
+    }
+}

package/dist/renderer/components/settings-pages/types/setting-page-remote-service.d.ts

@@ -0,0 +1,19 @@
+// 设置 - 远程服务设置页面属性
+export interface XoPropsSettingPageRemoteService {
+    // 表单间距
+    formGap?: string | number
+    // 行标题加粗
+    rowTitleBold?: boolean
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 远程服务设置页面
+        interface SettingPageRemoteService extends XoPropsSettingPageRemoteService {
+        }
+    }
+}

package/dist/renderer/components/settings-pages/types/setting-page-updater.d.ts

@@ -0,0 +1,27 @@
+// 设置 - 更新设置页面组件 属性
+export interface XoPropsSettingPageUpdater {
+    // logo 地址
+    logoSrc?: string
+    // logo 宽度
+    logoWidth?: number
+    // logo 高度
+    logoHeight?: number
+    // logo 底部间距
+    logoBottomGap?: number
+    // 应用信息底部间距
+    appInfoBottomGap?: number
+    // 更新器底部间距
+    updaterBottomGap?: number
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 更新设置页面组件
+        interface SettingPageUpdater extends XoPropsSettingPageUpdater {
+        }
+    }
+}

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

@@ -0,0 +1,137 @@
+<!-- 设置 - 目录管理页面组件 -->
+<template>
+    <div class="page-mini page-settings-folder" v-if="dataLoader.loaded">
+
+        <!-- 应用目录 -->
+        <slot name="default">
+            <xo-form-flex
+                v-if="props.paths.length > 0"
+                :label="props.userFormLabel"
+                :row-title-bold="props.rowTitleBold"
+                :bottom-gap="showBasePaths ? props.formGap : 0"
+            >
+                <xo-form-flex-row
+                    v-for="(item, key) in props.paths"
+                    :key="key"
+                    :title="item.title"
+                    :describe="item.path"
+                >
+                    <el-button
+                        size="small"
+                        type="primary"
+                        plain
+                        @click="openPath(item.path)"
+                    >
+                        打开目录
+                    </el-button>
+                </xo-form-flex-row>
+            </xo-form-flex>
+        </slot>
+
+        <!-- 基础目录 -->
+        <xo-form-flex
+            v-if="showBasePaths"
+            label="基础目录"
+            :row-title-bold="props.rowTitleBold"
+        >
+            <xo-form-flex-row
+                v-for="(item, key) in paths"
+                :key="key"
+                :title="item.title"
+                :describe="item.path"
+            >
+                <el-button
+                    size="small"
+                    type="primary"
+                    plain
+                    @click="openPath(item.path)"
+                >
+                    打开目录
+                </el-button>
+            </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 {XoPropsSettingPageFolder} from './types/setting-page-folder'
+import {useXoDataLoader}               from '../../composables/index.js'
+import {onMounted, reactive}           from 'vue'
+
+defineOptions({
+    name: 'XoSettingPageFolder',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingPageFolder>(), {
+    userFormLabel: '应用目录',
+    formGap      : 20,
+    paths        : () => [],
+    showBasePaths: true,
+    rowTitleBold : true,
+})
+
+// 目录选项
+interface PathOption {
+    // 内置目录键
+    key: XoApp.PathKeys
+    // 标题
+    title: string
+    // 路径
+    path?: string
+}
+
+// 目录列表
+const paths = reactive<PathOption[]>([
+    {
+        key  : 'logs',
+        title: '日志目录',
+    },
+    {
+        key  : 'userData',
+        title: '用户数据目录',
+    },
+    {
+        key  : 'sessionData',
+        title: '会话数据目录',
+    },
+    {
+        key  : 'updaterCacheDir',
+        title: '更新器缓存目录',
+    },
+    {
+        key  : 'crashDumps',
+        title: '崩溃转储目录',
+    },
+])
+
+// 数据加载器
+const dataLoader = useXoDataLoader({
+    request      : () => window.xion.app.getPaths(),
+    onLoadSuccess: pathValues => {
+        for (const item of paths) {
+            item.path = pathValues[item.key]
+        }
+    },
+})
+
+// 加载目录
+onMounted(async () => {
+    await dataLoader.load()
+})
+
+/**
+ * 打开目录
+ * @param {string} path 目录路径
+ * @returns {Promise<void>}
+ */
+async function openPath(path?: string): Promise<void> {
+    if (!path) return
+    await window.xion.shell.openPath(path)
+}
+</script>
+
+<style lang="less">
+</style>

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

@@ -0,0 +1,255 @@
+<!-- 设置 - 通用设置页面组件 -->
+<template>
+    <div class="page-mini page-settings-general" v-if="dataLoader.loaded">
+
+        <!-- 界面与外观 -->
+        <xo-form-flex
+            label="界面与外观"
+            :row-title-bold="true"
+            :input-width="dataLoader.inputWidth"
+            :bottom-gap="dataLoader.bottomGap"
+        >
+            <xo-form-flex-row title="主题风格" describe="“系统”表示使用操作系统主题">
+                <xo-theme-switch />
+            </xo-form-flex-row>
+            <xo-form-flex-row describe="同时设置所有窗口透明度">
+                <template #title>
+                    <div class="opacity-tag">
+                        <div class="title">窗口透明度</div>
+                        <el-tag
+                            class="tag"
+                            effect="light"
+                            size="small"
+                            disable-transitions
+                            type="primary"
+                            round
+                        >
+                            {{ opacity }}%
+                        </el-tag>
+                    </div>
+                </template>
+                <xo-setting-app-opacity v-model="opacity" />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="窗口材质" describe="作用于所有未配置材质的窗口">
+                <xo-setting-window-material v-model="material" />
+            </xo-form-flex-row>
+        </xo-form-flex>
+
+        <!-- 全局快捷键 -->
+        <xo-form-flex
+            label="全局快捷键"
+            :row-title-bold="true"
+            :input-width="dataLoader.inputWidth"
+            :bottom-gap="dataLoader.bottomGap"
+        >
+            <xo-setting-shortcut-keys-record-for-form-flex-rows
+                scope="global"
+                :record-options="globalShortcutKeys"
+            />
+        </xo-form-flex>
+
+        <!-- 应用快捷键 -->
+        <xo-form-flex
+            label="应用快捷键"
+            :row-title-bold="true"
+            :input-width="dataLoader.inputWidth"
+            :bottom-gap="dataLoader.bottomGap"
+        >
+            <xo-setting-shortcut-keys-record-for-form-flex-rows
+                scope="app"
+                :record-options="appShortcutKeys"
+            />
+        </xo-form-flex>
+
+        <!-- 系统与应用 -->
+        <xo-form-flex
+            label="系统与应用"
+            :row-title-bold="true"
+            :input-width="dataLoader.inputWidth"
+        >
+            <xo-form-flex-row title="开机启动" describe="应用是否随系统开机启动">
+                <el-switch
+                    v-model="launchOnStartup.model"
+                    @change="launchOnStartup.onChange"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="启动模式" describe="设置应用启动模式">
+                <xo-radio-group
+                    v-model="appLaunchMode.model"
+                    :options="appLaunchMode.options"
+                    @change="appLaunchMode.onChange"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="关闭窗口" describe="设置主窗口关闭行为">
+                <xo-radio-group
+                    v-model="windowCloseBehavior.model"
+                    :options="windowCloseBehavior.options"
+                    @change="windowCloseBehavior.onChange"
+                />
+            </xo-form-flex-row>
+            <xo-form-flex-row title="日志等级" describe="设置应用默认记录日志等级">
+                <xo-setting-log-level v-model="logLevel" />
+            </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 XoRadioGroup                                       from '../radio-group/xo-radio-group.vue'
+import XoSettingAppOpacity                                from '../settings-components/xo-setting-app-opacity.vue'
+import XoSettingLogLevel                                  from '../settings-components/xo-setting-log-level.vue'
+import XoSettingShortcutKeysRecordForFormFlexRows         from '../settings-components/xo-setting-shortcut-keys-record-for-form-flex-rows.vue'
+import XoSettingWindowMaterial                            from '../settings-components/xo-setting-window-material.vue'
+import type {XoPropsSettingPageGeneral}                   from './types/setting-page-general'
+import XoThemeSwitch                                      from '../theme-switch/xo-theme-switch.vue'
+import {useXoDataLoader, useXoRadioGroup, useXoSwitch}    from '../../composables/index.js'
+import {AppLaunchModeOptions, WindowCloseBehaviorOptions} from '../../../shared/app/index.js'
+import {ShortcutHandlerIds}                               from '../../../shared/shortcut/index.js'
+import {onMounted, reactive, ref}                         from 'vue'
+
+defineOptions({
+    name: 'XoSettingPageGeneral',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingPageGeneral>(), {
+    globalShortcutKeys: () => [],
+    appShortcutKeys   : () => [],
+    inputWidth        : 260,
+    bottomGap         : 20,
+})
+
+// 窗口透明度
+const opacity = ref(100)
+
+// 窗口材质
+const material = ref<XoApp.WindowMaterial>('none')
+
+// 全局快捷键
+const globalShortcutKeys = reactive<XoComponent.ShortcutKeysRecordOption[]>(mergeShortcutKeys(
+    [
+        {
+            id      : ShortcutHandlerIds.toggleAllWindow,
+            keys    : [],
+            title   : '主窗口',
+            describe: '快速显示/隐藏主窗口',
+        },
+    ],
+    props.globalShortcutKeys,
+))
+
+// 应用快捷键
+const appShortcutKeys = reactive<XoComponent.ShortcutKeysRecordOption[]>(mergeShortcutKeys(
+    [
+        {
+            id      : ShortcutHandlerIds.showSettingWindow,
+            keys    : [],
+            title   : '设置窗口',
+            describe: '快速打开设置窗口',
+        },
+    ],
+    props.appShortcutKeys,
+))
+
+// 日志等级
+const logLevel = ref<XoLogger.Level>('info')
+
+// 开机启动
+const launchOnStartup = useXoSwitch<boolean>({
+    model   : false,
+    onChange: value => void window.xion.app.setLaunchOnStartup(value),
+})
+
+// 应用启动模式
+const appLaunchMode = useXoRadioGroup<XoApp.AppLaunchMode>({
+    model   : 'window',
+    options : AppLaunchModeOptions,
+    onChange: value => void window.xion.app.setAppLaunchMode(value),
+})
+
+// 关闭窗口行为
+const windowCloseBehavior = useXoRadioGroup<XoApp.WindowCloseBehavior>({
+    model   : 'minimize',
+    options : WindowCloseBehaviorOptions,
+    onChange: value => void window.xion.app.setWindowCloseBehavior(value),
+})
+
+// 表单加载器
+const dataLoader = useXoDataLoader(
+    {
+        inputWidth   : props.inputWidth,
+        bottomGap    : props.bottomGap,
+        request      : () => window.xion.app.getGeneralSettings(),
+        onLoadSuccess: settings => {
+            // 更新 APP透明度
+            opacity.value             = Math.round(settings.opacity * 100)
+            // 更新 窗口材质
+            material.value            = settings.windowMaterial
+            // 更新 日志等级
+            logLevel.value            = settings.logLevel
+            // 更新 是否开机启动
+            launchOnStartup.model     = settings.launchOnStartup
+            // 更新 应用启动模式
+            appLaunchMode.model       = settings.appLaunchMode
+            // 更新 窗口关闭行为
+            windowCloseBehavior.model = settings.windowCloseBehavior
+
+            // 更新 全局快捷键
+            for (const item of globalShortcutKeys) {
+                item.keys = settings?.shortcuts?.[item.id]?.keys ?? []
+            }
+
+            // 更新 应用快捷键
+            for (const item of appShortcutKeys) {
+                item.keys = settings?.shortcuts?.[item.id]?.keys ?? []
+            }
+        },
+    },
+)
+
+// 加载设置
+onMounted(async () => {
+    await dataLoader.load()
+})
+
+/**
+ * 合并内置快捷键和扩展快捷键
+ * @param {XoComponent.ShortcutKeysRecordOption[]} builtIn    内置快捷键选项
+ * @param {XoComponent.ShortcutKeysRecordOption[]} extensions 扩展快捷键选项
+ * @returns {XoComponent.ShortcutKeysRecordOption[]}
+ */
+function mergeShortcutKeys(
+    builtIn: XoComponent.ShortcutKeysRecordOption[],
+    extensions: XoComponent.ShortcutKeysRecordOption[],
+): XoComponent.ShortcutKeysRecordOption[] {
+    const options = new Map<XoShortcut.ID, XoComponent.ShortcutKeysRecordOption>()
+    for (const option of [...builtIn, ...extensions]) {
+        if (!options.has(option.id)) {
+            options.set(option.id, {
+                ...option,
+                keys: [...option.keys],
+            })
+        }
+    }
+    return [...options.values()]
+}
+</script>
+
+<style lang="less">
+.page-settings-general {
+    --xo-setting-page-general-opacity-tag-gap : 6px;
+}
+</style>
+
+<style lang="less">
+.page-settings-general {
+    .opacity-tag {
+        display     : flex;
+        align-items : center;
+        gap         : var(--xo-setting-page-general-opacity-tag-gap);
+        font-weight : normal;
+    }
+}
+</style>