@e-xi/xion 0.0.6

package/dist/renderer/components/context-menu/xo-context-menu.vue

@@ -0,0 +1,356 @@
+<!-- 上下文菜单组件 -->
+<template>
+    <div v-if="state.open"
+         ref="menuRef"
+         class="xo-context-menu"
+         role="menu"
+         :style="menuStyle"
+         @pointerdown.prevent
+         @mousedown.prevent
+    >
+        <XoContextMenuItems :items="state.items" @execute="execute" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsContextMenu}                                       from './types/context-menu'
+import XoContextMenuItems                                              from './xo-context-menu-items.vue'
+import {computed, nextTick, onBeforeUnmount, onMounted, reactive, ref} from 'vue'
+
+defineOptions({
+    name: 'XoContextMenu',
+})
+
+// 请求监听移除方法
+let offRequested: (() => void) | undefined
+
+// 默认属性
+const props = withDefaults(defineProps<XoPropsContextMenu>(), {
+    maxWidth       : 320,
+    viewportPadding: 8,
+})
+
+// ref 引用
+const menuRef = ref<HTMLElement | null>(null)
+
+// 上下文菜单状态
+const state = reactive<XoRendererContextMenu.State>({
+    open     : false,
+    requestId: '',
+    x        : 0,
+    y        : 0,
+    items    : [],
+})
+
+// 菜单样式
+const menuStyle = computed(() => ({
+    left    : `${state.x}px`,
+    top     : `${state.y}px`,
+    maxWidth: `${menuMaxWidth()}px`,
+}))
+
+/**
+ * 打开菜单
+ * <p>主进程已经完成上下文判断，渲染进程只负责展示菜单数据。</p>
+ * @param {XoMenu.ContextMenuRequest} request 上下文菜单请求
+ */
+const open = async (request: XoMenu.ContextMenuRequest): Promise<void> => {
+    state.requestId = request.requestId
+    state.x         = request.x
+    state.y         = request.y
+    state.items     = request.items
+    state.open      = request.items.length > 0
+
+    await nextTick()
+
+    // 将菜单放在视口范围内
+    placeInsideViewport()
+}
+
+/**
+ * 关闭菜单
+ */
+const close = (): void => {
+    state.open = false
+}
+
+/**
+ * 执行菜单命令
+ * <p>这里只回传 requestId 和 command，真实上下文由主进程缓存并执行。</p>
+ * @param {XoMenu.RendererItem} item 菜单项
+ */
+const execute = async (item: XoMenu.RendererItem): Promise<void> => {
+    // 如果菜单不可执行，跳过
+    if (!isExecutable(item)) {
+        return
+    }
+
+    // 关闭菜单
+    close()
+
+    // 通知主进程执行命令
+    await window.xion.contextMenu.executeCommand({
+        requestId: state.requestId,
+        command  : item.command,
+        payload  : item.payload,
+    })
+}
+
+/**
+ * 判断菜单项是否可执行
+ * @param {XoMenu.RendererItem} item 菜单项
+ * @returns {item is XoMenu.RendererItem & {command: XoMenu.Command}}
+ */
+const isExecutable = (item: XoMenu.RendererItem): item is XoMenu.RendererItem & { command: XoMenu.Command } => {
+    return item.enabled && item.type !== 'separator' && item.submenu.length <= 0 && Boolean(item.command)
+}
+
+/**
+ * 将菜单放在视口范围内
+ */
+const placeInsideViewport = (): void => {
+    const element = menuRef.value
+    if (!element) {
+        return
+    }
+
+    const padding  = props.viewportPadding
+    const rect     = element.getBoundingClientRect()
+    const viewport = {
+        width : document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight,
+    }
+
+    if (state.x + rect.width > viewport.width - padding) {
+        state.x = Math.max(padding, viewport.width - rect.width - padding)
+    }
+
+    if (state.y + rect.height > viewport.height - padding) {
+        state.y = Math.max(padding, viewport.height - rect.height - padding)
+    }
+}
+
+/**
+ * 菜单最大宽度
+ * @returns {number}
+ */
+const menuMaxWidth = (): number => {
+    const viewportWidth = document.documentElement.clientWidth
+    const maxWidth      = viewportWidth - props.viewportPadding * 2
+    return Math.max(0, Math.min(props.maxWidth, maxWidth))
+}
+
+/**
+ * 点击菜单外部时关闭菜单
+ * @param {PointerEvent} event 指针事件
+ */
+const onDocumentPointerDown = (event: PointerEvent): void => {
+    if (!state.open) {
+        return
+    }
+
+    const element = menuRef.value
+    if (element && event.target instanceof Node && element.contains(event.target)) {
+        return
+    }
+
+    close()
+}
+
+/**
+ * 窗口失焦时关闭菜单
+ */
+const onWindowBlur = (): void => {
+    close()
+}
+
+onMounted(() => {
+    // 监听上下文菜单请求，并返回关闭方法
+    offRequested = window.xion.contextMenu.onRequested(request => {
+        // 打开菜单
+        void open(request)
+    })
+
+    // 按下事件（包含鼠标按下、触摸按下、手写笔按下等）
+    document.addEventListener('pointerdown', onDocumentPointerDown)
+    // 失焦事件
+    window.addEventListener('blur', onWindowBlur)
+})
+
+onBeforeUnmount(() => {
+    // 移除上下文菜单请求监听
+    offRequested?.()
+    // 移除按下监听
+    document.removeEventListener('pointerdown', onDocumentPointerDown)
+    // 移除失焦监听
+    window.removeEventListener('blur', onWindowBlur)
+})
+</script>
+
+<!-- 变量 -->
+<style lang="less">
+.xo-context-menu {
+    --xo-context-menu-z-index                 : 2147483647;
+    --xo-context-menu-secondary-color         : #999999;
+    --xo-context-menu-padding                 : 8px;
+    --xo-context-menu-bg                      : rgba(255, 255, 255, 1);
+    --xo-context-menu-border                  : 1px solid rgba(0, 0, 0, 0.1);
+    --xo-context-menu-radius                  : 15px;
+    --xo-context-menu-shadow                  : 0 2px 8px rgba(0, 0, 0, 0);
+    --xo-context-menu-color                   : #000000;
+    --xo-context-menu-font-size               : 14px;
+    --xo-context-menu-line-height             : 1.4;
+    --xo-context-menu-font-family             : 'Microsoft YaHei UI', 'Microsoft YaHei', '微软雅黑', SimSun, sans-serif;
+    --xo-context-menu-item-width              : 100%;
+    --xo-context-menu-item-height             : 35px;
+    --xo-context-menu-item-padding            : 0 12px 0 10px;
+    --xo-context-menu-item-gap                : 0;
+    --xo-context-menu-item-border             : 0;
+    --xo-context-menu-item-radius             : 8px;
+    --xo-context-menu-item-hover-bg           : rgba(0, 0, 0, 0.08);
+    --xo-context-menu-item-disabled-opacity   : 0.45;
+    --xo-context-menu-separator-height        : 1px;
+    --xo-context-menu-separator-margin        : 5px;
+    --xo-context-menu-separator-bg            : rgba(0, 0, 0, 0.05);
+    --xo-context-menu-label-flex              : 1 1 auto;
+    --xo-context-menu-label-min-width         : 0;
+    --xo-context-menu-label-margin-left       : 8px;
+    --xo-context-menu-icon-flex               : 0 0 auto;
+    --xo-context-menu-icon-width              : 16px;
+    --xo-context-menu-icon-height             : 16px;
+    --xo-context-menu-icon-size               : 16px;
+    --xo-context-menu-icon-padding-top        : 2px;
+    --xo-context-menu-icon-bg-size            : contain;
+    --xo-context-menu-icon-bg-repeat          : no-repeat;
+    --xo-context-menu-icon-bg-position        : center;
+    --xo-context-menu-accelerator-flex        : 0 0 auto;
+    --xo-context-menu-accelerator-font-size   : 12px;
+    --xo-context-menu-accelerator-margin-left : 20px;
+    --xo-context-menu-arrow-flex              : 0 0 auto;
+    --xo-context-menu-submenu-offset-x        : 1px;
+    --xo-context-menu-submenu-offset-y        : -6px;
+}
+
+html.dark .xo-context-menu {
+    --xo-context-menu-secondary-color : #bbbbbb;
+    --xo-context-menu-bg              : rgba(0, 0, 0, 0.96);
+    --xo-context-menu-color           : #ffffff;
+    --xo-context-menu-item-hover-bg   : rgba(255, 255, 255, 0.1);
+    --xo-context-menu-separator-bg    : rgba(255, 255, 255, 0.15);
+    --xo-context-menu-border          : 1px solid rgba(255, 255, 255, 0.3);
+    --xo-context-menu-shadow          : 0 0px 8px rgba(255, 255, 255, 0);
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+.xo-context-menu {
+    position      : fixed;
+    box-sizing    : border-box;
+    display       : inline-block;
+    user-select   : none;
+    z-index       : var(--xo-context-menu-z-index);
+    padding       : var(--xo-context-menu-padding);
+    background    : var(--xo-context-menu-bg);
+    border        : var(--xo-context-menu-border);
+    border-radius : var(--xo-context-menu-radius);
+    box-shadow    : var(--xo-context-menu-shadow);
+    color         : var(--xo-context-menu-color);
+    font-size     : var(--xo-context-menu-font-size);
+    line-height   : var(--xo-context-menu-line-height);
+    font-family   : var(--xo-context-menu-font-family), serif;
+
+    .xo-context-menu-item {
+        position      : relative;
+        display       : flex;
+        align-items   : center;
+        width         : var(--xo-context-menu-item-width);
+        min-height    : var(--xo-context-menu-item-height);
+        padding       : var(--xo-context-menu-item-padding);
+        gap           : var(--xo-context-menu-item-gap);
+        border        : var(--xo-context-menu-item-border);
+        border-radius : var(--xo-context-menu-item-radius);
+        background    : transparent;
+        color         : inherit;
+        font          : inherit;
+        text-align    : left;
+        white-space   : nowrap;
+        cursor        : pointer;
+        user-select   : none;
+
+        &:not(.disabled):hover {
+            background : var(--xo-context-menu-item-hover-bg);
+        }
+
+        &:hover > .submenu {
+            display : block;
+        }
+
+        &.disabled {
+            cursor  : default;
+            opacity : var(--xo-context-menu-item-disabled-opacity);
+        }
+
+        > .icon, > .arrow {
+            color : var(--xo-context-menu-secondary-color);
+        }
+
+        > .icon {
+            display             : flex;
+            align-items         : center;
+            justify-content     : center;
+            flex-shrink         : 0;
+            flex-grow           : 0;
+            width               : var(--xo-context-menu-icon-width);
+            height              : var(--xo-context-menu-icon-height);
+            font-size           : var(--xo-context-menu-icon-size);
+            padding-top         : var(--xo-context-menu-icon-padding-top);
+            background-repeat   : var(--xo-context-menu-icon-bg-repeat);
+            background-position : var(--xo-context-menu-icon-bg-position);
+            background-size     : var(--xo-context-menu-icon-bg-size);
+        }
+
+        > .label {
+            flex          : var(--xo-context-menu-label-flex);
+            min-width     : var(--xo-context-menu-label-min-width);
+            overflow      : hidden;
+            text-overflow : ellipsis;
+            line-height   : var(--xo-context-menu-icon-size);
+            margin-left   : var(--xo-context-menu-label-margin-left);
+        }
+
+        > .accelerator {
+            flex        : var(--xo-context-menu-accelerator-flex);
+            color       : var(--xo-context-menu-secondary-color);
+            margin-left : var(--xo-context-menu-accelerator-margin-left);
+            font-size   : var(--xo-context-menu-accelerator-font-size);
+            line-height : var(--xo-context-menu-icon-size);
+        }
+
+        > .arrow {
+            flex : var(--xo-context-menu-arrow-flex);
+        }
+
+        > .submenu {
+            position      : absolute;
+            z-index       : 10000;
+            left          : calc(100% + var(--xo-context-menu-submenu-offset-x));
+            top           : var(--xo-context-menu-submenu-offset-y);
+            display       : none;
+            width         : max-content;
+            max-width     : inherit;
+            padding       : var(--xo-context-menu-padding);
+            background    : var(--xo-context-menu-bg);
+            border        : var(--xo-context-menu-border);
+            border-radius : var(--xo-context-menu-radius);
+            box-shadow    : var(--xo-context-menu-shadow);
+        }
+    }
+
+    > .xo-context-menu-separator {
+        height     : var(--xo-context-menu-separator-height);
+        margin     : var(--xo-context-menu-separator-margin);
+        background : var(--xo-context-menu-separator-bg);
+    }
+}
+</style>

package/dist/renderer/components/context-menu.d.ts

@@ -0,0 +1,32 @@
+import XoContextMenu from './context-menu/xo-context-menu.vue';
+/**
+ * 上下文菜单 Vue 插件
+ * <p>用法：</p>
+ * <pre>
+ * createApp(App)
+ *     .use(XoContextMenuPlugin)
+ *     .mount('#app')
+ * </pre>
+ */
+export declare const XoContextMenuPlugin: XoRendererContextMenu.Plugin;
+export default XoContextMenuPlugin;
+/**
+ * 挂载上下文菜单
+ * <p>用法：</p>
+ * <pre>
+ * createApp(App).mount('#app')
+ * XoMountContextMenu()
+ * </pre>
+ * @param {XoRendererContextMenu.Options} options 配置
+ * @returns {() => void}
+ */
+export declare function XoMountContextMenu(options?: XoRendererContextMenu.Options): () => void;
+/**
+ * <p>用法：</p>
+ * <pre>
+ * <XoContextMenu>
+ *     <App />
+ * </XoContextMenu>
+ * </pre>
+ */
+export { XoContextMenu };

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

@@ -0,0 +1,31 @@
+// 分割线组件属性
+export interface XoPropsDivider {
+    // 方向 horizontal 横向 vertical 纵向
+    direction?: 'horizontal' | 'vertical'
+    // 内容位置
+    contentPosition?: 'left-start' | 'left' | 'center' | 'right' | 'right-end'
+    // 短线宽度
+    shortBorderWidth?: number | string
+    // 内容间隔
+    contentGap?: number | string
+    // 纵向左侧间隔
+    verticalLeftGap?: number | string
+    // 纵向右侧间隔
+    verticalRightGap?: number | string
+    // 纵向顶部偏移
+    verticalTop?: number | string
+    // 线条样式
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double'
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 分割线
+        interface Divider extends XoPropsDivider {
+        }
+    }
+}

