nv-refresh-btn-bw 1.0.0

package/DIST/nv-refresh-btn-bw.js

@@ -0,0 +1,105 @@
+var nvrefreshbtnbw=(()=>{var b=(c,e)=>()=>(e||c((e={exports:{}}).exports,e),e.exports);var f=b((v,d)=>{var a=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._width="40px",this._height="40px",this._color="#3498db",this._errorColor="#e74c3c",this._isRefreshing=!1,this._render()}static get observedAttributes(){return["width","height","color","error-color","disabled"]}attributeChangedCallback(e,t,r){if(t!==r)switch(e){case"width":this._width=r,this._updateStyles();break;case"height":this._height=r,this._updateStyles();break;case"color":this._color=r,this._updateStyles();break;case"error-color":this._errorColor=r,this._updateStyles();break;case"disabled":this._updateDisabledState();break}}connectedCallback(){this.shadowRoot.querySelector(".nv-refresh-btn").addEventListener("click",this._handleClick.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".nv-refresh-btn").removeEventListener("click",this._handleClick)}_render(){let e=document.createElement("template");e.innerHTML=`
+            <style>
+            .nv-refresh-btn {
+                background: ${this._color};
+                border: none;
+                color: white;
+                cursor: pointer;
+                padding: 0;
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.3s ease;
+                box-sizing: border-box;
+                width: ${this._width};
+                height: ${this._height};
+            }
+
+            /* \u52A8\u6001\u8BA1\u7B97\u8FB9\u6846\u534A\u5F84 - \u76F8\u5BF9\u5C3A\u5BF8\u768410% */
+            .nv-refresh-btn {
+                border-radius: ${this._calculateRelativeSize("border-radius")};
+            }
+
+            .nv-refresh-btn::before {
+                content: "";
+                display: inline-block;
+                width: ${this._calculateIconSize()};
+                height: ${this._calculateIconSize()};
+                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
+                background-repeat: no-repeat;
+                background-position: center;
+                transition: transform 0.3s ease;
+            }
+
+            /* \u60AC\u505C\u6548\u679C - \u76F8\u5BF9\u5C3A\u5BF8 */
+            .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
+                background: ${this._getDarkerColor(this._color)};
+                transform: translateY(${this._calculateRelativeSize("translateY")});
+                box-shadow: 0 ${this._calculateRelativeSize("shadow-offset")} ${this._calculateRelativeSize("shadow-blur")} rgba(0, 0, 0, 0.2);
+            }
+
+            .nv-refresh-btn:active:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
+                transform: translateY(0);
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-refreshing::before {
+                animation: nv-refresh-btn-spin ${this._calculateAnimationDuration()} linear infinite;
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-disabled {
+                background: #bdc3c7;
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+
+            .nv-refresh-btn.error {
+                background: ${this._errorColor} !important;
+            }
+
+            @keyframes nv-refresh-btn-spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+            </style>
+
+            <button class="nv-refresh-btn" aria-label="\u5237\u65B0">
+            </button>
+        `,this.shadowRoot.appendChild(e.content.cloneNode(!0))}_calculateIconSize(){let e=this._parseSizeValue(this._width),t=this._parseSizeValue(this._height),r=Math.min(e,t);return`${Math.max(16,r*.6)}px`}_calculateRelativeSize(e){let t=this._parseSizeValue(this._width),r=this._parseSizeValue(this._height),s=Math.min(t,r);switch(e){case"border-radius":return`${Math.max(2,s*.1)}px`;case"translateY":return`-${Math.min(4,s*.05)}px`;case"shadow-offset":return`${Math.min(4,s*.05)}px`;case"shadow-blur":return`${Math.min(8,s*.1)}px`;default:return"4px"}}_calculateAnimationDuration(){let t=1+(Math.min(this._parseSizeValue(this._width),this._parseSizeValue(this._height))-40)*.01;return`${Math.max(.8,Math.min(1.2,t))}s`}_parseSizeValue(e){return e.endsWith("px")?parseInt(e,10):e.endsWith("rem")||e.endsWith("em")?parseFloat(e)*16:e.endsWith("%")?40:parseInt(e,10)||40}_updateStyles(){let e=this.shadowRoot.querySelector(".nv-refresh-btn");if(!e)return;e.style.width=this._width,e.style.height=this._height,e.style.borderRadius=this._calculateRelativeSize("border-radius");let t=this._calculateIconSize();e.style.setProperty("--nv-refresh-btn-icon-size",t),e.classList.contains("error")||(e.style.background=this._color);let r=this._calculateRelativeSize("translateY"),s=this._calculateRelativeSize("shadow-offset"),o=this._calculateRelativeSize("shadow-blur"),i=this._calculateAnimationDuration(),n=this.shadowRoot.querySelector("style");if(n){let h=this._getDarkerColor(this._color),l=this._errorColor,u=`
+            .nv-refresh-btn {
+                background: ${this._color};
+                width: ${this._width};
+                height: ${this._height};
+                border-radius: ${this._calculateRelativeSize("border-radius")};
+            }
+
+            .nv-refresh-btn::before {
+                width: ${this._calculateIconSize()};
+                height: ${this._calculateIconSize()};
+            }
+
+            .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
+                background: ${h};
+                transform: translateY(${r});
+                box-shadow: 0 ${s} ${o} rgba(0, 0, 0, 0.2);
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-refreshing::before {
+                animation: nv-refresh-btn-spin ${i} linear infinite;
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-disabled {
+                background: #bdc3c7;
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+
+            .nv-refresh-btn.error {
+                background: ${l} !important;
+            }
+
+            @keyframes nv-refresh-btn-spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+            `;n.textContent=u}}_getDarkerColor(e){let t=e.replace("#","");if(t.length!==6)return e;let r=parseInt(t.substr(0,2),16),s=parseInt(t.substr(2,2),16),o=parseInt(t.substr(4,2),16),i=.8,n=Math.floor(r*i),h=Math.floor(s*i),l=Math.floor(o*i);return`rgb(${n}, ${h}, ${l})`}_updateDisabledState(){let e=this.shadowRoot.querySelector(".nv-refresh-btn");e&&(this.hasAttribute("disabled")?(e.classList.add("nv-refresh-btn-disabled"),e.setAttribute("disabled","")):(e.classList.remove("nv-refresh-btn-disabled"),e.removeAttribute("disabled")))}_handleClick(){if(this.hasAttribute("disabled")||this._isRefreshing)return;let e=this.shadowRoot.querySelector(".nv-refresh-btn");if(!e)return;e.classList.remove("error"),e.style.background=this._color,this._isRefreshing=!0;let t=new CustomEvent("nv-refresh-btn-start",{bubbles:!0,composed:!0,detail:{timestamp:Date.now()}});this.dispatchEvent(t),e.classList.add("nv-refresh-btn-refreshing")}finish(e=!0){let t=this.shadowRoot.querySelector(".nv-refresh-btn");if(t)if(t.classList.remove("nv-refresh-btn-refreshing"),this._isRefreshing=!1,e){t.classList.remove("error"),t.style.background=this._color;let r=new CustomEvent("nv-refresh-btn-complete",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),success:!0}});this.dispatchEvent(r)}else{t.classList.add("error"),t.style.background=this._errorColor;let r=new CustomEvent("nv-refresh-btn-error",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),success:!1}});this.dispatchEvent(r)}}refresh(){this._handleClick()}setColor(e){this._color=e,this._updateStyles()}setErrorColor(e){this._errorColor=e,this._updateStyles()}setSize(e,t){this._width=e,this._height=t,this._updateStyles()}getState(){return{isRefreshing:this._isRefreshing,width:this._width,height:this._height,color:this._color,errorColor:this._errorColor,disabled:this.hasAttribute("disabled")}}getComputedStyles(){return{iconSize:this._calculateIconSize(),borderRadius:this._calculateRelativeSize("border-radius"),hoverTranslateY:this._calculateRelativeSize("translateY"),shadowOffset:this._calculateRelativeSize("shadow-offset"),shadowBlur:this._calculateRelativeSize("shadow-blur"),animationDuration:this._calculateAnimationDuration()}}};customElements.get("nv-refresh-btn")||customElements.define("nv-refresh-btn",a);d.exports={NvRefreshBtn:a}});return f();})();

