hortimagic 1.0.3 → 1.0.5

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "hortimagic",
   "private": false,
-  "version": "1.0.3",
-  "changelog": "修复了对话框注册较晚的bug,增加了初始化完成的标志",
+  "version": "1.0.5",
+  "changelog": "重新构建了插件，实现了响应式状态管理",
   "author": "Narlen",
   "description": "园艺魔法，花园插件",
   "keywords": [
@@ -24,7 +24,7 @@
   "dependencies": {
     "lit": "^3.3.1",
     "terser": "^5.44.0",
-    "tiny-emitter": "^2.1.0",
+    "valtio": "^2.2.0",
     "vite-plugin-dts": "^4.5.4"
   },
   "devDependencies": {

package/src/components/hm-accordion.ts

@@ -1,8 +1,10 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 /**
+ * 折叠面板
  * @example
- *   <hm-accordion>
+ * <hm-accordion title-content="标题内容"></hm-accordion>
+ * <hm-accordion>
     <span slot="header">我的折叠面板</span>
     <div>内容项 1</div>
     <div>内容项 2</div>
@@ -13,9 +15,12 @@ export class HmAccordion extends LitElement {
   @property({ type: String, attribute: 'max-height' })
   maxHeight = '500px';
 
+  /** 折叠项 */
   @property({ type: Array })
   items: any[] = [];
-
+  /** 标题内容 */
+  @property({ type: String, attribute: 'title-content' })
+  titleContent = '标题内容';
   /** 是否展开 */
   @property({ type: Boolean })
   expanded = false;
@@ -104,15 +109,11 @@ export class HmAccordion extends LitElement {
     return html`
       <div class="accordion-container" style="max-height: ${this.maxHeight}">
         <div class="accordion-header" @click=${this.togglePanel}>
-          <slot name="header">面板标题</slot>
+          <slot name="header">${this.titleContent}</slot>
           <div class="accordion-toggle">
             ${!this.expanded
-        ? html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
-                  </svg>`
-        : html`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                    <path d="M7.247 4.86l-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
-                  </svg>`}
+        ? html`<hm-icon icon="arrow-down"></hm-icon>`
+        : html`<hm-icon icon="arrow-up"></hm-icon>`}
           </div>
         </div>
         

package/src/components/hm-button.ts

@@ -62,13 +62,13 @@ export class HmButton extends LitElement {
   @property({ type: Boolean })
   loading = false;
 
-
   static styles = css`
       :host {
         display: inline-block;
       }
       
       .button {
+        width: 100%;
         display: inline-flex;
         align-items: center;
         justify-content: center;
@@ -122,7 +122,7 @@ export class HmButton extends LitElement {
   render() {
     const buttonStyle = `
           ${this.color ? `color: ${this.color};` : ''}
-          ${this.background ? `background-color: ${this.background};` : ''}
+          ${this.background ? `background: ${this.background};` : ''}
           ${this.width ? `width: ${this.width};` : ''}
           ${this.height ? `height: ${this.height};` : ''}
           ${this.fontSize ? `font-size: ${this.fontSize};` : '14px'}
@@ -155,7 +155,6 @@ export class HmButton extends LitElement {
       e.stopPropagation();
       return;
     }
-
     this.dispatchEvent(new CustomEvent('hm-button-click'));
   }
 }

package/src/components/hm-cell.ts

@@ -14,41 +14,12 @@ import { customElement, property } from 'lit/decorators.js';
  * @cssprop --hm-cell-background - 背景颜色
  * 
  * @example