package/dist/renderer/components/divider/xo-divider.vue

@@ -0,0 +1,176 @@
+<!-- 分割线组件 -->
+<template>
+    <div
+        class="xo-divider"
+        :class="[direction, direction === 'horizontal' ? contentPosition : '']"
+        :style="dividerStyle"
+    >
+        <template v-if="direction === 'horizontal'">
+            <div class="before-line"></div>
+            <div class="content">
+                <slot />
+            </div>
+            <div class="after-line"></div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type {XoPropsDivider} from './types/divider'
+import {RendererUtil}        from '../../utils/index.js'
+import {computed}            from 'vue'
+
+defineOptions({
+    name: 'XoDivider',
+})
+
+// 属性
+const props = withDefaults(defineProps<XoPropsDivider>(), {
+    direction       : 'horizontal',
+    contentPosition : 'center',
+    shortBorderWidth: undefined,
+    contentGap      : undefined,
+    verticalLeftGap : undefined,
+    verticalRightGap: undefined,
+    verticalTop     : undefined,
+    borderStyle     : 'solid',
+})
+
+// 分割线样式
+const dividerStyle = computed(() => {
+    return props.direction === 'horizontal'
+        ? {
+            '--xo-divider-short-border-width': RendererUtil.toCssSize(props.shortBorderWidth),
+            '--xo-divider-content-gap'       : RendererUtil.toCssSize(props.contentGap),
+            '--xo-divider-border-style'      : props.borderStyle,
+        }
+        : {
+            '--xo-divider-vertical-left-gap' : RendererUtil.toCssSize(props.verticalLeftGap),
+            '--xo-divider-vertical-right-gap': RendererUtil.toCssSize(props.verticalRightGap),
+            '--xo-divider-vertical-top'      : RendererUtil.toCssSize(props.verticalTop),
+        }
+})
+</script>
+
+<!-- 样式变量 -->
+<style lang="less">
+.xo-divider {
+    // 居左或居右时短线宽度
+    --xo-divider-short-border-width  : 20px;
+    // 分割线颜色
+    --xo-divider-border-color        : var(--el-border-color);
+    // 分割线线条样式
+    --xo-divider-border-style        : solid;
+    // 分割线样式
+    --xo-divider-border              : 1px var(--xo-divider-border-style) var(--xo-divider-border-color);
+    // 内容间隔
+    --xo-divider-content-gap         : 10px;
+    // 内容颜色
+    --xo-divider-content-color       : var(--xo-text-color-primary);
+    // 内容字重
+    --xo-divider-content-font-weight : normal;
+    // 内容字体大小
+    --xo-divider-content-font-size   : 14px;
+    // 纵向左侧间隔
+    --xo-divider-vertical-left-gap   : 10px;
+    // 纵向右侧间隔
+    --xo-divider-vertical-right-gap  : 10px;
+    // 纵向顶部偏移
+    --xo-divider-vertical-top        : 0;
+}
+</style>
+
+<!-- 样式 -->
+<style lang="less">
+.xo-divider {
+    &.horizontal {
+        display     : flex;
+        align-items : center;
+        width       : 100%;
+
+        > .content {
+            flex        : 0 0 auto;
+            white-space : nowrap;
+            color       : var(--xo-divider-content-color);
+            padding     : 0 var(--xo-divider-content-gap);
+            font-weight : var(--xo-divider-content-font-weight);
+            font-size   : var(--xo-divider-content-font-size);
+        }
+
+        > .before-line, > .after-line {
+            min-width   : 0;
+            height      : 0;
+            line-height : 0;
+            font-size   : 0;
+            overflow    : hidden;
+            border-top  : var(--xo-divider-border);
+        }
+
+        &.center {
+            > .before-line, > .after-line {
+                flex : 1 1 0;
+            }
+        }
+
+        &.left {
+            > .before-line {
+                flex : 0 0 var(--xo-divider-short-border-width);
+            }
+
+            > .after-line {
+                flex : 1 1 0;
+            }
+        }
+
+        &.right {
+            > .before-line {
+                flex : 1 1 0;
+            }
+
+            > .after-line {
+                flex : 0 0 var(--xo-divider-short-border-width);
+            }
+        }
+
+        &.left-start {
+            > .before-line {
+                display : none;
+            }
+
+            > .after-line {
+                flex : 1 1 0;
+            }
+
+            > .content {
+                padding-left : 0;
+            }
+        }
+
+        &.right-end {
+            > .before-line {
+                flex : 1 1 0;
+            }
+
+            > .after-line {
+                display : none;
+            }
+
+            > .content {
+                padding-right : 0;
+            }
+        }
+    }
+
+    &.vertical {
+        display        : inline-block;
+        width          : 0;
+        height         : 1em;
+        margin-left    : var(--xo-divider-vertical-left-gap);
+        margin-right   : var(--xo-divider-vertical-right-gap);
+        border-left    : var(--xo-divider-border);
+        vertical-align : middle;
+        position       : relative;
+        top            : var(--xo-divider-vertical-top);
+    }
+}
+</style>

