@e-xi/xion 0.0.6

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

@@ -0,0 +1,200 @@
+<!-- 主题选择组件 -->
+<template>
+    <el-segmented
+        v-model="selectedThemeSource"
+        class="xo-theme-switch"
+        :style="style"
+        :size="size"
+        :options="options"
+    >
+        <template #default="{item}">
+            <div class="item" :title="(item as XoComponentThemeSwitchItemOption).label">
+                <el-icon class="icon">
+                    <component :is="(item as XoComponentThemeSwitchItemOption).icon" />
+                </el-icon>
+                <span v-if="props.showLabel" class="label">{{ (item as XoComponentThemeSwitchItemOption).label }}</span>
+            </div>
+        </template>
+    </el-segmented>
+</template>
+
+<script setup lang="ts">
+import {Monitor, Moon, Sunny}                                      from '@element-plus/icons-vue'
+import type {XoComponentThemeSwitchItemOption, XoPropsThemeSwitch} from './types/theme-switch'
+import {useXoThemeStore}                                           from '../../store/index.js'
+import {ContextUtil, RendererUtil}                                 from '../../utils/index.js'
+import {computed, inject, onMounted}                               from 'vue'
+
+defineOptions({
+    name: 'XoThemeSwitch',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsThemeSwitch>(), {
+    showSystem: true,
+    showLabel : true,
+    size      : 'default',
+})
+
+// 表单 flex 上下文
+const formFlexContext = inject(ContextUtil.FormFlexKey, undefined)
+
+// 默认主题文案
+const defaultLabels: Record<XoTheme.Source, string> = {
+    system: '系统',
+    light : '浅色',
+    dark  : '深色',
+}
+
+// 主题选项
+const themeOptions: XoComponentThemeSwitchItemOption[] = [
+    {
+        label: defaultLabels.system,
+        value: 'system',
+        icon : Monitor,
+    },
+    {
+        label: defaultLabels.light,
+        value: 'light',
+        icon : Sunny,
+    },
+    {
+        label: defaultLabels.dark,
+        value: 'dark',
+        icon : Moon,
+    },
+]
+
+// 显示的主题选项
+const options = computed<XoComponentThemeSwitchItemOption[]>(() => {
+    const items = props.showSystem
+        ? themeOptions
+        : themeOptions.filter(option => option.value !== 'system')
+
+    return items.map(option => ({
+        ...option,
+        label: props.labels?.[option.value] ?? defaultLabels[option.value],
+    }))
+})
+
+// 样式
+const style = computed(() => {
+    return {
+        'width': RendererUtil.toCssSize(props.width ?? formFlexContext?.inputWidth),
+    }
+})
+
+// 主题 Store
+const themeStore = useXoThemeStore()
+
+// 当前选中的主题来源
+const selectedThemeSource = computed<XoTheme.Source>({
+    get() {
+        if (!props.showSystem && themeStore.themeSource === 'system') {
+            return themeStore.shouldUseDarkColors ? 'dark' : 'light'
+        }
+        return themeStore.themeSource
+    },
+    set(value) {
+        void themeStore.setSource(value)
+    },
+})
+
+onMounted(async () => {
+    await themeStore.initialize()
+})
+</script>
+
+<!-- 变量 -->
+<style lang="less">
+.xo-theme-switch {
+    // default
+    --xo-theme-switch-radius                         : 100px;
+    --xo-theme-switch-padding                        : 2px;
+    --xo-theme-switch-border                         : 1px solid #E6E6E6;
+    --xo-theme-switch-item-padding                   : 0 5px;
+    --xo-theme-switch-item-gap                       : 5px;
+    --xo-theme-switch-font-size                      : 14px;
+    --xo-theme-switch-icon-size                      : 14px;
+    --xo-theme-switch-item-selected-box-shadow       : 0 2px 0 rgba(0, 0, 0, 0.05);
+
+    // large
+    --xo-theme-switch-large-padding                  : 3px;
+    --xo-theme-switch-large-font-size                : 14px;
+    --xo-theme-switch-large-icon-size                : 16px;
+    --xo-theme-switch-large-item-gap                 : 5px;
+    --xo-theme-switch-large-item-padding             : 0 8px;
+    --xo-theme-switch-large-item-selected-box-shadow : 0 2px 0 rgba(0, 0, 0, 0.05);
+
+    // small
+    --xo-theme-switch-small-padding                  : 1px;
+    --xo-theme-switch-small-font-size                : 12px;
+    --xo-theme-switch-small-icon-size                : 14px;
+    --xo-theme-switch-small-item-gap                 : 3px;
+    --xo-theme-switch-small-item-padding             : 0 2px;
+    --xo-theme-switch-small-item-selected-box-shadow : 0 1px 0 rgba(0, 0, 0, 0.05);
+
+    // large
+    &.el-segmented--large {
+        --xo-theme-switch-padding                  : var(--xo-theme-switch-large-padding);
+        --xo-theme-switch-font-size                : var(--xo-theme-switch-large-font-size);
+        --xo-theme-switch-icon-size                : var(--xo-theme-switch-large-icon-size);
+        --xo-theme-switch-item-gap                 : var(--xo-theme-switch-large-item-gap);
+        --xo-theme-switch-item-padding             : var(--xo-theme-switch-large-item-padding);
+        --xo-theme-switch-item-selected-box-shadow : var(--xo-theme-switch-large-item-selected-box-shadow);
+    }
+
+    // small
+    &.el-segmented--small {
+        --xo-theme-switch-padding                  : var(--xo-theme-switch-small-padding);
+        --xo-theme-switch-font-size                : var(--xo-theme-switch-small-font-size);
+        --xo-theme-switch-icon-size                : var(--xo-theme-switch-small-icon-size);
+        --xo-theme-switch-item-gap                 : var(--xo-theme-switch-small-item-gap);
+        --xo-theme-switch-item-padding             : var(--xo-theme-switch-small-item-padding);
+        --xo-theme-switch-item-selected-box-shadow : var(--xo-theme-switch-small-item-selected-box-shadow);
+    }
+}
+
+html.dark .xo-theme-switch {
+    --xo-theme-switch-border                         : 1px solid #363636;
+    --xo-theme-switch-item-selected-box-shadow       : 0 2px 0 rgba(0, 0, 0, 0);
+    --xo-theme-switch-large-item-selected-box-shadow : 0 2px 0 rgba(0, 0, 0, 0);
+    --xo-theme-switch-small-item-selected-box-shadow : 0 1px 0 rgba(0, 0, 0, 0);
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+.el-segmented.xo-theme-switch {
+
+    // 覆盖 element-plus 样式变量
+    --el-segmented-bg-color : var(--el-fill-color-blank);
+    --el-segmented-padding  : var(--xo-theme-switch-padding);
+    --el-border-radius-base : var(--xo-theme-switch-radius);
+
+    // 自定义样式
+    -webkit-app-region      : no-drag;
+    user-select             : none;
+    border                  : var(--xo-theme-switch-border);
+
+    > .el-segmented__group > .el-segmented__item.is-selected {
+        box-shadow : var(--xo-theme-switch-item-selected-box-shadow);
+    }
+
+    > .el-segmented__group > .el-segmented__item > .el-segmented__item-label > .item {
+        display         : flex;
+        align-items     : center;
+        justify-content : center;
+        color           : inherit;
+        line-height     : 1;
+        white-space     : nowrap;
+        padding         : var(--xo-theme-switch-item-padding);
+        gap             : var(--xo-theme-switch-item-gap);
+        font-size       : var(--xo-theme-switch-font-size);
+
+        > .icon {
+            font-size : var(--xo-theme-switch-icon-size);
+        }
+    }
+}
+</style>

package/dist/renderer/components/title-bar/types/title-bar.d.ts

@@ -0,0 +1,58 @@
+import type {XoPropsServiceStatusBar, XoPropsUpdater} from '../../index.js'
+import {type XoPropsThemeSwitchMini}                  from '../../theme-switch/types/theme-switch-mini'
+
+// 标题栏组件属性
+export interface XoPropsTitleBar {
+    // 是否设置背景
+    setBackground?: boolean
+    // 是否显示侧边栏切换按钮
+    showSidebarSwitch?: boolean
+    // 是否显示主题切换按钮
+    showThemeSwitch?: boolean
+    // 是否显示扩展区域
+    showExtend?: boolean
+    // 是否显示更新器按钮
+    showUpdater?: boolean
+    // 是否显示服务状态条
+    showServiceStatusBar?: boolean
+    // 是否显示置顶按钮
+    showOnTop?: boolean
+    // 是否显示设置按钮
+    showSetting?: boolean
+    // 主题切换按钮大小
+    themeSwitchSize?: XoProps.ThemeSwitchMini['size']
+    // 侧边栏折叠按钮提示
+    sidebarCollapseTooltip?: string
+    // 侧边栏展开按钮提示
+    sidebarExpandTooltip?: string
+    // 切换到深色主题按钮提示
+    switchToDarkTooltip?: string
+    // 切换到亮色主题按钮提示
+    switchToLightTooltip?: string
+    // 窗口置顶按钮提示
+    pinWindowTooltip?: string
+    // 取消窗口置顶按钮提示
+    unpinWindowTooltip?: string
+    // 设置按钮提示
+    settingsTooltip?: string
+    // 设置页面的默认打开路由
+    defaultRouteRequest?: XoWindow.RouteRedirectRequestWithoutWindow
+    // 主题切换组件属性
+    themeSwitchMiniProps?: Partial<XoPropsThemeSwitchMini>
+    // 更新器组件属性
+    updaterProps?: Omit<XoPropsUpdater, 'type'>
+    // 服务状态条组件属性
+    serviceStatusBarProps?: XoPropsServiceStatusBar
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 标题栏
+        interface TitleBar extends XoPropsTitleBar {
+        }
+    }
+}

package/dist/renderer/components/title-bar/xo-title-bar.vue

@@ -0,0 +1,364 @@
+<!-- 标题栏组件 -->
+<template>
+    <!-- 标题栏 -->
+    <div class="xo-title-bar" :style="titleBarStyle" v-if="loaded">
+
+        <!-- 侧边栏切换按钮 -->
+        <div
+            class="sidebar-switch"
+            v-if="showSidebarSwitch"
+            :class="{active : isSidebarFolded}"
+            @click="toggleSidebarFold"
+        >
+            <i v-if="isSidebarFolded" class="icon xion-font xion-icon-unfold" :title="sidebarExpandTooltip" />
+            <i v-else class="icon xion-font xion-icon-fold" :title="sidebarCollapseTooltip" />
+        </div>
+
+        <!-- 默认插槽 -->
+        <div class="slot-default">
+            <slot name="default" />
+        </div>
+
+        <!-- 扩展插槽 -->
+        <div class="slot-extend" v-if="props.showExtend">
+            <slot name="extend" />
+        </div>
+
+        <!-- 服务状态条 -->
+        <div class="service-status-bar" v-if="props.showServiceStatusBar">
+            <xo-service-status-bar v-bind="props.serviceStatusBarProps" />
+        </div>
+
+        <!-- 主题切换按钮 -->
+        <div class="button theme-switch" v-if="showThemeSwitch">
+            <xo-theme-switch-mini
+                :dark-tool-tip="switchToDarkTooltip"
+                :light-tool-tip="switchToLightTooltip"
+                v-bind="props.themeSwitchMiniProps"
+                :size="themeSwitchSize"
+            />
+        </div>
+
+        <!-- 检查更新 -->
+        <div class="button updater" v-if="props.showUpdater" :class="{'updater-effective': updaterVisible}">
+            <xo-updater
+                type="bean"
+                v-show="updaterVisible"
+                @visible-change="updaterVisible = $event"
+                v-bind="props.updaterProps"
+            />
+        </div>
+
+        <!-- 固定按钮 -->
+        <el-tooltip
+            v-if="showOnTop"
+            :enterable="false"
+            transition="none"
+            effect="light"
+            :hide-after="0"
+            placement="bottom"
+        >
+            <template #content>
+                {{ isAlwaysOnTop ? unpinWindowTooltip : pinWindowTooltip }}
+            </template>
+            <div
+                class="button pin"
+                @click="toggleAlwaysOnTop"
+                :class="{active : isAlwaysOnTop}"
+            >
+                <i v-if="isAlwaysOnTop" class="icon xion-font xion-icon-pin-fill" />
+                <i v-else class="icon xion-font xion-icon-pin1" />
+            </div>
+        </el-tooltip>
+
+        <!-- 设置按钮 -->
+        <el-tooltip
+            v-if="showSetting"
+            :enterable="false"
+            transition="none"
+            effect="light"
+            :hide-after="0"
+            placement="bottom"
+        >
+            <template #content>
+                {{ settingsTooltip }}
+            </template>
+            <div
+                class="button setting"
+                @click="showSettingWindow"
+            >
+                <i class="icon xion-font xion-icon-setting1" />
+            </div>
+        </el-tooltip>
+
+        <!-- 窗口控制按钮 -->
+        <xo-window-control :window-state="windowStore.state" v-if="!themeStore?.titleBarOverlayEnabled" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {XoServiceStatusBar}                from '../index.js'
+import XoThemeSwitchMini                   from '../theme-switch/xo-theme-switch-mini.vue'
+import type {XoPropsTitleBar}              from './types/title-bar'
+import XoUpdater                           from '../updater/xo-updater.vue'
+import XoWindowControl                     from '../window-control/xo-window-control.vue'
+import {useXoThemeStore, useXoWindowStore} from '../../store/index.js'
+import {computed, onMounted, ref, watch}   from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoTitleBar',
+})
+
+// 定义事件
+const emit = defineEmits<{
+    // 侧边栏切换
+    sidebarFoldChange: [value: boolean]
+}>()
+
+// 主题存储
+const themeStore = useXoThemeStore()
+
+// 窗口存储
+const windowStore = useXoWindowStore()
+
+// <editor-fold desc="Model">
+// IPC 是否加载完成
+const loaded = defineModel<boolean>('loaded', {default: false})
+
+// 侧边栏是否折叠
+const isSidebarFolded = defineModel<boolean>('isSidebarFolded', {default: false})
+
+// 窗口是否置顶
+const isAlwaysOnTop = defineModel<boolean>('isAlwaysOnTop', {default: false})
+// </editor-fold>
+
+// <editor-fold desc="组件属性">
+const props = withDefaults(defineProps<XoPropsTitleBar>(), {
+    setBackground         : false,
+    showSidebarSwitch     : true,
+    showThemeSwitch       : true,
+    showUpdater           : true,
+    showExtend            : true,
+    showServiceStatusBar  : true,
+    showOnTop             : true,
+    showSetting           : true,
+    themeSwitchSize       : 'small',
+    sidebarCollapseTooltip: '收起侧边栏',
+    sidebarExpandTooltip  : '展开侧边栏',
+    switchToDarkTooltip   : undefined, // undefined 使用组件默认 tooltip
+    switchToLightTooltip  : undefined, // undefined 使用组件默认 tooltip
+    pinWindowTooltip      : '启用窗口置顶',
+    unpinWindowTooltip    : '取消窗口置顶',
+    settingsTooltip       : '设置',
+    themeSwitchMiniProps  : () => ({}),
+    updaterProps          : () => ({}),
+    serviceStatusBarProps : () => ({}),
+})
+// </editor-fold>
+
+// <editor-fold desc="根据主题计算标题栏样式">
+const titleBarStyle = computed(() => {
+    // 自定义按钮（不需要边距）
+    let paddingRight: number | string | undefined = 0
+
+    // 原生按钮（动态计算边距）
+    if (themeStore?.titleBarOverlayEnabled) {
+        let length = 1
+        if (windowStore.state.isMinimizable) ++length
+        if (windowStore.state.isMaximizable) ++length
+        paddingRight = length === 3 ? undefined : `calc(var(--xo-title-bar-button-width) * ${length})`
+    }
+
+    return {
+        background                            : props.setBackground ? themeStore?.titleBarOverlay?.color : undefined,
+        '--xo-title-bar-dynamic-color'        : themeStore?.titleBarOverlay?.symbolColor,
+        '--xo-title-bar-dynamic-padding-right': paddingRight,
+    }
+})
+// </editor-fold>
+
+// <editor-fold desc="按钮点击事件">
+
+// 侧边栏折叠切换
+const toggleSidebarFold = () => void windowStore.toggleSidebarFold()
+// 窗口置顶
+const toggleAlwaysOnTop = () => void windowStore.toggleAlwaysOnTop()
+// 显示设置窗口
+const showSettingWindow = () => void window.xion.app.showSettingWindow(props.defaultRouteRequest)
+// </editor-fold>
+
+// <editor-fold desc="窗口状态获取/监听">
+
+// 初始化窗口状态
+onMounted(async () => {
+    await windowStore.initialize()
+})
+
+// 同步窗口状态
+function syncWindowState(): void {
+    loaded.value = windowStore.loaded
+    if (!windowStore.loaded) return
+
+    isSidebarFolded.value = windowStore.state.isSidebarFolded
+    isAlwaysOnTop.value   = windowStore.state.isAlwaysOnTop
+    emit('sidebarFoldChange', windowStore.state.isSidebarFolded)
+}
+
+// 监听窗口状态变化
+watch(() => [
+    windowStore.loaded,
+    windowStore.state.isSidebarFolded,
+    windowStore.state.isAlwaysOnTop,
+], syncWindowState, {immediate: true})
+
+// </editor-fold>
+
+// 更新器显示状态
+const updaterVisible = ref(false)
+</script>
+
+<!-- 变量 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-title-bar {
+    --xo-scoped-bg-color                            : var(--xo-global-title-bar-background);
+
+    --xo-title-bar-position                         : fixed;
+    --xo-title-bar-z-index                          : 900;
+    --xo-title-bar-top                              : 0;
+    --xo-title-bar-left                             : 0;
+    --xo-title-bar-width                            : 100%;
+    --xo-title-bar-color                            : var(--xo-title-bar-dynamic-color, #666);
+    --xo-title-bar-height                           : var(--xo-global-title-bar-height, 36px);
+    --xo-title-bar-display                          : flex;
+    --xo-title-bar-button-width                     : 46px;
+    --xo-title-bar-padding-right                    : var(--xo-title-bar-dynamic-padding-right, calc(var(--xo-title-bar-button-width) * 3));
+    --xo-title-bar-user-select                      : none;
+    --xo-title-bar-align-items                      : center;
+    --xo-title-bar-justify-content                  : flex-start;
+    --xo-title-bar-padding-left                     : 5px;
+    --xo-title-bar-button-hover-color               : var(--xo-title-bar-color);
+    --xo-title-bar-button-hover-background          : rgba(0, 0, 0, 0.08);
+    --xo-title-bar-button-actived-color             : inherit;
+    --xo-title-bar-button-actived-background        : rgba(0, 0, 0, 0.08);
+    --xo-title-bar-button-redius                    : 5px;
+    --xo-title-bar-button-margin-right              : 5px;
+    --xo-title-bar-theme-switch-padding-left        : 7px;
+    --xo-title-bar-theme-switch-padding-right       : 7px;
+    --xo-title-bar-service-status-bar-padding-right : 7px;
+    --xo-title-bar-font-size                        : 14px;
+
+    .color-opacity(--internal-title-bar-button-color, var(--xo-title-bar-color), 66);
+    --xo-title-bar-button-color                     : var(--internal-title-bar-button-color);
+}
+
+html.dark .xo-title-bar {
+    --xo-title-bar-button-hover-background   : rgba(255, 255, 255, 0.09);
+    --xo-title-bar-button-actived-background : rgba(255, 255, 255, 0.09);
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-title-bar {
+    -webkit-app-region : drag;
+    position           : var(--xo-title-bar-position);
+    z-index            : var(--xo-title-bar-z-index);
+    top                : var(--xo-title-bar-top);
+    left               : var(--xo-title-bar-left);
+    width              : var(--xo-title-bar-width);
+    height             : var(--xo-title-bar-height);
+    display            : var(--xo-title-bar-display);
+    padding-right      : var(--xo-title-bar-padding-right);
+    user-select        : var(--xo-title-bar-user-select);
+    align-items        : var(--xo-title-bar-align-items);
+    justify-content    : var(--xo-title-bar-justify-content);
+    padding-left       : var(--xo-title-bar-padding-left);
+    color              : var(--xo-title-bar-color);
+    @botton-size       : calc(var(--xo-title-bar-height) - 10px);
+
+    > .sidebar-switch {
+        .no-drag();
+        .flex-fixed();
+        cursor : pointer;
+    }
+
+    > .slot-default {
+        .flex-auto();
+        .flex-align-center();
+        justify-content : flex-start;
+        height          : 100%;
+        font-size       : var(--xo-title-bar-font-size);
+    }
+
+    > .slot-extend {
+        .no-drag();
+        .flex-fixed();
+        .flex-align-center();
+        justify-content : flex-start;
+        height          : 100%;
+        font-size       : var(--xo-title-bar-font-size);
+    }
+
+    > .service-status-bar {
+        margin-right  : var(--xo-title-bar-button-margin-right);
+        padding-right : var(--xo-title-bar-service-status-bar-padding-right);
+    }
+
+    > .button {
+        .no-drag();
+        .flex-fixed();
+        margin-right : var(--xo-title-bar-button-margin-right);
+        cursor       : pointer;
+
+        &.theme-switch {
+            padding-left  : var(--xo-title-bar-theme-switch-padding-left);
+            padding-right : var(--xo-title-bar-theme-switch-padding-right);
+        }
+    }
+
+    > .sidebar-switch, > .button.pin, > .button.setting, > .button.updater {
+        .flex-center();
+        height        : @botton-size;
+        width         : @botton-size;
+        border-radius : var(--xo-title-bar-button-redius);
+
+        &:hover {
+            background : var(--xo-title-bar-button-hover-background);
+        }
+    }
+
+    > .button.updater {
+        cursor  : default;
+        display : none;
+
+        &.updater-effective {
+            display : flex;
+        }
+    }
+
+    > .button.pin, > .button.setting {
+        .icon {
+            color : var(--xo-title-bar-button-color);
+        }
+
+        &:hover {
+            .icon {
+                color : var(--xo-title-bar-button-hover-color);
+            }
+        }
+    }
+
+    > .button.pin.active {
+        background : var(--xo-title-bar-button-actived-background);
+
+        .icon {
+            color : var(--xo-title-bar-button-actived-color);
+        }
+    }
+}
+</style>

package/dist/renderer/components/types/sidebar-menu.d.ts

@@ -0,0 +1,37 @@
+import type {RouteRecordNameGeneric} from 'vue-router'
+
+// 路由名称
+export type XoComponentSidebarMenuRouteName = Exclude<RouteRecordNameGeneric, undefined>
+
+// 侧边栏菜单项
+export interface XoComponentSidebarMenuItem {
+    // 图标
+    icon?: string,
+    // 文本
+    text: string,
+    // 路由名称
+    route: XoComponentSidebarMenuRouteName,
+    // 用于判断是否激活的路由名称数组，如果为空就使用 route 比对
+    activeRoutes?: XoComponentSidebarMenuRouteName[],
+}
+
+// 侧边栏菜单
+export type XoComponentSidebarMenus = XoComponentSidebarMenuItem[]
+
+// 全局类型
+declare global {
+
+    // 组件
+    namespace XoComponent {
+
+        // 路由名称
+        type SidebarMenuRouteName = XoComponentSidebarMenuRouteName
+
+        // 侧边栏菜单项
+        interface SidebarMenuItem extends XoComponentSidebarMenuItem {
+        }
+
+        // 侧边栏菜单
+        type SidebarMenus = XoComponentSidebarMenus
+    }
+}

package/dist/renderer/components/types/vue.d.ts

@@ -0,0 +1,9 @@
+declare module '*.vue' {
+    import type {DefineComponent} from 'vue'
+
+    const component: DefineComponent
+    export default component
+}
+
+declare module '*.css'
+declare module '*.less'