@e-xi/xion 0.0.6

package/dist/renderer/components/pages/types/app-page.d.ts

@@ -0,0 +1,25 @@
+import type {XoComponentSidebarMenus, XoPropsAppLayout, XoPropsSidebarLogo} from '../../index.js'
+
+// 应用主窗口 组件属性
+export interface XoPropsAppPage {
+    // 应用布局属性
+    layoutProps?: XoPropsAppLayout
+    // 侧边栏logo属性
+    logoProps?: XoPropsSidebarLogo
+    // 是否显示侧标栏更新器组件
+    showSidebarUpdater?: boolean
+    // 菜单
+    menus?: XoComponentSidebarMenus
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 应用主窗口
+        interface AppPage extends XoPropsAppPage {
+        }
+    }
+}

package/dist/renderer/components/pages/types/bootstrap-page.d.ts

@@ -0,0 +1,35 @@
+import type {AuthRouteUtil} from '../../../utils/index.js'
+
+// 启动判定页 组件属性
+export interface XoPropsBootstrapPage {
+    // logo 图片地址
+    logo: string
+    // 认证路由工具
+    authRouteUtil: AuthRouteUtil
+    // 标题栏属性
+    titleBarProps?: Partial<XoProps.TitleBar>
+    // 默认错误信息
+    defaultError?: string
+    // 重试按钮文本
+    buttonRetryText?: string
+    // 重试中按钮文本
+    buttonRetryingText?: string
+    // 按钮类型
+    buttonType?: XoRenderer.EPButtonType
+    // 按钮是否为朴素按钮
+    buttonPlain?: boolean
+    // 按钮是否为圆角按钮
+    buttonRound?: boolean
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 启动判定页
+        interface BootstrapPage extends XoPropsBootstrapPage {
+        }
+    }
+}

package/dist/renderer/components/pages/types/dynamic-page.d.ts

@@ -0,0 +1,20 @@
+import type {Component} from 'vue'
+
+// 动态页面组件属性
+export interface XoPropsDynamicPage {
+    // 页面配置 { 页面 ID: 页面组件 }
+    // 页面 ID 取 /?page={ID}
+    pages?: Record<string, Component>
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 动态页面
+        interface DynamicPage extends XoPropsDynamicPage {
+        }
+    }
+}

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

@@ -0,0 +1,23 @@
+import type {XoComponentSidebarMenus} from '../../types/sidebar-menu'
+
+// 设置页面 组件属性
+export interface XoPropsSettingsPage {
+    // 标题
+    title?: string
+    // 图标
+    icon?: string
+    // 菜单
+    menus?: XoComponentSidebarMenus
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置页面
+        interface SettingsPage extends XoPropsSettingsPage {
+        }
+    }
+}

package/dist/renderer/components/pages/xo-app-page.vue