- * ```html
- * <!-- 基础用法 -->
- * <hm-cell 
- *   titleName="单元格标题" 
- *   descripthion="这是描述信息" 
- *   content="内容区域">
- * </hm-cell>
- * 
- * <!-- 使用插槽自定义内容 -->
- * <hm-cell>
- *   <div slot="title">自定义标题</div>
- *   <div slot="description">自定义描述</div>
- *   <div slot="content">自定义内容</div>
- * </hm-cell>
- * 
- * <!-- 带点击事件 -->
- * <hm-cell 
- *   titleName="可点击标题" 
- *   content="点击查看详情"
- *   .titleClickCallback="${() => console.log('标题被点击')}"
- *   .contentClickCallback="${() => console.log('内容被点击')}">
- * </hm-cell>
- * 
- * <!-- 自定义样式 -->
- * <hm-cell 
- *   titleName="自定义样式" 
- *   content="特殊样式"
- *   style="--hm-cell-background: #f0f8ff; --hm-cell-title-color: #1890ff;">
- * </hm-cell>
- * ```
+ * <hm-cell title-name="标题" descripthion="描述信息" content="内容"></hm-cell>
  */
 @customElement('hm-cell')
 export class HmCell extends LitElement {
   /** 标题，使用slot后失效 */
-  @property()
+  @property({ attribute: 'title-name' })
   titleName = "单元格";
   /** 标题下方描述，使用slot后失效 */
   @property()
@@ -82,9 +53,7 @@ export class HmCell extends LitElement {
     part="right-section"
     @click="${this.contentClickCallback}"
   >
-    <div class="content" part="content">
-      <slot name="content">${this.content}</slot>
-    </div>
+    <div class="content" part="content"><slot>${this.content}</slot></div>
   </div>
 </div>
 
@@ -126,7 +95,7 @@ export class HmCell extends LitElement {
     }
 
     .description {
-      font-size: var(--hm-cell-description-font-size, 14px);
+      font-size: var(--hm-cell-description-font-size, 12px);
       color: var(--hm-cell-description-color, #666666);
       line-height: 1.4;
     }

package/src/components/hm-dialog.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+// import { logger } from '../core/log-tools';
 
 /**
  * @example
@@ -86,7 +87,7 @@ export class HmDialog extends LitElement {
 
     /** 确认，触发 dialog-close dialog-confirm事件*/
     confirm() {
-        // console.debug("确认对话框事件");
+        // logger.log('dialog', "对话框确认事件");
         this.close();
         this.dispatchEvent(new CustomEvent('hm-dialog-confirm'));
     }
@@ -116,8 +117,8 @@ export class HmDialog extends LitElement {
     <slot></slot>
     <div class="footer">
         <slot name="footer">
-            <hm-button @click="${() => { this.cancel(); console.debug("取消") }}">取消</hm-button>
-            <hm-button @click="${() => { this.confirm(); console.debug("确定") }}">确定</hm-button>
+            <hm-button @hm-button-click="${() => { this.cancel(); }}">取消</hm-button>
+            <hm-button @hm-button-click="${() => { this.confirm(); }}">确定</hm-button>
         </slot>
     </div>
 </div>

package/src/components/hm-icon.ts

@@ -2,11 +2,19 @@ import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
-
-const iconMap = new Map([
+/** 存储图标的map类型数据
+ * key: 图标名称
+ * value: 图标svg代码
+ * 遍历图标名称的方式如下：
+ * @example
+ * for (const [iconName, iconSvg] of iconMap) {}
+ */
+export const iconMap = new Map([
     ['magic-wand', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.64 1.87l-.84 2.48a.41.41 0 0 0 0 .37l1.57 2.1a.4.4 0 0 1-.33.64h-2.62a.43.43 0 0 0-.33.17l-1.46 2.1a.4.4 0 0 1-.71-.11l-.78-2.5a.38.38 0 0 0-.26-.26l-2.5-.78a.4.4 0 0 1-.11-.71l2.14-1.51a.43.43 0 0 0 .17-.33V.91a.4.4 0 0 1 .6-.33l2.1 1.57a.41.41 0 0 0 .37.05l2.48-.84a.4.4 0 0 1 .51.51m-5.6 5.09L.5 13.5" stroke-width="1"/></svg>'],
     ['close', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"/></svg>'],
     ['open', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M4 21q-.425 0-.712-.288T3 20v-6q0-.425.288-.712T4 13t.713.288T5 14v3.6L17.6 5H14q-.425 0-.712-.288T13 4t.288-.712T14 3h6q.425 0 .713.288T21 4v6q0 .425-.288.713T20 11t-.712-.288T19 10V6.4L6.4 19H10q.425 0 .713.288T11 20t-.288.713T10 21z"/></svg>'],
+    ['led-on', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 0v4h2V0zm7.3 2.29l-3.06 3l1.4 1.42l3.06-3zm-12.59 0L4.29 3.71l3 3l1.42-1.42zM12 6a4 4 0 0 0-4 4v6H6v2h3v5h2v-5h2v5h2v-5h3v-2h-2v-6a4 4 0 0 0-4-4M2 9v2h4V9zm16 0v2h4V9z"/></svg>'],
+    ['led-off', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6a4 4 0 0 0-4 4v6H6v2h3v5h2v-5h2v5h2v-5h3v-2h-2v-6a4 4 0 0 0-4-4"/></svg>'],
     ['arrow-up', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1"/></svg>'],
     ['arrow-down', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 17a1.72 1.72 0 0 1-1.33-.64l-4.21-5.1a2.1 2.1 0 0 1-.26-2.21A1.76 1.76 0 0 1 7.79 8h8.42a1.76 1.76 0 0 1 1.59 1.05a2.1 2.1 0 0 1-.26 2.21l-4.21 5.1A1.72 1.72 0 0 1 12 17"/></svg>'],
     ['template', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><mask id="SVGZZ153dkC"><path fill="#4d4d4d" stroke="#fff" stroke-linejoin="round" stroke-width="4" d="M23 4H4v22h19zm21 30H4v9h40zm0-30H31v8h13zm0 14H31v8h13z"/></mask></defs><path fill="currentColor" d="M0 0h48v48H0z" mask="url(#SVGZZ153dkC)"/></svg>'],
@@ -15,21 +23,42 @@ const iconMap = new Map([
     ['filter-off', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3.004 1.59L3 1.586L1.586 3l4.928 4.928L10 12.818V21h4v-5.585l7 7l1.41-1.41L3 1.595zm12.266 9.446L21 3H7.234z"/></svg>'],
     ['eye', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16 11v2h-1v1h-1v1h-1v1h-2v-1h-1v-1H9v-1H8v-2h2v-1h1V8h2v1h1v1h1v1z"/><path fill="currentColor" d="M22 11V9h-1V8h-1V7h-1V6h-2V5H7v1H5v1H4v1H3v1H2v2H1v2h1v2h1v1h1v1h1v1h2v1h10v-1h2v-1h1v-1h1v-1h1v-2h1v-2zm-4 2h-1v2h-1v1h-1v1h-2v1h-2v-1H9v-1H8v-1H7v-2H6v-2h1V9h1V8h1V7h2V6h2v1h2v1h1v1h1v2h1z"/></svg>'],
     ['eye-off', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M2 13H1v-2h1V9h1V8h1V7h1V6h2V5h8v1h-1v1h-1V6h-2v1H9v1H8v1H7v2H6v2h1v1H6v1H5v1H3v-1H2z"/><path fill="currentColor" d="M8 11h1v1H8zm3-3h1v1h-1zm-2 9H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H9zm3-2h1v1h-1zm1-1h1v1h-1zm2-2h1v1h-1zm-1 1h1v1h-1z"/><path fill="currentColor" d="M23 11v2h-1v2h-1v1h-1v1h-1v1h-2v1H9v-1h1v-1h1v1h2v-1h2v-1h1v-1h1v-2h1v-2h-1v-1h1V9h1V8h2v1h1v2z"/></svg>'],
+    ['config', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="4"><path d="m24 4l-6 6h-8v8l-6 6l6 6v8h8l6 6l6-6h8v-8l6-6l-6-6v-8h-8z"/><path d="M24 30a6 6 0 1 0 0-12a6 6 0 0 0 0 12Z"/></g></svg>'],
+    ['log', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3.5 2.5v11h9v-11zM3 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm5 10a.75.75 0 0 1 .75-.75h1.75a.75.75 0 0 1 0 1.5H8.75A.75.75 0 0 1 8 11m-2 1a1 1 0 1 0 0-2a1 1 0 0 0 0 2m2-4a.75.75 0 0 1 .75-.75h1.75a.75.75 0 0 1 0 1.5H8.75A.75.75 0 0 1 8 8M6 9a1 1 0 1 0 0-2a1 1 0 0 0 0 2m2-4a.75.75 0 0 1 .75-.75h1.75a.75.75 0 0 1 0 1.5H8.75A.75.75 0 0 1 8 5M6 6a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clip-rule="evenodd"/></svg>'],
+    ['edit', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path fill="currentColor" fill-opacity="0" stroke-dasharray="44" stroke-dashoffset="44" d="M7 17v-4l10 -10l4 4l-10 10h-4"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.3s" dur="0.5s" to="0"/><animate fill="freeze" attributeName="fill-opacity" begin="1s" dur="0.15s" to="0.3"/></path><g fill="none"><path stroke-dasharray="20" d="M3 21h18"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="20;0"/></path><path stroke-dasharray="8" stroke-dashoffset="8" d="M14 6l4 4"><animate fill="freeze" attributeName="stroke-dashoffset" begin="0.8s" dur="0.2s" to="0"/></path></g></g></svg>'],
+    ['run', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M4.506 3.503L12.501 8l-8 4.5zm-.004-1.505C3.718 1.998 3 2.626 3 3.5v9c0 .874.718 1.502 1.502 1.502c.245 0 .496-.061.733-.195l8-4.5c1.019-.573 1.019-2.041 0-2.615l-8-4.499a1.5 1.5 0 0 0-.733-.195"/></svg>'],
+    ['delete', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4zm2 2h6V4H9zM6.074 8l.857 12H17.07l.857-12zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1"/></svg>'],
+    ['video', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 15.75v-7.5a2 2 0 0 1 2-2h8.5a2 2 0 0 1 2 2v7.5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2m17.168-8.759l-4 3.563a.5.5 0 0 0-.168.373v1.778a.5.5 0 0 0 .168.373l4 3.563a.5.5 0 0 0 .832-.374V7.365a.5.5 0 0 0-.832-.374"/></svg>'],
+    ['play-video', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="currentColor" d="M85.527 80.647a4.97 4.97 0 0 0 4.973-4.974V24.327a4.97 4.97 0 0 0-4.973-4.974H14.474A4.97 4.97 0 0 0 9.5 24.327v51.346a4.97 4.97 0 0 0 4.974 4.974zm-4.974-9.948H19.446V29.301h61.107z"/><path fill="currentColor" d="m64.819 50.288l-11.98 6.913l-11.974 6.917V36.462l11.974 6.918z"/></svg>'],
+    ['game', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M7.96 13.33h32.08a3.455 3.455 0 0 1 3.46 3.448v14.429a3.455 3.455 0 0 1-3.446 3.464H7.96A3.455 3.455 0 0 1 4.5 31.22V16.793a3.455 3.455 0 0 1 3.446-3.464z" stroke-width="1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M13.25 16.938v5.401H8.11v3.385h5.14v5.338h3.577v-5.338h5.334V22.34h-5.334v-5.4zm19.513 9.68a2.58 2.58 0 0 1-2.582 2.583h0a2.58 2.58 0 0 1-2.58-2.583a2.582 2.582 0 1 1 5.162-.001zm7.076-5.235a2.58 2.58 0 0 1-2.58 2.584h0a2.58 2.58 0 0 1-2.583-2.583v0A2.58 2.58 0 0 1 37.26 18.8h0a2.58 2.58 0 0 1 2.581 2.583" stroke-width="1"/></svg>'],
+    ['save', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M64 48c-8.726 0-16 7.274-16 16v384c0 8.726 7.274 16 16 16h215v-16H64V64h63.375v97.53c0 3.924 3.443 7.095 7.72 7.095h169.81c4.277 0 7.72-3.17 7.72-7.094V64h69.22c.428.318.8.548 1.467 1.094c2.05 1.675 4.962 4.264 8.375 7.406c6.827 6.283 15.65 14.837 24.313 23.5s17.217 17.486 23.5 24.313c3.142 3.413 5.73 6.324 7.406 8.374c.546.668.776 1.04 1.094 1.47V330.25l16 16V128c0-2.68-.657-3.402-1.03-4.156a15 15 0 0 0-1.095-1.844c-.74-1.1-1.575-2.19-2.594-3.438c-2.036-2.492-4.768-5.55-8.03-9.093c-6.524-7.09-15.155-16-23.938-24.782s-17.692-17.414-24.78-23.938c-3.545-3.262-6.6-5.994-9.094-8.03c-1.247-1.02-2.337-1.855-3.438-2.595c-.55-.37-1.09-.72-1.844-1.094c-.754-.373-1.477-1.03-4.156-1.03zm87.72 16h48.56c4.277 0 7.72 4.425 7.72 9.938v70.124c0 5.513-3.443 9.938-7.72 9.938h-48.56c-4.277 0-7.72-4.425-7.72-9.938V73.938c0-5.512 3.443-9.937 7.72-9.937zM114 212c-4.432 0-8 3.568-8 8v184c0 4.432 3.568 8 8 8h165v-28h-76.72l15.345-15.375l128-128L352 234.28l6.375 6.345L406 288.25V220c0-4.432-3.568-8-8-8zm238 47.75L245.75 366H297v128h110V366h51.25zM448 384v64h-23v16h23c8.726 0 16-7.274 16-16v-64z"/></svg>'],
+    ['load', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M64 48c-8.726 0-16 7.274-16 16v384c0 8.726 7.274 16 16 16h236.25l-16-16H64V64h63.375v97.53c0 3.924 3.443 7.095 7.72 7.095h169.81c4.277 0 7.72-3.17 7.72-7.094V64h69.22c.428.318.8.548 1.467 1.094c2.05 1.675 4.962 4.264 8.375 7.406c6.827 6.283 15.65 14.837 24.313 23.5s17.217 17.486 23.5 24.313c3.142 3.413 5.73 6.324 7.406 8.374c.546.668.776 1.04 1.094 1.47V366h16V128c0-2.68-.657-3.402-1.03-4.156a15 15 0 0 0-1.095-1.844c-.74-1.1-1.575-2.19-2.594-3.438c-2.036-2.492-4.768-5.55-8.03-9.093c-6.524-7.09-15.155-16-23.938-24.782s-17.692-17.414-24.78-23.938c-3.545-3.262-6.6-5.994-9.094-8.03c-1.247-1.02-2.337-1.855-3.438-2.595c-.55-.37-1.09-.72-1.844-1.094c-.754-.373-1.477-1.03-4.156-1.03zm87.72 16h48.56c4.277 0 7.72 4.425 7.72 9.938v70.124c0 5.513-3.443 9.938-7.72 9.938h-48.56c-4.277 0-7.72-4.425-7.72-9.938V73.938c0-5.512 3.443-9.937 7.72-9.937zM114 212c-4.432 0-8 3.568-8 8v184c0 4.432 3.568 8 8 8h134.25l-30.625-30.625L202.28 366H279V238h127v-18c0-4.432-3.568-8-8-8zm183 44v128h-51.25L352 490.25L458.25 384H407V256zm167 147.75l-16 16V448h-28.25l-16 16H448c8.726 0 16-7.274 16-16z"/></svg>'],
+    ['refresh', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17.65 6.35A7.96 7.96 0 0 0 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.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z"/></svg>'],
+    ['post-add','<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h9v2H5v14h14v-9h2v9q0 .825-.587 1.413T19 21zm3-4v-2h8v2zm0-3v-2h8v2zm0-3V9h8v2zm9-2V7h-2V5h2V3h2v2h2v2h-2v2z"/></svg>'],
+    
 ]);
 
-// 提供静态方法用于外部注册图标
+/** 提供静态方法用于外部注册图标 */
 export function registerIcon(name: string, svgContent: string) {
     iconMap.set(name, svgContent);
 }
 
-// 获取svg代码
+/** 获取svg代码 */
 export function getIcon(name: string) {
     // 修复：从 iconMap 中获取对应图标，如果没有则返回默认图标
     return iconMap.get(name) || '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.64 1.87l-.84 2.48a.41.41 0 0 0 0 .37l1.57 2.1a.4.4 0 0 1-.33.64h-2.62a.43.43 0 0 0-.33.17l-1.46 2.1a.4.4 0 0 1-.71-.11l-.78-2.5a.38.38 0 0 0-.26-.26l-2.5-.78a.4.4 0 0 1-.11-.71l2.14-1.51a.43.43 0 0 0 .17-.33V.91a.4.4 0 0 1 .6-.33l2.1 1.57a.41.41 0 0 0 .37.05l2.48-.84a.4.4 0 0 1 .51.51m-5.6 5.09L.5 13.5" stroke-width="1"/></svg>';
 }
 
+/** 图标组件
+ * @example
+ * <hm-icon icon="magic-wand"></hm-icon>
+ * <hm-icon icon="close"></hm-icon>
+ * <hm-icon icon="open"></hm-icon>
+ * <hm-icon icon="arrow-up"></hm-icon>
+ */
 @customElement('hm-icon')
 export class HmIcon extends LitElement {
+    /** 图标名称 */
     @property({ type: String })
     icon = 'magic-wand';
 

package/src/components/hm-menu.ts

@@ -3,12 +3,16 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('hm-menu')
 export class HmMenu extends LitElement {
+  /** 图标 */
   @property({ type: String })
   icon = 'magic-wand';
+  /** 内容 */
   @property({ type: String })
-  content = 'HortiMagic';
+  content = 'HortiMagicMenu';
+  /** 标记 */
   @property({ type: Boolean })
   flag = false;
+  /** 是否是菜单项（二级菜单） */
   @property({ type: Boolean })
   isMenuItem = false;
 

package/src/components/hm-move-panel.ts

@@ -1,6 +1,8 @@
 import { LitElement, css, html } from 'lit';
-import { customElement, property, queryAsync } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
+import { logger } from '../core/log-tools';
 
+let Tag = 'MovePanel';
 /** 创建的窗口列表 */
 export let movePanelItemList: HmMovePanel[] = [];
 /** 窗口基础的层级，每新建一个加一,从99999开始加 */
@@ -25,17 +27,19 @@ export class HmMovePanel extends LitElement {
   bodyColor = 'rgba(23, 23, 23, 0.9)';
   @property({ type: String, attribute: 'footer-background-color' })
   footerBackgroundColor = 'rgba(255,255,255,0.7)';
+  /** 按钮背景 */
   @property({ type: String, attribute: 'button-background-color' })
-  buttonBackgroundColor = 'rgba(255,255,255,0.9)';
+  buttonBackground = 'rgba(255,255,255,0.9)';
+  /** 按钮文字色 */
   @property({ type: String, attribute: 'button-color' })
   buttonColor = 'rgba(66,134,182,0.9)';
   /** 标题 */
   @property({ type: String }) titleContent = '面板';
   @property({ type: String, attribute: 'left-button-text' })
-  leftButtonText = '按钮1';
+  leftButtonText = '';
   @property({ type: String, attribute: 'right-button-text' })
-  rightButtonText = '按钮2';
-  /** 显示状态,不建议直接修改，请使用show()和hide()方法，否则无法触发对应事件 */
+  rightButtonText = '';
+  /** 显示状态,不建议直接修改，请使用showMovePanel()和hideMovePanel()方法，否则无法触发对应事件 */
   @property({ type: Boolean, attribute: 'is-display' })
   isDisplay = false;
   @property({ type: Number })
@@ -43,6 +47,12 @@ export class HmMovePanel extends LitElement {
   /** 左上角图标 */
   @property({ type: String })
   icon = 'magic-wand'
+  /** 左下角图标 */
+  @property({ type: String, attribute: 'left-icon' })
+  leftIcon = 'magic-wand'
+  /** 右下角图标 */
+  @property({ type: String, attribute: 'right-icon' })
+  rightIcon = 'magic-wand'
   /* 定位左边 */
   @property({ type: Number })
   left = (window.innerWidth - this.width) / 2;
@@ -50,18 +60,6 @@ export class HmMovePanel extends LitElement {
   @property({ type: Number })
   top = (window.innerHeight - (this.height + 80)) / 2;
 
-  handleLeftClick() {
-    this.hideMovePanel();
-  }
-  handleRightClick() {
-    this.hideMovePanel();
-  }
-  /**
-   * 组件内部的body元素
-   */
-  @queryAsync('.body')
-  body!: Promise<HTMLDivElement>;
-
   static styles = css`
 .panel {
   position: absolute;
@@ -151,7 +149,7 @@ export class HmMovePanel extends LitElement {
   /** 关闭移动窗口 */
   hideMovePanel() {
     this.isDisplay = false;
-    console.debug('关闭事件');
+    // logger.log(Tag, '关闭事件');
     this.dispatchEvent(new CustomEvent('close', {
       detail: { isDisplay: this.isDisplay, message: '关闭事件' },
       bubbles: true,
@@ -161,7 +159,7 @@ export class HmMovePanel extends LitElement {
   /** 显示移动窗口 */
   showMovePanel() {
     this.isDisplay = true;
-    console.debug('显示事件');
+    // logger.log(Tag, '显示事件');
     this.dispatchEvent(new CustomEvent('show', {
       detail: { isDisplay: this.isDisplay },
       bubbles: true,
@@ -179,7 +177,7 @@ export class HmMovePanel extends LitElement {
   // 添加拖动功能
   dragging = false
   mouseDragging(e: MouseEvent) {
-    // console.debug('标题按下');
+    // logger.log(Tag, '标题按下');
     // 窗口原本位置
     let templeft = this.left;
     // 窗口原本位置
@@ -189,8 +187,8 @@ export class HmMovePanel extends LitElement {
     let offsetX = e.clientX - templeft;
     let offsetY = e.clientY - temptop;
 
-    // console.debug('鼠标位置', e.clientX, e.clientY);
-    // console.debug('窗口位置', templeft, temptop);
+    // logger.log(Tag, '鼠标位置', e.clientX, e.clientY);
+    // logger.log(Tag, '窗口位置', templeft, temptop);
     (this.dragging == false) && (this.dragging = true);
     document.onmousemove = (e) => {
       if (this.dragging) {
@@ -199,14 +197,14 @@ export class HmMovePanel extends LitElement {
       }
     }
     document.onmouseup = () => {
-      // console.debug('标题抬起');
+      // logger.log(Tag, '标题抬起');
       this.dragging && (this.dragging = false);
       document.onmousemove = null
     }
   }
   // 适配移动端
   touchDragging(e: TouchEvent) {
-    // console.debug('触摸标题按下');
+    // logger.log(Tag, '触摸标题按下');
     // 窗口原本位置
     let templeft = this.left;
     // 窗口原本位置
@@ -216,8 +214,8 @@ export class HmMovePanel extends LitElement {
     let offsetX = e.touches[0].clientX - templeft;
     let offsetY = e.touches[0].clientY - temptop;
 
-    // console.debug('触摸鼠标位置', e.touches[0].clientX, e.touches[0].clientY);
-    // console.debug('触摸窗口位置', templeft, temptop);
+    // logger.log(Tag, '触摸鼠标位置', e.touches[0].clientX, e.touches[0].clientY);
+    // logger.log(Tag, '触摸窗口位置', templeft, temptop);
     (this.dragging == false) && (this.dragging = true);
     document.ontouchmove = (e) => {
       if (this.dragging) {
@@ -226,14 +224,14 @@ export class HmMovePanel extends LitElement {
       }
     }
     document.ontouchend = () => {
-      // console.debug('标题抬起');
+      // logger.log(Tag, '标题抬起');
       this.dragging && (this.dragging = false);
       document.onmousemove = null
     }
   }
   // 置顶窗口
   putTop() {
-    // console.debug('置顶窗口');
+    // logger.log(Tag, '置顶窗口');
     let res = false;
     if (movePanelItemList.includes(this)) {
       // 先把比它大的都减小一层
@@ -244,9 +242,8 @@ export class HmMovePanel extends LitElement {
       // 再把自己设置成最高的
       this.zIndex = movePanelItemMaxZindex;
       res = true;
-      // console.debug('置顶窗口成功');
     } else {
-      // console.warn('置顶失败，窗口不在列表中');
+      logger.warn(Tag, '置顶失败，窗口不在列表中');
       res = false;
     }
     return res;
@@ -312,21 +309,21 @@ export class HmMovePanel extends LitElement {
   <div class="footer" style="background-color: ${this.footerBackgroundColor};width:${this.width}px;">
     <hm-button
       class="footer-button footer-button-left"  
-      icon="magic-wand"
+      icon="${this.leftIcon}
       width="100%"
-      backgroundColor="${this.buttonBackgroundColor}"
+      background="${this.buttonBackground}"
       color="${this.buttonColor}"
-      @click="${this._handleLeftButtonClick}"
+      @click="${this.handleLeftButtonClick}"
     >
       ${this.leftButtonText}
       </hm-button>
     <hm-button
       class="footer-button footer-button-right"
-      icon="magic-wand"
+      icon="${this.rightIcon}"
       width="100%"
-      backgroundColor="${this.buttonColor}"
-      color="${this.buttonBackgroundColor}"
-      @click="${this._handleRightButtonClick}"
+      background="${this.buttonColor}"
+      color="${this.buttonBackground}"
+      @click="${this.handleRightButtonClick}"
     >
       ${this.rightButtonText}
     </hm-button>
@@ -340,7 +337,7 @@ export class HmMovePanel extends LitElement {
     this.hideMovePanel();
   }
 
-  _handleLeftButtonClick() {
+  handleLeftButtonClick() {
     this.dispatchEvent(new CustomEvent('left-button-click', {
       detail: { message: '左侧按钮被点击' },
       bubbles: true,
@@ -348,7 +345,7 @@ export class HmMovePanel extends LitElement {
     }));
   }
 
-  _handleRightButtonClick() {
+  handleRightButtonClick() {
     this.dispatchEvent(new CustomEvent('right-button-click', {
       detail: { message: '右侧按钮被点击' },
       bubbles: true,