@iftc/yete 0.0.1-alpha.3 → 0.0.1-alpha.5

package/function/md2html.js

@@ -0,0 +1,6 @@
+const { marked } = require('marked');
+module.exports = function (md) {
+    if (md) {
+        return marked(md);
+    }
+}

package/index.js

@@ -12,6 +12,49 @@ class YeteError extends Error {
         this.name = 'YeteError';
     }
 }
+/**
+ * 检查浏览器兼容性
+ * @throws {YeteError} 如果不兼容或无法判断则抛出错误
+ */
+(function checkBrowserCompatibility() {
+    const ua = navigator.userAgent;
+    let browser = null;
+    let version = 0;
+    if (/Edg\/(\d+)/.test(ua)) {
+        browser = 'Edge';
+        version = parseInt(ua.match(/Edg\/(\d+)/)[1], 10);
+    } else if (/Chrome\/(\d+)/.test(ua) && !/Chromium/.test(ua)) {
+        browser = 'Chrome';
+        version = parseInt(ua.match(/Chrome\/(\d+)/)[1], 10);
+    } else if (/Firefox\/(\d+)/.test(ua)) {
+        browser = 'Firefox';
+        version = parseInt(ua.match(/Firefox\/(\d+)/)[1], 10);
+    } else if (/Version\/(\d+)/.test(ua) && /Safari/.test(ua)) {
+        browser = 'Safari';
+        version = parseInt(ua.match(/Version\/(\d+)/)[1], 10);
+    }
+    console.log(browser, version);
+    const minVersions = {
+        'Chrome': 87,
+        'Firefox': 140,
+        'Safari': 18.4,
+        'Edge': 87
+    };
+    let isCompatible = false;
+    if (browser && minVersions[browser] !== undefined) {
+        if (version >= minVersions[browser]) {
+            isCompatible = true;
+        }
+    }
+    if (!isCompatible) {
+        const msg = browser
+            ? `您的浏览器版本过低 (${browser} ${version})，请使用 Chrome 71+, Firefox 69+, Safari 12.1+ 或 Edge 79+。`
+            : `无法识别您的浏览器环境，请使用现代浏览器 (Chrome, Firefox, Safari, Edge)。`;
+
+        alert(msg);
+        console.error(new YeteError('Browser incompatible'));
+    }
+})();
 /**
  * 页面基类
  * @example
@@ -67,6 +110,10 @@ let isStarted = false;
 let custom404Page = null;
 let custom502Page = null;
 
+let searchParams = new URLSearchParams("");
+
+const hostname = location.hostname;
+
 /**
  * 导出的对象
  */
@@ -230,7 +277,7 @@ const obj = {
             }
             document.body.innerHTML = "<center><h1>404 Not Found</h1><p>Power By Yete</p></center>";
             obj.emit('page-change', new obj.YeteEvent("page-change", { path, isNotFound: true }));
