@e-xi/xion 0.0.6

package/dist/renderer/components/service-status-bar/types/service-status-bar.d.ts

@@ -0,0 +1,65 @@
+// 服务状态条 服务状态选项
+export interface XoComponentServiceStatusBarStatusOption {
+    // 服务名称
+    name: string
+    // 服务图标
+    icon: string
+    // 状态提示
+    tooltip: string
+    // 状态类型
+    type: XoRenderer.EPTextType
+    // 点击后跳转的路由
+    redirect?: XoWindow.RouteRedirectRequest
+}
+
+// 服务状态条 服务状态按钮选项
+export interface XoComponentServiceStatusBarStatusButtonOption {
+    // 服务名称
+    name?: string
+    // 服务图标
+    icon?: string
+    // 点击后跳转的路由
+    redirect?: XoWindow.RouteRedirectRequest
+}
+
+// 服务状态条 组件属性
+export interface XoPropsServiceStatusBar {
+    // 服务状态列表
+    statuses?: XoComponentServiceStatusBarStatusOption[]
+    // 是否显示左侧分割线
+    showLeftBivider?: boolean
+    // 是否显示右侧分割线
+    showRightBivider?: boolean
+    // 左侧分割线左边距
+    leftBividerLeftGap?: number | string
+    // 左侧分割线右边距
+    leftBividerRightGap?: number | string
+    // 右侧分割线左边距
+    rightBividerLeftGap?: number | string
+    // 右侧分割线右边距
+    rightBividerRightGap?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件
+    namespace XoComponent {
+
+        // 服务状态条 服务状态选项
+        interface ServiceStatusBarStatusOption extends XoComponentServiceStatusBarStatusOption {
+        }
+
+        // 服务状态条 服务状态按钮选项
+        interface ServiceStatusBarStatusButtonOption extends XoComponentServiceStatusBarStatusButtonOption {
+        }
+    }
+
+    // 组件属性
+    namespace XoProps {
+
+        // 服务状态条
+        interface ServiceStatusBar extends XoPropsServiceStatusBar {
+        }
+    }
+}

package/dist/renderer/components/service-status-bar/xo-service-status-bar.vue

