@e-xi/xion 0.0.6

package/dist/renderer/components/captcha/xo-captcha-host.vue

@@ -0,0 +1,151 @@
+<!-- 全局验证码主机组件 -->
+<template>
+    <xo-captcha
+        v-model="visible"
+        :action="resolvedOptions.action"
+        :base-url="resolvedOptions.baseUrl"
+        :timeout="resolvedOptions.timeout"
+        :captcha-url="resolvedOptions.captchaUrl"
+        :title="resolvedOptions.title"
+        :horizontal-padding="resolvedOptions.horizontalPadding"
+        :vertical-padding="resolvedOptions.verticalPadding"
+        :icon-size="resolvedOptions.iconSize"
+        :title-font-size="resolvedOptions.titleFontSize"
+        :radius-size="resolvedOptions.radiusSize"
+        :refresh-icon-title="resolvedOptions.refreshIconTitle"
+        :close-icon-title="resolvedOptions.closeIconTitle"
+        :error-clear-delay="resolvedOptions.errorClearDelay"
+        :background-color="resolvedOptions.backgroundColor"
+        :drag-bar-color="resolvedOptions.dragBarColor"
+        :drag-background-color="resolvedOptions.dragBackgroundColor"
+        :mask-color="resolvedOptions.maskColor"
+        :mask-opacity="resolvedOptions.maskOpacity"
+        :border-color="resolvedOptions.borderColor"
+        :title-color="resolvedOptions.titleColor"
+        :icon-color="resolvedOptions.iconColor"
+        :shadow="resolvedOptions.shadow"
+        @verified="handleVerified"
+    />
+</template>
+
+<script setup lang="ts">
+import {XoCaptchaRuntime}                                                from '../index.js'
+import type {CaptchaHostProps, CaptchaServiceHost}                       from './internal/captcha-runtime-types'
+import type {XoComponentCaptchaServiceOptions, XoComponentCaptchaTicket} from './types/captcha'
+import XoCaptcha                                                         from './xo-captcha.vue'
+import {computed, onBeforeUnmount, ref, toValue, watch}                  from 'vue'
+
+defineOptions({
+    name: 'XoCaptchaHost',
+})
+
+// 全局验证码显示状态
+const visible = ref(false)
+
+// 当前全局验证码服务选项
+const options = ref<XoComponentCaptchaServiceOptions>({action: ''})
+
+// 将响应式服务选项解析为验证码组件属性
+const resolvedOptions = computed<CaptchaHostProps>(() => ({
+    action             : toValue(options.value.action) ?? '',
+    baseUrl            : toValue(options.value.baseUrl),
+    timeout            : toValue(options.value.timeout),
+    captchaUrl         : toValue(options.value.captchaUrl),
+    title              : toValue(options.value.title),
+    horizontalPadding  : toValue(options.value.horizontalPadding),
+    verticalPadding    : toValue(options.value.verticalPadding),
+    iconSize           : toValue(options.value.iconSize),
+    titleFontSize      : toValue(options.value.titleFontSize),
+    radiusSize         : toValue(options.value.radiusSize),
+    refreshIconTitle   : toValue(options.value.refreshIconTitle),
+    closeIconTitle     : toValue(options.value.closeIconTitle),
+    errorClearDelay    : toValue(options.value.errorClearDelay),
+    backgroundColor    : toValue(options.value.backgroundColor),
+    dragBarColor       : toValue(options.value.dragBarColor),
+    dragBackgroundColor: toValue(options.value.dragBackgroundColor),
+    maskColor          : toValue(options.value.maskColor),
+    maskOpacity        : toValue(options.value.maskOpacity),
+    borderColor        : toValue(options.value.borderColor),
+    titleColor         : toValue(options.value.titleColor),
+    iconColor          : toValue(options.value.iconColor),
+    shadow             : toValue(options.value.shadow),
+}))
+
+// 当前全局验证码 Promise 的成功回调
+let resolvePending: ((ticket: XoComponentCaptchaTicket) => void) | undefined
+
+// 当前全局验证码 Promise 的失败回调
+let rejectPending: ((reason?: unknown) => void) | undefined
+
+/**
+ * 清理当前全局验证码 Promise 回调
+ */
+function resetPending(): void {
+    resolvePending = undefined
+    rejectPending  = undefined
+}
+
+/**
+ * 拒绝当前全局验证码 Promise
+ * @param {unknown} reason 拒绝原因
+ */
+function reject(reason: unknown = new Error('验证已取消')): void {
+    const rejectCurrent = rejectPending
+    resetPending()
+    rejectCurrent?.(reason)
+}
+
+/**
+ * 关闭全局验证码并拒绝等待中的 Promise
+ */
+function close(): void {
+    visible.value = false
+    reject()
+}
+
+/**
+ * 打开全局验证码
+ * @param {XoComponentCaptchaServiceOptions} serviceOptions 服务选项
+ * @returns {Promise<XoComponentCaptchaTicket>} 验证成功后的票据
+ */
+function open(serviceOptions: XoComponentCaptchaServiceOptions): Promise<XoComponentCaptchaTicket> {
+    if (resolvePending || rejectPending) {
+        return Promise.reject(new Error('验证码操作中'))
+    }
+
+    options.value = {...serviceOptions}
+    visible.value = true
+
+    return new Promise<XoComponentCaptchaTicket>((resolve, rejectPromise) => {
+        resolvePending = resolve
+        rejectPending  = rejectPromise
+    })
+}
+
+/**
+ * 处理验证码验证成功事件
+ * @param {XoComponentCaptchaTicket} ticket 验证票据
+ */
+function handleVerified(ticket: XoComponentCaptchaTicket): void {
+    resolvePending?.(ticket)
+    resetPending()
+    visible.value = false
+}
+
+// 用户或组件关闭验证码时拒绝仍在等待的服务 Promise
+watch(visible, (current, previous) => {
+    if (previous && !current && (resolvePending || rejectPending)) {
+        reject()
+    }
+})
+
+// 提供给全局验证码服务的主机实现
+const host: CaptchaServiceHost = {open, close}
+XoCaptchaRuntime.registerHost(host)
+
+// 卸载前拒绝等待中的调用并注销当前主机
+onBeforeUnmount(() => {
+    reject(new Error('验证码组件已销毁'))
+    XoCaptchaRuntime.unregisterHost(host)
+})
+</script>

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

