@e-xi/xion 0.0.6

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

@@ -0,0 +1,161 @@
+<!-- 快捷键录制组件 -->
+<template>
+    <el-input
+        ref="inputRef"
+        class="xo-shortcut-keys-record"
+        :model-value="inputValue"
+        :placeholder="inputPlaceholder"
+        :disabled="props.disabled"
+        :readonly="props.readonly"
+        :clearable="false"
+        @focus="startRecording"
+        @blur="stopRecording"
+        @keydown.capture="onKeydown"
+        @keyup.capture="onKeyup"
+    >
+        <!-- :clearable=false 并使用 suffix 模拟清空图标 -->
+        <template #suffix>
+            <el-icon
+                class="clear-icon"
+                v-if="inputValue && !props.disabled && !props.readonly"
+                @mousedown.prevent
+                @click.stop="clearShortcut"
+            >
+                <Delete />
+            </el-icon>
+        </template>
+    </el-input>
+</template>
+
+<script setup lang="ts">
+import {Delete}                         from '@element-plus/icons-vue'
+import type {XoPropsShortcutKeysRecord} from './types/shortcut-keys-record'
+import {KeyboardUtil}                   from '../../utils/index.js'
+import type {ElInput}                   from 'element-plus'
+import {computed, ref}                  from 'vue'
+
+defineOptions({
+    name: 'XoShortcutKeysRecord',
+})
+
+// 属性
+const props = withDefaults(defineProps<XoPropsShortcutKeysRecord>(), {
+    modelValue          : () => [],
+    placeholder         : '点击开始录制快捷键',
+    recordingPlaceholder: '正在录制快捷键...',
+    disabled            : false,
+    readonly            : false,
+})
+
+// 事件
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: string[]): void
+    (event: 'change', value: string[]): void
+    (event: 'clear'): void
+    (event: 'recording-change', value: boolean): void
+}>()
+
+// 输入框引用
+const inputRef = ref<InstanceType<typeof ElInput> | null>(null)
+
+// 是否录制中
+const recording = ref(false)
+
+// 临时按键
+const keysTemp = ref<string[]>([])
+
+// 只负责展示外部已录制结果；录制中的临时按键不直接暴露给输入框
+const inputValue = computed(() => KeyboardUtil.parseFriendly(props.modelValue ?? []))
+
+// 输入框占位符
+const inputPlaceholder = computed(() => recording.value ? props.recordingPlaceholder : props.placeholder)
+
+// 开始录制
+function startRecording(): void {
+    if (props.disabled) {
+        return
+    }
+
+    // 每次开始录制都从空状态重新收集，避免上一次残留按键污染本次组合键
+    keysTemp.value  = []
+    recording.value = true
+    emit('recording-change', true)
+}
+
+// 停止录制
+function stopRecording(): void {
+    if (!recording.value) {
+        return
+    }
+
+    // 失焦即退出录制，临时缓存只服务当前一次采集
+    recording.value = false
+    keysTemp.value  = []
+    emit('recording-change', false)
+}
+
+// 同步录制结果
+function syncRecordingValue(): void {
+    if (!recording.value) {
+        return
+    }
+
+    const combinationKeys = KeyboardUtil.getCombinationKeys(keysTemp.value)
+    if (combinationKeys.length <= 0) {
+        return
+    }
+
+    // 这里输出的是原始按键码数组，真正的展示和后续转换都交给外部处理
+    emit('update:modelValue', combinationKeys)
+    emit('change', combinationKeys)
+}
+
+// 按键按下事件
+function onKeydown(event: KeyboardEvent | Event): void {
+    if (props.disabled || !recording.value || !(event instanceof KeyboardEvent)) {
+        return
+    }
+
+    // 阻断输入框默认行为，避免快捷键录制时把字符写进控件或冒泡给外层页面
+    event.preventDefault()
+    event.stopPropagation()
+    keysTemp.value = KeyboardUtil.keydown(event, keysTemp.value)
+    syncRecordingValue()
+}
+
+// 按键抬起事件
+function onKeyup(event: KeyboardEvent | Event): void {
+    if (props.disabled || !recording.value || !(event instanceof KeyboardEvent)) {
+        return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    keysTemp.value = KeyboardUtil.keyup(event, keysTemp.value)
+    syncRecordingValue()
+}
+
+// 清空快捷键
+function clearShortcut(): void {
+    // 清空只影响录制结果，不强制切换录制状态
+    keysTemp.value = []
+    emit('update:modelValue', [])
+    emit('change', [])
+    emit('clear')
+    inputRef.value?.focus()
+}
+</script>
+
+<style lang="less">
+.el-input.xo-shortcut-keys-record {
+    .clear-icon {
+        user-select : none;
+        cursor      : pointer;
+        color       : var(--el-text-color-placeholder);
+
+        &:hover {
+            color : var(--el-text-color-secondary);
+        }
+    }
+}
+</style>

package/dist/renderer/components/side-bar/types/sidebar-logo.d.ts

@@ -0,0 +1,39 @@
+// 侧边栏 Logo 组件属性
+export interface XoPropsSidebarLogo {
+    // logo 图片地址
+    logo: string
+    // 路由地址
+    route?: string | XoWindow.RouteLocation
+    // 标题
+    title?: string
+    // 是否为迷你模式
+    mini?: boolean
+    // 图片和标题间距
+    gap?: number | string
+    // 高度
+    height?: number | string
+    // 左侧间距
+    paddingLeft?: number | string
+    // 右侧间距
+    paddingRight?: number | string
+    // 图片宽度
+    imageWidth?: number | string
+    // 图片高度
+    imageHeight?: number | string
+    // 标题字体大小
+    titleFontSize?: number | string
+    // 标题字体粗细
+    titleFontWeight?: string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 侧边栏 Logo
+        interface SidebarLogo extends XoPropsSidebarLogo {
+        }
+    }
+}