@@ -0,0 +1,193 @@
+<!-- 服务状态条 组件 -->
+<template>
+    <div class="xo-service-status-bar">
+
+        <!-- 左侧分割线 -->
+        <xo-divider
+            v-if="props.showLeftBivider && props.statuses.length > 0"
+            direction="vertical"
+            :vertical-left-gap="props.leftBividerLeftGap"
+            :vertical-right-gap="props.leftBividerRightGap"
+        />
+
+        <!-- 服务状态条 -->
+        <div class="bean" v-for="(status, index) in props.statuses" :key="index" @click="onClick(status.redirect)">
+            <el-tooltip transition="none" effect="light" :hide-after="0" :enterable="false" placement="bottom">
+                <template #content>
+                    <div class="xo-service-status-bar-tooltip">
+                        <div class="name">{{ status.name }}</div>
+                        <el-text class="status" :type="status.type">{{ status.tooltip }}</el-text>
+                    </div>
+                </template>
+                <div class="button">
+                    <i class="icon xion-font" :class="status.icon" />
+                    <div class="badge" :class="status.type" />
+                </div>
+            </el-tooltip>
+        </div>
+
+        <!-- 右侧分割线 -->
+        <xo-divider
+            v-if="props.showRightBivider && props.statuses.length > 0"
+            direction="vertical"
+            :vertical-left-gap="props.rightBividerLeftGap"
+            :vertical-right-gap="props.rightBividerRightGap"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsServiceStatusBar} from '../index.js'
+import XoDivider                      from '../divider/xo-divider.vue'
+import {RendererUtil}                 from '../../utils/index.js'
+
+defineOptions({
+    name: 'XoServiceStatusBar',
+})
+
+// 属性默认值
+const props = withDefaults(defineProps<XoPropsServiceStatusBar>(), {
+    showLeftBivider     : false,
+    showRightBivider    : true,
+    leftBividerLeftGap  : 6,
+    leftBividerRightGap : 6,
+    rightBividerLeftGap : 6,
+    rightBividerRightGap: 0,
+    statuses            : () => [],
+})
+
+/**
+ * 点击事件
+ * @param redirect 跳转请求
+ */
+async function onClick(redirect?: XoWindow.RouteRedirectRequest) {
+    if (!redirect) return
+    await window.xion.app.redirectWindowRoute(RendererUtil.toRaw(redirect))
+}
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+.xo-service-status-bar {
+    --xo-service-status-bar-gap                                         : 5px;
+    --xo-service-status-bar-bg-color                                    : var(--xo-scoped-bg-color);
+    --xo-service-status-bar-bean-radius                                 : 5px;
+    --xo-service-status-bar-bean-size                                   : calc(var(--xo-global-title-bar-height) - 10px);
+    --xo-service-status-bar-icon-color                                  : var(--el-text-color-primary);
+    --xo-service-status-bar-icon-color-transparent-mix-percentage       : 66%;
+    --xo-service-status-bar-icon-color-hover-transparent-mix-percentage : 100%;
+    --xo-service-status-bar-badge-size                                  : 12px;
+    --xo-service-status-bar-badge-top                                   : 3px;
+    --xo-service-status-bar-badge-right                                 : 3px;
+    --xo-service-status-bar-badge-border-width                          : 2px;
+    --xo-service-status-bar-badge-bg-color-primary                      : var(--el-color-primary);
+    --xo-service-status-bar-badge-bg-color-success                      : var(--el-color-success);
+    --xo-service-status-bar-badge-bg-color-warning                      : var(--el-color-warning);
+    --xo-service-status-bar-badge-bg-color-danger                       : var(--el-color-danger);
+    --xo-service-status-bar-badge-bg-color-info                         : var(--el-color-info);
+    --xo-service-status-bar-bean-hover-bg-color-mix-second-color        : #000000;
+    --xo-service-status-bar-bean-hover-bg-color-mix-percentage          : 92%;
+}
+
+html.dark .xo-service-status-bar {
+    --xo-service-status-bar-bean-hover-bg-color-mix-second-color : #ffffff;
+}
+
+/* 状态提示 */
+.xo-service-status-bar-tooltip {
+    --xo-service-status-bar-tooltip-text-align       : center;
+    --xo-service-status-bar-tooltip-name-font-weight : bold;
+    --xo-service-status-bar-tooltip-name-font-size   : 14px;
+    --xo-service-status-bar-tooltip-status-font-size : 12px;
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-service-status-bar {
+    .no-drag();
+    .flex-center();
+    justify-content : flex-end;
+    width           : 100%;
+    gap             : var(--xo-service-status-bar-gap);
+
+    > .bean {
+        .flex-center();
+        cursor        : pointer;
+        position      : relative;
+        border-radius : var(--xo-service-status-bar-bean-radius);
+
+        > .button {
+            > .icon {
+                .flex-center();
+                color  : color-mix(in srgb, var(--xo-service-status-bar-icon-color) var(--xo-service-status-bar-icon-color-transparent-mix-percentage), transparent);
+                height : var(--xo-service-status-bar-bean-size);
+                width  : var(--xo-service-status-bar-bean-size);
+            }
+
+            > .badge {
+                position      : absolute;
+                border-radius : 100px;
+                width         : var(--xo-service-status-bar-badge-size);
+                height        : var(--xo-service-status-bar-badge-size);
+                top           : var(--xo-service-status-bar-badge-top);
+                right         : var(--xo-service-status-bar-badge-right);
+                border        : var(--xo-service-status-bar-badge-border-width) solid var(--xo-service-status-bar-bg-color);
+
+                &.primary {
+                    background : var(--xo-service-status-bar-badge-bg-color-primary);
+                }
+
+                &.success {
+                    background : var(--xo-service-status-bar-badge-bg-color-success);
+                }
+
+                &.warning {
+                    background : var(--xo-service-status-bar-badge-bg-color-warning);
+                }
+
+                &.danger {
+                    background : var(--xo-service-status-bar-badge-bg-color-danger);
+                }
+
+                &.info {
+                    background : var(--xo-service-status-bar-badge-bg-color-info);
+                }
+            }
+        }
+
+        &:hover {
+            @mix-bg-color : color-mix(in srgb, var(--xo-service-status-bar-bg-color) var(--xo-service-status-bar-bean-hover-bg-color-mix-percentage), var(--xo-service-status-bar-bean-hover-bg-color-mix-second-color));
+            background    : @mix-bg-color;
+
+            > .button {
+                > .badge {
+                    border-color : @mix-bg-color;
+                }
+
+                > .icon {
+                    color : color-mix(in srgb, var(--xo-service-status-bar-icon-color) var(--xo-service-status-bar-icon-color-hover-transparent-mix-percentage), transparent);
+                }
+            }
+        }
+    }
+}
+
+/* 状态提示 */
+.xo-service-status-bar-tooltip {
+    .no-user-select();
+    text-align : var(--xo-service-status-bar-tooltip-text-align);
+
+    > .name {
+        font-weight : var(--xo-service-status-bar-tooltip-name-font-weight);
+        font-size   : var(--xo-service-status-bar-tooltip-name-font-size);
+    }
+
+    > .status {
+        display   : block;
+        font-size : var(--xo-service-status-bar-tooltip-status-font-size);
+    }
+}
+</style>

package/dist/renderer/components/settings-components/types/setting-app-opacity.d.ts

@@ -0,0 +1,19 @@
+// 设置 - 应用透明度 组件属性
+export interface XoPropsSettingAppOpacity {
+    // 标记点
+    marks?: number[]
+    // 宽度
+    width?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 应用透明度
+        interface SettingAppOpacity extends XoPropsSettingAppOpacity {
+        }
+    }
+}