@@ -0,0 +1,83 @@
+<!-- 滑块验证码组件 -->
+<template>
+    <div
+        v-if="controller.visible.value"
+        :id="controller.rootId.value"
+        ref="captchaRef"
+        class="xo-captcha"
+        :class="{'is-embedded': !props.showTheme}"
+        :style="controller.cssProperties.value"
+    >
+        <div class="mask" />
+
+        <div class="instance">
+            <slide
+                :config="controller.slideConfig.value"
+                :data="controller.slideData.value"
+                :events="controller.slideEvents.value"
+            />
+        </div>
+    </div>
+
+    <Teleport v-if="gcBodyRef" :to="gcBodyRef">
+        <div v-show="controller.errorMessage.value" class="xo-captcha-error">
+            <div class="message">{{ controller.errorMessage.value }}</div>
+        </div>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+import {XoCaptchaRuntime}                                                       from '../index.js'
+import type {XoComponentCaptchaEmits, XoComponentCaptchaExpose, XoPropsCaptcha} from './types/captcha'
+import {Slide}                                                                  from 'go-captcha-vue'
+import {onBeforeUnmount, ref}                                                   from 'vue'
+import 'go-captcha-vue/dist/style.css'
+
+defineOptions({
+    name: 'XoCaptcha',
+})
+
+// 组件属性及默认值
+const props = withDefaults(defineProps<XoPropsCaptcha>(), {
+    modelValue       : undefined,
+    title            : '请拖动滑块完成拼图',
+    horizontalPadding: 20,
+    verticalPadding  : 20,
+    showTheme        : true,
+    iconSize         : 20,
+    titleFontSize    : 16,
+    radiusSize       : 10,
+    refreshIconTitle : '刷新验证码',
+    closeIconTitle   : '关闭验证码',
+    errorClearDelay  : 2000,
+    baseUrl          : undefined,
+    timeout          : undefined,
+    captchaUrl       : undefined,
+})
+
+// 组件事件
+const emits = defineEmits<XoComponentCaptchaEmits>()
+
+// 验证码根元素引用
+const captchaRef = ref<HTMLElement | null>(null)
+
+// go-captcha-vue 内容容器引用
+const gcBodyRef = ref<HTMLElement | null>(null)
+
+// 验证码状态及生命周期控制器
+const controller = new XoCaptchaRuntime.Controller({captchaRef, gcBodyRef}, props, emits)
+
+// 暴露给组件引用的验证码控制方法
+defineExpose<XoComponentCaptchaExpose>({
+    open   : () => controller.open(),
+    refresh: () => controller.refresh(),
+    close  : () => controller.close(),
+})
+
+// 卸载前清理请求、定时器、键盘事件和 WASM 注册
+onBeforeUnmount(() => {
+    controller.destroy()
+})
+</script>
+
+<style scoped lang="less" src="./style/index.less"></style>

