sykj 0.1.8 → 0.2.0

package/packages/keyboard/src/theme.scss

@@ -3,7 +3,7 @@
     --keyboard_background: #ffffffdd;
     --key_background: #00000006;
     --key_color: #000000aa;
-    --key_filter: invert(90%) opacity(.9);
+    --key_filter: invert(90%) opacity(0.9);
     --key_active_background: #00000038;
 }
 
@@ -14,4 +14,4 @@ html.dark {
     --key_color: #e1f7ff;
     --key_filter: invert(10%);
     --key_active_background: #ffffff38;
-}
+}

package/packages/keyboard/src/utils/focus.ts

@@ -0,0 +1,34 @@
+import keyboard from './store'
+
+// const keyboard = keyboard
+let st: any = null
+
+document.addEventListener('focusin', (event) => {
+    const target = event.target as HTMLElement
+    if (target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA') {
+        if (!isEditableFormComponent(target)) return
+        clearTimeout(st)
+        keyboard.open()
+        keyboard.currentElement = event.target
+    }
+})
+
+document.addEventListener('focusout', (event) => {
+    const target = event.target as HTMLElement
+    if (target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA') {
+        if (!isEditableFormComponent(target)) return
+        keyboard.close()
+    }
+})
+
+// 是否展示输入法
+const isEditableFormComponent = (el: HTMLElement): boolean => {
+    // 类型守卫
+    const notType: Array<string> = ['checkbox', 'radio']
+    if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement))
+        return false
+    if (el.readOnly || notType.includes(el.type)) {
+        return false
+    }
+    return true
+}

package/packages/keyboard/src/utils/store.ts

@@ -0,0 +1,19 @@
+// ;(window.globalThis as any).$sy = {
+//     key: {
+//         show_keyboard: false
+//     }
+// }
+
+class Keyboard {
+    key: any
+    open: any
+    close: any
+    currentElement: EventTarget | null
+    constructor() {
+        // this.key = {}
+        this.currentElement = null
+    }
+}
+
+const keyboard = new Keyboard()
+export default keyboard

package/packages/loading/index.ts

@@ -1,12 +1,5 @@
-import Loading1 from "./Loading1.vue";
-import Loading2 from "./Loading2.vue";
-import { App } from "vue";
-
-// 导出具体的组件
-export { Loading1, Loading2 };
-
-// 安装函数
-export function install(Vue: App) {
-    Vue.component(Loading1.name, Loading1);
-    Vue.component(Loading2.name, Loading2);
-}
+import _SyLoading from './src/index.vue'
+import { withInstall } from '../../main/utils/withInstall'
+_SyLoading.name = 'SyLoading'
+export const SyLoading = withInstall(_SyLoading)
+export default SyLoading

package/packages/loading/{Loading1.vue → src/Loading1.vue}

@@ -8,8 +8,8 @@
 
 <script>
 export default {
-    name: "SyLoading1",
-};
+    name: 'SyLoading1'
+}
 </script>
 
 <script lang="ts" setup></script>

package/packages/loading/{Loading2.vue → src/Loading2.vue}

@@ -6,16 +6,16 @@
 
 <script lang="ts">
 export default {
-    name: "SyLoading2",
-};
+    name: 'SyLoading2'
+}
 </script>
 
 <script lang="ts" setup>
-const props = defineProps({
+defineProps({
     size: {
-        default: 1,
-    },
-});
+        default: 1
+    }
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/loading/src/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="sy-loading">
+        <component :is="loadingType" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Component } from 'vue'
+import SyLoading1 from './Loading1.vue'
+import SyLoading2 from './Loading2.vue'
+
+defineOptions({ name: 'SyLoading' })
+// 定义 props
+const props = defineProps<{
+    type: number
+}>()
+
+// 组件映射表
+const loadingComponents: Record<string, Component> = {
+    '1': SyLoading1,
+    '2': SyLoading2
+}
+
+// 根据 props 动态确定渲染的组件
+const loadingType = computed(() => {
+    return loadingComponents[props.type] || SyLoading1 // 默认返回 SyLoading1
+})
+</script>
+
+<style lang="scss" scoped>
+.SyLoading {
+    display: inline-block;
+    .loadAni {
+        pointer-events: none;
+    }
+}
+</style>

package/packages/message/index.ts

