hortimagic 1.0.0

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "hortimagic",
+  "private": false,
+  "version": "1.0.0",
+  "author": "Narlen",
+  "description": "园艺魔法，花园插件",
+  "keywords": [
+    "iirose",
+    "plugins",
+    "hortimagic"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NarlenHua/hortimagic.git"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lit": "^3.3.1",
+    "terser": "^5.44.0",
+    "tiny-emitter": "^2.1.0",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.9.1",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7"
+  },
+  "main": "dist/Horticraft.life.js",
+  "module": "dist/HortiCraft.es.js",
+  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/components",
+    "types"
+  ]
+}

package/src/components/hm-accordion.ts

@@ -0,0 +1,141 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+/**
+ * @example
+ *   <hm-accordion>
+    <span slot="header">我的折叠面板</span>
+    <div>内容项 1</div>
+    <div>内容项 2</div>
+  </hm-accordion>
+ */
+@customElement('hm-accordion')
+export class HmAccordion extends LitElement {
+  @property({ type: String, attribute: 'max-height' })
+  maxHeight = '500px';
+
+  @property({ type: Array })
+  items: any[] = [];
+
+  /** 是否展开 */
+  @property({ type: Boolean })
+  expanded = false;
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    
+    .accordion-container {
+      display: flex;
+      flex-direction: column;
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      background-color: white;
+      overflow: hidden;
+      transition: all 0.3s ease;
+    }
+    
+    .accordion-header {
+      padding: 16px 20px;
+      background-color: #f8f9fa;
+      border-bottom: 1px solid #e9ecef;
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #212529;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+    
+    .accordion-header:hover {
+      background-color: #e9ecef;
+    }
+    
+    .accordion-toggle {
+      transition: transform 0.3s ease;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .accordion-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0;
+      background-color: #ffffff;
+      transition: max-height 0.3s ease, opacity 0.3s ease;
+    }
+    
+    .accordion-footer {
+      padding: 12px 20px;
+      background-color: #f8f9fa;
+      border-top: 1px solid #e9ecef;
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+    
+    .accordion-item {
+      padding: 12px 20px;
+      border-bottom: 1px solid #e9ecef;
+      transition: background-color 0.2s;
+    }
+    
+    .accordion-item:last-child {
+      border-bottom: none;
+    }
+    
+    .accordion-item:hover {
+      background-color: #f8f9fa;
+    }
+  `;
+  /** 开关容器 */
+  togglePanel() {
+    this.expanded = !this.expanded;
+  }
+
+  render() {
+    return html`
+      <div class="accordion-container" style="max-height: ${this.maxHeight}">
+        <div class="accordion-header" @click=${this.togglePanel}>
+          <slot name="header">面板标题</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>`}
+          </div>
+        </div>
+        
+        <div class="accordion-content" ?hidden=${!this.expanded}>
+          ${this.items.length > 0
+        ? this.items.map(
+          (item) => html`<div class="accordion-item">${item}</div>`
+        )
+        : html`<slot></slot>`}
+        </div>
+        
+        <div class="accordion-footer" ?hidden=${!this.expanded}>
+          <slot name="footer">
+            <hm-button @hm-button-click="${() => { this.expanded = false }}">关闭</hm-button>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hm-accordion': HmAccordion;
+  }
+}

package/src/components/hm-button.ts

@@ -0,0 +1,161 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * 按钮组件
+ * 
+ * @example
+ * ```html
+ * <!-- 基础用法 -->
+ * <hm-button content="普通按钮"></hm-button>
+ * 
+ * <!-- 带图标按钮 -->
+ * <hm-button icon="plus" content="添加"></hm-button>
+ * 
+ * <!-- 自定义颜色 -->
+ * <hm-button 
+ *   content="自定义样式" 
+ *   color="#ffffff" 
+ *   background="#4caf50">
+ * </hm-button>
+ * 
+ * <!-- 禁用状态 -->
+ * <hm-button content="禁用按钮" .enable="${false}"></hm-button>
+ * 
+ * <!-- 加载状态 -->
+ * <hm-button content="加载中" .loading="${true}"></hm-button>
+ * 
+ * <!-- 自定义尺寸 -->
+ * <hm-button content="大按钮" width="200px" height="50px"></hm-button>
+ * <hm-button content="小按钮" width="60px" height="30px" fontSize="8px"></hm-button>
+ * ```
+ */
+@customElement('hm-button')
+export class HmButton extends LitElement {
+  /** 按钮图标 */
+  @property({ type: String })
+  icon = '';
+
+  /** 按钮文字内容 */
+  @property({ type: String })
+  content = '';
+  /** 字体大小 */
+  @property({ type: String })
+  fontSize = '14px'
+  /** 字体颜色 */
+  @property({ type: String })
+  color = '';
+
+  /** 背景颜色 */
+  @property({ type: String })
+  background = '';
+  @property({ type: String })
+  width = '';
+  @property({ type: String })
+  height = '';
+
+  /** 是否启用 */
+  @property({ type: Boolean })
+  enable = true;
+
+  /** 是否加载中 */
+  @property({ type: Boolean })
+  loading = false;
+
+
+  static styles = css`
+      :host {
+        display: inline-block;
+      }
+      
+      .button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+        border-radius: 4px;
+        padding: 8px 16px;
+        cursor: pointer;
+        transition: all 0.3s;
+        opacity: 1;
+        // 添加鼠标悬停动画
+        &:hover:not(:disabled) {
+          transform: translateY(-2px);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+        }
+      }
+      
+      .button:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      
+      .button.loading {
+        cursor: not-allowed;
+      }
+      
+      .loading-spinner {
+        width: 14px;
+        height: 14px;
+        border: 2px solid transparent;
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: rotate 1s linear infinite;
+        margin-right: 8px;
+      }
+      
+      @keyframes rotate {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      
+      .button-content {
+        display: flex;
+        align-items: center;
+      }
+    `;
+
+  render() {
+    const buttonStyle = `
+          ${this.color ? `color: ${this.color};` : ''}
+          ${this.background ? `background-color: ${this.background};` : ''}
+          ${this.width ? `width: ${this.width};` : ''}
+          ${this.height ? `height: ${this.height};` : ''}
+          ${this.fontSize ? `font-size: ${this.fontSize};` : '14px'}
+        `;
+
+    return html`
+          <button 
+            class="button" 
+            style="${buttonStyle}"
+            ?disabled="${!this.enable || this.loading}"
+            @click="${this._handleClick}">
+            
+            ${this.loading ? html`
+              <div class="loading-spinner"></div>
+            ` : this.icon ? html`
+              <slot name="icon">
+                <hm-icon icon="${this.icon}" style="margin-right: 8px;"></hm-icon>
+              </slot>
+            ` : ''}
+            
+            <span class="button-content">
+              <slot>${this.content}</slot>
+            </span>
+          </button>
+        `;
+  }
+
+  private _handleClick(e: MouseEvent) {
+    if (!this.enable || this.loading) {
+      e.stopPropagation();
+      return;
+    }
+
+    this.dispatchEvent(new CustomEvent('hm-button-click'));
+  }
+}

package/src/components/hm-cell.ts

@@ -0,0 +1,181 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * 单元格组件
+ * 用于展示列表内容或选项，采用左右分栏布局
+ * 
+ * @slot title - 标题内容（左侧）
+ * @slot description - 描述信息（左侧）
+ * @slot content - 主要内容（右侧）
+ * 
+ * @cssprop --hm-cell-padding - 内边距
+ * @cssprop --hm-cell-border - 边框样式
+ * @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>
+ * ```
+ */
+@customElement('hm-cell')
+export class HmCell extends LitElement {
+  /** 标题，使用slot后失效 */
+  @property()
+  titleName = "单元格";
+  /** 标题下方描述，使用slot后失效 */
+  @property()
+  descripthion = "描述信息";
+  /** 右侧正文，使用slot后失效 */
+  @property()
+  content = "内容";
+  /** 标题点击回调函数 */
+  @property()
+  titleClickCallback = () => { }
+  /** 正文点击回调函数 */
+  @property()
+  contentClickCallback = () => { }
+  render() {
+    return html`
+<div class="cell" part="cell">
+  <div
+    class="left-section"
+    part="left-section"
+    @click="${this.titleClickCallback}"
+  >
+    <div class="title" part="title">
+      <slot name="title">${this.titleName}</slot>
+    </div>
+    <div class="description" part="description">
+      <slot name="description">${this.descripthion}</slot>
+    </div>
+  </div>
+  <div
+    class="right-section"
+    part="right-section"
+    @click="${this.contentClickCallback}"
+  >
+    <div class="content" part="content">
+      <slot name="content">${this.content}</slot>
+    </div>
+  </div>
+</div>
+
+`;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .cell {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      min-height: 60px;
+      padding: var(--hm-cell-padding, 12px 16px);
+      background: var(--hm-cell-background, #ffffff);
+      border: var(--hm-cell-border, 1px dashed #e0e0e0);
+      box-sizing: border-box;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+
+    .left-section {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex: 1;
+      min-width: 0; /* 允许文本截断 */
+    }
+
+    .title {
+      font-size: var(--hm-cell-title-font-size, 18px);
+      font-weight: var(--hm-cell-title-font-weight, 600);
+      color: var(--hm-cell-title-color, #000000);
+      line-height: 1.4;
+      margin-bottom: 2px;
+    }
+
+    .description {
+      font-size: var(--hm-cell-description-font-size, 14px);
+      color: var(--hm-cell-description-color, #666666);
+      line-height: 1.4;
+    }
+
+    .right-section {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-left: auto;
+      padding-left: 16px;
+    }
+
+    .content {
+      font-size: var(--hm-cell-content-font-size, 16px);
+      color: var(--hm-cell-content-color, #333333);
+      text-align: right;
+      padding-right: var(--hm-cell-content-padding-right, 30px);
+    }
+
+    /* 响应式设计 */
+    @media (max-width: 480px) {
+      .cell {
+        padding: var(--hm-cell-mobile-padding, 10px 12px);
+        min-height: 50px;
+      }
+      
+      .title {
+        font-size: var(--hm-cell-mobile-title-font-size, 16px);
+      }
+      
+      .description {
+        font-size: var(--hm-cell-mobile-description-font-size, 12px);
+      }
+      
+      .content {
+        font-size: var(--hm-cell-mobile-content-font-size, 14px);
+        padding-right: var(--hm-cell-mobile-content-padding-right, 16px);
+      }
+    }
+    /* 当鼠标或触摸悬停在整个单元格上时，改变内部文本的样式 */
+    .cell:hover .title,
+    .cell:hover .description,
+    .cell:hover .content {
+      /* 使用CSS变量允许自定义，并提供默认高亮颜色 */
+      color: var(--hm-cell-hover-font-color, #1890ff);
+      /* 可选：增加字体粗细使其更突出 */
+      font-weight: var(--hm-cell-hover-font-weight, 600);
+      /* 可选：添加文字阴影增强视觉效果 */
+      text-shadow: var(--hm-cell-hover-text-shadow, 0 0 5px rgba(24, 144, 255, 0.2));
+    }
+  `;
+}

package/src/components/hm-dialog.ts

@@ -0,0 +1,125 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @example
+ * <hm-dialog isopen>
+ *   <h2>对话框标题</h2>
+ *   <p>这是对话框内容</p>
+ * </hm-dialog>
+ * 
+ * @example
+ * <hm-dialog>
+ *   <h2>带自定义按钮的对话框</h2>
+ *   <p>这是对话框内容</p>
+ *   <div slot="footer">
+ *     <hm-button @click="handleCancel">取消</hm-button>
+ *     <hm-button @click="handleConfirm">确定</hm-button>
+ *   </div>
+ * </hm-dialog>
+ */
+@customElement('hm-dialog')
+export class HmDialog extends LitElement {
+    static styles = css`
+        :host {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1000;
+        }
+        :host([isopen]) {
+            display: block;
+        }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+        
+        .content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            border-radius: 4px;
+            min-width: 300px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            padding: 20px;
+        }
+        
+        .footer {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        
+        hm-button {
+            min-width: 80px;
+        }
+    `;
+
+    // 修改属性名以匹配使用的属性
+    @property({ type: Boolean, attribute: 'isopen' })
+    isOpen = false;
+    // isOpen = true;
+
+    dialog = this;
+
+    open() {
+        this.isOpen = true;
+        this.dispatchEvent(new CustomEvent('hm-dialog-open'));
+    }
+
+    close() {
+        this.isOpen = false;
+        this.dispatchEvent(new CustomEvent('hm-dialog-close'));
+    }
+    
+    /** 确认，触发 dialog-close dialog-confirm事件*/
+    confirm() {
+        // console.debug("确认对话框事件");
+        this.close();
+        this.dispatchEvent(new CustomEvent('hm-dialog-confirm'));
+    }
+    
+    /** 取消，触发 dialog-close dialog-cancel事件*/
+    cancel() {
+        this.close();
+        this.dispatchEvent(new CustomEvent('hm-dialog-cancel'));
+    }
+    
+    updated(changedProperties: Map<string, unknown>) {
+        if (changedProperties.has('isOpen')) {
+            if (this.isOpen) {
+                this.style.display = 'block';
+            } else {
+                this.style.display = 'none';
+            }
+        }
+    }
+    
+    render() {
+        return html`
+<div class="overlay"
+@click="${this.close}"
+></div>
+<div class="content">
+    <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>
+        </slot>
+    </div>
+</div>
+    `;
+    }
+}