@kevisual/kv-login 0.1.0 → 0.1.1

package/src/pages/kv-message.ts

@@ -1,351 +0,0 @@
-import { html, render, TemplateResult } from 'lit-html'
-
-export interface KvMessageOptions {
-  type?: 'success' | 'error' | 'loading'
-  message: string
-  duration?: number
-  closable?: boolean
-  position?: 'center' | 'right'
-}
-
-class KvMessage extends HTMLElement {
-  private options: KvMessageOptions
-  private timer: number | null = null
-
-  constructor() {
-    super()
-    this.options = {
-      type: 'success',
-      message: '',
-      duration: 2000,
-      closable: true
-    }
-  }
-
-  connectedCallback() {
-    this.render()
-  }
-
-  setOptions(options: KvMessageOptions) {
-    this.options = { ...this.options, ...options }
-    this.render()
-  }
-
-  private render() {
-    const { type, message, closable } = this.options
-
-    const getTypeIcon = () => {
-      switch (type) {
-        case 'success':
-          return '✓'
-        case 'error':
-          return '✕'
-        case 'loading':
-          return html`<div class="loading-spinner"></div>`
-        default:
-          return ''
-      }
-    }
-
-    const template: TemplateResult = html`
-      <style>
-        :host {
-          display: block;
-          margin-bottom: 12px;
-          animation: slideIn 0.3s ease-out;
-        }
-
-        .message-container {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          padding: 12px 16px;
-          border-radius: 6px;
-          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-          background: white;
-          position: relative;
-          min-width: 300px;
-          max-width: 500px;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          font-size: 14px;
-          line-height: 1.4;
-        }
-
-        .message-container.success {
-          border-left: 4px solid #52c41a;
-        }
-
-        .message-container.error {
-          border-left: 4px solid #ff4d4f;
-        }
-
-        .message-container.loading {
-          border-left: 4px solid #1890ff;
-        }
-
-        .message-icon {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 16px;
-          height: 16px;
-          flex-shrink: 0;
-        }
-
-        .success .message-icon {
-          color: #52c41a;
-          font-weight: bold;
-        }
-
-        .error .message-icon {
-          color: #ff4d4f;
-          font-weight: bold;
-        }
-
-        .loading .message-icon {
-          color: #1890ff;
-        }
-
-        .loading-spinner {
-          width: 14px;
-          height: 14px;
-          border: 2px solid #f3f3f3;
-          border-top: 2px solid #1890ff;
-          border-radius: 50%;
-          animation: spin 1s linear infinite;
-        }
-
-        .message-content {
-          flex: 1;
-          color: #333;
-        }
-
-        .message-close {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 16px;
-          height: 16px;
-          cursor: pointer;
-          color: #999;
-          background: none;
-          border: none;
-          font-size: 12px;
-          border-radius: 50%;
-          transition: all 0.2s;
-        }
-
-        .message-close:hover {
-          color: #666;
-          background: #f0f0f0;
-        }
-
-        @keyframes slideIn {
-          from {
-            transform: translateX(100%);
-            opacity: 0;
-          }
-          to {
-            transform: translateX(0);
-            opacity: 1;
-          }
-        }
-
-        @keyframes slideOut {
-          from {
-            transform: translateX(0);
-            opacity: 1;
-          }
-          to {
-            transform: translateX(100%);
-            opacity: 0;
-          }
-        }
-
-        @keyframes spin {
-          0% { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-
-        .removing {
-          animation: slideOut 0.3s ease-out forwards;
-        }
-      </style>
-
-      <div class="message-container ${type}">
-        <div class="message-icon">
-          ${getTypeIcon()}
-        </div>
-        <div class="message-content">${message}</div>
-        ${closable ? html`
-          <button class="message-close" @click=${() => this.remove()}>&times;</button>
-        ` : ''}
-      </div>
-    `
-
-    render(template, this)
-
-    if (type !== 'loading' && this.options.duration && this.options.duration > 0) {
-      this.setTimer()
-    }
-  }
-
-  private setTimer() {
-    if (this.timer) {
-      clearTimeout(this.timer)
-    }
-
-    this.timer = window.setTimeout(() => {
-      this.remove()
-    }, this.options.duration)
-  }
-
-  remove() {
-    if (this.timer) {
-      clearTimeout(this.timer)
-      this.timer = null
-    }
-
-    this.classList.add('removing')
-
-    setTimeout(() => {
-      if (this.parentNode) {
-        this.parentNode.removeChild(this)
-      }
-    }, 300)
-  }
-
-  disconnectedCallback() {
-    if (this.timer) {
-      clearTimeout(this.timer)
-      this.timer = null
-    }
-  }
-}
-
-customElements.define('kv-message', KvMessage)
-
-export class KvMessageManager {
-  private static instance: KvMessageManager
-  private container: HTMLElement | null = null
-  private defaultPosition: 'center' | 'right' = 'center'
-
-  static getInstance(): KvMessageManager {
-    if (!KvMessageManager.instance) {
-      KvMessageManager.instance = new KvMessageManager()
-    }
-    return KvMessageManager.instance
-  }
-
-  setDefaultPosition(position: 'center' | 'right') {
-    this.defaultPosition = position
-  }
-
-  private getContainer(position?: 'center' | 'right'): HTMLElement {
-    const finalPosition = position || this.defaultPosition
-
-    if (!this.container) {
-      this.container = document.getElementById('messages')
-      if (!this.container) {
-        this.container = document.createElement('div')
-        this.container.id = 'messages'
-
-        if (finalPosition === 'center') {
-          this.container.style.cssText = `
-            position: fixed;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 9999;
-            display: flex;
-            gap: 8px;
-            flex-direction: column;
-            align-items: center;
-            pointer-events: none;
-          `
-        } else {
-          this.container.style.cssText = `
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 9999;
-            display: flex;
-            gap: 8px;
-            flex-direction: column;
-            align-items: flex-end;
-            pointer-events: none;
-          `
-        }
-
-        document.body.appendChild(this.container)
-      }
-    }
-    return this.container
-  }
-
-  show(options: KvMessageOptions): KvMessage {
-    const container = this.getContainer(options.position)
-
-    const message = document.createElement('kv-message') as KvMessage
-    message.setOptions(options)
-
-    message.style.cssText = 'pointer-events: auto;'
-
-    container.appendChild(message)
-
-    return message
-  }
-
-  success(message: string, options?: { duration?: number; position?: 'center' | 'right'; closable?: boolean }): KvMessage {
-    return this.show({
-      type: 'success',
-      message,
-      duration: options?.duration || 2000,
-      position: options?.position,
-      closable: options?.closable
-    })
-  }
-
-  error(message: string, options?: { duration?: number; position?: 'center' | 'right'; closable?: boolean }): KvMessage {
-    return this.show({
-      type: 'error',
-      message,
-      duration: options?.duration || 3000,
-      position: options?.position,
-      closable: options?.closable
-    })
-  }
-
-  loading(message: string, options?: { position?: 'center' | 'right'; closable?: boolean }): KvMessage {
-    return this.show({
-      type: 'loading',
-      message,
-      duration: 0,
-      position: options?.position,
-      closable: options?.closable
-    })
-  }
-
-  remove(message: KvMessage) {
-    message.remove()
-  }
-
-  clear() {
-    const container = this.getContainer()
-    const messages = container.querySelectorAll('kv-message')
-    messages.forEach(message => {
-      (message as KvMessage).remove()
-    })
-  }
-}
-
-export const createMessage = () => KvMessageManager.getInstance()
-
-// 将 createMessage 暴露到全局，以便 HTML 中的 JavaScript 可以使用
-declare global {
-  interface Window {
-    createMessage: typeof createMessage
-  }
-}
-
-window.createMessage = createMessage