package/dist/renderer/components/captcha.d.ts

@@ -0,0 +1,40 @@
+import { XoCaptchaController } from './captcha/internal/captcha-controller';
+import { registerCaptchaHost, unregisterCaptchaHost } from './captcha/internal/captcha-service';
+/**
+ * 验证码公共 API
+ */
+export declare class XoCaptchaApi {
+    /**
+     * 在当前 Vue 应用上下文中提供验证码全局请求配置
+     * @param {XoComponent.CaptchaProvideOptions} options 配置
+     */
+    static provide(options: XoComponent.CaptchaProvideOptions): void;
+    /**
+     * 获取当前 Vue 应用上下文中的验证码全局请求配置
+     * @returns {XoComponent.CaptchaGlobalOptions}
+     */
+    static inject(): XoComponent.CaptchaGlobalOptions;
+    /**
+     * 通过已挂载的 XoCaptchaHost 打开验证码
+     * @param {string | XoComponent.CaptchaServiceOptions} options 服务选项
+     * @returns {Promise<XoComponent.CaptchaTicket>}
+     */
+    static open(options: string | XoComponent.CaptchaServiceOptions): Promise<XoComponent.CaptchaTicket>;
+    /**
+     * 关闭已挂载的全局验证码
+     */
+    static close(): void;
+}
+/**
+ * 已发布 Vue 组件使用的内部运行时
+ *
+ * 该对象随 renderer/components 聚合入口打包，用于复制到 dist 的 Vue 源文件
+ */
+export declare const XoCaptchaRuntime: {
+    /** 验证码组件状态和生命周期控制器 */
+    readonly Controller: typeof XoCaptchaController;
+    /** 注册全局验证码主机 */
+    readonly registerHost: typeof registerCaptchaHost;
+    /** 注销全局验证码主机 */
+    readonly unregisterHost: typeof unregisterCaptchaHost;
+};

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

@@ -0,0 +1,55 @@
+// 上下文菜单属性
+export interface XoPropsContextMenu {
+    // 菜单最大宽度
+    maxWidth?: number
+    // 菜单与视口边缘的距离
+    viewportPadding?: number
+}
+
+// 全局类型
+declare global {
+
+    // 组件属性
+    namespace XoProps {
+
+        // 上下文菜单
+        interface ContextMenu extends XoPropsContextMenu {
+        }
+    }
+
+    // Renderer ContextMenu
+    namespace XoRendererContextMenu {
+
+        // 上下文菜单状态
+        interface State {
+            // 是否打开
+            open: boolean
+            // 请求 ID
+            requestId: string
+            // 菜单 X 坐标
+            x: number
+            // 菜单 Y 坐标
+            y: number
+            // 菜单项
+            items: XoMenu.RendererItem[]
+        }
+
+        // 上下文菜单配置
+        interface Options {
+            // 挂载容器 ID
+            rootId?: string
+            // 菜单最大宽度
+            maxWidth?: number
+            // 菜单与视口边缘的距离
+            viewportPadding?: number
+        }
+
+        // Vue 插件
+        interface Plugin {
+            // 安装插件
+            install(app: import('vue').App, options?: Options): void
+        }
+    }
+}
+
+export {}

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