@@ -0,0 +1,128 @@
+import { createApp, reactive, h } from 'vue'
+import type { App } from 'vue'
+import MessageProvider from './src/index.vue'
+
+type MsgType = 'info' | 'success' | 'warning' | 'error'
+interface MsgOptions {
+    message: string
+    type?: MsgType
+    duration?: number // ms
+    icon?: string
+}
+
+let seed = 1
+
+class MessageService {
+    private container!: HTMLElement
+    private vm!: App<Element>
+    private state = reactive<{ list: any[] }>({ list: [] })
+
+    private ensureMount() {
+        if (this.vm) return
+        this.container = document.createElement('div')
+        document.body.appendChild(this.container)
+        this.vm = createApp({
+            render: () =>
+                h(MessageProvider, {
+                    messages: this.state.list,
+                    onClose: (id: number) => this.close(id),
+                    onPause: (id: number) => this.pause(id),
+                    onResume: (id: number) => this.resume(id)
+                })
+        })
+        this.vm.mount(this.container)
+    }
+
+    open(options: MsgOptions) {
+        // todo : 可添加多条提示框
+        // this.state.list = []
+        if (this.state.list.length > 0) {
+            this.state.list.shift()
+        }
+        this.ensureMount()
+        const id = seed++
+        const opts = Object.assign({ type: 'info', duration: 3000 }, options)
+        console.log('🚀 ~ open ~ opts:', opts)
+        const item: any = {
+            id,
+            message: opts.message,
+            type: opts.type,
+            duration: opts.duration,
+            icon: opts.icon || '',
+            startAt: Date.now(),
+            remaining: opts.duration,
+            timer: null
+        }
+        this.state.list.push(item)
+        this.startTimer(item)
+        return {
+            id,
+            close: () => this.close(id)
+        }
+    }
+
+    private startTimer(item: any) {
+        if (!item.duration || item.duration <= 0) return
+        item.startAt = Date.now()
+        item.timer = window.setTimeout(() => {
+            this.close(item.id)
+        }, item.remaining)
+    }
+    pause(id: number) {
+        const item = this.state.list.find((i) => i.id === id)
+        if (!item || !item.timer) return
+        clearTimeout(item.timer)
+        const elapsed = Date.now() - (item.startAt || Date.now())
+        item.remaining = Math.max(0, item.remaining - elapsed)
+        item.timer = null
+    }
+    resume(id: number) {
+        const item = this.state.list.find((i) => i.id === id)
+        if (!item || item.timer) return
+        this.startTimer(item)
+    }
+
+    close(id: number) {
+        const idx = this.state.list.findIndex((i) => i.id === id)
+        if (idx !== -1) {
+            const itm = this.state.list[idx]
+            this.state.list.splice(idx, 1)
+            if (itm.onClose)
+                try {
+                    itm.onClose()
+                } catch {}
+        }
+    }
+}
+
+// 实例
+const service = new MessageService()
+
+// 函数式调用（核心：直接 SyMessage('xxx')）
+function SyMessage(options: string | MsgOptions) {
+    console.log('🚀 ~ SyMessage ~ options:', options)
+    if (typeof options === 'string') {
+        return service.open({ message: options })
+    } else {
+        return service.open(options)
+    }
+}
+
+// 附加静态方法
+SyMessage.info = (msg: string | MsgOptions) =>
+    service.open(typeof msg === 'string' ? { message: msg, type: 'info' } : msg)
+SyMessage.success = (msg: string | MsgOptions) =>
+    service.open(
+        typeof msg === 'string' ? { message: msg, type: 'success' } : msg
+    )
+SyMessage.warning = (msg: string | MsgOptions) =>
+    service.open(
+        typeof msg === 'string' ? { message: msg, type: 'warning' } : msg
+    )
+SyMessage.error = (msg: string | MsgOptions) =>
+    service.open(
+        typeof msg === 'string' ? { message: msg, type: 'error' } : msg
+    )
+
+export { SyMessage }
+export default SyMessage

package/packages/message/src/index.vue