package/vite.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from 'vite';
-
-const idDev = process.env.NODE_ENV === 'development';
-export default defineConfig({
-  base: idDev ? '/' : '/root/kv-login-test/',
-  server: {
-    proxy: {
-      '/api': {
-        target: 'https://kevisual.xiongxiao.me',
-        changeOrigin: true,
-        secure: false,
-      }
-    }
-  }
-});

package/web.html

@@ -1,93 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>KvMessage Demo</title>
-  <script type="importmap">
-    {
-      "imports": {
-        "@kevisual/kv-login": "https://esm.kevisual.cn/@kevisual/kv-login"
-      }
-    }
-  </script>
-  <script type="module">
-    import '@kevisual/kv-login';
-  </script>
-  <style>
-    body {
-      margin: 0;
-      padding: 20px;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    }
-
-    .demo-container {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 20px;
-      padding: 40px 20px;
-    }
-
-    .button-group {
-      display: flex;
-      gap: 12px;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    .demo-button {
-      padding: 10px 20px;
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 14px;
-      transition: all 0.2s;
-    }
-
-    .demo-button.success {
-      background: #52c41a;
-      color: white;
-    }
-
-    .demo-button.success:hover {
-      background: #389e0d;
-    }
-
-    .demo-button.error {
-      background: #ff4d4f;
-      color: white;
-    }
-
-    .demo-button.error:hover {
-      background: #cf1322;
-    }
-
-    .demo-button.loading {
-      background: #1890ff;
-      color: white;
-    }
-
-    .demo-button.loading:hover {
-      background: #096dd9;
-    }
-
-    .login-section {
-      text-align: center;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="demo-container">
-    <div class="login-section">
-      <h2>登录组件</h2>
-      <kv-login method="password">
-        <div id="weixinLogin"></div>
-      </kv-login>
-    </div>
-  </div>
-</body>
-
-</html>