@@ -0,0 +1,112 @@
+<!-- 上下文菜单行组件 -->
+<template>
+    <template v-for="item in items" :key="item.id">
+        <div v-if="isSeparator(item)" class="xo-context-menu-separator" />
+        <div v-else
+             role="menuitem"
+             class="xo-context-menu-item"
+             :class="{disabled: isDisabled(item)}"
+             :aria-disabled="isDisabled(item)"
+             @click.stop="onItemClick(item)"
+        >
+            <span
+                class="icon"
+                :class="iconClass(item.icon)"
+                :style="iconStyle(item.icon)"
+            />
+            <span class="label">{{ item.label }}</span>
+            <span v-if="item.accelerator" class="accelerator">
+                {{ item.accelerator }}
+            </span>
+            <span v-if="hasSubmenu(item)" class="arrow">
+                <i class="xion-font xion-icon-more"></i>
+            </span>
+            <div v-if="hasSubmenu(item)" class="submenu">
+                <XoContextMenuItems :items="item.submenu" @execute="emitExecute" />
+            </div>
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+    name: 'XoContextMenuItems',
+})
+
+defineProps<{
+    // 当前层级的菜单项
+    items: XoMenu.RendererItem[]
+}>()
+
+const emit = defineEmits<{
+    // 触发可执行菜单项
+    execute: [item: XoMenu.RendererItem]
+}>()
+
+/**
+ * 是否为分割线
+ * @param {XoMenu.RendererItem} item 菜单项
+ * @returns {boolean}
+ */
+const isSeparator = (item: XoMenu.RendererItem): boolean => {
+    return item.type === 'separator'
+}
+
+/**
+ * 是否包含子菜单
+ * @param {XoMenu.RendererItem} item 菜单项
+ * @returns {boolean}
+ */
+const hasSubmenu = (item: XoMenu.RendererItem): boolean => {
+    return item.submenu.length > 0
+}
+
+/**
+ * 是否禁用菜单项
+ * @param {XoMenu.RendererItem} item 菜单项
+ * @returns {boolean}
+ */
+const isDisabled = (item: XoMenu.RendererItem): boolean => {
+    return !item.enabled
+}
+
+/**
+ * 图标 class
+ * @param {XoMenu.Icon | null} icon 图标
+ * @returns {string | undefined}
+ */
+const iconClass = (icon: XoMenu.Icon | null): string | undefined => {
+    return icon?.type === 'class' ? icon.value : undefined
+}
+
+/**
+ * 图标样式
+ * @param {XoMenu.Icon | null} icon 图标
+ * @returns {Record<string, string> | undefined}
+ */
+const iconStyle = (icon: XoMenu.Icon | null): Record<string, string> | undefined => {
+    return icon?.type === 'image'
+        ? {backgroundImage: `url("${icon.value}")`}
+        : undefined
+}
+
+/**
+ * 点击当前层级菜单项
+ * @param {XoMenu.RendererItem} item 菜单项
+ */
+const onItemClick = (item: XoMenu.RendererItem): void => {
+    if (isDisabled(item) || isSeparator(item) || hasSubmenu(item)) {
+        return
+    }
+
+    emitExecute(item)
+}
+
+/**
+ * 向上透传执行事件
+ * @param {XoMenu.RendererItem} item 菜单项
+ */
+const emitExecute = (item: XoMenu.RendererItem): void => {
+    emit('execute', item)
+}
+</script>