@@ -0,0 +1,177 @@
+<template>
+    <div class="sy-message-root" aria-live="polite">
+        <transition-group
+            name="sy-message-fade"
+            tag="div"
+            class="sy-message-root-list"
+        >
+            <div
+                v-for="m in messages"
+                :key="m.id"
+                :class="['sy-message', 'sy-message--' + m.type]"
+                @mouseenter="pause(m.id)"
+                @mouseleave="resume(m.id)"
+            >
+                <div class="sy-message__content">
+                    <slot name="icon">
+                        <span class="sy-message__icon" v-if="m.icon">
+                            {{ m.icon }}
+                        </span>
+                    </slot>
+                    <div class="sy-message__text" v-html="m.message"></div>
+                    <!-- <button class="sy-message__close" @click="close(m.id)">
+                        ×
+                    </button> -->
+                </div>
+            </div>
+        </transition-group>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface MessageItem {
+    id: number
+    message: string
+    type: 'info' | 'success' | 'warning' | 'error'
+    duration: number // ms
+    onClose?: () => void
+    timer?: number | null
+    remaining?: number
+    startAt?: number
+    icon?: string
+}
+
+const props = defineProps<{ messages: MessageItem[] }>()
+const emit = defineEmits(['close', 'pause', 'resume'])
+
+const messages = props.messages as MessageItem[]
+
+// function close(id: number) {
+//     emit('close', id)
+// }
+function pause(id: number) {
+    console.log('pause')
+
+    emit('pause', id)
+}
+function resume(id: number) {
+    console.log('resume')
+
+    emit('resume', id)
+}
+</script>
+
+<style scoped lang="scss">
+.sy-message-root {
+    position: fixed;
+    top: 0px;
+    left: 0;
+    right: 0px;
+    margin: auto;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    // width: fit-content;
+    transition: all 0.2s ease-in-out;
+    // border: 1px solid red;
+    /* position: relative; */
+    // height: 200px;
+}
+.sy-message {
+    background: #fff;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+    border-radius: 0 0 8px 8px;
+    padding: 10px 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    margin: auto;
+    left: 0;
+    right: 0;
+    // width: 100%;
+    position: absolute;
+    width: fit-content;
+}
+.sy-message__content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    // width: 100%;
+    width: fit-content;
+}
+.sy-message__icon {
+    font-weight: 700;
+    margin-right: 6px;
+}
+.sy-message__text {
+    flex: 1;
+    line-height: 1.2;
+    word-break: break-word;
+    color: white;
+}
+.sy-message__close {
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: 16px;
+    padding: 0 6px;
+}
+
+.sy-message--success {
+    background: #67c23a;
+}
+.sy-message--info {
+    background: #909399;
+}
+.sy-message--warning {
+    background: #e6a23c;
+}
+.sy-message--error {
+    background: #f56c6c;
+}
+
+.sy-message-root-list {
+    // background-color: #f9f9f9;
+    // border: 1px solid #ddd;
+    // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.sy-message-fade-enter-from,
+.sy-message-fade-leave-to {
+    opacity: 0;
+    transform: translateY(-20px);
+}
+.sy-message-fade-enter-active,
+.sy-message-fade-leave-active {
+    transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    // position: absolute;
+
+    /* width: 100%; */
+}
+
+.sy-message-fade-move {
+    transition: transform 240ms ease;
+}
+// .sy-message-fade-leave-active {
+//     position: absolute !important;
+// }
+
+// .sy-message-fade {
+//     transform: translateY(-20px);
+// }
+
+// .sy-message-fade-enter,
+// 	.sy-message-fade-leave-to
+// 	/* .sy-message-fade-leave-active for below version 2.1.8 */ {
+//     opacity: 0;
+//     transform: translateY(-20px);
+// }
+
+.sy-message-fade-leave-active {
+    position: absolute;
+}
+</style>

package/packages/message-box/index.ts

@@ -0,0 +1,59 @@
+import { createApp, h } from 'vue'
+import MessageBox from './src/index.vue'
+
+export interface DialogOptions {
+    title?: string
+    message?: string
+    confirmText?: string
+    cancelText?: string
+    inputPlaceholder?: string
+    inputValue?: string
+    icon?: 'tip' | 'warning' | 'error'
+}
+
+function mountDialog(props: any) {
+    return new Promise((resolve, reject) => {
+        const container = document.createElement('div')
+        document.body.appendChild(container)
+        const app = createApp({
+            render() {
+                return h(MessageBox, {
+                    ...props,
+                    // 当用户点击后，组件内部会先触发 requestClose（可选），并把 visible 设为 false，
+                    // 等动画结束后会触发 closed，此时我们才 resolve/reject 并卸载。
+                    onRequestClose: () => {
+                        // 可选：在这里做一些即时响应（比如记录日志），但不要卸载
+                        // console.log('requestClose', r)
+                    },
+                    onClosed: (r: any) => {
+                        // r = { type: 'confirm'|'cancel', value?: any } 或 null
+                        if (r?.type === 'confirm') {
+                            resolve(r.value === undefined ? true : r.value)
+                        } else {
+                            reject(new Error('cancel'))
+                        }
+                        // 关闭后立即卸载（因为 after-leave 已执行，动画已完成）
+                        app.unmount()
+                        container.remove()
+                    }
+                })
+            }
+        })
+        app.mount(container)
+    })
+}
+
+const SyMessageBox = {
+    alert(message: string, title = '提示', options: DialogOptions = {}) {
+        return mountDialog({ ...options, type: 'alert', message, title })
+    },
+    confirm(message: string, title = '确认', options: DialogOptions = {}) {
+        return mountDialog({ ...options, type: 'confirm', message, title })
+    },
+    prompt(message: string, title = '输入', options: DialogOptions = {}) {
+        return mountDialog({ ...options, type: 'prompt', message, title })
+    }
+}
+
+export { SyMessageBox }
+export default SyMessageBox

package/packages/message-box/src/assets/error.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="106" viewBox="0 0 116 106">
+  <image id="矢量智能对象" width="116" height="106" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAABqCAYAAABtRnXMAAAIyElEQVR4nO2df6wcVRXHP295PKDQ1woUH7SvgkhFCFK1QIWKSCBFUEGMIJCgkVgEArxCgJYfZoOIQq20BALa8s9LtDHyDwQiCAFRyo+mkGKamIDFhLZaQvzDUgSqUnLL2ZdlO7s7M/ecmTPLfpIX2rLvzJ357r0z99zvnDvwKlPpIQ4CTgNOAo4GDgEmt5zeVuBlYC3wBPAH4N9VvQTj9bEP/X2wtJboMQB8DbgcOEX+3olhYI78/BDYDjwA3AX8qeoXo+agDTF8GXgReBA4NYWYSQwB3waeAp4G5ro92xRUVdB9gJXAH4HZinFPAJ4F7pZjVI4qCjoLWANcZHiMS+UYswyPYULVBD0WWA18poBjhWM8V7UhuEqCfh54DNi/wGN+DHhUvkiVoCqCjgIPyxNq0YRjPgTMLPcSpKMKgu4O3A+MlNiGacDvqjDNq4KgNzkZ8kIbrnHQjo54F/RQYJGDdjS4UbJRbvEu6G0y5HphEnCro/bsgmdB5wHfctCOVi70/NTrVdDQrmUO2pHEgLQtT5rRHK+Cfg/4goN2tOOLwPkeG+ZR0GHv9ykh3N/3dtGSJjwKegPwcQft6MZ04DpvjfIm6KeAhQ7akZYwLz3YU4O8CbrU2TSlG3vK0OsGT4KGBepvOGhHVs4BTvTSGC+5yUGjacoWYD3wOrCH5IPDsth+ysdZLk/l7ynHzYwXQYO35wilWJuBXwK/Bl5N+P9hVPqsJC0uURJ3tiy4r1CIFYWHIXdf4GaFOKF3LBGXwY/biNn43DpJ+ocHml8AOxSO/xNgikKcKDwIerMsJMfwNnA6cC3wnwxxtgFXA1+XGDFMky9JqZQt6JEy3MYQetzZ4izIy8MyBMfeA68o24dUtqDhQWi3yBhhmH1EoS2/l+E3ht0VYkRRpqBnijE6hn8Btyi26RYFF/0ZwHyl9mSmLEGHJIkQy7jcB7UIYv5WIdaysmYQZQm6UNwIsWgMta08pRDjcOAy3WalowxBRyQBr0G7qUkMWZ6SO1E3SGB0pQxBb014Iywv/y2++amZqnx/T0XRgs6RxWsttL4YVvwAOKrIAxYp6IDkPDWtG/sqxmoQO41qjbVcMV5XihT0O8DxyjGnKcfDoNd/Bfimcsy2FCVosD/ebhDXoodOMoi5VFZ7zClK0JBjnWEQ1+IpcsggZigNcJVB3F0oQtCZht4bix4au1DQjuuBA41iT1CEoLeLVcMCix5qNXcMb4T/1Cj2BNaCBvf7uYbxLS6+Ra9vYO66txQ0xL7TMD5GL/9aCmruurcU9PvA5wzjY3TxLQXF2nVvJeiwWDKsqdI9tBkz172VoMGKcYBR7GYselMRgpq57i0EPQy40iBuEoPKdRcGCzR6mbjuLQQt2v2umf4rssKKieteW9D54qArEs1ht+iXpNRd95qCDpZkkNIUtIxKK8s1ddAU9FJF93sWNB9iihxyG8zWLHOnJeh+YrkoA80eWlaFEzXXvZagGu73vGj2qjJ6KJquew1Bg8XiYoU4edEUocxqZSquew1BNdzvMWgOuUUkQ9qh4rqPFfQs4OTYRkSiKWhZt40G0a77GEH3KPs9DkHzKdc6MZ+GKNd9jKALxVpRNr3UQ4l13ecVVNP9Hotm6s9DDyXGdZ9X0J85KrI/WSl3PMVREZHcrvs8J3CMWCk8oXEfLfw9lC7kct1nFdTC/a6BxrDr4f7ZTC7XfVZBzxMLhTcOU2jPJx2eV2bXfRZBrdzvGmhsxnN0+aeRSCbXfRZBF4l1wiMnKbTpq07PLZPrPq2gn3BeQH9e5JD5adkXxiupXfdpBbV0v2swEFm8qqylv7Skdt2nEfREsUp454Kc06nvyquO3knluu8maK3oF1YjuQ8YS/lFrUn6svT6fClJ5brvduIXKW/naE1Iat8BvCBtT0rljUjRxr/I4kKV6vN2dd132rI5pMJeMXpLuihCqbdNwEZ59D+gKnuYdWCzPMS9RcKWzZ166E0VFxM5v5my0eucHhCTbq77doLOEktEH5+0dd23E7Rq95aPGm1d90mCzhcrRB/fJLruWwW1qv3ex4blF9aXfUjDVkEvEwtEn2qwi+u+edoS/vB3+W8v8Q+ZuiCldVzv/5mDN8IGRuP1sa209NCre0jMsL3HYpmmhMf84+RnuvzbIvlMLzBN6kDtpNFDJ8nk24tJKoYV8uV8s0uM4EX6ObDA9+mkIhRuHh2vj73Z6KFn9oiYi0WgbmIin7lYfqfqTBE3ycSQa1lLqChWihsxK+F3ftUD579TwzDkhuz9Vke2zDxskexWmp6ZRBh+Xy75ZaVYQjHovWpSdKLKYiJLfHnFRH636vPvkNmbXFOuIlIWv1E4rkaMshmuGdWHLZIwz3xN4XgbJVaVmVTrgST8phSfSctG26aaU6s53im/T3Z2C2L+v+IXTrNStkXV7SLZHgTdXvGTCLnZUYU4o46N5Gl5t6awb6YHNMqVnlf9y8BbIbEwrLAjX9n0Ewsf7FI8VJOLUHVBR2Qf0bwsqbiYgfXj9bH/1UTZxx00KJaQaF+UI8Z1JddZ0uIBmqYsqyp/Oh8Q3v+4N2Uqc2/5bJ6Evkd2Zroa66FDMkGvug+3wRZx0K9KSBaMygPQwh4YZhs8M14fC97jiXo428W6ab6vSEGMiM3xtibnPCJm1eeaSUwU2GgucHQXcHkPem5m9KiIDdY073TcnPbbVmCt+D46hCzfgvH62I4kQQP3K20q3qcYlozXx15qPlJSYj7Ux/lrXxD3rAZ+1NrIJEFDouE0eW2tj082SLmbXfYgb7d09ppUFtFYOO6jywbR5o2kqJ3WQv8mWyyv6QvihrXAlzot6ndb3N4sbzgtkxRhn/K4R8T8Z6cWpHErvCtZlfB+//N9QQtnvVQND9uovNPt4FnsJ0HMubJz0iP9HmvOc1JuJ5SsezLtwfKUwn5IfqbLi8EnSxWuQ2JKa3/E2SHpyXXAn4EHZX02MzECbJZXCFpfI/BWetU7eiMd8D59bjJHWmStCAAAAABJRU5ErkJggg=="/>
+</svg>

package/packages/message-box/src/assets/tip.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="152" height="112" viewBox="0 0 152 112">
+  <image id="矢量智能对象" width="152" height="112" xlink:href="data:img/png;base64,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"/>
+</svg>

package/packages/message-box/src/assets/warning.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="106" viewBox="0 0 116 106">
+  <image id="矢量智能对象" width="116" height="106" xlink:href="data:img/png;base64,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"/>
+</svg>