@e-xi/xion 0.0.6

package/dist/renderer/components/layouts/types/app-layout.d.ts

@@ -0,0 +1,29 @@
+import type {XoPropsTitleBar} from '../../title-bar/types/title-bar'
+
+// 默认 APP 主窗口布局 组件属性
+export interface XoPropsAppLayout {
+    // 标题栏属性
+    titleBarProps?: Partial<XoPropsTitleBar>
+    // 是否显示侧边栏切换按钮（分割线上）
+    showSidebarSwitch?: boolean
+    // 侧边栏切换热区大小（侧边栏和工作区分割线两侧的距离）
+    sidebarSwitchHotZoneSize?: number
+    // 是否显示图标
+    showIcon?: boolean
+    // 标题栏图标
+    icon?: string
+    // 标题栏标题
+    title?: string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 默认 APP 主窗口布局
+        interface AppLayout extends XoPropsAppLayout {
+        }
+    }
+}

package/dist/renderer/components/layouts/types/mini-layout.d.ts

@@ -0,0 +1,23 @@
+import type {XoPropsTitleBar} from '../../title-bar/types/title-bar'
+
+// 小型窗口布局 组件属性
+export interface XoPropsMiniLayout {
+    // 标题栏属性
+    titleBarProps?: Pick<XoPropsTitleBar, 'setBackground'>
+    // 标题栏图标
+    icon?: string
+    // 标题栏标题
+    title?: string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 小型窗口布局
+        interface MiniLayout extends XoPropsMiniLayout {
+        }
+    }
+}

package/dist/renderer/components/layouts/types/simple-layout.d.ts

@@ -0,0 +1,17 @@
+// 简单布局 组件属性
+export interface XoPropsSimplePage {
+    // 标题栏属性
+    titleBarProps?: Partial<XoProps.TitleBar>
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 简单布局
+        interface SimplePage extends XoPropsSimplePage {
+        }
+    }
+}

package/dist/renderer/components/layouts/xo-app-layout.vue