package/com.sh

@@ -0,0 +1 @@
+nv_cli_build -m -g nvrefreshbtnbw -i index.js -o ./DIST/nv-refresh-btn-bw.js

package/index.d.ts

@@ -0,0 +1,324 @@
+/**
+ * 自定义刷新按钮元素的 TypeScript 类型声明
+ * 对应自定义元素: <nv-refresh-btn>
+ */
+
+/**
+ * 刷新按钮自定义元素接口
+ */
+interface NvRefreshBtnElement extends HTMLElement {
+  /**
+   * 按钮宽度
+   * @example "40px"
+   * @example "3rem"
+   * @example "100%"
+   */
+  width: string;
+  
+  /**
+   * 按钮高度
+   * @example "40px"
+   * @example "3rem"
+   * @example "100%"
+   */
+  height: string;
+  
+  /**
+   * 按钮背景颜色
+   * @example "#3498db"
+   * @example "rgb(52, 152, 219)"
+   */
+  color: string;
+  
+  /**
+   * 错误状态时的背景颜色
+   * @example "#e74c3c"
+   * @example "rgb(231, 76, 60)"
+   */
+  errorColor: string;
+  
+  /**
+   * 是否禁用按钮
+   */
+  disabled: boolean;
+  
+  /**
+   * 手动触发刷新动画
+   * @returns void
+   */
+  refresh(): void;
+  
+  /**
+   * 完成刷新操作
+   * @param success 刷新是否成功，默认为 true
+   * @returns void
+   */
+  finish(success?: boolean): void;
+  
+  /**
+   * 设置按钮颜色
+   * @param color 新的颜色值
+   * @returns void
+   */
+  setColor(color: string): void;
+  
+  /**
+   * 设置错误颜色
+   * @param color 新的错误颜色值
+   * @returns void
+   */
+  setErrorColor(color: string): void;
+  
+  /**
+   * 设置按钮尺寸
+   * @param width 新的宽度
+   * @param height 新的高度
+   * @returns void
+   */
+  setSize(width: string, height: string): void;
+  
+  /**
+   * 获取按钮当前状态
+   * @returns 包含按钮状态的对象
+   */
+  getState(): NvRefreshBtnState;
+  
+  /**
+   * 获取计算后的样式值
+   * @returns 包含计算后样式值的对象
+   */
+  getComputedStyles(): NvRefreshBtnComputedStyles;
+  
+  /**
+   * 刷新开始事件监听器
+   * @param type 事件类型: "nv-refresh-btn-start"
+   * @param listener 事件监听函数
+   * @param options 事件监听选项
+   */
+  addEventListener(
+    type: "nv-refresh-btn-start", 
+    listener: (this: NvRefreshBtnElement, ev: NvRefreshBtnStartEvent) => any, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  
+  /**
+   * 刷新完成事件监听器
+   * @param type 事件类型: "nv-refresh-btn-complete"
+   * @param listener 事件监听函数
+   * @param options 事件监听选项
+   */
+  addEventListener(
+    type: "nv-refresh-btn-complete", 
+    listener: (this: NvRefreshBtnElement, ev: NvRefreshBtnCompleteEvent) => any, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  
+  /**
+   * 刷新错误事件监听器
+   * @param type 事件类型: "nv-refresh-btn-error"
+   * @param listener 事件监听函数
+   * @param options 事件监听选项
+   */
+  addEventListener(
+    type: "nv-refresh-btn-error", 
+    listener: (this: NvRefreshBtnElement, ev: NvRefreshBtnErrorEvent) => any, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  
+  /**
+   * 通用事件监听器
+   */
+  addEventListener(
+    type: string, 
+    listener: EventListenerOrEventListenerObject, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+}
+
+/**
+ * 刷新按钮状态接口
+ */
+interface NvRefreshBtnState {
+  /** 是否正在刷新 */
+  isRefreshing: boolean;
+  /** 按钮宽度 */
+  width: string;
+  /** 按钮高度 */
+  height: string;
+  /** 按钮颜色 */
+  color: string;
+  /** 错误颜色 */
+  errorColor: string;
+  /** 是否禁用 */
+  disabled: boolean;
+}
+
+/**
+ * 刷新按钮计算样式接口
+ */
+interface NvRefreshBtnComputedStyles {
+  /** 图标尺寸 */
+  iconSize: string;
+  /** 边框半径 */
+  borderRadius: string;
+  /** 悬停上移距离 */
+  hoverTranslateY: string;
+  /** 阴影偏移 */
+  shadowOffset: string;
+  /** 阴影模糊 */
+  shadowBlur: string;
+  /** 动画持续时间 */
+  animationDuration: string;
+}
+
+/**
+ * 刷新按钮事件详情接口
+ */
+interface NvRefreshBtnEventDetail {
+  /** 事件时间戳 */
+  timestamp: number;
+  /** 是否成功（仅完成/错误事件有） */
+  success?: boolean;
+}
+
+/**
+ * 刷新开始事件
+ */
+interface NvRefreshBtnStartEvent extends CustomEvent<NvRefreshBtnEventDetail> {
+  /** 事件目标 */
+  readonly target: NvRefreshBtnElement;
+}
+
+/**
+ * 刷新完成事件
+ */
+interface NvRefreshBtnCompleteEvent extends CustomEvent<NvRefreshBtnEventDetail> {
+  /** 事件目标 */
+  readonly target: NvRefreshBtnElement;
+}
+
+/**
+ * 刷新错误事件
+ */
+interface NvRefreshBtnErrorEvent extends CustomEvent<NvRefreshBtnEventDetail> {
+  /** 事件目标 */
+  readonly target: NvRefreshBtnElement;
+}
+
+/**
+ * 刷新按钮类定义
+ */
+declare class NvRefreshBtn extends HTMLElement implements NvRefreshBtnElement {
+  /** 监听属性变化 */
+  static get observedAttributes(): string[];
+  
+  /** 按钮宽度 */
+  width: string;
+  
+  /** 按钮高度 */
+  height: string;
+  
+  /** 按钮颜色 */
+  color: string;
+  
+  /** 错误颜色 */
+  errorColor: string;
+  
+  /** 是否禁用 */
+  disabled: boolean;
+  
+  /** 手动触发刷新动画 */
+  refresh(): void;
+  
+  /** 完成刷新操作 */
+  finish(success?: boolean): void;
+  
+  /** 设置按钮颜色 */
+  setColor(color: string): void;
+  
+  /** 设置错误颜色 */
+  setErrorColor(color: string): void;
+  
+  /** 设置按钮尺寸 */
+  setSize(width: string, height: string): void;
+  
+  /** 获取按钮当前状态 */
+  getState(): NvRefreshBtnState;
+  
+  /** 获取计算后的样式值 */
+  getComputedStyles(): NvRefreshBtnComputedStyles;
+  
+  /**
+   * 属性变化回调
+   * @param name 属性名
+   * @param oldValue 旧值
+   * @param newValue 新值
+   */
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+  
+  /**
+   * 元素连接到DOM时的回调
+   */
+  connectedCallback(): void;
+  
+  /**
+   * 元素从DOM断开时的回调
+   */
+  disconnectedCallback(): void;
+}
+
+/**
+ * 全局类型扩展
+ */
+declare global {
+  /**
+   * 扩展 HTMLElementTagNameMap 以支持自定义元素
+   */
+  interface HTMLElementTagNameMap {
+    "nv-refresh-btn": NvRefreshBtnElement;
+  }
+  
+  /**
+   * 扩展 Window 对象，包含自定义元素
+   */
+  interface Window {
+    /**
+     * 刷新按钮自定义元素类
+     */
+    NvRefreshBtn: typeof NvRefreshBtn;
+  }
+  
+  /**
+   * 扩展 Document 对象的事件类型
+   */
+  interface Document {
+    addEventListener(
+      type: "nv-refresh-btn-start", 
+      listener: (this: Document, ev: NvRefreshBtnStartEvent) => any, 
+      options?: boolean | AddEventListenerOptions
+    ): void;
+    
+    addEventListener(
+      type: "nv-refresh-btn-complete", 
+      listener: (this: Document, ev: NvRefreshBtnCompleteEvent) => any, 
+      options?: boolean | AddEventListenerOptions
+    ): void;
+    
+    addEventListener(
+      type: "nv-refresh-btn-error", 
+      listener: (this: Document, ev: NvRefreshBtnErrorEvent) => any, 
+      options?: boolean | AddEventListenerOptions
+    ): void;
+  }
+}
+
+/**
+ * 导出刷新按钮类
+ */
+export { NvRefreshBtn };
+
+/**
+ * 默认导出刷新按钮类型
+ */
+export default NvRefreshBtn;
+

package/index.js

@@ -0,0 +1,425 @@
+class NvRefreshBtn extends HTMLElement {
+    constructor() {
+        super();
+
+        // 创建Shadow DOM
+        this.attachShadow({ mode: 'open' });
+
+        // 默认属性
+        this._width = '40px'; // 默认宽度
+        this._height = '40px'; // 默认高度
+        this._color = '#3498db'; // 默认颜色
+        this._errorColor = '#e74c3c'; // 默认错误颜色
+        this._isRefreshing = false; // 是否正在刷新
+
+        // 初始化渲染
+        this._render();
+    }
+
+    // 监听属性变化
+    static get observedAttributes() {
+        return ['width', 'height', 'color', 'error-color', 'disabled'];
+    }
+
+    // 属性变化回调
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+
+        switch(name) {
+            case 'width':
+                this._width = newValue;
+                this._updateStyles();
+                break;
+            case 'height':
+                this._height = newValue;
+                this._updateStyles();
+                break;
+            case 'color':
+                this._color = newValue;
+                this._updateStyles();
+                break;
+            case 'error-color':
+                this._errorColor = newValue;
+                this._updateStyles();
+                break;
+            case 'disabled':
+                this._updateDisabledState();
+                break;
+        }
+    }
+
+    // 连接回调
+    connectedCallback() {
+        // 绑定点击事件
+        this.shadowRoot.querySelector('.nv-refresh-btn').addEventListener('click', this._handleClick.bind(this));
+    }
+
+    // 断开连接回调
+    disconnectedCallback() {
+        // 清理事件监听器
+        this.shadowRoot.querySelector('.nv-refresh-btn').removeEventListener('click', this._handleClick);
+    }
+
+    // 渲染方法
+    _render() {
+        const template = document.createElement('template');
+        template.innerHTML = `
+            <style>
+            .nv-refresh-btn {
+                background: ${this._color};
+                border: none;
+                color: white;
+                cursor: pointer;
+                padding: 0;
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                transition: all 0.3s ease;
+                box-sizing: border-box;
+                width: ${this._width};
+                height: ${this._height};
+            }
+
+            /* 动态计算边框半径 - 相对尺寸的10% */
+            .nv-refresh-btn {
+                border-radius: ${this._calculateRelativeSize('border-radius')};
+            }
+
+            .nv-refresh-btn::before {
+                content: "";
+                display: inline-block;
+                width: ${this._calculateIconSize()};
+                height: ${this._calculateIconSize()};
+                background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
+                background-repeat: no-repeat;
+                background-position: center;
+                transition: transform 0.3s ease;
+            }
+
+            /* 悬停效果 - 相对尺寸 */
+            .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
+                background: ${this._getDarkerColor(this._color)};
+                transform: translateY(${this._calculateRelativeSize('translateY')});
+                box-shadow: 0 ${this._calculateRelativeSize('shadow-offset')} ${this._calculateRelativeSize('shadow-blur')} rgba(0, 0, 0, 0.2);
+            }
+
+            .nv-refresh-btn:active:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
+                transform: translateY(0);
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-refreshing::before {
+                animation: nv-refresh-btn-spin ${this._calculateAnimationDuration()} linear infinite;
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-disabled {
+                background: #bdc3c7;
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+
+            .nv-refresh-btn.error {
+                background: ${this._errorColor} !important;
+            }
+
+            @keyframes nv-refresh-btn-spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+            </style>
+
+            <button class="nv-refresh-btn" aria-label="刷新">
+            </button>
+        `;
+
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    // 计算图标尺寸 - 相对最小尺寸的60%
+    _calculateIconSize() {
+        const widthValue = this._parseSizeValue(this._width);
+        const heightValue = this._parseSizeValue(this._height);
+        const minSize = Math.min(widthValue, heightValue);
+        const iconSize = Math.max(16, minSize * 0.6); // 最小16px
+        return `${iconSize}px`;
+    }
+
+    // 计算相对尺寸
+    _calculateRelativeSize(type) {
+        const widthValue = this._parseSizeValue(this._width);
+        const heightValue = this._parseSizeValue(this._height);
+        const minSize = Math.min(widthValue, heightValue);
+
+        switch(type) {
+            case 'border-radius':
+                // 边框半径 = 最小尺寸的10%，最小2px
+                return `${Math.max(2, minSize * 0.1)}px`;
+            case 'translateY':
+                // 悬停上移距离 = 最小尺寸的5%，最大4px
+                return `-${Math.min(4, minSize * 0.05)}px`;
+            case 'shadow-offset':
+                // 阴影偏移 = 最小尺寸的5%，最大4px
+                return `${Math.min(4, minSize * 0.05)}px`;
+            case 'shadow-blur':
+                // 阴影模糊 = 最小尺寸的10%，最大8px
+                return `${Math.min(8, minSize * 0.1)}px`;
+            default:
+                return '4px';
+        }
+    }
+
+    // 计算动画持续时间 - 相对尺寸
+    _calculateAnimationDuration() {
+        const minSize = Math.min(
+            this._parseSizeValue(this._width),
+            this._parseSizeValue(this._height)
+        );
+        // 基础1秒，小尺寸按钮动画稍快，大尺寸按钮动画稍慢
+        const duration = 1 + (minSize - 40) * 0.01; // 40px基准1秒
+        return `${Math.max(0.8, Math.min(1.2, duration))}s`; // 限制在0.8-1.2秒之间
+    }
+
+    // 解析尺寸值
+    _parseSizeValue(value) {
+        if (value.endsWith('px')) {
+            return parseInt(value, 10);
+        } else if (value.endsWith('rem')) {
+            return parseFloat(value) * 16; // 假设1rem = 16px
+        } else if (value.endsWith('em')) {
+            return parseFloat(value) * 16; // 假设1em = 16px
+        } else if (value.endsWith('%')) {
+            return 40; // 对于百分比，返回一个基准值
+        } else {
+            return parseInt(value, 10) || 40; // 默认40px
+        }
+    }
+
+    // 更新样式
+    _updateStyles() {
+        const button = this.shadowRoot.querySelector('.nv-refresh-btn');
+        if (!button) return;
+
+        // 更新尺寸
+        button.style.width = this._width;
+        button.style.height = this._height;
+
+        // 更新边框半径
+        button.style.borderRadius = this._calculateRelativeSize('border-radius');
+
+        // 更新图标尺寸
+        const iconSize = this._calculateIconSize();
+        button.style.setProperty('--nv-refresh-btn-icon-size', iconSize);
+
+        // 如果不是错误状态，更新背景颜色
+        if (!button.classList.contains('error')) {
+            button.style.background = this._color;
+        }
+
+        // 更新悬停效果
+        const hoverTranslateY = this._calculateRelativeSize('translateY');
+        const shadowOffset = this._calculateRelativeSize('shadow-offset');
+        const shadowBlur = this._calculateRelativeSize('shadow-blur');
+
+        // 更新动画持续时间
+        const animationDuration = this._calculateAnimationDuration();
+
+        // 更新样式元素
+        const styleElement = this.shadowRoot.querySelector('style');
+        if (styleElement) {
+            const hoverColor = this._getDarkerColor(this._color);
+            const errorColor = this._errorColor;
+
+            // 构建新的样式
+            const newStyle = `
+            .nv-refresh-btn {
+                background: ${this._color};
+                width: ${this._width};
+                height: ${this._height};
+                border-radius: ${this._calculateRelativeSize('border-radius')};
+            }
+
+            .nv-refresh-btn::before {
+                width: ${this._calculateIconSize()};
+                height: ${this._calculateIconSize()};
+            }
+
+            .nv-refresh-btn:hover:not(.nv-refresh-btn-disabled):not(.nv-refresh-btn-refreshing) {
+                background: ${hoverColor};
+                transform: translateY(${hoverTranslateY});
+                box-shadow: 0 ${shadowOffset} ${shadowBlur} rgba(0, 0, 0, 0.2);
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-refreshing::before {
+                animation: nv-refresh-btn-spin ${animationDuration} linear infinite;
+            }
+
+            .nv-refresh-btn.nv-refresh-btn-disabled {
+                background: #bdc3c7;
+                cursor: not-allowed;
+                opacity: 0.6;
+            }
+
+            .nv-refresh-btn.error {
+                background: ${errorColor} !important;
+            }
+
+            @keyframes nv-refresh-btn-spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+            `;
+
+            styleElement.textContent = newStyle;
+        }
+    }
+
+    // 获取更深色
+    _getDarkerColor(color) {
+        // 简单实现：将颜色变暗20%
+        const hex = color.replace('#', '');
+        if (hex.length !== 6) return color; // 如果不是6位十六进制颜色，直接返回
+
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+
+        const darken = 0.8; // 变暗20%
+        const newR = Math.floor(r * darken);
+        const newG = Math.floor(g * darken);
+        const newB = Math.floor(b * darken);
+
+        return `rgb(${newR}, ${newG}, ${newB})`;
+    }
+
+    // 更新禁用状态
+    _updateDisabledState() {
+        const button = this.shadowRoot.querySelector('.nv-refresh-btn');
+        if (!button) return;
+
+        if (this.hasAttribute('disabled')) {
+            button.classList.add('nv-refresh-btn-disabled');
+            button.setAttribute('disabled', '');
+        } else {
+            button.classList.remove('nv-refresh-btn-disabled');
+            button.removeAttribute('disabled');
+        }
+    }
+
+    // 点击处理
+    _handleClick() {
+        if (this.hasAttribute('disabled') || this._isRefreshing) return;
+
+        const button = this.shadowRoot.querySelector('.nv-refresh-btn');
+        if (!button) return;
+
+        // 移除可能的错误状态
+        button.classList.remove('error');
+        button.style.background = this._color;
+        this._isRefreshing = true;
+
+        // 触发自定义事件
+        const startEvent = new CustomEvent('nv-refresh-btn-start', {
+            bubbles: true,
+            composed: true,
+            detail: { timestamp: Date.now() }
+        });
+        this.dispatchEvent(startEvent);
+
+        // 添加旋转动画
+        button.classList.add('nv-refresh-btn-refreshing');
+    }
+
+    // 公共方法：完成刷新
+    finish(success = true) {
+        const button = this.shadowRoot.querySelector('.nv-refresh-btn');
+        if (!button) return;
+
+        // 停止动画
+        button.classList.remove('nv-refresh-btn-refreshing');
+        this._isRefreshing = false;
+
+        if (success) {
+            // 成功：恢复到原始颜色
+            button.classList.remove('error');
+            button.style.background = this._color;
+
+            // 触发成功事件
+            const completeEvent = new CustomEvent('nv-refresh-btn-complete', {
+                bubbles: true,
+                composed: true,
+                detail: { timestamp: Date.now(), success: true }
+            });
+            this.dispatchEvent(completeEvent);
+        } else {
+            // 失败：改变背景颜色
+            button.classList.add('error');
+            button.style.background = this._errorColor;
+
+            // 触发失败事件
+            const errorEvent = new CustomEvent('nv-refresh-btn-error', {
+                bubbles: true,
+                composed: true,
+                detail: { timestamp: Date.now(), success: false }
+            });
+            this.dispatchEvent(errorEvent);
+        }
+    }
+
+    // 公共方法：手动触发刷新
+    refresh() {
+        this._handleClick();
+    }
+
+    // 公共方法：设置颜色
+    setColor(color) {
+        this._color = color;
+        this._updateStyles();
+    }
+
+    // 公共方法：设置错误颜色
+    setErrorColor(color) {
+        this._errorColor = color;
+        this._updateStyles();
+    }
+
+    // 公共方法：设置尺寸
+    setSize(width, height) {
+        this._width = width;
+        this._height = height;
+        this._updateStyles();
+    }
+
+    // 公共方法：获取当前状态
+    getState() {
+        return {
+            isRefreshing: this._isRefreshing,
+            width: this._width,
+            height: this._height,
+            color: this._color,
+            errorColor: this._errorColor,
+            disabled: this.hasAttribute('disabled')
+        };
+    }
+
+    // 公共方法：获取计算后的样式值
+    getComputedStyles() {
+        return {
+            iconSize: this._calculateIconSize(),
+            borderRadius: this._calculateRelativeSize('border-radius'),
+            hoverTranslateY: this._calculateRelativeSize('translateY'),
+            shadowOffset: this._calculateRelativeSize('shadow-offset'),
+            shadowBlur: this._calculateRelativeSize('shadow-blur'),
+            animationDuration: this._calculateAnimationDuration()
+        };
+    }
+}
+
+// 注册自定义元素
+if (!customElements.get('nv-refresh-btn')) {
+    customElements.define('nv-refresh-btn', NvRefreshBtn);
+}
+
+
+module.exports = {
+    NvRefreshBtn
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "nv-refresh-btn-bw",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "types": "./index.d.ts",
+  "description": ""
+}