sykj 0.1.8 → 0.2.0

package/packages/message-box/src/index.vue

@@ -0,0 +1,195 @@
+<template>
+    <teleport to="body">
+        <!-- 单一外层 transition：mask + box 同步动画，使用 appear 支持首次入场 -->
+        <transition name="sy-fade" appear @after-leave="onAfterLeave">
+            <div v-if="visible" class="sy-mask" role="dialog" aria-modal="true">
+                <div class="sy-box">
+                    <div class="sy-header" v-if="title">
+                        <div class="icon">
+                            <img
+                                v-if="props.icon"
+                                :src="getIcons(props.icon)"
+                                :alt="props.icon"
+                            />
+                        </div>
+                        {{ title }}
+                    </div>
+                    <div class="sy-content">
+                        <div
+                            v-if="message"
+                            class="sy-message"
+                            v-html="message"
+                        ></div>
+                        <input
+                            v-if="type === 'prompt'"
+                            v-model="inputValue"
+                            class="sy-input"
+                            :placeholder="inputPlaceholder"
+                        />
+                    </div>
+                    <div class="sy-footer">
+                        <!-- <button
+                            v-if="type !== 'alert'"
+                            class="sy-btn sy-btn--cancel"
+                            @click="onCancel"
+                        >
+                            {{ cancelText }}
+                        </button> -->
+                        <sy-button
+                            v-if="type !== 'alert'"
+                            @click="onCancel"
+                            type="info"
+                        >
+                            {{ cancelText }}
+                        </sy-button>
+                        <sy-button type="primary" @click="onConfirm">
+                            {{ confirmText }}
+                        </sy-button>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { SyButton } from '../../button/index'
+
+interface Props {
+    type?: 'alert' | 'confirm' | 'prompt'
+    title?: string
+    message?: string
+    confirmText?: string
+    cancelText?: string
+    inputPlaceholder?: string
+    inputValue?: string
+    icon?: 'tip' | 'warning' | 'error'
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['requestClose', 'closed'])
+
+const visible = ref(true)
+const inputValue = ref(props.inputValue || '')
+const closeResult = ref<{ type: 'confirm' | 'cancel'; value?: any } | null>(
+    null
+)
+
+const confirmText = props.confirmText || '确定'
+const cancelText = props.cancelText || '取消'
+
+function onConfirm() {
+    closeResult.value = { type: 'confirm', value: inputValue.value ?? true }
+    visible.value = false
+    emit('requestClose', closeResult.value) // optional: notify service
+}
+function onCancel() {
+    closeResult.value = { type: 'cancel' }
+    visible.value = false
+    emit('requestClose', closeResult.value)
+}
+
+// 当 leave 完成（动画播完）时触发
+function onAfterLeave() {
+    emit('closed', closeResult.value)
+}
+
+function getIcons(icon: string) {
+    return new URL(`./assets/${icon}.png`, import.meta.url).href
+}
+</script>
+
+<style scoped lang="scss">
+/* 遮罩 */
+.sy-mask {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    color: black;
+}
+
+/* 弹窗主体 */
+.sy-box {
+    min-width: 60%;
+    max-width: 80%;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+    padding: 30px 20px;
+}
+.sy-header {
+    font-weight: 600;
+    margin-bottom: 8px;
+    /* font-size: 16px; */
+    font-size: 1.6rem;
+    text-align: center;
+    letter-spacing: 0.4rem;
+
+    .icon {
+        // border: 1px solid red;
+        // height: 60px;
+        // padding: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        padding-bottom: 20px;
+        img {
+            // width: 60px;
+            height: 60px;
+            object-fit: contain;
+        }
+    }
+}
+.sy-content {
+    margin-bottom: 14px;
+    text-align: center;
+    font-size: 1.2rem;
+    opacity: 0.8;
+    padding: 10px 0;
+}
+.sy-message {
+    margin-bottom: 8px;
+    color: #333;
+}
+.sy-input {
+    width: 100%;
+    padding: 6px 10px;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+}
+input::placeholder {
+    color: #00000090;
+}
+.sy-footer {
+    display: flex;
+    justify-content: center;
+    gap: 28px;
+}
+
+/* --- transition (外层 transition 控制遮罩，同时通过后代选择器让 box 做缩放) --- */
+/* mask 的透明度动画 */
+.sy-fade-enter-from,
+.sy-fade-leave-to {
+    opacity: 0;
+}
+.sy-fade-enter-active,
+.sy-fade-leave-active {
+    transition: opacity 250ms ease;
+}
+
+/* 同步为内层 sy-box 添加缩放效果（通过选择器在 transition 的不同阶段作用到子元素） */
+.sy-fade-enter-from .sy-box,
+.sy-fade-leave-to .sy-box {
+    transform: scale(0.92);
+    opacity: 0;
+}
+.sy-fade-enter-active .sy-box,
+.sy-fade-leave-active .sy-box {
+    transition: all 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+</style>

package/types/component.d.ts

@@ -1,7 +1,13 @@
-import Vue from "vue";
+import { App } from 'vue'
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}
 
 /** ElementUI component common definition */
-export declare class ElementUIComponent extends Vue {
+export declare class ElementUIComponent {
     /** Install component into Vue */
-    static install(vue: typeof Vue): void;
+    static install(app: App): void
 }

package/types/global.d.ts

@@ -1,11 +1,11 @@
 // types/global.d.ts
 
 // 确保 TypeScript 识别这是一个模块
-export {};
+export {}
 
 declare global {
     interface Window {
-        Vue: any;
-        $sy: any;
+        Vue: any
+        $sy: any
     }
 }

package/types/index.d.ts

@@ -1,4 +1,4 @@
 // types/global.d.ts
 
 // 确保 TypeScript 识别这是一个模块
-export {};
+export {}

package/lib/focus.ts

@@ -1,40 +0,0 @@
-// import { useKeyStore } from "./store";
-// console.log("🚀 ~ file: focus.ts:3 ~ useKeyStore:", useKeyStore)
-const globalKey = window.$sy.key;
-// const keyStore = useKeyStore()
-
-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);
-        globalKey.open();
-        globalKey.currentElement = event.target;
-    }
-});
-
-document.addEventListener("focusout", (event) => {
-    globalKey.close();
-
-    // st = setTimeout(() => {
-    //     // globalKey.currentElement = null;
-    // }, 100);
-    // const target = event.target as HTMLElement;
-    // if (target?.tagName === "INPUT" || target?.tagName === "TEXTAREA") {
-    //     // window.showKeyboard()
-    //     //
-    // }
-});
-
-// 是否展示输入法
-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/lib/store.ts

@@ -1,5 +0,0 @@
-(window.globalThis as any).$sy = {
-    key: {
-        show_keyboard: false,
-    },
-};