hortimagic 1.0.0

package/src/components/hm-icon.ts

@@ -0,0 +1,70 @@
+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([
+    ['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>'],
+    ['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>'],
+    ['js', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M10.77 7.3h.002c1.045.393 2.479.93 2.479 2.45a2.5 2.5 0 0 1-.224 1.02a2.5 2.5 0 0 1-1.515 1.364a2.5 2.5 0 0 1-1.035.115a2 2 0 0 1-.214.012a2.5 2.5 0 0 1-1.673-.65a2.52 2.52 0 0 1-.838-1.859c0-.202.078-.39.22-.532a.77.77 0 0 1 1.06 0a.74.74 0 0 1 .221.53c0 .952 1.041 1 1.25 1s1.25-.048 1.25-1c0-.413-.447-.648-1.514-1.048h-.003C9.19 8.307 7.753 7.77 7.753 6.25q.005-.537.224-1.02a2.5 2.5 0 0 1 .614-.842a2.5 2.5 0 0 1 .9-.52a3.5 3.5 0 0 1 2.023 0a2.52 2.52 0 0 1 1.738 2.381c0 .201-.078.39-.22.531a.77.77 0 0 1-1.061 0a.74.74 0 0 1-.22-.53c0-.952-1.041-1-1.25-1s-1.25.048-1.25 1c0 .413.447.648 1.514 1.048zM5.751 4.5c0-.2.078-.388.22-.53a.77.77 0 0 1 1.06 0c.142.141.22.33.22.53v5a2.75 2.75 0 0 1-4.695 1.945A2.73 2.73 0 0 1 1.75 9.5V9c0-.2.078-.388.22-.53a.77.77 0 0 1 1.061 0c.142.141.22.33.22.53v.5c0 .33.134.652.366.884c.465.465 1.303.465 1.768 0c.232-.233.366-.555.366-.884z"/></svg>'],
+    ['filter', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 4c2.01 2.59 7 9 7 9v7h4v-7s4.98-6.41 7-9z"/></svg>'],
+    ['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>'],
+
+]);
+
+// 提供静态方法用于外部注册图标
+export function registerIcon(name: string, svgContent: string) {
+    iconMap.set(name, svgContent);
+}
+
+// 获取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>';
+}
+
+@customElement('hm-icon')
+export class HmIcon extends LitElement {
+    @property({ type: String })
+    icon = 'magic-wand';
+
+    @property({ type: String })
+    size = '16px';
+
+    /** 触发点击事件 */
+    handelClick() {
+        this.dispatchEvent(new CustomEvent('hm-icon-click'));
+    }
+    static styles = css`
+:host {
+  display: inline-block;
+}
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.icon svg {
+  width: 100%;
+  height: 100%;
+}
+`;
+
+    render() {
+        return html`
+<div class="icon" 
+style="width:${this.size}; height:${this.size};"
+@click="${this.handelClick}"
+>
+    ${unsafeSVG(getIcon(this.icon))}
+</div>
+`;
+    }
+}

package/src/components/hm-input.ts

@@ -0,0 +1,116 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * @example <caption>基本使用</caption>
+ * <hm-input label="用户名" placeholder="请输入用户名"></hm-input>
+ *
+ * @example <caption>带图标的输入框</caption>
+ * <hm-input label="密码" icon="password" placeholder="请输入密码"></hm-input>
+ *
+ * @example <caption>禁用状态</caption>
+ * <hm-input label="禁用输入框" value="已禁用" enable="false"></hm-input>
+ *
+ * @example <caption>只读状态</caption>
+ * <hm-input label="只读输入框" value="只读内容" readonly="true"></hm-input>
+ */
+@customElement('hm-input')
+export class HmInput extends LitElement {
+    @property({ type: String })
+    type = 'text';
+    /** 按钮图标 */
+    @property({ type: String })
+    icon = '';
+    /** 输入框标签 */
+    @property({ type: String })
+    label = '输入框';
+
+    /** 占位符文本 */
+    @property({ type: String })
+    placeholder = '';
+
+    /** 是否启用 */
+    @property({ type: Boolean })
+    enable = true;
+
+    @property({ type: Boolean })
+    readonly = false;
+
+    @property()
+    value = '';
+
+    static styles = css`
+    :host {
+        display: block;
+    }
+    .input-container {
+        display: flex;
+        align-items: center;
+    }
+    .label {
+        margin-right: 8px;
+    }
+    input {
+        flex: 1;
+        padding: 8px 12px;
+        border: 1px solid #d9d9d9;
+        border-radius: 4px;
+        font-size: 14px;
+        outline: none;
+        transition: all 0.2s ease;
+    }
+    input:disabled {
+        background-color: #f5f5f5;
+        color: #999;
+        border-color: #ddd;
+        cursor: not-allowed;
+    }
+    input[readonly] {
+        background-color: #f5f5f5;
+        cursor: default;
+    }
+    .icon {
+        margin-right: 8px;
+        width: 16px;
+        height: 16px;
+    }
+`;
+
+    // 添加键盘事件处理方法，阻止事件冒泡
+    private _handleKeyDown(e: KeyboardEvent) {
+        e.stopPropagation();
+    }
+
+    // 添加输入事件处理方法，触发自定义事件
+    private _handleInput(e: Event) {
+        const target = e.target as HTMLInputElement;
+        this.value = target.value;
+        this.dispatchEvent(new CustomEvent('hm-input-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true
+        }));
+    }
+
+    render() {
+        return html`
+<div class="input-container">
+  <span class="label">${this.label}</span>
+  ${this.icon ? html`<hm-icon icon="${this.icon}" class="icon"></hm-icon>` : ''}
+  <input 
+    type="${this.type}"
+    value="${this.value}"
+    ?disabled="${!this.enable}"
+    ?readonly="${this.readonly}"
+    placeholder="${this.placeholder}"
+    style="padding-left: ${this.icon ? '24px' : '8px'};"
+    @keydown="${this._handleKeyDown}"
+    @input="${this._handleInput}"
+  />
+  <slot name="right">
+  </slot>
+</div>
+    `;
+    }
+
+}