package/dist/renderer/components/form/types/form-flex-row.d.ts

@@ -0,0 +1,21 @@
+// flex 布局表单行 组件属性
+export interface XoPropsFormFlexRow {
+    // 标题
+    title?: string
+    // 标题是否加粗
+    titleBold?: boolean
+    // 描述
+    describe?: string
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // flex 布局表单行
+        interface FormFlexRow extends XoPropsFormFlexRow {
+        }
+    }
+}

package/dist/renderer/components/form/types/form-flex.d.ts

@@ -0,0 +1,49 @@
+// flex 布局表单 组件属性
+export interface XoPropsFormFlex {
+    // 圆角
+    radius?: string | number
+    // 标签
+    label?: string
+    // 标签是否加粗
+    labelBold?: boolean
+    // 标签位置
+    labelPosition?: 'left' | 'center'
+    // 标签字体大小
+    labelFontSize?: string | number
+    // 标签左侧边距
+    labelPaddingLeft?: string | number
+    // 标签间距
+    labelGap?: string | number
+    // 标题是否加粗
+    rowTitleBold?: boolean
+    // 输入框或下拉框的宽度
+    inputWidth?: string | number
+    // 底部边距
+    bottomGap?: string | number
+}
+
+// flex 布局表单上下文
+export interface XoComponentFormFlexContext {
+    // 输入框或下拉框的宽度
+    inputWidth?: number | string
+}
+
+// 全局类型
+declare global {
+
+    // 组件
+    namespace XoComponent {
+
+        // flex 布局表单上下文
+        interface FormFlexContext extends XoComponentFormFlexContext {
+        }
+    }
+
+    // 组件属性
+    namespace XoProps {
+
+        // flex 布局表单
+        interface FormFlex extends XoPropsFormFlex {
+        }
+    }
+}