-            throw new YeteError("The page not found.");
+            console.error(new YeteError("The page not found."));
         }
     },
     /**
@@ -365,8 +412,693 @@ const obj = {
             throw new YeteError("The page not found.");
         }
     },
+    /**
+     * HTTP 请求
+     * @description HTTP 请求封装，提供更便捷的方式进行 HTTP 请求
+     * @example 
+     * const res = await HTTP.GET("https://example.com");
+     * const data = await res.json();
+     */
+    HTTP: class {
+        constructor() { }
+        /**
+         * GET 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.GET("https://example.com");
+         * const data = await res.json();
+         */
+        static async GET(url, headers = {}) {
+            return await fetch(url, { headers });
+        }
+        /**
+         * POST 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.POST("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async POST(url, body, headers = {}) {
+            return await fetch(url, { method: "POST", body, headers });
+        }
+        /**
+         * PUT 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.PUT("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async PUT(url, body, headers = {}) {
+            return await fetch(url, { method: "PUT", body, headers });
+        }
+        /**
+         * DELETE 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.DELETE("https://example.com");
+         * const data = await res.json();
+         */
+        static async DELETE(url, headers = {}) {
+            return await fetch(url, { method: "DELETE", headers });
+        }
+        /**
+         * PATCH 请求
+         * @param {String} url 
+         * @param {Object} body 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.PATCH("https://example.com", { name: "Yete" });
+         * const data = await res.json();
+         */
+        static async PATCH(url, body, headers = {}) {
+            return await fetch(url, { method: "PATCH", body, headers });
+        }
+        /**
+         * HEAD 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.HEAD("https://example.com");
+         * const data = await res.json();
+         */
+        static async HEAD(url, headers = {}) {
+            return await fetch(url, { method: "HEAD", headers });
+        }
+        /**
+         * OPTIONS 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.OPTIONS("https://example.com");
+         * const data = await res.json();
+         */
+        static async OPTIONS(url, headers = {}) {
+            return await fetch(url, { method: "OPTIONS", headers });
+        }
+        /**
+         * TRACE 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.TRACE("https://example.com");
+         * const data = await res.json();
+         */
+        static async TRACE(url, headers = {}) {
+            return await fetch(url, { method: "TRACE", headers });
+        }
+        /**
+         * CONNECT 请求
+         * @param {String} url 
+         * @param {Object} headers 
+         * @returns {Promise<Response>}
+         * @example
+         * const res = await HTTP.CONNECT("https://example.com");
+         * const data = await res.json();
+         */
+        static async CONNECT(url, headers = {}) {
+            return await fetch(url, { method: "CONNECT", headers });
+        }
+        /**
+         * 读取流
+         * @param {Response} response 
+         * @param {Function} callback 
+         * @returns {Promise<void>}
+         * @example
+         * await HTTP.readStream(res, ({ chunk, done }) => { console.log(done, chunk); });
+         */
+        static async readStream(response, callback = ({ chunk, done }) => { console.log(done, chunk); }) {
+            if (!response.ok) {
+                throw new YeteError("Response is not ok.");
+            }
+            if (!response.body) {
+                throw new YeteError("Response body is not available.");
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder('utf-8');
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) {
+                        const finalChunk = decoder.decode();
+                        callback({ chunk: finalChunk || null, done: true });
+                        break;
+                    }
+                    const chunk = decoder.decode(value, { stream: true });
+                    callback({ chunk, done: false });
+                }
+            } catch (error) {
+                throw new YeteError(`Stream reading failed: ${error.message}`);
+            } finally {
+                reader.releaseLock();
+            }
+        }
+        /**
+         * 读取响应体
+         * @param {Response} response 
+         * @param {String} type 
+         * @returns {Promise<any>}
+         * @example
+         * const data = await HTTP.readBody(res);
+         */
+        static async readBody(response, type = "text") {
+            if (!response.ok) {
+                throw new YeteError("Response is not ok.");
+            }
+            if (!response.body) {
+                throw new YeteError("Response body is not available.");
+            }
+            switch (type) {
+                case "text":
+                    return await response.text();
+                case "json":
+                    return await response.json();
+                case "blob":
+                    return await response.blob();
+                case "arrayBuffer":
+                    return await response.arrayBuffer();
+                case "formData":
+                    return await response.formData();
+                default:
+                    throw new YeteError("Invalid type.");
+            }
+        }
+        /**
+         * 读取响应头
+         * @param {Response} response 
+         * @returns {Promise<Headers>}
+         * @example
+         * const headers = await HTTP.readHeaders(res);
+         */
+        static async readHeaders(response) {
+            return response.headers;
+        }
+    },
+    /**
+     * 获取 URL 参数
+     * @example
+     * const params = searchParams;
+     */
+    searchParams: function () {
+        return searchParams;
+    },
+    /**
+     * 加载 UI
+     * @description 可通过 URL 或 XML 字符串加载 UI
+     * @param {String} str 
+     * @returns {Promise<HTMLElement>}
+     * @example
+     * await loadUI("https://example.com/ui.xml");
+     * await loadUI(`<Yete><Text>Hello World</Text></Yete>`);
+     */
+    loadUI: async function (str) {
+        let isURL = false;
+        try {
+            new URL(str);
+            isURL = true;
+        } catch { }
+        if (isURL) {
+            const res = await fetch(str);
+            const text = await res.text();
+            return loadUI(text);
+        } else {
+            return loadUI(str);
+        }
+    },
+    /**
+     * 认证管理类
+     * @description 提供用户认证、令牌管理、授权验证等功能
+     */
+    Auth: class {
+        /**
+         * 构造函数
+         * @param {Object} options 配置选项
+         * @property {String} apiBaseUrl API 基础地址
+         * @property {String} tokenKey localStorage 中存储 token 的键名
+         */
+        constructor(options = {}) {
+            this.apiBaseUrl = options.apiBaseUrl || 'https://iftc.koyeb.app/api/auth';
+            this.tokenKey = options.tokenKey || 'auth_token';
+            this.checkInterval = options.checkInterval || 2000;
+            this.onAuthSuccess = options.onAuthSuccess || null;
+            this.onAuthFail = options.onAuthFail || null;
+        }
+
+        /**
+         * 获取存储的 auth_token
+         * @returns {String|null}
+         * @example
+         * const token = auth.getAuthToken();
+         */
+        getAuthToken() {
+            return localStorage.getItem(this.tokenKey);
+        }
+
+        /**
+         * 设置存储的 auth_token
+         * @param {String} token 
+         * @example
+         * auth.setAuthToken('your_token_here');
+         */
+        setAuthToken(token) {
+            localStorage.setItem(this.tokenKey, token);
+        }
+
+        /**
+         * 清除存储的 auth_token
+         * @example
+         * auth.clearAuthToken();
+         */
+        clearAuthToken() {
+            localStorage.removeItem(this.tokenKey);
+        }
+
+        /**
+         * 检查是否已授权
+         * @returns {Promise<Boolean>}
+         * @example
+         * if (auth.isAuthorized()) { ... }
+         */
+        async isAuthorized() {
+            return !!await cookieStore.get("ID");
+        }
+
+        /**
+         * 获取授权链接
+         * @param {String} redirectUrl 回调地址
+         * @returns {String}
+         * @example
+         * const url = auth.getAuthUrl(location.href);
+         */
+        getAuthUrl(redirectUrl) {
+            return `${this.apiBaseUrl}/token?redirect=${encodeURIComponent(redirectUrl)}`;
+        }
+
+        /**
+         * 发起授权请求
+         * @description 跳转到授权页面
+         * @param {String} redirectUrl 回调地址
+         * @example
+         * auth.requestAuth(location.href);
+         */
+        async requestAuth(redirectUrl) {
+            const url = this.getAuthUrl(redirectUrl);
+            const response = await fetch(url);
+            const json = await response.json();
+
+            if (json.code !== 200) {
+                throw new YeteError(json.msg || '获取授权令牌失败');
+            }
+
+            this.setAuthToken(json.data.token);
+            location.href = json.data.url;
+            return json;
+        }
+
+        /**
+         * 验证 auth_token 有效性
+         * @param {String} token 可选，不传则使用存储的 auth_token
+         * @returns {Promise<Boolean>}
+         * @example
+         * const isValid = await auth.verify();
+         */
+        async verify(token = null) {
+            const targetToken = token || this.getAuthToken();
+
+            if (!targetToken) {
+                throw new YeteError('未找到授权令牌');
+            }
+
+            const response = await fetch(`${this.apiBaseUrl}/verify?token=${targetToken}`);
+            const json = await response.json();
+
+            if (json.code === 200) {
+                await this.setCookie('ID', json.data.id, 365);
+                localStorage.setItem("ID", json.data.id);
+                return true;
+            }
+
+            return false;
+        }
+        /**
+         * 设置 cookie
+         * @param {String} name 键名
+         * @param {String} value 键值
+         * @param {Number} days 过期天数
+         */
+        async setCookie(name, value, days = 1) {
+            const expires = new Date();
+            expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+
+            try {
+                console.log(location.hostname);
+                await cookieStore.set({
+                    name,
+                    value,
+                    expires: expires.toISOString(),
+                    path: '/',
+                    domain: hostname,
+                    secure: true
+                });
+            } catch (error) {
+                console.warn('cookieStore not supported, falling back to document.cookie');
+                document.cookie = `${name}=${value}; expires=${expires.toUTCString()}; path=/`;
+            }
+        }
+
+        /**
+         * 获取 cookie
+         * @param {String} name 键名
+         * @returns {String|null}
+         */
+        async getCookie(name) {
+            try {
+                const cookies = await cookieStore.get(name);
+                return cookies ? cookies.value : null;
+            } catch (error) {
+                // 如果 cookieStore 不支持，降级到 document.cookie
+                console.warn('cookieStore not supported, falling back to document.cookie');
+                return this.getCookieFromDocument(name);
+            }
+        }
+
+        /**
+         * 从 document.cookie 获取 cookie（备用方案）
+         * @param {String} name 键名
+         * @returns {String|null}
+         */
+        getCookieFromDocument(name) {
+            const nameEQ = name + "=";
+            const ca = document.cookie.split(';');
+            for (let i = 0; i < ca.length; i++) {
+                let c = ca[i];
+                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                if (c.indexOf(nameEQ) === 0) {
+                    return c.substring(nameEQ.length, c.length);
+                }
+            }
+            return null;
+        }
+
+        /**
+         * 获取用户 ID
+         * @returns {String|null}
+         */
+        getUserId() {
+            return localStorage.getItem("ID");
+        }
+
+        /**
+         * 检查授权状态并等待授权完成
+         * @param {Function} callback 授权成功后的回调
+         * @param {Number} timeout 超时时间（毫秒）
+         * @returns {Promise<Object>}
+         * @example
+         * await auth.waitForAuth((userInfo) => {
+         *     console.log('用户 ID:', userInfo.id);
+         * });
+         */
+        async waitForAuth(callback, timeout = 60000) {
+            const url = new URL(location.href);
+            const authParam = url.searchParams.get('auth');
+
+            if (!authParam) {
+                throw new YeteError('缺少 auth 参数');
+            }
+
+            return new Promise((resolve, reject) => {
+                const startTime = Date.now();
+                const intervalId = setInterval(async () => {
+                    // 检查超时
+                    if (Date.now() - startTime > timeout) {
+                        clearInterval(intervalId);
+                        reject(new YeteError('授权超时'));
+                        return;
+                    }
+
+                    try {
+                        const json = await this.verify();
+                        if (json.code === 200) {
+                            clearInterval(intervalId);
+                            if (callback) callback(json.data);
+                            if (this.onAuthSuccess) this.onAuthSuccess(json.data);
+                            resolve(json);
+                        }
+                    } catch (error) {
+                        console.error('验证失败:', error);
+                    }
+                }, this.checkInterval);
+            });
+        }
+
+        /**
+         * 处理授权回调
+         * @description 在授权回调页面调用此方法
+         * @param {Function} successCallback 授权成功回调
+         * @param {Function} failCallback 授权失败回调
+         * @example
+         * auth.handleAuthCallback((userInfo) => {
+         *     document.write('授权成功，用户 ID: ' + userInfo.id);
+         * });
+         */
+        async handleAuthCallback(successCallback, failCallback) {
+            const url = new URL(location.href);
+            const authParam = url.searchParams.get('auth');
+
+            if (!authParam) {
+                return;
+            }
+
+            try {
+                const result = await this.waitForAuth(successCallback);
+                if (successCallback) {
+                    successCallback(result.data);
+                }
+            } catch (error) {
+                console.error('授权失败:', error);
+                if (failCallback) {
+                    failCallback(error);
+                }
+                if (this.onAuthFail) {
+                    this.onAuthFail(error);
+                }
+            }
+        }
+
+        /**
+         * 获取用户信息
+         * @returns {Promise<Object>}
+         * @example
+         * const userInfo = await auth.getUserInfo();
+         */
+        async getUserInfo() {
+            const res = await fetch(`${this.apiBaseUrl}/api/user/details?ID=${this.getUserId()}`);
+        }
+
+        /**
+         * 登出
+         * @example
+         * auth.logout();
+         */
+        logout() {
+            this.clearAuthToken();
+            location.reload();
+        }
+    },
+};
+
+/**
+ * 生成哈希值
+ * @description 与Java的用法一致
+ * @returns {Number}
+ * @example
+ * const hash = 'hello world'.hashCode();
+ */
+String.prototype.hashCode = function () {
+    let hash = 0;
+    for (let i = 0; i < this.length; i++) {
+        const char = this.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash |= 0;
+    }
+    return hash;
+};
+
+/**
+ * 响应事件监听
+ */
+Response.prototype.events = {};
+/**
+ * 是否正在监听响应事件
+ */
+Response.prototype.listening = false;
+/**
+ * 添加响应事件监听
+ * @param {string} eventName 事件名
+ * @param {function} callback 回调函数
+ * @example
+ * response.on('eventName', function() {})
+ */
+Response.prototype.on = function (eventName, callback) {
+    if (!this.events[eventName]) {
+        this.events[eventName] = [];
+    }
+    this.events[eventName].push(callback);
+};
+/**
+ * 触发事件
+ * @param {string} eventName 事件名
+ * @param {...any} args 参数
+ * @example
+ * response.emit('eventName', '参数1', '参数2', ...);
+ */
+Response.prototype.emit = function (eventName, ...args) {
+    if (this.events[eventName]) {
+        this.events[eventName].forEach(callback => callback(...args));
+    }
+};
+/**
+ * 移除事件监听
+ * @param {string} eventName 事件名
+ * @param {Function} callback 回调函数
+ * @example
+ * response.off('eventName', callback);
+ */
+Response.prototype.off = function (eventName, callback) {
+    if (this.events[eventName]) {
+        this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
+    }
+};
+/**
+ * 开始同步监听（开启后将无法使用异步）
+ * @returns {Promise<void>}
+ * @example
+ * response.listen();
+ */
+Response.prototype.listen = async function () {
+    if (this.listening) {
+        throw new YeteError('已开启同步监听，请勿重复开启');
+    }
+    const res = this;
+    const headers = res.headers;
+    this.listening = true;
+    const contentType = headers.get('Content-Type');
+    if (contentType && contentType.includes('application/json')) {
+        const json = await res.json();
+        res.emit('res', {
+            type: 'json',
+            data: json,
+        });
+    } else if (contentType && contentType.includes('text/html')) {
+        const text = await res.text();
+        const doc = new DOMParser().parseFromString(text, "text/html");
+        res.emit('res', {
+            type: 'html',
+            data: doc,
+        });
+    } else if (contentType && contentType.includes('text/plain')) {
+        const text = await res.text();
+        res.emit('res', {
+            type: 'text',
+            data: text,
+        })
+    } else if (contentType && contentType.includes('text/xml')) {
+        const text = await res.text();
+        const xmlDoc = new DOMParser().parseFromString(text, "text/xml");
+        res.emit('res', {
+            type: 'xml',
+            data: xmlDoc,
+        });
+    } else if (contentType && contentType.includes('text/event-stream')) {
+        obj.HTTP.readStream(res, ({ chunk, done }) => {
+            res.emit('res', {
+                type: 'stream',
+                data: chunk,
+                done: done,
+            });
+        });
+    } else {
+        const blob = await res.blob();
+        res.emit('res', {
+            type: 'blob',
+            data: blob,
+        });
+    }
 };
 