package/dist/renderer/components/settings-components/types/setting-log-level.d.ts

@@ -0,0 +1,23 @@
+// 设置 - 日志等级 组件属性
+export interface XoPropsSettingLogLevel {
+    // 占位符
+    placeholder?: string
+    // 值是否大写
+    valueUpper?: boolean
+    // 显示值是否居中
+    valueCenter?: boolean
+    // 宽度
+    width?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 日志等级
+        interface SettingLogLevel extends XoPropsSettingLogLevel {
+        }
+    }
+}

package/dist/renderer/components/settings-components/types/setting-shortcut-keys-record-for-form-flex-rows.d.ts

@@ -0,0 +1,47 @@
+// 设置 - 多行快捷键录制 行选项
+export interface XoComponentShortcutKeysRecordOption {
+    // 快捷键ID
+    id: XoShortcut.ID
+    // 快捷键作用域
+    scope?: XoShortcut.Scope
+    // 快捷键组合
+    keys: string[]
+    // 标题
+    title: string
+    // 描述
+    describe?: string
+}
+
+// 设置 - 多行快捷键录制 组件属性
+export interface XoPropsSettingShortcutKeysRecordForFormFlexRows {
+    // 快捷键录制行选项列表
+    recordOptions: XoComponentShortcutKeysRecordOption[]
+    // 快捷键作用域
+    scope: XoShortcut.Scope
+    // 输入框样式
+    inputClass?: string
+    // 输入框宽度
+    inputWidth?: string | number
+    // 是否居中显示
+    inputCenter?: boolean
+}
+
+// 全局类型
+declare global {
+
+    // 组件
+    namespace XoComponent {
+
+        // 设置 - 多行快捷键录制 行选项
+        interface ShortcutKeysRecordOption extends XoComponentShortcutKeysRecordOption {
+        }
+    }
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 多行快捷键录制
+        interface SettingShortcutKeysRecordForFormFlexRows extends XoPropsSettingShortcutKeysRecordForFormFlexRows {
+        }
+    }
+}

