nv-radio-btn-bw 1.0.0

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

@@ -0,0 +1,82 @@
+var nvradiobtnbw=(()=>{var b=(s,t)=>()=>(t||s((t={exports:{}}).exports,t),t.exports);var u=b((p,h)=>{var i=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._width="60px",this._height="60px",this._borderColor="#cccccc",this._innerColor="#007bff",this._isSelected=!0,this._cb=async t=>{},this._render()}static get observedAttributes(){return["width","height","border-color","inner-color"]}attributeChangedCallback(t,e,r){if(e!==r)switch(t){case"width":this._width=r,this._updateSize();break;case"height":this._height=r,this._updateSize();break;case"border-color":this._borderColor=r,this._updateBorderColor();break;case"inner-color":this._innerColor=r,this._updateInnerColor();break}}connectedCallback(){this.shadowRoot.querySelector(".nv-radio-btn").addEventListener("click",this._handleClick.bind(this))}disconnectedCallback(){this.shadowRoot.querySelector(".nv-radio-btn").removeEventListener("click",this._handleClick)}_render(){let t=document.createElement("template");t.innerHTML=`
+            <style>
+            .nv-radio-btn {
+                width: ${this._width};
+                height: ${this._height};
+                border-radius: 50%;
+                border: 3px solid ${this._borderColor};
+                background: white;
+                cursor: pointer;
+                position: relative;
+                padding: 0;
+                margin: 0;
+                transition: all 0.2s ease;
+            }
+
+            .nv-radio-btn::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: ${this._getInnerSize(this._width)};
+                height: ${this._getInnerSize(this._height)};
+                border-radius: 50%;
+                background: ${this._innerColor};
+            }
+
+            .nv-radio-btn.nv-radio-btn-unselected::after {
+                background: transparent;
+            }
+
+            .nv-radio-btn:hover {
+                border-color: ${this._getDarkerColor(this._borderColor)};
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .nv-radio-btn:active {
+                transform: scale(0.95);
+            }
+            </style>
+
+            <button class="nv-radio-btn ${this._isSelected?"":"nv-radio-btn-unselected"}" aria-label="\u5355\u9009\u6309\u94AE">
+            </button>
+        `,this.shadowRoot.appendChild(t.content.cloneNode(!0))}_getInnerSize(t){let e=this._getNumber(t),r=this._getUnit(t);return`${e*.67}${r}`}_getNumber(t){let e=t.match(/\d+/);return e?parseInt(e[0],10):60}_getUnit(t){let e=t.match(/[a-zA-Z%]+/);return e?e[0]:"px"}_updateSize(){let t=this.shadowRoot.querySelector(".nv-radio-btn");if(!t)return;t.style.width=this._width,t.style.height=this._height;let e=this.shadowRoot.querySelector("style");if(e){let r=this._getInnerSize(this._width),o=this._getInnerSize(this._height);e.textContent=`
+            .nv-radio-btn {
+                width: ${this._width};
+                height: ${this._height};
+                border-radius: 50%;
+                border: 3px solid ${this._borderColor};
+                background: white;
+                cursor: pointer;
+                position: relative;
+                padding: 0;
+                margin: 0;
+                transition: all 0.2s ease;
+            }
+
+            .nv-radio-btn::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: ${r};
+                height: ${o};
+                border-radius: 50%;
+                background: ${this._innerColor};
+            }
+
+            .nv-radio-btn.nv-radio-btn-unselected::after {
+                background: transparent;
+            }
+
+            .nv-radio-btn:hover {
+                border-color: ${this._getDarkerColor(this._borderColor)};
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .nv-radio-btn:active {
+                transform: scale(0.95);
+            }
+            `}}_updateBorderColor(){let t=this.shadowRoot.querySelector(".nv-radio-btn");if(!t)return;t.style.borderColor=this._borderColor;let e=this.shadowRoot.querySelector("style");e&&(e.textContent=e.textContent.replace(/border: 3px solid #[^;]+;/,`border: 3px solid ${this._borderColor};`).replace(/border-color: [^;]+;/,`border-color: ${this._getDarkerColor(this._borderColor)};`))}_updateInnerColor(){if(!this.shadowRoot.querySelector(".nv-radio-btn"))return;let e=this.shadowRoot.querySelector("style");e&&(e.textContent=e.textContent.replace(/background: #[^;]+;/,`background: ${this._innerColor};`))}_getDarkerColor(t){let e=t.replace("#","");if(e.length!==6)return t;let r=parseInt(e.substr(0,2),16),o=parseInt(e.substr(2,2),16),a=parseInt(e.substr(4,2),16),n=.8,d=Math.floor(r*n),l=Math.floor(o*n),c=Math.floor(a*n);return`rgb(${d}, ${l}, ${c})`}async _handleClick(t){let e=new CustomEvent("nv-radio-btn-click",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),element:this,selected:this._isSelected}});this.dispatchEvent(e);let r=this.shadowRoot.querySelector(".nv-radio-btn");r&&(r.style.transform="scale(0.9)");try{await this._cb(this)}catch(o){console.error("\u56DE\u8C03\u51FD\u6570\u6267\u884C\u51FA\u9519:",o)}r&&(r.style.transform="")}setCallback(t){typeof t=="function"&&(this._cb=t)}slct(){if(this._isSelected)return;this._isSelected=!0;let t=this.shadowRoot.querySelector(".nv-radio-btn");t&&t.classList.remove("nv-radio-btn-unselected");let e=new CustomEvent("nv-radio-btn-select",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),element:this}});this.dispatchEvent(e)}unslct(){if(!this._isSelected)return;this._isSelected=!1;let t=this.shadowRoot.querySelector(".nv-radio-btn");t&&t.classList.add("nv-radio-btn-unselected");let e=new CustomEvent("nv-radio-btn-unselect",{bubbles:!0,composed:!0,detail:{timestamp:Date.now(),element:this}});this.dispatchEvent(e)}toggle(){this._isSelected?this.unslct():this.slct()}setWidth(t){this._width=t,this._updateSize()}setHeight(t){this._height=t,this._updateSize()}setBorderColor(t){this._borderColor=t,this._updateBorderColor()}setInnerColor(t){this._innerColor=t,this._updateInnerColor()}getState(){return{width:this._width,height:this._height,borderColor:this._borderColor,innerColor:this._innerColor,selected:this._isSelected}}};customElements.get("nv-radio-button")||customElements.define("nv-radio-button",i);h.exports={NvRadioButton:i}});return u();})();

package/TEST/tst.html

@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>自定义单选按钮元素</title>
+    <script>
+        // 定义自定义元素类
+        class NvRadioButton extends HTMLElement {
+            constructor() {
+                super();
+                
+                // 创建Shadow DOM
+                this.attachShadow({ mode: 'open' });
+                
+                // 默认属性
+                this._width = '60px';
+                this._height = '60px';
+                this._borderColor = '#cccccc';
+                this._innerColor = '#007bff';
+                this._isSelected = true;
+                this._cb = async (self) => {};
+                
+                // 初始化渲染
+                this._render();
+            }
+            
+            // 监听属性变化
+            static get observedAttributes() {
+                return ['width', 'height', 'border-color', 'inner-color'];
+            }
+            
+            // 属性变化回调
+            attributeChangedCallback(name, oldValue, newValue) {
+                if (oldValue === newValue) return;
+                
+                switch(name) {
+                    case 'width':
+                        this._width = newValue;
+                        this._updateSize();
+                        break;
+                    case 'height':
+                        this._height = newValue;
+                        this._updateSize();
+                        break;
+                    case 'border-color':
+                        this._borderColor = newValue;
+                        this._updateBorderColor();
+                        break;
+                    case 'inner-color':
+                        this._innerColor = newValue;
+                        this._updateInnerColor();
+                        break;
+                }
+            }
+            
+            // 连接回调
+            connectedCallback() {
+                this.shadowRoot.querySelector('.nv-radio-btn').addEventListener('click', this._handleClick.bind(this));
+            }
+            
+            // 断开连接回调
+            disconnectedCallback() {
+                this.shadowRoot.querySelector('.nv-radio-btn').removeEventListener('click', this._handleClick);
+            }
+            
+            // 渲染方法
+            _render() {
+                const template = document.createElement('template');
+                template.innerHTML = `
+                    <style>
+                        .nv-radio-btn {
+                            width: ${this._width};
+                            height: ${this._height};
+                            border-radius: 50%;
+                            border: 3px solid ${this._borderColor};
+                            background: white;
+                            cursor: pointer;
+                            position: relative;
+                            padding: 0;
+                            margin: 0;
+                            transition: all 0.2s ease;
+                        }
+                        
+                        .nv-radio-btn::after {
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            width: ${this._getInnerSize(this._width)};
+                            height: ${this._getInnerSize(this._height)};
+                            border-radius: 50%;
+                            background: ${this._innerColor};
+                        }
+                        
+                        .nv-radio-btn.nv-radio-btn-unselected::after {
+                            background: transparent;
+                        }
+                        
+                        .nv-radio-btn:hover {
+                            border-color: ${this._getDarkerColor(this._borderColor)};
+                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+                        }
+                        
+                        .nv-radio-btn:active {
+                            transform: scale(0.95);
+                        }
+                    </style>
+                    
+                    <button class="nv-radio-btn ${this._isSelected ? '' : 'nv-radio-btn-unselected'}" aria-label="单选按钮">
+                    </button>
+                `;
+                
+                this.shadowRoot.appendChild(template.content.cloneNode(true));
+            }
+            
+            // 获取内部尺寸
+            _getInnerSize(value) {
+                const num = this._getNumber(value);
+                const unit = this._getUnit(value);
+                return `${num * 0.67}${unit}`;
+            }
+            
+            // 获取数字
+            _getNumber(value) {
+                const match = value.match(/\d+/);
+                return match ? parseInt(match[0], 10) : 60;
+            }
+            
+            // 获取单位
+            _getUnit(value) {
+                const match = value.match(/[a-zA-Z%]+/);
+                return match ? match[0] : 'px';
+            }
+            
+            // 更新尺寸
+            _updateSize() {
+                const button = this.shadowRoot.querySelector('.nv-radio-btn');
+                if (!button) return;
+                
+                button.style.width = this._width;
+                button.style.height = this._height;
+                
+                const styleElement = this.shadowRoot.querySelector('style');
+                if (styleElement) {
+                    const innerWidth = this._getInnerSize(this._width);
+                    const innerHeight = this._getInnerSize(this._height);
+                    
+                    styleElement.textContent = `
+                        .nv-radio-btn {
+                            width: ${this._width};
+                            height: ${this._height};
+                            border-radius: 50%;
+                            border: 3px solid ${this._borderColor};
+                            background: white;
+                            cursor: pointer;
+                            position: relative;
+                            padding: 0;
+                            margin: 0;
+                            transition: all 0.2s ease;
+                        }
+                        
+                        .nv-radio-btn::after {
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            width: ${innerWidth};
+                            height: ${innerHeight};
+                            border-radius: 50%;
+                            background: ${this._innerColor};
+                        }
+                        
+                        .nv-radio-btn.nv-radio-btn-unselected::after {
+                            background: transparent;
+                        }
+                        
+                        .nv-radio-btn:hover {
+                            border-color: ${this._getDarkerColor(this._borderColor)};
+                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+                        }
+                        
+                        .nv-radio-btn:active {
+                            transform: scale(0.95);
+                        }
+                    `;
+                }
+            }
+            
+            // 更新边框颜色
+            _updateBorderColor() {
+                const button = this.shadowRoot.querySelector('.nv-radio-btn');
+                if (!button) return;
+                
+                button.style.borderColor = this._borderColor;
+                
+                const styleElement = this.shadowRoot.querySelector('style');
+                if (styleElement) {
+                    styleElement.textContent = styleElement.textContent.replace(
+                        /border: 3px solid #[^;]+;/,
+                        `border: 3px solid ${this._borderColor};`
+                    ).replace(
+                        /border-color: [^;]+;/,
+                        `border-color: ${this._getDarkerColor(this._borderColor)};`
+                    );
+                }
+            }
+            
+            // 更新内部颜色
+            _updateInnerColor() {
+                const button = this.shadowRoot.querySelector('.nv-radio-btn');
+                if (!button) return;
+                
+                const styleElement = this.shadowRoot.querySelector('style');
+                if (styleElement) {
+                    styleElement.textContent = styleElement.textContent.replace(
+                        /background: #[^;]+;/,
+                        `background: ${this._innerColor};`
+                    );
+                }
+            }
+            
+            // 获取更深色
+            _getDarkerColor(color) {
+                const hex = color.replace('#', '');
+                if (hex.length !== 6) return color;
+                
+                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;
+                const newR = Math.floor(r * darken);
+                const newG = Math.floor(g * darken);
+                const newB = Math.floor(b * darken);
+                
+                return `rgb(${newR}, ${newG}, ${newB})`;
+            }
+            
+            // 点击处理
+            async _handleClick(event) {
+                const clickEvent = new CustomEvent('nv-radio-btn-click', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { 
+                        timestamp: Date.now(),
+                        element: this,
+                        selected: this._isSelected
+                    }
+                });
+                this.dispatchEvent(clickEvent);
+                
+                const button = this.shadowRoot.querySelector('.nv-radio-btn');
+                if (button) {
+                    button.style.transform = 'scale(0.9)';
+                }
+                
+                try {
+                    await this._cb(this);
+                } catch (error) {
+                    console.error('回调函数执行出错:', error);
+                }
+                
+                if (button) {
+                    button.style.transform = '';
+                }
+            }
+            
+            // 设置回调函数
+            setCallback(cb) {
+                if (typeof cb === 'function') {
+                    this._cb = cb;
+                }
+            }
+            
+            // 显示中心颜色
+            slct() {
+                if (this._isSelected) return;
+                
+                this._isSelected = true;
+                const button = this.shadowRoot.querySelector('.nv-radio-btn');
+                if (button) {
+                    button.classList.remove('nv-radio-btn-unselected');
+                }
+                
+                const selectEvent = new CustomEvent('nv-radio-btn-select', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { 
+                        timestamp: Date.now(),
+                        element: this
+                    }
+                });
+                this.dispatchEvent(selectEvent);
+            }
+            
+            // 隐藏中心颜色
+            unslct() {
+                if (!this._isSelected) return;
+                
+                this._isSelected = false;
+                const button = this.shadowRoot.querySelector('.nv-radio-btn');
+                if (button) {
+                    button.classList.add('nv-radio-btn-unselected');
+                }
+                
+                const unselectEvent = new CustomEvent('nv-radio-btn-unselect', {
+                    bubbles: true,
+                    composed: true,
+                    detail: { 
+                        timestamp: Date.now(),
+                        element: this
+                    }
+                });
+                this.dispatchEvent(unselectEvent);
+            }
+            
+            // 切换选中状态
+            toggle() {
+                if (this._isSelected) {
+                    this.unslct();
+                } else {
+                    this.slct();
+                }
+            }
+            
+            // 设置宽度
+            setWidth(width) {
+                this._width = width;
+                this._updateSize();
+            }
+            
+            // 设置高度
+            setHeight(height) {
+                this._height = height;
+                this._updateSize();
+            }
+            
+            // 设置边框颜色
+            setBorderColor(color) {
+                this._borderColor = color;
+                this._updateBorderColor();
+            }
+            
+            // 设置内部颜色
+            setInnerColor(color) {
+                this._innerColor = color;
+                this._updateInnerColor();
+            }
+            
+            // 获取当前状态
+            getState() {
+                return {
+                    width: this._width,
+                    height: this._height,
+                    borderColor: this._borderColor,
+                    innerColor: this._innerColor,
+                    selected: this._isSelected
+                };
+            }
+        }
+        
+        // 注册自定义元素
+        if (!customElements.get('nv-radio-button')) {
+            customElements.define('nv-radio-button', NvRadioButton);
+        }
+    </script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        
+        .demo-container {
+            max-width: 500px;
+            margin: 0 auto;
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        
+        h1 {
+            color: #333;
+            margin-bottom: 20px;
+            font-size: 24px;
+        }
+        
+        .demo-section {
+            margin-bottom: 20px;
+            padding: 15px;
+            border: 1px solid #eee;
+            border-radius: 8px;
+        }
+        
+        .demo-section h2 {
+            color: #555;
+            margin-bottom: 10px;
+            font-size: 18px;
+        }
+        
+        .button-group {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+            margin-bottom: 10px;
+        }
+        
+        .log-output {
+            margin-top: 10px;
+            padding: 8px;
+            background: #2c3e50;
+            color: white;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 12px;
+            max-height: 200px;
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="demo-container">
+        <h1>自定义单选按钮元素（修复版）</h1>
+        
+        <div class="demo-section">
+            <h2>基本测试</h2>
+            <div class="button-group">
+                <nv-radio-button id="btn1"></nv-radio-button>
+                <div>
+                    <div>默认按钮 (60px × 60px)</div>
+                    <div>当前状态: <span id="statusText">选中</span></div>
+                </div>
+            </div>
+            
+            <div class="button-group">
+                <button onclick="testSelect()">选中(slct)</button>
+                <button onclick="testUnselect()">取消选中(unslct)</button>
+                <button onclick="testToggle()">切换(toggle)</button>
+                <button onclick="changeColor()">改变内部颜色</button>
+            </div>
+            
+            <div id="log" class="log-output"></div>
+        </div>
+    </div>
+    
+    <script>
+        // 日志函数
+        function log(message) {
+            const logElement = document.getElementById('log');
+            const timestamp = new Date().toLocaleTimeString();
+            logElement.innerHTML += `[${timestamp}] ${message}<br>`;
+            logElement.scrollTop = logElement.scrollHeight;
+        }
+        
+        // 获取按钮实例
+        const button = document.getElementById('btn1');
+        
+        // 设置回调函数
+        button.setCallback(async (self) => {
+            log('回调函数被调用');
+        });
+        
+        // 监听事件
+        button.addEventListener('nv-radio-btn-select', (e) => {
+            log('按钮被选中');
+            document.getElementById('statusText').textContent = '选中';
+        });
+        
+        button.addEventListener('nv-radio-btn-unselect', (e) => {
+            log('按钮被取消选中');
+            document.getElementById('statusText').textContent = '未选中';
+        });
+        
+        // 测试函数
+        function testSelect() {
+            log('执行了选中操作');
+            button.slct();
+        }
+        
+        function testUnselect() {
+            log('执行了取消选中操作');
+            button.unslct();
+        }
+        
+        function testToggle() {
+            log('执行了切换操作');
+            button.toggle();
+        }
+        
+        function changeColor() {
+            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ff00ff', '#ffff00', '#00ffff'];
+            const randomColor = colors[Math.floor(Math.random() * colors.length)];
+            button.setInnerColor(randomColor);
+            log('改变了内部颜色: ' + randomColor);
+        }
+        
+        // 初始状态检查
+        setTimeout(() => {
+            const state = button.getState();
+            log('初始状态: 选中=' + state.selected + ', 颜色=' + state.innerColor);
+        }, 100);
+    </script>
+</body>
+</html>
+

package/com.sh

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

package/index.d.ts

@@ -0,0 +1,308 @@
+/**
+ * 自定义单选按钮元素的 TypeScript 类型声明
+ * 对应自定义元素: <nv-radio-button>
+ */
+
+/**
+ * 单选按钮事件详情接口
+ */
+interface NvRadioButtonEventDetail {
+  /** 事件时间戳 */
+  timestamp: number;
+  /** 事件源元素 */
+  element: NvRadioButtonElement;
+  /** 是否选中（仅点击事件有） */
+  selected?: boolean;
+}
+
+/**
+ * 单选按钮点击事件
+ */
+interface NvRadioButtonClickEvent extends CustomEvent<NvRadioButtonEventDetail> {
+  /** 事件目标 */
+  readonly target: NvRadioButtonElement;
+}
+
+/**
+ * 单选按钮选中事件
+ */
+interface NvRadioButtonSelectEvent extends CustomEvent<NvRadioButtonEventDetail> {
+  /** 事件目标 */
+  readonly target: NvRadioButtonElement;
+}
+
+/**
+ * 单选按钮取消选中事件
+ */
+interface NvRadioButtonUnselectEvent extends CustomEvent<NvRadioButtonEventDetail> {
+  /** 事件目标 */
+  readonly target: NvRadioButtonElement;
+}
+
+/**
+ * 单选按钮状态接口
+ */
+interface NvRadioButtonState {
+  /** 宽度 */
+  width: string;
+  /** 高度 */
+  height: string;
+  /** 边框颜色 */
+  borderColor: string;
+  /** 内部颜色 */
+  innerColor: string;
+  /** 是否选中 */
+  selected: boolean;
+}
+
+/**
+ * 单选按钮元素接口
+ */
+interface NvRadioButtonElement extends HTMLElement {
+  /**
+   * 按钮宽度
+   * @example "60px"
+   * @example "3rem"
+   * @example "100%"
+   */
+  width: string;
+  
+  /**
+   * 按钮高度
+   * @example "60px"
+   * @example "3rem"
+   * @example "100%"
+   */
+  height: string;
+  
+  /**
+   * 边框颜色
+   * @example "#cccccc"
+   * @example "rgb(204, 204, 204)"
+   */
+  borderColor: string;
+  
+  /**
+   * 内部颜色
+   * @example "#007bff"
+   * @example "rgb(0, 123, 255)"
+   */
+  innerColor: string;
+  
+  /**
+   * 设置回调函数
+   * @param cb 回调函数，参数为按钮实例
+   */
+  setCallback(cb: (self: NvRadioButtonElement) => Promise<void> | void): void;
+  
+  /**
+   * 显示中心颜色
+   */
+  slct(): void;
+  
+  /**
+   * 隐藏中心颜色
+   */
+  unslct(): void;
+  
+  /**
+   * 切换选中状态
+   */
+  toggle(): void;
+  
+  /**
+   * 设置宽度
+   * @param width 新的宽度
+   */
+  setWidth(width: string): void;
+  
+  /**
+   * 设置高度
+   * @param height 新的高度
+   */
+  setHeight(height: string): void;
+  
+  /**
+   * 设置边框颜色
+   * @param color 新的边框颜色
+   */
+  setBorderColor(color: string): void;
+  
+  /**
+   * 设置内部颜色
+   * @param color 新的内部颜色
+   */
+  setInnerColor(color: string): void;
+  
+  /**
+   * 获取当前状态
+   * @returns 包含按钮状态的对象
+   */
+  getState(): NvRadioButtonState;
+  
+  /**
+   * 点击事件监听器
+   * @param type 事件类型: "nv-radio-btn-click"
+   * @param listener 事件监听函数
+   * @param options 事件监听选项
+   */
+  addEventListener(
+    type: "nv-radio-btn-click", 
+    listener: (this: NvRadioButtonElement, ev: NvRadioButtonClickEvent) => any, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  
+  /**
+   * 选中事件监听器
+   * @param type 事件类型: "nv-radio-btn-select"
+   * @param listener 事件监听函数
+   * @param options 事件监听选项
+   */
+  addEventListener(
+    type: "nv-radio-btn-select", 
+    listener: (this: NvRadioButtonElement, ev: NvRadioButtonSelectEvent) => any, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  
+  /**
+   * 取消选中事件监听器
+   * @param type 事件类型: "nv-radio-btn-unselect"
+   * @param listener 事件监听函数
+   * @param options 事件监听选项
+   */
+  addEventListener(
+    type: "nv-radio-btn-unselect", 
+    listener: (this: NvRadioButtonElement, ev: NvRadioButtonUnselectEvent) => any, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  
+  /**
+   * 通用事件监听器
+   */
+  addEventListener(
+    type: string, 
+    listener: EventListenerOrEventListenerObject, 
+    options?: boolean | AddEventListenerOptions
+  ): void;
+}
+
+/**
+ * 单选按钮类定义
+ */
+declare class NvRadioButton extends HTMLElement implements NvRadioButtonElement {
+  /** 监听属性变化 */
+  static get observedAttributes(): string[];
+  
+  /** 按钮宽度 */
+  width: string;
+  
+  /** 按钮高度 */
+  height: string;
+  
+  /** 边框颜色 */
+  borderColor: string;
+  
+  /** 内部颜色 */
+  innerColor: string;
+  
+  /** 设置回调函数 */
+  setCallback(cb: (self: NvRadioButtonElement) => Promise<void> | void): void;
+  
+  /** 显示中心颜色 */
+  slct(): void;
+  
+  /** 隐藏中心颜色 */
+  unslct(): void;
+  
+  /** 切换选中状态 */
+  toggle(): void;
+  
+  /** 设置宽度 */
+  setWidth(width: string): void;
+  
+  /** 设置高度 */
+  setHeight(height: string): void;
+  
+  /** 设置边框颜色 */
+  setBorderColor(color: string): void;
+  
+  /** 设置内部颜色 */
+  setInnerColor(color: string): void;
+  
+  /** 获取当前状态 */
+  getState(): NvRadioButtonState;
+  
+  /**
+   * 属性变化回调
+   * @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-radio-button": NvRadioButtonElement;
+  }
+  
+  /**
+   * 扩展 Window 对象，包含自定义元素
+   */
+  interface Window {
+    /**
+     * 单选按钮自定义元素类
+     */
+    NvRadioButton: typeof NvRadioButton;
+  }
+  
+  /**
+   * 扩展 Document 对象的事件类型
+   */
+  interface Document {
+    addEventListener(
+      type: "nv-radio-btn-click", 
+      listener: (this: Document, ev: NvRadioButtonClickEvent) => any, 
+      options?: boolean | AddEventListenerOptions
+    ): void;
+    
+    addEventListener(
+      type: "nv-radio-btn-select", 
+      listener: (this: Document, ev: NvRadioButtonSelectEvent) => any, 
+      options?: boolean | AddEventListenerOptions
+    ): void;
+    
+    addEventListener(
+      type: "nv-radio-btn-unselect", 
+      listener: (this: Document, ev: NvRadioButtonUnselectEvent) => any, 
+      options?: boolean | AddEventListenerOptions
+    ): void;
+  }
+}
+
+/**
+ * 导出单选按钮类
+ */
+export { NvRadioButton };
+
+/**
+ * 默认导出单选按钮类型
+ */
+export default NvRadioButton;
+

package/index.js

@@ -0,0 +1,364 @@
+class NvRadioButton extends HTMLElement {
+    constructor() {
+        super();
+
+        // 创建Shadow DOM
+        this.attachShadow({ mode: 'open' });
+
+        // 默认属性
+        this._width = '60px';
+        this._height = '60px';
+        this._borderColor = '#cccccc';
+        this._innerColor = '#007bff';
+        this._isSelected = true;
+        this._cb = async (self) => {};
+
+        // 初始化渲染
+        this._render();
+    }
+
+    // 监听属性变化
+    static get observedAttributes() {
+        return ['width', 'height', 'border-color', 'inner-color'];
+    }
+
+    // 属性变化回调
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+
+        switch(name) {
+            case 'width':
+                this._width = newValue;
+                this._updateSize();
+                break;
+            case 'height':
+                this._height = newValue;
+                this._updateSize();
+                break;
+            case 'border-color':
+                this._borderColor = newValue;
+                this._updateBorderColor();
+                break;
+            case 'inner-color':
+                this._innerColor = newValue;
+                this._updateInnerColor();
+                break;
+        }
+    }
+
+    // 连接回调
+    connectedCallback() {
+        this.shadowRoot.querySelector('.nv-radio-btn').addEventListener('click', this._handleClick.bind(this));
+    }
+
+    // 断开连接回调
+    disconnectedCallback() {
+        this.shadowRoot.querySelector('.nv-radio-btn').removeEventListener('click', this._handleClick);
+    }
+
+    // 渲染方法
+    _render() {
+        const template = document.createElement('template');
+        template.innerHTML = `
+            <style>
+            .nv-radio-btn {
+                width: ${this._width};
+                height: ${this._height};
+                border-radius: 50%;
+                border: 3px solid ${this._borderColor};
+                background: white;
+                cursor: pointer;
+                position: relative;
+                padding: 0;
+                margin: 0;
+                transition: all 0.2s ease;
+            }
+
+            .nv-radio-btn::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: ${this._getInnerSize(this._width)};
+                height: ${this._getInnerSize(this._height)};
+                border-radius: 50%;
+                background: ${this._innerColor};
+            }
+
+            .nv-radio-btn.nv-radio-btn-unselected::after {
+                background: transparent;
+            }
+
+            .nv-radio-btn:hover {
+                border-color: ${this._getDarkerColor(this._borderColor)};
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .nv-radio-btn:active {
+                transform: scale(0.95);
+            }
+            </style>
+
+            <button class="nv-radio-btn ${this._isSelected ? '' : 'nv-radio-btn-unselected'}" aria-label="单选按钮">
+            </button>
+        `;
+
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    // 获取内部尺寸
+    _getInnerSize(value) {
+        const num = this._getNumber(value);
+        const unit = this._getUnit(value);
+        return `${num * 0.67}${unit}`;
+    }
+
+    // 获取数字
+    _getNumber(value) {
+        const match = value.match(/\d+/);
+        return match ? parseInt(match[0], 10) : 60;
+    }
+
+    // 获取单位
+    _getUnit(value) {
+        const match = value.match(/[a-zA-Z%]+/);
+        return match ? match[0] : 'px';
+    }
+
+    // 更新尺寸
+    _updateSize() {
+        const button = this.shadowRoot.querySelector('.nv-radio-btn');
+        if (!button) return;
+
+        button.style.width = this._width;
+        button.style.height = this._height;
+
+        const styleElement = this.shadowRoot.querySelector('style');
+        if (styleElement) {
+            const innerWidth = this._getInnerSize(this._width);
+            const innerHeight = this._getInnerSize(this._height);
+
+            styleElement.textContent = `
+            .nv-radio-btn {
+                width: ${this._width};
+                height: ${this._height};
+                border-radius: 50%;
+                border: 3px solid ${this._borderColor};
+                background: white;
+                cursor: pointer;
+                position: relative;
+                padding: 0;
+                margin: 0;
+                transition: all 0.2s ease;
+            }
+
+            .nv-radio-btn::after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: ${innerWidth};
+                height: ${innerHeight};
+                border-radius: 50%;
+                background: ${this._innerColor};
+            }
+
+            .nv-radio-btn.nv-radio-btn-unselected::after {
+                background: transparent;
+            }
+
+            .nv-radio-btn:hover {
+                border-color: ${this._getDarkerColor(this._borderColor)};
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .nv-radio-btn:active {
+                transform: scale(0.95);
+            }
+            `;
+        }
+    }
+
+    // 更新边框颜色
+    _updateBorderColor() {
+        const button = this.shadowRoot.querySelector('.nv-radio-btn');
+        if (!button) return;
+
+        button.style.borderColor = this._borderColor;
+
+        const styleElement = this.shadowRoot.querySelector('style');
+        if (styleElement) {
+            styleElement.textContent = styleElement.textContent.replace(
+                /border: 3px solid #[^;]+;/,
+                `border: 3px solid ${this._borderColor};`
+            ).replace(
+                /border-color: [^;]+;/,
+                `border-color: ${this._getDarkerColor(this._borderColor)};`
+            );
+        }
+    }
+
+    // 更新内部颜色
+    _updateInnerColor() {
+        const button = this.shadowRoot.querySelector('.nv-radio-btn');
+        if (!button) return;
+
+        const styleElement = this.shadowRoot.querySelector('style');
+        if (styleElement) {
+            styleElement.textContent = styleElement.textContent.replace(
+                /background: #[^;]+;/,
+                `background: ${this._innerColor};`
+            );
+        }
+    }
+
+    // 获取更深色
+    _getDarkerColor(color) {
+        const hex = color.replace('#', '');
+        if (hex.length !== 6) return color;
+
+        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;
+        const newR = Math.floor(r * darken);
+        const newG = Math.floor(g * darken);
+        const newB = Math.floor(b * darken);
+
+        return `rgb(${newR}, ${newG}, ${newB})`;
+    }
+
+    // 点击处理
+    async _handleClick(event) {
+        const clickEvent = new CustomEvent('nv-radio-btn-click', {
+            bubbles: true,
+            composed: true,
+            detail: { 
+                timestamp: Date.now(),
+                element: this,
+                selected: this._isSelected
+            }
+        });
+        this.dispatchEvent(clickEvent);
+
+        const button = this.shadowRoot.querySelector('.nv-radio-btn');
+        if (button) {
+            button.style.transform = 'scale(0.9)';
+        }
+
+        try {
+            await this._cb(this);
+        } catch (error) {
+            console.error('回调函数执行出错:', error);
+        }
+
+        if (button) {
+            button.style.transform = '';
+        }
+    }
+
+    // 设置回调函数
+    setCallback(cb) {
+        if (typeof cb === 'function') {
+            this._cb = cb;
+        }
+    }
+
+    // 显示中心颜色
+    slct() {
+        if (this._isSelected) return;
+
+        this._isSelected = true;
+        const button = this.shadowRoot.querySelector('.nv-radio-btn');
+        if (button) {
+            button.classList.remove('nv-radio-btn-unselected');
+        }
+
+        const selectEvent = new CustomEvent('nv-radio-btn-select', {
+            bubbles: true,
+            composed: true,
+            detail: { 
+                timestamp: Date.now(),
+                element: this
+            }
+        });
+        this.dispatchEvent(selectEvent);
+    }
+
+    // 隐藏中心颜色
+    unslct() {
+        if (!this._isSelected) return;
+
+        this._isSelected = false;
+        const button = this.shadowRoot.querySelector('.nv-radio-btn');
+        if (button) {
+            button.classList.add('nv-radio-btn-unselected');
+        }
+
+        const unselectEvent = new CustomEvent('nv-radio-btn-unselect', {
+            bubbles: true,
+            composed: true,
+            detail: { 
+                timestamp: Date.now(),
+                element: this
+            }
+        });
+        this.dispatchEvent(unselectEvent);
+    }
+
+    // 切换选中状态
+    toggle() {
+        if (this._isSelected) {
+            this.unslct();
+        } else {
+            this.slct();
+        }
+    }
+
+    // 设置宽度
+    setWidth(width) {
+        this._width = width;
+        this._updateSize();
+    }
+
+    // 设置高度
+    setHeight(height) {
+        this._height = height;
+        this._updateSize();
+    }
+
+    // 设置边框颜色
+    setBorderColor(color) {
+        this._borderColor = color;
+        this._updateBorderColor();
+    }
+
+    // 设置内部颜色
+    setInnerColor(color) {
+        this._innerColor = color;
+        this._updateInnerColor();
+    }
+
+    // 获取当前状态
+    getState() {
+        return {
+            width: this._width,
+            height: this._height,
+            borderColor: this._borderColor,
+            innerColor: this._innerColor,
+            selected: this._isSelected
+        };
+    }
+}
+
+// 注册自定义元素
+if (!customElements.get('nv-radio-button')) {
+    customElements.define('nv-radio-button', NvRadioButton);
+}
+
+module.exports = {
+    NvRadioButton
+}

package/package.json

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