+/**
+ * 加载 UI
+ * @param {String} xmlstring 
+ * @returns {HTMLElement}
+ */
+function loadUI(xmlstring) {
+    const parser = new DOMParser();
+    try {
+        const xmlDoc = parser.parseFromString(xmlstring, "text/xml");
+        const root = xmlDoc.documentElement;
+        if (root.tagName === "Yete") {
+            let html = "<div yete-root>";
+            const rootNodes = root.childNodes;
+            for (let i = 0; i < rootNodes.length; i++) {
+                const node = rootNodes[i];
+                html += parseNode(node);
+            }
+            html += "</div>";
+            return new DOMParser().parseFromString(html, "text/html").body.firstElementChild;
+        } else {
+            throw new YeteError("Invalid XML string.");
+        }
+    } catch (error) {
+        throw new YeteError(`Failed to LoadUI : ${error.message}`);
+    }
+    function parseNode(node) {
+        const tagName = node.tagName;
+        if (node.nodeName === "#text") {
+            return node.textContent;
+        }
+        if (node instanceof NodeList) {
+            let html = "";
+            for (let i = 0; i < node.length; i++) {
+                html += parseNode(node[i]);
+            }
+            return html;
+        }
+        if (UIElements[tagName]) {
+            const htmlTagName = UIElements[tagName].html;
+            let attrs = "";
+            for (const i in UIElements[tagName].attr) {
+                const attr = UIElements[tagName].attr[i];
+                console.log(node.hasAttribute(attr), attr);
+                if (node.hasAttribute(attr)) {
+                    const value = node.getAttribute(attr);
+                    console.log(attr, value);
+                    if (value == "true") {
+                        attrs += ` ${attr == "id" ? `${"yete-id"}` : attr}`;
+                    } else {
+                        attrs += ` ${attr == "id" ? `${"yete-id"}` : attr}="${value}"`;
+                    }
+                }
+            }
+            return `<${htmlTagName} ${attrs} style="${UIElements[tagName].style || ""}">${parseNode(node.childNodes)}</${htmlTagName}>`;
+        } else {
+            throw new YeteError(`Invalid tag name: ${tagName}`);
+        }
+    }
+}
+
 /**
  * 添加事件监听器
  * @param {String} type 
@@ -392,6 +1124,7 @@ obj.off = obj.removeEventListener;
  */
 obj.emit = obj.dispatchEvent;
 