package/dist/renderer/components/side-bar/xo-sidebar-logo.vue

@@ -0,0 +1,133 @@
+<!-- 侧边栏 Logo 组件 -->
+<template>
+    <div class="xo-sidebar-logo"
+         v-if="props.logo || title"
+         :class="{mini : props.mini}"
+         :style="style"
+         :title="`${title} v${appStore.info?.version}`"
+         @click="onLogoClick"
+    >
+        <img
+            class="image"
+            width="32"
+            height="32"
+            v-if="props.logo"
+            :src="props.logo"
+            :alt="title"
+        />
+        <div class="title" v-if="title">{{ title }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsSidebarLogo}  from './types/sidebar-logo'
+import {useXoAppStore}            from '../../store/index.js'
+import {RendererUtil, RouterUtil} from '../../utils/index.js'
+import {computed}                 from 'vue'
+
+defineOptions({
+    name: 'XoSidebarLogo',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSidebarLogo>(), {
+    mini: false,
+})
+
+// 应用信息
+const appStore = useXoAppStore()
+
+// 标题
+const title = computed(() => props.title ?? appStore.info?.name)
+
+// 样式
+const style = computed(() => {
+    return {
+        '--xo-sidebar-logo-js-gap'              : RendererUtil.toCssSize(props.gap),
+        '--xo-sidebar-logo-js-height'           : RendererUtil.toCssSize(props.height),
+        '--xo-sidebar-logo-js-padding-left'     : RendererUtil.toCssSize(props.paddingLeft),
+        '--xo-sidebar-logo-js-padding-right'    : RendererUtil.toCssSize(props.paddingRight),
+        '--xo-sidebar-logo-js-image-width'      : RendererUtil.toCssSize(props.imageWidth),
+        '--xo-sidebar-logo-js-image-height'     : RendererUtil.toCssSize(props.imageHeight),
+        '--xo-sidebar-logo-js-title-font-size'  : RendererUtil.toCssSize(props.titleFontSize),
+        '--xo-sidebar-logo-js-title-font-weight': props.titleFontWeight,
+    }
+})
+
+// 点击 Logo 事件
+function onLogoClick() {
+    if (props.route === undefined) {
+        return
+    }
+
+    if (typeof props.route === 'string') {
+        void RouterUtil.push(props.route)
+        return
+    }
+
+    void RouterUtil.getRouter().push(props.route)
+}
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+.xo-sidebar-logo {
+    --xo-sidebar-logo-gap                              : var(--xo-sidebar-logo-js-gap, 3px);
+    --xo-sidebar-logo-padding-left                     : var(--xo-sidebar-logo-js-padding-left, 0);
+    --xo-sidebar-logo-padding-right                    : var(--xo-sidebar-logo-js-padding-right, 0);
+    --xo-sidebar-logo-image-width                      : var(--xo-sidebar-logo-js-image-width, 32px);
+    --xo-sidebar-logo-image-height                     : var(--xo-sidebar-logo-js-image-height, 32px);
+    --xo-sidebar-logo-title-font-size                  : var(--xo-sidebar-logo-js-title-font-size, 14px);
+    --xo-sidebar-logo-title-font-weight                : var(--xo-sidebar-logo-js-title-font-weight, bold);
+    --xo-sidebar-logo-title-top                        : 2px;
+    --xo-sidebar-logo-height                           : calc(var(--xo-sidebar-logo-image-height) + 30px);
+    --xo-sidebar-logo-title-transition-property        : width;
+    --xo-sidebar-logo-title-transition-duration        : var(--xo-transition-duration, 0.3s);
+    --xo-sidebar-logo-title-transition-timing-function : var(--xo-transition-timing-function, ease);
+    --xo-sidebar-logo-title-transition-delay           : var(--xo-transition-delay, 0s);
+    --xo-sidebar-logo-title-transition                 : var(--xo-sidebar-logo-title-transition-property) var(--xo-sidebar-logo-title-transition-duration) var(--xo-sidebar-logo-title-transition-timing-function) var(--xo-sidebar-logo-title-transition-delay);
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-sidebar-logo {
+    .flex-center();
+    .flex-fixed();
+    .no-user-select();
+    height  : var(--xo-sidebar-logo-height);
+    gap     : var(--xo-sidebar-logo-gap);
+    padding : var(--xo-sidebar-logo-padding-top) var(--xo-sidebar-logo-padding-right) var(--xo-sidebar-logo-padding-buttom) var(--xo-sidebar-logo-padding-left);
+    cursor  : pointer;
+
+    > .image {
+        width  : var(--xo-sidebar-logo-image-width);
+        height : var(--xo-sidebar-logo-image-height);
+    }
+
+    > .title {
+        top              : var(--xo-sidebar-logo-title-top);
+        font-size        : var(--xo-sidebar-logo-title-font-size);
+        font-weight      : var(--xo-sidebar-logo-title-font-weight);
+        // 允许 width: auto 参与过渡（收起/展开都能插值）
+        interpolate-size : allow-keywords;
+        // 展开态：visibility 立即显示，宽度 0 -> auto
+        transition       : var(--xo-sidebar-logo-title-transition), visibility 0s ease 0s;
+        position         : relative;
+        white-space      : nowrap;
+        overflow         : hidden;
+    }
+
+    // 收起态
+    &.mini {
+        > .title {
+            // 收起态：宽度 auto -> 0，过渡结束后再隐藏
+            transition : var(--xo-sidebar-logo-title-transition), visibility 0s ease var(--xo-sidebar-logo-title-transition-duration);
+            width      : 0;
+            visibility : hidden;
+        }
+    }
+}
+</style>

package/dist/renderer/components/spacing-line/types/spacing-line.d.ts

@@ -0,0 +1,17 @@
+// 行组件属性
+export interface XoPropsSpacingLine {
+    // 高度
+    height?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 行
+        interface SpacingLine extends XoPropsSpacingLine {
+        }
+    }
+}

package/dist/renderer/components/spacing-line/xo-spacing-line.vue

@@ -0,0 +1,53 @@
+<!-- 空白行组件 -->
+<template>
+    <div class="xo-spacing-line" v-if="isValidHeight" :style="styles" />
+</template>
+
+<script setup lang="ts">
+import type {XoPropsSpacingLine} from './types/spacing-line'
+import {RendererUtil}            from '../../utils/index.js'
+import {computed}                from 'vue'
+
+defineOptions({
+    name: 'XoSpacingLine',
+})
+
+// 属性
+const props = withDefaults(defineProps<XoPropsSpacingLine>(), {
+    height: 10,
+})
+
+// 动态样式
+const styles = computed(() => {
+    return {
+        '--xo-spacing-line-height': RendererUtil.toCssSize(props.height),
+    }
+})
+
+// 是否有效高度
+const isValidHeight = computed(() => {
+    if (props.height === undefined) {
+        return false
+    }
+    if (typeof props.height === 'number' && props.height <= 0) {
+        return false
+    }
+    return !(typeof props.height === 'string' && (props.height.startsWith('0') || props.height.startsWith('-')))
+})
+</script>
+
+<style scoped lang="less">
+.xo-spacing-line {
+    --xo-spacing-line-height : 10px;
+}
+</style>
+
+<style lang="less">
+.xo-spacing-line {
+    height      : var(--xo-spacing-line-height);
+    line-height : var(--xo-spacing-line-height);
+    width       : 100%;
+    font-size   : 0;
+    overflow    : hidden;
+}
+</style>

package/dist/renderer/components/theme-switch/types/theme-switch-mini.d.ts

@@ -0,0 +1,21 @@
+// 小型主题切换组件属性
+export interface XoPropsThemeSwitchMini {
+    // 浅色提示
+    lightToolTip?: string
+    // 深色提示
+    darkToolTip?: string
+    // 大小
+    size?: XoRenderer.EPSize
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 小型主题切换
+        interface ThemeSwitchMini extends XoPropsThemeSwitchMini {
+        }
+    }
+}