package/src/components/hm-menu.ts

@@ -0,0 +1,94 @@
+import { LitElement, css, html } from 'lit';
+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';
+  @property({ type: Boolean })
+  flag = false;
+  @property({ type: Boolean })
+  isMenuItem = false;
+
+
+
+  static styles = css`
+:host {
+  color: rgb(33,33,33);
+  height: 56px;
+}
+.menu:hover {
+  color: rgba(255, 255, 0, 1);
+}
+.menu {
+  height: 56px;
+  align-items: center;
+}
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 56px;
+  width: 56px;
+}
+.left {
+  margin-right: 16px;
+  color: rgb(117,117,117);
+}
+.right {
+  position: absolute;
+  right: 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.content {
+  font-size: 16px;
+  font-weight:bold;
+  margin-right:auto;
+}
+.is-menu-item {
+  background:rgb(240,240,240);
+}
+.not-menu-item {
+ background:rgb(255,255,255);
+}
+`;
+
+  /** 触发点击事件 */
+  handleClick() {
+    if (!this.isMenuItem)
+      this.flag = !this.flag;
+    this.dispatchEvent(new CustomEvent('hm-menu-click'));
+  }
+
+  render() {
+    return html`
+<div
+  class="menu ${this.isMenuItem ? 'is-menu-item' : 'not-menu-item'}"
+  style="display:${this.isMenuItem && !this.flag ? 'none' : 'flex'}"
+  @click="${this.handleClick}"
+>
+  <hm-icon class="left icon" icon="${this.icon}" size="24px"></hm-icon>
+  <div class="content">
+    <slot name="content"> ${this.content} </slot>
+  </div>
+  <div class="right">
+    <slot name="right">
+      ${this.isMenuItem ? '' : html`<hm-icon
+        class="icon right"
+        icon="${this.flag ? 'arrow-up' : 'arrow-down'}"
+      ></hm-icon
+      >`}
+    </slot>
+  </div>
+</div>
+
+
+
+
+`;
+  }
+}

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