package/dist/renderer/components/settings-components/types/setting-shortcut-keys-record.d.ts

@@ -0,0 +1,23 @@
+// 设置 - 快捷键录制 组件属性
+export interface XoPropsSettingShortcutKeysRecord {
+    // 快捷键ID
+    shortcutId: XoShortcut.ID
+    // 快捷键作用域
+    scope: XoShortcut.Scope
+    // 是否居中显示
+    center?: boolean
+    // 宽度
+    width?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 快捷键录制
+        interface SettingShortcutKeysRecord extends XoPropsSettingShortcutKeysRecord {
+        }
+    }
+}

package/dist/renderer/components/settings-components/types/setting-window-material.d.ts

@@ -0,0 +1,23 @@
+// 设置 - 窗口材质 组件属性
+export interface XoPropsSettingWindowMaterial {
+    // 占位符
+    placeholder?: string
+    // 材质名是否大写
+    materialUpper?: boolean
+    // 显示值是否居中
+    valueCenter?: boolean
+    // 宽度
+    width?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 设置 - 窗口材质
+        interface SettingWindowMaterial extends XoPropsSettingWindowMaterial {
+        }
+    }
+}

package/dist/renderer/components/settings-components/xo-setting-app-opacity.vue

@@ -0,0 +1,105 @@
+<!-- 设置 - 应用透明度组件 -->
+<template>
+    <el-slider
+        class="xo-setting--app-opacity"
+        v-model="opacity"
+        :min="min"
+        :max="max"
+        :marks="marksMap"
+        :style="style"
+        @change="onChange"
+    />
+</template>
+
+<script setup lang="ts">
+import type {XoPropsSettingAppOpacity} from './types/setting-app-opacity'
+import {ContextUtil, RendererUtil}     from '../../utils/index.js'
+import {computed, inject, watch}       from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoSettingAppOpacity',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingAppOpacity>(), {
+    marks: () => [50, 80, 90, 100],
+})
+
+// 表单 flex 上下文
+const formFlexContext = inject(ContextUtil.FormFlexKey, undefined)
+
+// 绑定值
+const opacity = defineModel<number>({default: 100})
+
+// 处理后的标记点：限制范围、去重、升序
+const marks = computed<number[]>(() => {
+    const values = [...new Set(props.marks ?? [])]    // 去重
+        .filter(value => Number.isFinite(value))      // 过滤非数字
+        .filter(value => value >= 50 && value <= 100) // 限制范围
+        .sort((left, right) => left - right)          // 升序
+    return values.length > 0 ? values : [50, 100]     // 默认值
+})
+
+// 最小值
+const min = computed<number>(() => marks.value[0])
+
+// 最大值
+const max = computed<number>(() => marks.value[marks.value.length - 1])
+
+// 标记点
+const marksMap = computed<Record<number, string>>(() => {
+    return Object.fromEntries(marks.value.map(value => [value, `${value}%`]))
+})
+
+// 修正绑定值
+// 保证当前值仍在可选范围内
+watch([min, max], ([minValue, maxValue]) => {
+    if (!Number.isFinite(opacity.value)) {
+        return
+    }
+    opacity.value = Math.max(minValue, Math.min(maxValue, opacity.value))
+})
+
+// 透明度变化
+const onChange = (value: number | number[]): void => {
+    if (typeof value === 'number') {
+        void window.xion.app.setOpacity(value)
+    }
+}
+
+// 样式
+const style = computed(() => {
+    return {
+        'width': RendererUtil.toCssSize(props.width ?? formFlexContext?.inputWidth),
+    }
+})
+</script>
+
+<style lang="less">
+.el-slider.xo-setting--app-opacity {
+    user-select : none;
+    padding     : 0 calc(var(--el-slider-button-size) / 2);
+
+    .el-slider__stop {
+        width     : 10px;
+        height    : 10px;
+        top       : 50%;
+        left      : 50%;
+        transform : translate(-50%, -50%);
+        border    : 1px solid var(--el-color-primary);
+    }
+
+    .el-slider__marks-text {
+        @font-size : 12px;
+        font-size  : @font-size;
+        margin-top : 12px;
+    }
+}
+
+html.dark .el-slider.xo-setting--app-opacity {
+    .el-slider__stop {
+        border : 1px solid var(--el-color-white);
+    }
+}
+</style>