package/dist/renderer/components/theme-switch/types/theme-switch.d.ts

@@ -0,0 +1,45 @@
+import type {Component} from 'vue'
+
+// 主题选项
+export type XoComponentThemeSwitchItemOption = {
+    // 标签
+    label: string
+    // 主题
+    value: XoTheme.Source
+    // 图标
+    icon: Component
+}
+
+// 主题切换组件属性
+export interface XoPropsThemeSwitch {
+    // 是否显示跟随系统
+    showSystem?: boolean
+    // 是否显示标签
+    showLabel?: boolean
+    // 主题文案
+    labels?: Partial<Record<XoTheme.Source, string>>
+    // 大小
+    size?: XoRenderer.EPSize
+    // 宽度
+    width?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件
+    namespace XoComponent {
+
+        // 主题选项
+        interface ThemeSwitchItemOption extends XoComponentThemeSwitchItemOption {
+        }
+    }
+
+    // 组件属性
+    namespace XoProps {
+
+        // 主题切换
+        interface ThemeSwitch extends XoPropsThemeSwitch {
+        }
+    }
+}

package/dist/renderer/components/theme-switch/xo-theme-switch-mini.vue

@@ -0,0 +1,93 @@
+<!-- 小型主题选择组件 -->
+<template>
+    <el-tooltip transition="none" effect="light" :hide-after="0" :enterable="false" placement="bottom">
+        <template #content>
+            {{ isDark ? props.lightToolTip : props.darkToolTip }}
+        </template>
+        <el-switch
+            class="xo-theme-switch-mini"
+            v-model="isDark"
+            :size="size"
+            :active-action-icon="Moon"
+            :inactive-action-icon="Sunny"
+        />
+    </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import {Moon, Sunny}                 from '@element-plus/icons-vue'
+import type {XoPropsThemeSwitchMini} from './types/theme-switch-mini'
+import {useXoThemeStore}             from '../../store/index.js'
+import {computed, onMounted}         from 'vue'
+
+defineOptions({
+    name: 'XoThemeSwitchMini',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsThemeSwitchMini>(), {
+    lightToolTip: '切换至浅色主题',
+    darkToolTip : '切换至深色主题',
+    size        : 'default',
+})
+
+// 主题 Store
+const themeStore = useXoThemeStore()
+
+// 是否深色模式
+const isDark = computed<boolean>({
+    get() {
+        return themeStore.themeSource === 'system'
+            ? themeStore.shouldUseDarkColors
+            : themeStore.themeSource === 'dark'
+    },
+    set(value) {
+        void themeStore.setSource(value ? 'dark' : 'light')
+    },
+})
+
+onMounted(async () => {
+    await themeStore.initialize()
+})
+</script>
+
+<!-- 变量 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-theme-switch-mini {
+    .color-opacity(--internal-theme-switch-mini-border-color, var(--xo-theme-switch-mini-icon-color), 35);
+    --xo-theme-switch-mini-icon-color       : var(--xo-title-bar-dynamic-color, var(--xo-text-color-primary));
+    --xo-theme-switch-mini-border-color     : var(--internal-theme-switch-mini-border-color);
+    --xo-theme-switch-mini-background-color : transparent;
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+.el-switch.xo-theme-switch-mini {
+    -webkit-app-region : no-drag;
+    user-select        : none;
+
+    // 浅色
+    > .el-switch__core {
+        --el-switch-border-color : var(--xo-theme-switch-mini-border-color);
+        --el-switch-off-color    : var(--xo-theme-switch-mini-background-color);
+
+        > .el-switch__action {
+            --el-color-white      : none;
+            --el-switch-off-color : var(--xo-theme-switch-mini-icon-color);
+        }
+    }
+
+    // 深色
+    &.is-checked > .el-switch__core {
+        --el-switch-border-color : var(--xo-theme-switch-mini-border-color);
+        --el-switch-on-color     : var(--xo-theme-switch-mini-background-color);
+
+        > .el-switch__action {
+            --el-switch-on-color : var(--xo-theme-switch-mini-icon-color);
+        }
+    }
+}
+</style>