@@ -0,0 +1,358 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property, queryAsync } from 'lit/decorators.js';
+
+/** 创建的窗口列表 */
+export let movePanelItemList: HmMovePanel[] = [];
+/** 窗口基础的层级，每新建一个加一,从99999开始加 */
+export let movePanelItemMaxZindex: number = 99999;
+
+/** 移动面板组件 */
+@customElement('hm-move-panel')
+export class HmMovePanel extends LitElement {
+  /** 主内容区宽 */
+  @property({ type: Number })
+  width = 320;
+  /** 主内容区高 */
+  @property({ type: Number })
+  height = 490;
+  @property({ type: String, attribute: 'header-background-color' })
+  headerBackgroundColor = 'rgba(66,134,182,0.9)';
+  @property({ type: String, attribute: 'header-color' })
+  headerColor = 'rgb(255,255,255)';
+  @property({ type: String, attribute: 'body-background-color' })
+  bodyBackgroundColor = 'rgba(255,255,255,0.7)';
+  @property({ type: String, attribute: 'body-color' })
+  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)';
+  @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';
+  @property({ type: String, attribute: 'right-button-text' })
+  rightButtonText = '按钮2';
+  /** 显示状态,不建议直接修改，请使用show()和hide()方法，否则无法触发对应事件 */
+  @property({ type: Boolean, attribute: 'is-display' })
+  isDisplay = false;
+  @property({ type: Number })
+  zIndex = movePanelItemMaxZindex;
+  /** 左上角图标 */
+  @property({ type: String })
+  icon = 'magic-wand'
+  /* 定位左边 */
+  @property({ type: Number })
+  left = (window.innerWidth - this.width) / 2;
+  /* 定位顶部 */
+  @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;
+  display: block;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 40px;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  display: flex;
+  align-items: center;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+.left-icon {
+  display: flex;
+  align-items: center;
+}
+.header-title {
+  margin-right: auto;
+  font-size: 16px !important;
+  opacity: 0.7;
+  font-weight: bold;
+  height: 100%;
+  line-height: 40px;
+}
+
+
+.header-close {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  higth: 40px;
+}
+
+.body {
+  display: block;
+  position: absolute;
+  top: 40px;
+  overflow: auto;
+  scrollbar-width: none; /* Firefox */
+}
+.body::-webkit-scrollbar {
+  display: none; /* Chrome/Safari/Webkit */
+}
+
+.footer {
+  display: flex;
+  position: absolute;
+  height: 40px;
+  bottom: 0px;
+  width: 100%; /* 添加宽度占满父容器 */
+  box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
+}
+
+.footer-button {
+  flex: 1;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.footer-button:active {
+  transform: scale(0.98);
+}
+`;
+
+  constructor() {
+    super();
+    // 添加到窗口列表
+    movePanelItemList.push(this);
+    // 设置初始层级
+    this.zIndex = ++movePanelItemMaxZindex;
+  }
+  /** 关闭移动窗口 */
+  hideMovePanel() {
+    this.isDisplay = false;
+    console.debug('关闭事件');
+    this.dispatchEvent(new CustomEvent('close', {
+      detail: { isDisplay: this.isDisplay, message: '关闭事件' },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /** 显示移动窗口 */
+  showMovePanel() {
+    this.isDisplay = true;
+    console.debug('显示事件');
+    this.dispatchEvent(new CustomEvent('show', {
+      detail: { isDisplay: this.isDisplay },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /** 显示状态翻转 */
+  toogleDisplay() {
+    if (this.isDisplay) {
+      this.hideMovePanel();
+    } else {
+      this.showMovePanel();
+    }
+  }
+  // 添加拖动功能
+  dragging = false
+  mouseDragging(e: MouseEvent) {
+    // console.debug('标题按下');
+    // 窗口原本位置
+    let templeft = this.left;
+    // 窗口原本位置
+    let temptop = this.top;
+
+    // 窗口左上角的偏移量
+    let offsetX = e.clientX - templeft;
+    let offsetY = e.clientY - temptop;
+
+    // console.debug('鼠标位置', e.clientX, e.clientY);
+    // console.debug('窗口位置', templeft, temptop);
+    (this.dragging == false) && (this.dragging = true);
+    document.onmousemove = (e) => {
+      if (this.dragging) {
+        this.left = e.clientX - offsetX;
+        this.top = e.clientY - offsetY;
+      }
+    }
+    document.onmouseup = () => {
+      // console.debug('标题抬起');
+      this.dragging && (this.dragging = false);
+      document.onmousemove = null
+    }
+  }
+  // 适配移动端
+  touchDragging(e: TouchEvent) {
+    // console.debug('触摸标题按下');
+    // 窗口原本位置
+    let templeft = this.left;
+    // 窗口原本位置
+    let temptop = this.top;
+
+    // 窗口左上角的偏移量
+    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);
+    (this.dragging == false) && (this.dragging = true);
+    document.ontouchmove = (e) => {
+      if (this.dragging) {
+        this.left = e.touches[0].clientX - offsetX;
+        this.top = e.touches[0].clientY - offsetY;
+      }
+    }
+    document.ontouchend = () => {
+      // console.debug('标题抬起');
+      this.dragging && (this.dragging = false);
+      document.onmousemove = null
+    }
+  }
+  // 置顶窗口
+  putTop() {
+    // console.debug('置顶窗口');
+    let res = false;
+    if (movePanelItemList.includes(this)) {
+      // 先把比它大的都减小一层
+      for (let i = 0; i < movePanelItemList.length; i++) {
+        if (movePanelItemList[i].zIndex > this.zIndex)
+          movePanelItemList[i].zIndex = movePanelItemList[i].zIndex - 1;
+      }
+      // 再把自己设置成最高的
+      this.zIndex = movePanelItemMaxZindex;
+      res = true;
+      // console.debug('置顶窗口成功');
+    } else {
+      // console.warn('置顶失败，窗口不在列表中');
+      res = false;
+    }
+    return res;
+  }
+
+  /**
+   * 切换元素的置顶状态和显示状态
+   * 
+   * 当元素的zIndex不等于最大移动面板层级时，将元素置于顶层并显示移动面板；
+   * 当元素的zIndex等于最大移动面板层级时，切换元素的显示状态
+   */
+  putTopToggel() {
+    // 如果当前层级不是最顶层，则置顶并显示移动面板
+    if (this.zIndex != movePanelItemMaxZindex) {
+      this.putTop();
+      this.showMovePanel();
+    } else {
+      // 如果已经是顶层，则切换显示状态
+      this.toogleDisplay();
+    }
+  }
+  render() {
+    return html`
+<div
+  class="panel"
+  style="
+    width: ${this.width}px;
+    height: ${this.height + 80}px;
+    left: ${this.left}px;
+    top: ${this.top}px;
+    display: ${this.isDisplay ? 'block' : 'none'};
+    z-index: ${this.zIndex};
+    "
+    @mousedown="${this.putTop}"
+    @touchstart="${this.putTop}"
+>
+  <div
+    class="header"
+    style="background-color: ${this.headerBackgroundColor}; color: ${this.headerColor};"
+    @mousedown="${this.mouseDragging}"
+    @touchstart="${this.touchDragging}"
+  >
+    <div class="header-left">
+      <div class="header-icon">
+        <slot name="left-icon" class="left-icon">
+          <hm-icon icon="${this.icon}" size="24px"></hm-icon>
+        </slot>
+      </div>
+      <div class="header-title">${this.titleContent}</div>
+    </div>
+    <div class="header-close" @click="${this._handleClose}">
+      <slot name="right-icon" class="right-icon">
+        <hm-icon icon="close" size="18px"></hm-icon>
+      </slot>
+    </div>
+  </div>
+  <div
+    class="body"
+    style="background-color: ${this.bodyBackgroundColor}; color: ${this.bodyColor}; height:${this.height}px;width:${this.width}px;"
+  >
+    <slot></slot>
+  </div>
+  <div class="footer" style="background-color: ${this.footerBackgroundColor};width:${this.width}px;">
+    <hm-button
+      class="footer-button footer-button-left"  
+      icon="magic-wand"
+      width="100%"
+      backgroundColor="${this.buttonBackgroundColor}"
+      color="${this.buttonColor}"
+      @click="${this._handleLeftButtonClick}"
+    >
+      ${this.leftButtonText}
+      </hm-button>
+    <hm-button
+      class="footer-button footer-button-right"
+      icon="magic-wand"
+      width="100%"
+      backgroundColor="${this.buttonColor}"
+      color="${this.buttonBackgroundColor}"
+      @click="${this._handleRightButtonClick}"
+    >
+      ${this.rightButtonText}
+    </hm-button>
+  </div>
+</div>
+
+                `;
+  }
+
+  _handleClose() {
+    this.hideMovePanel();
+  }
+
+  _handleLeftButtonClick() {
+    this.dispatchEvent(new CustomEvent('left-button-click', {
+      detail: { message: '左侧按钮被点击' },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  _handleRightButtonClick() {
+    this.dispatchEvent(new CustomEvent('right-button-click', {
+      detail: { message: '右侧按钮被点击' },
+      bubbles: true,
+      composed: true
+    }));
+  }
+}