+
 window.addEventListener("error", function (event) {
     const { message, filename, lineno, colno, error } = event;
     if (custom502Page) {
@@ -409,13 +1142,20 @@ window.addEventListener("error", function (event) {
         if (errorErrorEl) errorErrorEl.innerText = error;
         obj.emit('page-change', new obj.YeteEvent("page-change", { path, isError: true }));
     } else {
-        document.body.innerHTML = `<center><h1>Have an error: "${message}" in "${filename}" at ${lineno}:${colno}</h1><p>Powsered by Yete.</p></center>`;
+        document.body.innerHTML = `<center><h1>Have an error: "${message}" in "${filename}" at ${lineno}:${colno}</h1><p>Power by Yete.</p></center>`;
         obj.emit('page-change', new obj.YeteEvent("page-change", { path, isError: true }));
     }
 });
 
 window.addEventListener('hashchange', () => {
-    const path = location.hash.slice(1) || '/';
+    const fullpath = location.hash.slice(1) || '/';
+    console.log("[Yete]", "Full path", fullpath);
+    const SearchParams = fullpath.split("?").slice(1).join("?") || '';
+    const path = fullpath.split("?")[0];
+    const query = new URLSearchParams(SearchParams);
+    searchParams = query;
+    console.log("[Yete]", "Query", query);
+    console.log("[Yete]", "Navigate to", path);
     obj.toPage(path);
 });
 

package/libs/yete-ui/Button.js

@@ -0,0 +1,156 @@
+class Button extends HTMLElement {
+    static get observedAttributes() {
+        return ['variant', 'size', 'disabled', 'loading', 'icon', 'icon-position'];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this._rippleElement = null;
+    }
+
+    connectedCallback() {
+        this._render();
+        this._addEventListeners();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this._render();
+        }
+    }
+
+    _render() {
+        const variant = this.getAttribute('variant') || 'contained';
+        const size = this.getAttribute('size') || 'medium';
+        const disabled = this.hasAttribute('disabled');
+        const loading = this.hasAttribute('loading');
+        const icon = this.getAttribute('icon');
+        const iconPosition = this.getAttribute('icon-position') || 'start';
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          user-select: none;
+        }
+        .button {
+          font-family: Roboto, sans-serif;
+          font-size: 14px;
+          font-weight: 500;
+          letter-spacing: 0.089em;
+          border-radius: 20px; /* Android风格圆角 */
+          border: none;
+          cursor: pointer;
+          position: relative;
+          overflow: hidden;
+          transition: all 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /* Android阴影 */
+          min-height: 36px;
+          padding: 8px 16px;
+        }
+        .button:hover {
+          box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+        }
+        .button:active {
+          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+          transform: translateY(1px);
+        }
+        }
+        .button:disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+        /* 变体样式 */
+        .button.contained {
+          background: #1976d2; /* Android蓝色 */
+          color: white;
+        }
+        .button.contained:hover {
+          background: #1565c0;
+        }
+        .button.contained:active {
+          background: #0d47a1;
+        }
+        .button.outlined {
+          background: transparent;
+          color: #1976d2;
+          border: 1px solid #1976d2;
+        }
+        .button.outlined:hover {
+          background: rgba(25, 118, 210, 0.04);
+        }
+        .button.text {
+          background: transparent;
+          color: #1976d2;
+          box-shadow: none;
+        }
+        .button.text:hover {
+          background: rgba(25, 118, 210, 0.04);
+        }
+        /* 尺寸样式 */
+        .button.small { padding: 6px 12px; min-height: 32px; font-size: 12px; }
+        .button.medium { padding: 8px 16px; min-height: 36px; font-size: 14px; }
+        .button.large { padding: 10px 20px; min-height: 44px; font-size: 16px; }
+        /* 波纹效果 */
+        .ripple {
+          position: absolute;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.5);
+          transform: scale(0);
+          animation: ripple-animation 0.6s linear;
+          pointer-events: none;
+        }
+        @keyframes ripple-animation {
+          to { transform: scale(4); opacity: 0; }
+        }
+        /* 加载状态 */
+        .spinner {
+          width: 18px;
+          height: 18px;
+          border: 2px solid currentColor;
+          border-top-color: transparent;
+          border-radius: 50%;
+          animation: spin 0.8s linear infinite;
+        }
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      </style>
+      <button class="button ${variant} ${size}" ?disabled="${disabled}">
+        ${loading ? '<span class="spinner"></span>' : ''}
+        ${!loading && icon && iconPosition === 'start' ? `<span class="icon">${icon}</span>` : ''}
+        <slot></slot>
+        ${!loading && icon && iconPosition === 'end' ? `<span class="icon">${icon}</span>` : ''}
+      </button>
+    `;
+    }
+
+    _addEventListeners() {
+        const button = this.shadowRoot.querySelector('.button');
+        button?.addEventListener('click', (e) => this._handleRipple(e));
+    }
+
+    _handleRipple(event) {
+        if (this.hasAttribute('disabled')) return;
+
+        const button = event.currentTarget;
+        const rect = button.getBoundingClientRect();
+        const size = Math.max(rect.width, rect.height);
+
+        this._rippleElement = document.createElement('span');
+        this._rippleElement.classList.add('ripple');
+        this._rippleElement.style.width = this._rippleElement.style.height = `${size}px`;
+        this._rippleElement.style.left = `${event.clientX - rect.left - size / 2}px`;
+        this._rippleElement.style.top = `${event.clientY - rect.top - size / 2}px`;
+
+        button.appendChild(this._rippleElement);
+        setTimeout(() => this._rippleElement?.remove(), 600);
+    }
+}
+
+customElements.define("yete-button", Button);

package/libs/yete-ui/Text.js

@@ -1,4 +1,21 @@
 class Text extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    color: var(--text-color, #757575);
+                    user-select: none;
+                }
+            </style>
+            <slot></slot>
+        `;
+    }
 }
 
 customElements.define('yete-text', Text);

package/libs/yete-ui/yete.json

@@ -7,9 +7,15 @@
             "html": "yete-text",
             "style": null,
             "attr": ["id", "class"]
+        },
+        "Button": {
+            "html": "yete-button",
+            "style": null,
+            "attr": ["id", "class"]
         }
     },
     "files": [
-        "Text.js"
+        "Text.js",
+        "Button.js"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iftc/yete",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.1-alpha.5",
   "description": "",
   "keywords": [
     "IFTC",
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "dexie": "^4.3.0",
-    "esbuild": "^0.27.3"
+    "esbuild": "^0.27.3",
+    "marked": "^17.0.5"
   }
 }