package/dist/renderer/components/settings-components/xo-setting-log-level.vue

@@ -0,0 +1,84 @@
+<!-- 设置 - 日志等级组件 -->
+<template>
+    <el-select
+        class="xo-setting--log-level"
+        v-model="model"
+        @change="onChange"
+        :style="style"
+        :teleported="false"
+        :placeholder="props.placeholder"
+    >
+        <el-option v-for="(item, i) in LogLevelOptions" :key="i" :label="item.label" :value="item.value">
+            <div class="select-item">
+                <div class="label">{{ item.label }}</div>
+                <div class="value">{{ props.valueUpper ? item.value.toUpperCase() : item.value }}</div>
+            </div>
+        </el-option>
+    </el-select>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsSettingLogLevel} from './types/setting-log-level'
+import {ContextUtil, RendererUtil}   from '../../utils/index.js'
+import {LogLevelOptions}             from '../../../shared/logger/index.js'
+import {computed, inject}            from 'vue'
+
+// 组件名
+defineOptions({
+    name: 'XoSettingLogLevel',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingLogLevel>(), {
+    placeholder: '选择日志等级',
+    valueCenter: true,
+    valueUpper : false,
+    width      : undefined,
+})
+
+// 表单 flex 上下文
+const formFlexContext = inject(ContextUtil.FormFlexKey, undefined)
+
+// 样式
+const style = computed(() => {
+    return {
+        '--xo-setting--log-level--value-align': props.valueCenter ? 'center' : 'left',
+        'width'                               : RendererUtil.toCssSize(props.width ?? formFlexContext?.inputWidth),
+    }
+})
+
+// 绑定值
+const model = defineModel<XoLogger.Level>({default: 'info'})
+
+// 日志等级变化
+const onChange = (level: XoLogger.Level): void => {
+    void window.xion.app.setLogLevel(level)
+}
+</script>
+
+<style lang="less">
+@import (reference) '../../styles/mixin.less';
+
+.xo-setting--log-level {
+    --xo-setting--log-level--value-align : left;
+
+    .el-select__placeholder {
+        text-align : var(--xo-setting--log-level--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-components/xo-setting-shortcut-keys-record-for-form-flex-rows.vue

@@ -0,0 +1,37 @@
+<!-- 设置 - 多行快捷键录制 组件 -->
+<template>
+    <xo-form-flex-row
+        v-for="shortcut in props.recordOptions"
+        :key="shortcut.id"
+        :title="shortcut.title"
+        :describe="shortcut.describe"
+    >
+        <xo-setting-shortcut-keys-record
+            :shortcut-id="shortcut.id"
+            :scope="shortcut.scope ?? props.scope"
+            :class="props.inputClass"
+            :width="props.inputWidth"
+            :center="props.inputCenter"
+            v-model="shortcut.keys"
+        />
+    </xo-form-flex-row>
+</template>
+
+<script setup lang="ts">
+import XoFormFlexRow                                          from '../form/xo-form-flex-row.vue'
+import type {XoPropsSettingShortcutKeysRecordForFormFlexRows} from './types/setting-shortcut-keys-record-for-form-flex-rows'
+import XoSettingShortcutKeysRecord                            from './xo-setting-shortcut-keys-record.vue'
+
+defineOptions({
+    name: 'XoSettingShortcutKeysRecordForFormFlexRows',
+})
+
+// 组件属性
+const props = withDefaults(defineProps<XoPropsSettingShortcutKeysRecordForFormFlexRows>(), {
+    recordOptions: () => [],
+    inputCenter  : true,
+})
+</script>
+
+<style lang="less">
+</style>