@@ -0,0 +1,230 @@
+<!-- 应用主窗口页面组件 -->
+<template>
+    <xo-app-layout
+        class="xo-app-page"
+        v-bind="props.layoutProps"
+        v-model:sidebar-folded="sidebarFolded"
+        v-model:title-bar-loaded="titleBarLoaded"
+        v-model:always-on-top="alwaysOnTop"
+    >
+        <!-- 标题栏 -->
+        <template #title-bar-default>
+            <slot name="title-bar-default" />
+        </template>
+
+        <!-- 标题栏扩展 -->
+        <template #title-bar-extend>
+            <slot name="title-bar-extend" />
+        </template>
+
+        <!-- 侧边栏 -->
+        <template #sidebar>
+
+            <!-- logo -->
+            <xo-sidebar-logo
+                v-bind="props.logoProps"
+                v-if="props?.logoProps?.logo"
+                :logo="props.logoProps.logo"
+                :mini="sidebarFolded"
+            />
+
+            <!-- 菜单 -->
+            <ul class="menus">
+                <template v-for="menu in props.menus" :key="menu.route">
+                    <el-tooltip
+                        :disabled="!sidebarFolded"
+                        :enterable="false"
+                        transition="none"
+                        effect="light"
+                        placement="right"
+                        :hide-after="0"
+                        :content="menu.text">
+                        <li>
+                            <div class="item"
+                                 :class="{active: RouterUtil.isRouteActive(menu.route, menu.activeRoutes)}"
+                                 @click="RouterUtil.push(menu.route)">
+                                <i class="icon xion-font" :class="menu.icon" />
+                                <span>{{ menu.text }}</span>
+                            </div>
+                        </li>
+                    </el-tooltip>
+                </template>
+            </ul>
+
+            <!-- 用户信息 -->
+            <div class="user-bar">
+                <slot name="user-bar" />
+            </div>
+
+            <!-- 版本更新 -->
+            <div class="updater" v-if="props.showSidebarUpdater">
+                <xo-updater :type="sidebarFolded ? 'bean' : 'card'" />
+            </div>
+        </template>
+
+        <!-- 工作区 -->
+        <template #body>
+            <router-view />
+        </template>
+    </xo-app-layout>
+</template>
+
+<script setup lang="ts">
+import {XoAppLayout, XoSidebarLogo, XoUpdater} from '../index.js'
+import type {XoPropsAppPage}                   from './types/app-page'
+import {RouterUtil}                            from '../../utils/index.js'
+
+defineOptions({
+    name: 'XoAppPage',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsAppPage>(), {
+    menus             : () => [],
+    showSidebarUpdater: true,
+})
+
+// 标题栏是否加载完成
+const titleBarLoaded = defineModel<boolean>('titleBarLoaded', {default: false})
+
+// 侧边栏是否折叠
+const sidebarFolded = defineModel<boolean>('sidebarFolded', {default: false})
+
+// 是否始终在最上层
+const alwaysOnTop = defineModel<boolean>('alwaysOnTop', {default: false})
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+.xo-app-page {
+    --xo-app-page-menus-padding                        : 0 10px 0 10px;
+    --xo-app-page-menu-item-height                     : 40px;
+    --xo-app-page-menu-item-padding-left               : 20px;
+    --xo-app-page-menu-item-padding-right              : 20px;
+    --xo-app-page-menu-item-folded-padding-left        : 10px;
+    --xo-app-page-menu-item-folded-padding-right       : 10px;
+    --xo-app-page-menu-item-transition-property        : var(--xo-transition-property, all);
+    --xo-app-page-menu-item-transition-duration        : var(--xo-transition-duration, 0.3s);
+    --xo-app-page-menu-item-transition-timing-function : var(--xo-transition-timing-function, ease);
+    --xo-app-page-menu-item-transition-delay           : var(--xo-transition-delay, 0s);
+    --xo-app-page-menu-item-transition                 : var(--xo-app-page-menu-item-transition-property) var(--xo-app-page-menu-item-transition-duration) var(--xo-app-page-menu-item-transition-timing-function) var(--xo-app-page-menu-item-transition-delay);
+    --xo-app-page-menu-item-icon-size                  : 20px;
+    --xo-app-page-menu-item-radius                     : 5px;
+    --xo-app-page-menu-item-gap-x                      : 10px;
+    --xo-app-page-menu-item-gap-y                      : 5px;
+    --xo-app-page-menu-item-font-size                  : 19px;
+    --xo-app-page-menu-item-active-color               : var(--el-color-white);
+    --xo-app-page-menu-item-active-bg-color            : var(--xo-color-primary);
+    --xo-app-page-menu-item-text-font-weight           : normal;
+    --xo-app-page-updater-padding-left                 : 5px;
+    --xo-app-page-updater-padding-right                : 5px;
+    --xo-app-page-updater-padding-bottom               : 5px;
+    --xo-app-page-updater-folded-padding-bottom        : 15px;
+    --xo-app-page-user-bar-height                      : 50px;
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-app-page {
+    // 侧边栏
+    .xo-app-layout-sidebar {
+        // 菜单
+        .menus {
+            .no-user-select();
+            .flex-auto();
+            overflow : auto;
+            width    : 100%;
+            height   : 100%;
+            padding  : var(--xo-app-page-menus-padding);
+
+            > li {
+                cursor        : pointer;
+                margin-bottom : var(--xo-app-page-menu-item-gap-y);
+
+                &:last-child {
+                    margin-bottom : 0;
+                }
+
+                > .item {
+                    .flex-align-center();
+                    height        : var(--xo-app-page-menu-item-height);
+                    padding-left  : var(--xo-app-page-menu-item-padding-left);
+                    padding-right : var(--xo-app-page-menu-item-padding-right);
+                    transition    : var(--xo-app-page-menu-item-transition);
+                    border-radius : var(--xo-app-page-menu-item-radius);
+                    gap           : var(--xo-app-page-menu-item-gap-x);
+
+                    &:hover {
+                        .color-opacity(background, var(--xo-app-page-menu-item-active-bg-color), 20);
+                    }
+
+                    &.active, &.active:hover {
+                        color      : var(--xo-app-page-menu-item-active-color);
+                        background : var(--xo-app-page-menu-item-active-bg-color);
+                    }
+
+                    > .icon {
+                        .flex-center();
+                        .flex-fixed();
+                        width       : var(--xo-app-page-menu-item-icon-size);
+                        height      : var(--xo-app-page-menu-item-icon-size);
+                        font-size   : var(--xo-app-page-menu-item-font-size);
+                        font-weight : 100;
+                    }
+
+                    > span {
+                        .flex-auto();
+                        .text-ellipsis();
+                        font-weight : var(--xo-app-page-menu-item-text-font-weight);
+                    }
+                }
+            }
+        }
+
+        // 用户信息
+        .user-bar {
+            .flex-center();
+            .flex-fixed();
+            height     : var(--xo-app-page-user-bar-height);
+            border-top : 1px solid var(--xo-app-layout-body-border-color);
+            width      : 100%;
+        }
+
+        // 版本更新器
+        .updater {
+            .flex-center();
+            padding-left   : var(--xo-app-page-updater-padding-left);
+            padding-right  : var(--xo-app-page-updater-padding-right);
+            padding-bottom : var(--xo-app-page-updater-padding-bottom);
+            bottom         : var(--xo-app-page-user-bar-height);
+            width          : 100%;
+            position       : absolute;
+            left           : 0;
+            right          : 0;
+        }
+
+        // 折叠状态
+        &.folded {
+            .updater {
+                padding-bottom : var(--xo-app-page-updater-folded-padding-bottom);
+            }
+
+            .menus {
+                > li {
+                    > .item {
+                        padding-left  : var(--xo-app-page-menu-item-folded-padding-left);
+                        padding-right : var(--xo-app-page-menu-item-folded-padding-right);
+
+                        > span {
+                            text-overflow : clip;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

package/dist/renderer/components/pages/xo-bootstrap-page.vue

@@ -0,0 +1,93 @@
+<!-- 启动判定页 -->
+<template>
+    <xo-simple-layout :title-bar-props="props.titleBarProps">
+        <div class="xo-bootstrap-page">
+            <img class="logo" :class="{'has-error': isError}" :src="props.logo" alt="Logo" />
+            <div class="error" v-if="isError">
+                <p>{{ error || props.defaultError }}</p>
+                <el-button
+                    class="button"
+                    :type="props.buttonType"
+                    :plain="props.buttonPlain"
+                    :round="props.buttonRound"
+                    :loading="retrying"
+                    :disabled="retrying"
+                    @click="retryInitialize"
+                >
+                    {{ retrying ? props.buttonRetryingText : props.buttonRetryText }}
+                </el-button>
+            </div>
+        </div>
+    </xo-simple-layout>
+</template>
+
+<script setup lang="ts">
+import XoSimpleLayout              from '../layouts/xo-simple-layout.vue'
+import type {XoPropsBootstrapPage} from './types/bootstrap-page'
+
+defineOptions({
+    name: 'XoBootstrapPage',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsBootstrapPage>(), {
+    defaultError      : '认证状态初始化失败',
+    buttonRetryText   : '重试',
+    buttonRetryingText: '重试中...',
+    buttonType        : 'primary',
+    buttonPlain       : true,
+    buttonRound       : true,
+})
+
+// 监听启动认证状态并跳转到登录页或业务页
+const {isError, error, retrying, retryInitialize} = props.authRouteUtil.bootstrapAuthStateRedirect()
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+.xo-bootstrap-page {
+    --xo-bootstrap-page-gap                : 20px;
+    --xo-bootstrap-page-bg-color           : var(--xo-layout-body-bg-color);
+    --xo-bootstrap-page-logo-width         : 96px;
+    --xo-bootstrap-page-logo-height        : auto;
+    --xo-bootstrap-page-logo-opacity       : 0.2;
+    --xo-bootstrap-page-error-gap          : 10px;
+    --xo-bootstrap-page-error-button-width : 100px;
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-bootstrap-page {
+    .flex-center();
+    height         : 100vh;
+    min-height     : 100vh;
+    width          : 100vw;
+    flex-direction : column;
+    gap            : var(--xo-bootstrap-page-gap);
+    background     : var(--xo-bootstrap-page-bg-color);
+
+    > .logo {
+        width      : var(--xo-bootstrap-page-logo-width);
+        height     : var(--xo-bootstrap-page-logo-height);
+        opacity    : var(--xo-bootstrap-page-logo-opacity);
+        object-fit : contain;
+        
+        &.has-error {
+            opacity : 1;
+        }
+    }
+
+    > .error {
+        .flex-align-center();
+        flex-direction : column;
+        gap            : var(--xo-bootstrap-page-error-gap);
+
+        > .button {
+            width : var(--xo-bootstrap-page-error-button-width);
+        }
+    }
+}
+</style>

package/dist/renderer/components/pages/xo-dynamic-page.vue

@@ -0,0 +1,28 @@
+<!-- 动态页面组件 -->
+<template>
+    <component :is="currentComponent" />
+</template>
+
+<script setup lang="ts">
+import XoAppLayout               from '../layouts/xo-app-layout.vue'
+import type {XoPropsDynamicPage} from './types/dynamic-page'
+import {computed}                from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoDynamicPage',
+})
+
+// 属性
+const props = withDefaults(defineProps<XoPropsDynamicPage>(), {
+    pages: () => ({}),
+})
+
+// 利用 ?page=*** 匹配组件
+const params           = new URLSearchParams(window.location.search)
+const page             = params.get('page') ?? ''
+const currentComponent = computed(() => props.pages[page] ?? props.pages.default ?? XoAppLayout)
+</script>
+
+<style lang="less">
+</style>

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

@@ -0,0 +1,143 @@
+<!-- 设置页面组件 -->
+<template>
+    <xo-mini-layout class="xo-settings-page" :title="title" :icon="props.icon">
+        <!-- 标题栏 -->
+        <template #title-bar-default>
+            <slot name="title-bar-default" />
+        </template>
+
+        <!-- 标题栏扩展 -->
+        <template #title-bar-extend>
+            <slot name="title-bar-extend" />
+        </template>
+
+        <!-- 侧边栏 -->
+        <template #sidebar>
+            <ul class="menus">
+                <li v-for="menu in props.menus" :key="menu.route" :title="menu.text">
+                    <div class="item"
+                         :class="{active: RouterUtil.isRouteActive(menu.route, menu.activeRoutes)}"
+                         @click="RouterUtil.push(menu.route)">
+                        <i class="icon xion-font" :class="menu.icon" />
+                        <span>{{ menu.text }}</span>
+                    </div>
+                </li>
+            </ul>
+        </template>
+
+        <!-- 工作区 -->
+        <template #body>
+            <router-view />
+        </template>
+    </xo-mini-layout>
+</template>
+
+<script setup lang="ts">
+import XoMiniLayout               from '../layouts/xo-mini-layout.vue'
+import type {XoPropsSettingsPage} from './types/settings-page'
+import {useXoAppStore}            from '../../store/index.js'
+import {RouterUtil}               from '../../utils/index.js'
+import {computed}                 from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoSettingsPage',
+})
+
+const appStore = useXoAppStore()
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingsPage>(), {
+    title: undefined,
+    icon : 'xion-icon-setting1',
+    menus: () => [],
+})
+
+// 标题
+const title = computed(() => {
+    return props.title ?? (appStore.info.name ? `${appStore.info.name} 设置` : '设置')
+})
+</script>
+
+<!-- 其他组件样式覆盖 -->
+<style lang="less">
+// 修改顶部标题样式
+.xo-mini-layout.xo-settings-page .window-title {
+    --xo-mini-layout-title-padding-top  : 15px;
+    --xo-mini-layout-title-padding-left : 7px;
+}
+
+// 修改滚动条样式
+.xo-mini-layout.xo-settings-page .menus {
+    --xo-scrollbar-track-vertical-margin-top    : var(--xo-mini-layout-body-left-top-radius);
+    --xo-scrollbar-track-vertical-margin-bottom : var(--xo-mini-layout-body-left-top-radius);
+}
+</style>
+
+<!-- 组件样式 变量 -->
+<style lang="less">
+.xo-settings-page {
+    --xo-settings-page-menus-margin-top                     : 15px;
+    --xo-settings-page-menu-item-height                     : 45px;
+    --xo-settings-page-menu-item-padding-left               : 12px;
+    --xo-settings-page-menu-item-padding-right              : 12px;
+    --xo-settings-page-menu-item-transition-property        : var(--xo-transition-property, all);
+    --xo-settings-page-menu-item-transition-duration        : var(--xo-transition-duration, 0.3s);
+    --xo-settings-page-menu-item-transition-timing-function : var(--xo-transition-timing-function, ease);
+    --xo-settings-page-menu-item-transition-delay           : var(--xo-transition-delay, 0s);
+    --xo-settings-page-menu-item-transition                 : var(--xo-settings-page-menu-item-transition-property) var(--xo-settings-page-menu-item-transition-duration) var(--xo-settings-page-menu-item-transition-timing-function) var(--xo-settings-page-menu-item-transition-delay);
+    --xo-settings-page-menu-item-icon-size                  : 20px;
+    --xo-settings-page-menu-item-gap                        : 6px;
+    --xo-settings-page-menu-item-font-size                  : 18px;
+    --xo-settings-page-menu-item-active-color               : var(--el-color-white);
+    --xo-settings-page-menu-item-active-bg-color            : var(--xo-color-primary);
+}
+</style>
+
+<!-- 组件样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-settings-page > .xo-mini-layout-page > .xo-mini-layout-sidebar > .menus {
+    .no-user-select();
+    width      : 100%;
+    height     : 100%;
+    margin-top : var(--xo-settings-page-menus-margin-top);
+    overflow-y : auto;
+
+    > li {
+        cursor : pointer;
+
+        > .item {
+            .flex-align-center();
+            height        : var(--xo-settings-page-menu-item-height);
+            padding-left  : var(--xo-settings-page-menu-item-padding-left);
+            padding-right : var(--xo-settings-page-menu-item-padding-right);
+            transition    : var(--xo-settings-page-menu-item-transition);
+
+            &:hover {
+                .color-opacity(background, var(--xo-settings-page-menu-item-active-bg-color), 20);
+            }
+
+            &.active, &.active:hover {
+                background : var(--xo-settings-page-menu-item-active-bg-color);
+                color      : var(--xo-settings-page-menu-item-active-color);
+            }
+
+            > .icon {
+                .flex-center();
+                .flex-fixed();
+                width        : var(--xo-settings-page-menu-item-icon-size);
+                height       : var(--xo-settings-page-menu-item-icon-size);
+                margin-right : var(--xo-settings-page-menu-item-gap);
+                font-size    : var(--xo-settings-page-menu-item-font-size);
+            }
+
+            > span {
+                .flex-auto();
+                .text-ellipsis();
+            }
+        }
+    }
+}
+</style>

package/dist/renderer/components/radio-group/types/radio-group.d.ts

@@ -0,0 +1,30 @@
+// 单选分组 组件属性
+export interface XoPropsRadioGroup {
+    // 选项列表
+    options: XoRenderer.RadioOptions
+    // 大小
+    size?: XoRenderer.EPSize
+}
+
+// 全局类型
+declare global {
+
+    // 组件
+    namespace XoComponent {
+
+        // 单选分组值类型
+        type RadioGroupValue = XoRenderer.RadioValue
+
+        // 单选分组选项
+        interface RadioGroupOption extends XoRenderer.RadioOptions {
+        }
+    }
+
+    // 组件属性
+    namespace XoProps {
+
+        // 单选分组
+        interface RadioGroup extends XoPropsRadioGroup {
+        }
+    }
+}

package/dist/renderer/components/radio-group/xo-radio-group.vue

@@ -0,0 +1,38 @@
+<!-- 单选分组组件 -->
+<template>
+    <el-radio-group :size="size" class="xo-radio-group" v-model="value" v-bind="$attrs">
+        <el-radio v-for="radio in props.options" :key="radio.label" :value="radio.value">
+            {{ radio.label }}
+        </el-radio>
+    </el-radio-group>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsRadioGroup} from './types/radio-group'
+
+// 组件名
+defineOptions({
+    name: 'XoRadioGroup',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsRadioGroup>(), {
+    options: () => [],
+    size   : 'default',
+})
+
+// 绑定值
+const value = defineModel<XoRenderer.RadioValue>()
+</script>
+
+<style lang="less">
+.el-radio-group.xo-radio-group {
+    .el-radio {
+        margin-right : 20px;
+
+        &:last-child {
+            margin-right : 0;
+        }
+    }
+}
+</style>