@@ -0,0 +1,350 @@
+<!-- 默认 APP 主窗口布局组件 -->
+<template>
+    <div
+        class="xo-app-layout"
+        ref="layoutRef"
+        @mousemove="onMouseMove"
+        @mouseleave="enteredSidebarSwitchArea = false"
+    >
+        <!-- 标题栏 -->
+        <xo-title-bar
+            v-model:loaded="titleBarLoaded"
+            v-model:is-sidebar-folded="isSidebarFolded"
+            v-model:is-always-on-top="isAlwaysOnTop"
+            v-bind="props.titleBarProps"
+            :class="{'hide-sidebar-switch' : props.titleBarProps?.showSidebarSwitch === false}"
+        >
+            <template #default>
+                <slot name="title-bar-default">
+                    <!-- 窗口标题 -->
+                    <div class="window-title">
+                        <!-- 图标 -->
+                        <template v-if="props.showIcon">
+                            <!-- 图像 -->
+                            <img class="icon-image" v-if="isImageIcon" :src="props.icon" :alt="topTitle" />
+
+                            <!-- Xion 字体图标 -->
+                            <div class="icon-xion" v-else-if="isXionIcon">
+                                <i class="xion-font" :class="props.icon" />
+                            </div>
+
+                            <!-- Html -->
+                            <div class="icon-html" v-else-if="isHtmlIcon" v-html="props.icon" />
+                        </template>
+
+                        <!-- 标题 -->
+                        <div class="title" v-if="topTitle">{{ topTitle }}</div>
+                    </div>
+                </slot>
+            </template>
+
+            <template #extend>
+                <slot name="title-bar-extend" />
+            </template>
+        </xo-title-bar>
+
+        <!-- 页面主体 -->
+        <div class="xo-app-layout-page" v-if="titleBarLoaded">
+
+            <!-- 左侧侧边栏 -->
+            <div class="xo-app-layout-sidebar" ref="sidebarRef" :class="{ folded : isSidebarFolded }">
+                <slot name="sidebar">
+                    侧边栏
+                </slot>
+
+                <!-- 收起侧边栏按钮 -->
+                <div
+                    class="sidebar-switch-fold"
+                    @click.stop="toggleSidebarFold"
+                    v-if="props.showSidebarSwitch"
+                    v-show="enteredSidebarSwitchArea && !isSidebarFolded"
+                >
+                    <el-icon>
+                        <ArrowLeft />
+                    </el-icon>
+                </div>
+            </div>
+
+            <!-- 右侧工作区域 -->
+            <div class="xo-app-layout-body">
+                <slot name="body">
+                    工作区
+                </slot>
+
+                <!-- 展开侧边栏按钮 -->
+                <div
+                    class="sidebar-switch-unfold"
+                    @click.stop="toggleSidebarFold"
+                    v-if="props.showSidebarSwitch"
+                    v-show="enteredSidebarSwitchArea && isSidebarFolded"
+                >
+                    <el-icon>
+                        <ArrowRight />
+                    </el-icon>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {ArrowLeft, ArrowRight}           from '@element-plus/icons-vue'
+import type {XoPropsAppLayout}           from './types/app-layout'
+import XoTitleBar                        from '../title-bar/xo-title-bar.vue'
+import {useXoAppStore, useXoWindowStore} from '../../store/index.js'
+import {RegexpUtil}                      from '../../../shared/utils/index.js'
+import {computed, ref}                   from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoAppLayout',
+})
+
+// 属性
+const props = withDefaults(defineProps<XoPropsAppLayout>(), {
+    titleBarProps           : () => ({}),
+    showSidebarSwitch       : true,
+    sidebarSwitchHotZoneSize: 15,
+    showIcon                : false,
+    icon                    : 'xion-icon-message1',
+    title                   : undefined,
+})
+
+// APP 存储
+const appStore = useXoAppStore()
+
+// 窗口存储
+const windowStore = useXoWindowStore()
+
+// 标题
+const topTitle = computed(() => props?.title ?? appStore.info?.name)
+
+// 标题栏是否加载完成
+const titleBarLoaded = defineModel<boolean>('titleBarLoaded', {default: false})
+
+// 侧边栏是否折叠
+const isSidebarFolded = defineModel<boolean>('sidebarFolded', {default: false})
+
+// 是否始终在最上层
+const isAlwaysOnTop = defineModel<boolean>('alwaysOnTop', {default: false})
+
+// 侧边栏折叠切换
+const toggleSidebarFold = () => {
+    void windowStore.toggleSidebarFold()
+    // 立即隐藏切换按钮
+    enteredSidebarSwitchArea.value = false
+}
+
+// 图标是否是图像
+const isImageIcon = computed<boolean>(() => RegexpUtil.isImage(props.icon))
+
+// 图标是否为 xion-icon-* 图标
+const isXionIcon = computed<boolean>(() => props.icon?.startsWith('xion-icon-') === true)
+
+// 图标是否应该渲染为HTML
+const isHtmlIcon = computed<boolean>(() => !!props.icon && !isImageIcon.value)
+
+// 布局元素
+const layoutRef = ref<HTMLElement | null>(null)
+
+// 侧边栏元素
+const sidebarRef = ref<HTMLElement | null>(null)
+
+// 是否进入侧边栏切换热区
+const enteredSidebarSwitchArea = ref<boolean>(false)
+
+// 鼠标移动事件
+function onMouseMove(event: MouseEvent): void {
+    if (!props.showSidebarSwitch) return
+
+    const sidebar = sidebarRef.value
+    if (!sidebar) return
+
+    const rect                     = sidebar.getBoundingClientRect()
+    const distance                 = Math.abs(event.clientX - rect.right)
+    enteredSidebarSwitchArea.value = distance <= props.sidebarSwitchHotZoneSize
+}
+</script>
+
+<!-- 变量 -->
+<style lang="less">
+.xo-app-layout {
+    --xo-app-layout-font-size                                  : inherit;
+    --xo-app-layout-z-index                                    : 1;
+    --xo-app-layout-title-bar-hide-sidebar-switch-padding-left : 10px;
+    --xo-app-layout-title-font-size                            : 12px;
+    --xo-app-layout-title-icon-margin-right                    : 5px;
+    --xo-app-layout-title-icon-size                            : 16px;
+    --xo-app-layout-title-icon-image-radius                    : 3px;
+    --xo-app-layout-title-icon-image-object-fit                : cover;
+    --xo-app-layout-sidebar-width                              : 166px;
+    --xo-app-layout-sidebar-folded-width                       : 60px;
+    --xo-app-layout-sidebar-transition-duration                : var(--xo-transition-duration, 0.3s);
+    --xo-app-layout-sidebar-transition-timing-function         : var(--xo-transition-timing-function, ease);
+    --xo-app-layout-sidebar-transition-delay                   : var(--xo-transition-delay, 0s);
+    --xo-app-layout-sidebar-transition                         : width var(--xo-app-layout-sidebar-transition-duration) var(--xo-app-layout-sidebar-transition-timing-function) var(--xo-app-layout-sidebar-transition-delay);
+    --xo-app-layout-sidebar-overflow-x                         : hidden;
+    --xo-app-layout-sidebar-overflow-y                         : hidden;
+
+    --xo-app-layout-body-left-top-radius                       : var(--xo-layout-body-left-top-radius, 15px);
+    --xo-app-layout-body-radius                                : var(--xo-app-layout-body-left-top-radius) 0 0 0;
+    --xo-app-layout-body-background                            : var(--xo-layout-body-bg-color, #fff);
+    --xo-app-layout-body-border-width                          : var(--xo-layout-body-border-width, 1px);
+    --xo-app-layout-body-border-color                          : var(--xo-layout-body-border-color, #e6e6e6);
+    --xo-app-layout-body-border                                : var(--xo-app-layout-body-border-width) solid var(--xo-app-layout-body-border-color);
+    --xo-app-layout-body-overflow-x                            : hidden;
+    --xo-app-layout-body-overflow-y                            : hidden;
+
+    --xo-app-layout-sidebar-switch-button-z-index              : 900;
+    --xo-app-layout-sidebar-switch-button-width                : 12px;
+    --xo-app-layout-sidebar-switch-button-height               : 30px;
+    --xo-app-layout-sidebar-switch-button-cursor               : pointer;
+    --xo-app-layout-sidebar-switch-button-font-size            : 12px;
+    --xo-app-layout-sidebar-switch-button-top                  : 50%;
+    --xo-app-layout-sidebar-switch-button-transform            : translateY(-50%);
+
+    --xo-app-layout-sidebar-switch-button-color                : #000;
+    --xo-app-layout-sidebar-switch-button-hover-background     : #ddd;
+    --xo-app-layout-sidebar-switch-button-background           : var(--xo-app-layout-body-border-color);
+
+    --xo-app-layout-sidebar-switch-button-fold-right           : 0;
+    --xo-app-layout-sidebar-switch-button-fold-radius          : 3px 0 0 3px;
+
+    --xo-app-layout-sidebar-switch-button-unfold-left          : 0;
+    --xo-app-layout-sidebar-switch-button-unfold-radius        : 0 3px 3px 0;
+}
+
+html.dark {
+    .xo-app-layout {
+        --xo-app-layout-body-background                        : var(--xo-layout-body-bg-color, #060606);
+        --xo-app-layout-body-border-color                      : var(--xo-layout-body-border-color, #363636);
+
+        --xo-app-layout-sidebar-switch-button-color            : #fff;
+        --xo-app-layout-sidebar-switch-button-hover-background : #666;
+    }
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+.xo-app-layout {
+    font-size : var(--xo-app-layout-font-size);
+    height    : 100vh;
+    width     : 100vw;
+
+    > .xo-title-bar.hide-sidebar-switch {
+        --xo-title-bar-padding-left : var(--xo-app-layout-title-bar-hide-sidebar-switch-padding-left);
+    }
+
+    .window-title {
+        height      : var(--xo-global-title-bar-height);
+        display     : flex;
+        align-items : center;
+
+        > .icon-image, > .icon-html, > .icon-xion {
+            width           : var(--xo-app-layout-title-icon-size);
+            height          : var(--xo-app-layout-title-icon-size);
+            margin-right    : var(--xo-app-layout-title-icon-margin-right);
+            overflow        : hidden;
+            display         : flex;
+            align-items     : center;
+            justify-content : center;
+        }
+
+        > .icon-image {
+            border-radius : var(--xo-app-layout-title-icon-image-radius);
+            object-fit    : var(--xo-app-layout-title-icon-image-object-fit);
+        }
+
+        > .title {
+            height      : var(--xo-global-title-bar-height);
+            font-size   : var(--xo-app-layout-title-font-size);
+            display     : flex;
+            align-items : center;
+        }
+    }
+
+    > .xo-app-layout-page {
+        z-index         : var(--xo-app-layout-z-index);
+        position        : fixed;
+        top             : 0;
+        left            : 0;
+        display         : flex;
+        align-items     : center;
+        justify-content : center;
+        width           : 100vw;
+        height          : 100vh;
+
+        .sidebar-switch-button() {
+            z-index         : var(--xo-app-layout-sidebar-switch-button-z-index);
+            width           : var(--xo-app-layout-sidebar-switch-button-width);
+            height          : var(--xo-app-layout-sidebar-switch-button-height);
+            cursor          : var(--xo-app-layout-sidebar-switch-button-cursor);
+            font-size       : var(--xo-app-layout-sidebar-switch-button-font-size);
+            top             : var(--xo-app-layout-sidebar-switch-button-top);
+            transform       : var(--xo-app-layout-sidebar-switch-button-transform);
+            color           : var(--xo-app-layout-sidebar-switch-button-color);
+            background      : var(--xo-app-layout-sidebar-switch-button-background);
+            position        : absolute;
+            user-select     : none;
+            display         : flex;
+            align-items     : center;
+            justify-content : center;
+
+            &:hover {
+                background : var(--xo-app-layout-sidebar-switch-button-hover-background);
+            }
+        }
+
+        > .xo-app-layout-sidebar {
+            width           : var(--xo-app-layout-sidebar-width);
+            transition      : var(--xo-app-layout-sidebar-transition);
+            overflow-x      : var(--xo-app-layout-sidebar-overflow-x);
+            overflow-y      : var(--xo-app-layout-sidebar-overflow-y);
+            margin-top      : var(--xo-global-title-bar-height);
+            height          : calc(100vh - var(--xo-global-title-bar-height));
+            display         : flex;
+            align-items     : center;
+            justify-content : flex-start;
+            flex-direction  : column;
+            position        : relative;
+            flex-grow       : 0;
+            flex-shrink     : 0;
+
+            &.folded {
+                width : var(--xo-app-layout-sidebar-folded-width);
+            }
+
+            > .sidebar-switch-fold {
+                .sidebar-switch-button();
+                right         : var(--xo-app-layout-sidebar-switch-button-fold-right);
+                border-radius : var(--xo-app-layout-sidebar-switch-button-fold-radius);
+                padding-left  : 1px;
+            }
+        }
+
+        > .xo-app-layout-body {
+            --xo-scoped-bg-color : var(--xo-app-layout-body-background);
+
+            border-radius        : var(--xo-app-layout-body-radius);
+            border-top           : var(--xo-app-layout-body-border);
+            border-left          : var(--xo-app-layout-body-border);
+            background           : var(--xo-app-layout-body-background);
+            overflow-x           : var(--xo-app-layout-body-overflow-x);
+            overflow-y           : var(--xo-app-layout-body-overflow-y);
+            margin-top           : var(--xo-global-title-bar-height);
+            height               : calc(100vh - var(--xo-global-title-bar-height));
+            flex-grow            : 1;
+            flex-shrink          : 1;
+            position             : relative;
+
+            > .sidebar-switch-unfold {
+                .sidebar-switch-button();
+                left          : var(--xo-app-layout-sidebar-switch-button-unfold-left);
+                border-radius : var(--xo-app-layout-sidebar-switch-button-unfold-radius);
+                padding-right : 1px;
+            }
+        }
+    }
+}
+</style>

package/dist/renderer/components/layouts/xo-mini-layout.vue

@@ -0,0 +1,207 @@
+<!-- 小型窗口布局组件 -->
+<template>
+    <div class="xo-mini-layout">
+        <xo-title-bar
+            v-model:loaded="titleBarLoaded"
+            v-bind="titleBarProps"
+            :showSetting="false"
+            :show-theme-switch="false"
+            :show-on-top="true"
+            :show-sidebar-switch="false"
+            :show-service-status-bar="false"
+            :show-updater="false"
+        >
+            <template #default>
+                <slot name="title-bar-default">
+                    <!-- 窗口标题 -->
+                    <div class="window-title">
+                        <!-- 图像 -->
+                        <img class="icon-image" v-if="isImageIcon" :src="icon" :alt="title" />
+
+                        <!-- Xion 字体图标 -->
+                        <div class="icon-xion" v-else-if="isXionIcon">
+                            <i class="xion-font" :class="icon" />
+                        </div>
+
+                        <!-- Html -->
+                        <div class="icon-html" v-else-if="isHtmlIcon" v-html="icon" />
+
+                        <!-- 标题 -->
+                        <div class="title">{{ title }}</div>
+                    </div>
+                </slot>
+            </template>
+
+            <template #extend>
+                <slot name="title-bar-extend" />
+            </template>
+        </xo-title-bar>
+
+        <!-- 页面主体 -->
+        <div class="xo-mini-layout-page">
+
+            <!-- 左侧侧边栏 -->
+            <div class="xo-mini-layout-sidebar">
+                <slot name="sidebar">
+                    侧边栏
+                </slot>
+            </div>
+
+            <!-- 右侧工作区域 -->
+            <div class="xo-mini-layout-body">
+                <slot name="body">
+                    工作区
+                </slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsMiniLayout} from './types/mini-layout'
+import XoTitleBar               from '../title-bar/xo-title-bar.vue'
+import {RegexpUtil}             from '../../../shared/utils/index.js'
+import {computed}               from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoMiniLayout',
+})
+
+// 属性
+const props = withDefaults(defineProps<XoPropsMiniLayout>(), {
+    titleBarProps: () => ({}),
+    icon         : 'xion-icon-message1',
+    title        : '标题栏',
+})
+
+// 标题栏是否加载完成
+const titleBarLoaded = defineModel<boolean>('titleBarLoaded', {default: false})
+
+// 图标是否是图像
+const isImageIcon = computed<boolean>(() => RegexpUtil.isImage(props.icon))
+
+// 图标是否为 xion-icon-* 图标
+const isXionIcon = computed<boolean>(() => props.icon?.startsWith('xion-icon-') === true)
+
+// 图标是否应该渲染为HTML
+const isHtmlIcon = computed<boolean>(() => !!props.icon && !isImageIcon.value)
+</script>
+
+<!-- 变量 -->
+<style lang="less">
+.xo-mini-layout {
+    --xo-mini-layout-title-bar-padding-left      : 8px;
+    --xo-mini-layout-font-size                   : inherit;
+    --xo-mini-layout-z-index                     : 1;
+    --xo-mini-layout-title-padding-top           : 0;
+    --xo-mini-layout-title-padding-left          : 0;
+    --xo-mini-layout-title-icon-size             : 16px;
+    --xo-mini-layout-title-icon-margin-right     : 5px;
+    --xo-mini-layout-title-icon-image-radius     : 3px;
+    --xo-mini-layout-title-icon-image-object-fit : cover;
+    --xo-mini-layout-title-font-size             : 12px;
+    --xo-mini-layout-sidebar-width               : 150px;
+    --xo-mini-layout-sidebar-overflow-x          : hidden;
+    --xo-mini-layout-sidebar-overflow-y          : hidden;
+
+    --xo-mini-layout-body-left-top-radius        : var(--xo-layout-body-left-top-radius, 15px);
+    --xo-mini-layout-body-radius                 : var(--xo-mini-layout-body-left-top-radius) 0 0 0;
+    --xo-mini-layout-body-background             : var(--xo-layout-body-bg-color, #fff);
+    --xo-mini-layout-body-border-width           : 1px;
+    --xo-mini-layout-body-border-color           : var(--xo-layout-body-border-color, #e6e6e6);
+    --xo-mini-layout-body-border                 : var(--xo-mini-layout-body-border-width) solid var(--xo-mini-layout-body-border-color);
+    --xo-mini-layout-body-overflow-x             : hidden;
+    --xo-mini-layout-body-overflow-y             : hidden;
+}
+
+html.dark {
+    .xo-mini-layout {
+        --xo-mini-layout-body-background   : var(--xo-layout-body-bg-color, #060606);
+        --xo-mini-layout-body-border-color : var(--xo-layout-body-border-color, #363636);
+    }
+}
+</style>
+
+<style lang="less">
+.xo-mini-layout {
+    font-size : var(--xo-mini-layout-font-size);
+    height    : 100vh;
+    width     : 100vw;
+
+    > .xo-title-bar {
+        --xo-title-bar-padding-left : var(--xo-mini-layout-title-bar-padding-left);
+    }
+
+    .window-title {
+        height       : var(--xo-global-title-bar-height);
+        padding-top  : var(--xo-mini-layout-title-padding-top);
+        padding-left : var(--xo-mini-layout-title-padding-left);
+        display      : flex;
+        align-items  : center;
+
+        > .icon-image, > .icon-html, > .icon-xion {
+            width           : var(--xo-mini-layout-title-icon-size);
+            height          : var(--xo-mini-layout-title-icon-size);
+            margin-right    : var(--xo-mini-layout-title-icon-margin-right);
+            overflow        : hidden;
+            display         : flex;
+            align-items     : center;
+            justify-content : center;
+        }
+
+        > .icon-image {
+            border-radius : var(--xo-mini-layout-title-icon-image-radius);
+            object-fit    : var(--xo-mini-layout-title-icon-image-object-fit);
+        }
+
+        > .title {
+            height      : var(--xo-global-title-bar-height);
+            font-size   : var(--xo-mini-layout-title-font-size);
+            display     : flex;
+            align-items : center;
+        }
+    }
+
+    > .xo-mini-layout-page {
+        z-index         : var(--xo-mini-layout-z-index);
+        position        : fixed;
+        top             : 0;
+        left            : 0;
+        display         : flex;
+        align-items     : center;
+        justify-content : center;
+        width           : 100vw;
+        height          : 100vh;
+
+        > .xo-mini-layout-sidebar {
+            width           : var(--xo-mini-layout-sidebar-width);
+            overflow-x      : var(--xo-mini-layout-sidebar-overflow-x);
+            overflow-y      : var(--xo-mini-layout-sidebar-overflow-y);
+            margin-top      : var(--xo-global-title-bar-height);
+            height          : calc(100vh - var(--xo-global-title-bar-height));
+            display         : flex;
+            align-items     : center;
+            justify-content : center;
+            flex-direction  : column;
+            flex-grow       : 0;
+            flex-shrink     : 0;
+        }
+
+        > .xo-mini-layout-body {
+            --xo-scoped-bg-color : var(--xo-mini-layout-body-background);
+
+            margin-top           : var(--xo-global-title-bar-height);
+            border-top           : var(--xo-mini-layout-body-border);
+            border-left          : var(--xo-mini-layout-body-border);
+            background           : var(--xo-mini-layout-body-background);
+            overflow-x           : var(--xo-mini-layout-body-overflow-x);
+            overflow-y           : var(--xo-mini-layout-body-overflow-y);
+            border-radius        : var(--xo-mini-layout-body-radius);
+            height               : calc(100vh - var(--xo-global-title-bar-height));
+            flex-grow            : 1;
+            flex-shrink          : 1;
+        }
+    }
+}
+</style>

package/dist/renderer/components/layouts/xo-simple-layout.vue

@@ -0,0 +1,43 @@
+<!-- 简单布局 -->
+<template>
+    <div class="xo-simple-layout">
+
+        <!-- 顶部标题栏 -->
+        <xo-title-bar v-bind="props.titleBarProps" />
+
+        <!-- 内容插槽 -->
+        <slot name="default" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsSimplePage} from './types/simple-layout'
+import XoTitleBar               from '../title-bar/xo-title-bar.vue'
+
+defineOptions({
+    name: 'XoSimpleLayout',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSimplePage>(), {
+    titleBarProps: () => ({
+        showOnTop           : true,
+        showThemeSwitch     : true,
+        showSetting         : true,
+        showUpdater         : true,
+        showServiceStatusBar: true,
+        showExtend          : false,
+        showSidebarSwitch   : false,
+    }),
+})
+</script>
+
+<style lang="less">
+.xo-simple-layout {
+    display         : flex;
+    align-items     : center;
+    justify-content : center;
+    height          : 100vh;
+    width           : 100vw;
+}
+</style>