hortimagic 1.1.0 → 1.1.2

package/src/apps/config-app.ts

@@ -0,0 +1,172 @@
+import { movePanelHolder } from '../holders/move-panel';
+import { LitElement, css, html } from 'lit';
+// import { property } from 'lit/decorators.js';
+import { HortimagicStore, saveStore, loadStore, reactive } from '../core/store';
+import { logger } from '../core/log-tools';
+
+class HmConfigApp extends LitElement {
+    // 返回一个只读的、响应式的快照
+    storeSnap = reactive.snapshot(HortimagicStore);
+
+    static styles = css`
+        .config-item {
+            margin: 10px 0;
+        }
+    `;
+
+    render() {
+        return html`
+            <div class="config-item">
+                <hm-cell title-name="自动保存设置" description="修改设置或脚本列表后，将自动保存设置。"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.autoSave}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.autoSave = e.detail.checked;
+                saveStore();
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            
+            <div class="config-item">
+                <hm-cell title-name="允许LOG输出" description="是否允许LOG级别的日志输出"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.logFlag.log}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.logFlag.log = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            
+            <div class="config-item">
+                <hm-cell title-name="允许INFO输出" description="是否允许INFO级别的日志输出"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.logFlag.info}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.logFlag.info = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            
+            <div class="config-item">
+                <hm-cell title-name="允许DEBUG输出" description="是否允许DEBUG级别的日志输出"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.logFlag.debug}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.logFlag.debug = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            
+            <div class="config-item">
+                <hm-cell title-name="允许WARN输出" description="是否允许WARN级别的日志输出"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.logFlag.warn}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.logFlag.warn = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            
+            <div class="config-item">
+                <hm-cell title-name="允许ERROR输出" description="是否允许ERROR级别的日志输出"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.logFlag.error}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.logFlag.error = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            <div class="config-item">
+                <hm-cell title-name="发送日志" description="打印要发送的消息"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.messageLogFlag.send}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.messageLogFlag.send = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            <div class="config-item">
+                <hm-cell title-name="接收日志" description="打印接收到的消息"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.messageLogFlag.receive}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.messageLogFlag.receive = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            <div class="config-item">
+                <hm-cell title-name="解码日志" description="打印解码后的消息"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.messageLogFlag.decode}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.messageLogFlag.decode = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            <div class="config-item">
+                <hm-cell title-name="触发日志" description="打印要触发的消息"> 
+                    <hm-switch 
+                        ?checked="${this.storeSnap.messageLogFlag.emit}"
+                        @hm-switch-change="${(e: CustomEvent) => {
+                HortimagicStore.messageLogFlag.emit = e.detail.checked;
+            }}"
+                    ></hm-switch>
+                </hm-cell>
+            </div>
+            
+            <div class="config-item">
+                    <hm-input
+                        label="日志列表长度"
+                        type="number"
+                        .value="${this.storeSnap.logListLength}"
+                        @hm-input-change="${(e: CustomEvent) => {
+                const value = parseInt(e.detail.value) || 100;
+                HortimagicStore.logListLength = value;
+                logger.debug('log list length changed:', value);
+            }}"
+                    ></hm-input>
+            </div>
+`;
+    }
+}
+
+export function initConfigApp() {
+    customElements.define('hm-config-app', HmConfigApp);
+    let panel = document.createElement('hm-move-panel');
+    panel.titleContent = '设置';
+    panel.icon = 'config';
+    panel.leftButtonText = "读取"
+    panel.leftIcon = 'load';
+    panel.addEventListener('left-button-click', function () {
+        loadStore();
+    });
+    panel.rightButtonText = "保存"
+    panel.rightIcon = 'save';
+    panel.addEventListener('right-button-click', function () {
+        saveStore();
+    });
+    // panel.showMovePanel();
+    movePanelHolder.appendChild(panel);
+    let template = `
+        <hm-config-app></hm-config-app>
+    `;
+    panel.innerHTML = template;
+    let menuItem = document.createElement('hm-menu');
+    menuItem.content = "设置";
+    menuItem.isMenuItem = true;
+    menuItem.icon = 'config';
+
+    menuItem.addEventListener('hm-menu-click', function () {
+        panel.putTopToggel();
+    });
+    return menuItem;
+}

package/src/apps/dialog-app.ts

@@ -0,0 +1,62 @@
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { dialogHolder } from '../holders/dialog';
+
+/**
+ * 对话框模块
+ * @slot - 默认slot
+ */
+export class HmDialogApp extends LitElement {
+    @property({ type: Boolean })
+    dialogOpen = false;
+
+    @property({ type: String })
+    message = '请做出选择';
+
+    @property({ type: Function })
+    closeCallback: Function | null = null;
+    @property({ type: Function })
+    cancelCallback: Function | null = null;
+    @property({ type: Function })
+    confirmCallback: Function | null = null;
+    /** 触发点击事件 */
+    handelClick() {
+        this.dispatchEvent(new CustomEvent('hmclick'));
+    }
+    static styles = css`
+`;
+
+    render() {
+        return html`
+<hm-dialog
+  ?isopen="${this.dialogOpen}"
+  @hm-dialog-close="${() => {
+                this.dialogOpen =
+                    false;
+            }}"
+  @hm-dialog-cancel="${() => {
+                if (this.cancelCallback) this.cancelCallback();
+            }}"
+  @hm-dialog-confirm="${() => {
+                if (this.confirmCallback) this.confirmCallback();
+            }}"
+>
+  <p>${this.message}</p>
+</hm-dialog>
+        `;
+    }
+}
+/**
+ * 默认的对话框模块
+ */
+export const dialogApp: HmDialogApp = document.createElement('hm-dialog-app') as HmDialogApp;;
+/** 初始化对话框模块 */
+export async function initDialogApp() {
+    customElements.define('hm-dialog-app', HmDialogApp);
+    dialogApp.dialogOpen = false;
+    dialogApp.message = '请做出选择';
+    dialogApp.closeCallback = null;
+    dialogApp.cancelCallback = null;
+    dialogApp.confirmCallback = null;
+    dialogHolder.append(dialogApp);
+}

package/src/apps/index.ts

@@ -0,0 +1,5 @@
+export * as main_app from './main-app'
+export * as dialog_app from './dialog-app'
+// export * as log_app from './log-app'
+// export * as config_app from './config-app'
+// export * as script_app from './script-app'

package/src/apps/log-app.ts

@@ -0,0 +1,251 @@
+import { movePanelHolder } from '../holders/move-panel';
+import { LitElement, css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { logEmitter } from '../core/log-tools';
+import { HortimagicStore } from '../core/store';
+
+interface LogEntry {
+  timestamp: Date;
+  level: string;
+  tag: string;
+  message: any[];
+}
+
+class HmLogApp extends LitElement {
+  @property({ type: Array })
+  logList: LogEntry[] = [];
+
+  // 新增：记录每条日志的折叠状态
+  private foldState = new Map<string, boolean>();
+
+  constructor() {
+    super();
+
+    // 确保日志列表长度配置存在
+    if (HortimagicStore.logListLength < 1) {
+      HortimagicStore.logListLength = 50; // 默认保留50条日志
+    }
+
+    logEmitter.on('log', (tag: string, ...args: any[]) => {
+      // 从参数中提取日志级别
+      let level = 'log';
+      if (args.length > 0) {
+        // 通过检查console方法来确定日志级别
+        const firstArg = args[0];
+        if (typeof firstArg === 'string') {
+          if (firstArg.startsWith('[DEBUG]')) level = 'debug';
+          else if (firstArg.startsWith('[INFO]')) level = 'info';
+          else if (firstArg.startsWith('[WARN]')) level = 'warn';
+          else if (firstArg.startsWith('[ERROR]')) level = 'error';
+        }
+      }
+
+      // 移除可能的级别标记
+      const cleanArgs = [...args];
+      if (cleanArgs.length > 0 && typeof cleanArgs[0] === 'string' &&
+        ['[DEBUG]', '[INFO]', '[WARN]', '[ERROR]'].some(marker => cleanArgs[0].startsWith(marker))) {
+        cleanArgs.shift();
+      }
+
+      const logEntry: LogEntry = {
+        timestamp: new Date(),
+        level,
+        tag,
+        message: cleanArgs
+      };
+
+      /** 确保日志列表长度不超过最大长度 */
+      while (this.logList.length >= HortimagicStore.logListLength) {
+        this.logList.shift();
+      }
+      this.logList.push(logEntry);
+      this.requestUpdate();
+    });
+  }
+
+  static styles = css`
+    .log-container {
+        height: 400px;
+        overflow-y: auto;
+        padding: 10px;
+        font-family: monospace;
+        background-color: #f5f5f5;
+        border: 1px solid #ddd;
+    }
+    
+    .log-entry {
+        padding: 8px 0;
+        border-bottom: 1px solid #eee;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px; /* 增加日志条目之间的间距 */
+    }
+    
+    .log-header {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+    }
+    
+    .timestamp {
+        color: #999;
+        min-width: 100px;
+        flex-shrink: 0;
+        font-size: 12px; /* 调整时间戳字体大小 */
+    }
+    
+    .level {
+        min-width: 50px;
+        flex-shrink: 0;
+        font-weight: bold;
+        font-size: 14px; /* 调整日志级别字体大小 */
+    }
+    
+    .level.debug { color: #0099cc; }
+    .level.info { color: #009900; }
+    .level.warn { color: #ff9900; }
+    .level.error { color: #ff3333; }
+    
+    .tag {
+        color: #666;
+        font-weight: bold;
+        min-width: 80px;
+        flex-shrink: 0;
+        font-size: 14px; /* 调整标签字体大小 */
+    }
+    
+    .message {
+        flex: 1;
+        word-break: break-word;
+        margin-top: 4px;
+        max-height: 60px; /* 限制高度，触发折叠 */
+        overflow: hidden;
+        cursor: pointer;
+        position: relative;
+        display: block; /* 确保每条消息独占一行 */
+        // 强制显示滚动条
+        scrollbar-width: auto; /* Firefox */
+        -ms-overflow-style: scrollbar; /* IE and Edge */
+        overflow-y: scroll; /* 强制显示垂直滚动条 */
+        font-size: 14px; /* 调整消息字体大小 */
+        line-height: 1.5; /* 调整行高 */
+        background-color: #fff; /* 设置背景色 */
+        padding: 5px; /* 添加内边距 */
+        border-radius: 4px; /* 圆角 */
+    }
+    
+    .message.collapsed::after {
+        content: " ...";
+        color: #999;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        background: linear-gradient(to right, transparent, #f5f5f5 70%);
+    }
+    
+    .message.expanded {
+        max-height: none;
+        overflow: visible;
+    }
+    
+    .controls {
+        padding: 10px;
+        display: flex;
+        gap: 10px;
+        background-color: #eaeaea; /* 设置控制区域背景色 */
+        border-bottom: 1px solid #ddd; /* 添加下边框 */
+    }
+    
+    .clear-btn {
+        background: #ff3333;
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        cursor: pointer;
+        border-radius: 3px;
+    }
+    
+    .clear-btn:hover {
+        background: #cc0000;
+    }
+`;
+
+  render() {
+    return html`
+            <div class="controls">
+                <button class="clear-btn" @click="${this.clearLogs}">清空日志</button>
+                <span>共 ${this.logList.length} 条日志</span>
+            </div>
+            <div class="log-container">
+                ${this.logList.map((entry: LogEntry) => {
+      const key = `${entry.timestamp.getTime()}-${entry.tag}-${entry.level}`;
+      const isExpanded = this.foldState.get(key) ?? false;
+      const messageStr = entry.message.map(msg =>
+        typeof msg === 'object' ? JSON.stringify(msg) : String(msg)
+      ).join(' ');
+
+      // 判断是否需要折叠（例如超过一定字符数）
+      const shouldCollapse = messageStr.length > 100;
+
+      return html`
+                        <div class="log-entry">
+                            <div class="log-header">
+                                <span class="timestamp">${this.formatTime(entry.timestamp)}</span>
+                                <span class="level ${entry.level}">[${entry.level.toUpperCase()}]</span>
+                                <span class="tag">${entry.tag}</span>
+                            </div>
+                            <div 
+                                class="message ${isExpanded || !shouldCollapse ? 'expanded' : 'collapsed'}"
+                                @click="${() => this.toggleFold(key)}"
+                            >
+                                ${isExpanded || !shouldCollapse ? messageStr : messageStr.substring(0, 100)}
+                            </div>
+                        </div>
+                    `;
+    })}
+            </div>
+        `;
+  }
+
+  private formatTime(date: Date): string {
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+    const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
+    return `${hours}:${minutes}:${seconds}.${milliseconds}`;
+  }
+
+  private clearLogs() {
+    this.logList = [];
+    this.requestUpdate();
+  }
+
+  // 新增：切换日志消息的折叠状态
+  private toggleFold(key: string) {
+    const currentState = this.foldState.get(key) ?? false;
+    this.foldState.set(key, !currentState);
+    this.requestUpdate();
+  }
+}
+
+export function initLogApp() {
+  customElements.define('hm-log-app', HmLogApp);
+  let panel = document.createElement('hm-move-panel');
+  panel.titleContent = '日志';
+  panel.icon = 'log';
+  panel.width = 400;
+
+  // panel.showMovePanel();
+  movePanelHolder.appendChild(panel);
+  let template = `<hm-log-app></hm-log-app>`;
+  panel.innerHTML = template;
+  let menuItem = document.createElement('hm-menu');
+  menuItem.content = "日志";
+  menuItem.isMenuItem = true;
+  menuItem.icon = 'log';
+
+  menuItem.addEventListener('hm-menu-click', function () {
+    panel.putTopToggel();
+  });
+  return menuItem;
+}

package/src/apps/main-app.ts

@@ -0,0 +1,72 @@
+import { refreshAll, initHooks } from "../core/elements-hooks";
+import { initSocket } from "../core/socket-tools";
+import { ingecteScriptList } from "../core/script-tools";
+import { initMenuHolder, menuHolder } from "../holders/menu";
+import { initMovePanelHolder } from "../holders/move-panel";
+import { initNotificationHolder } from "../holders/notification";
+import { initDialogHolder } from "../holders/dialog";
+
+import { initScriptApp } from "./script-app";
+
+import pkg from '../../package.json' with { type: 'json' };
+import { initDialogApp } from "./dialog-app";
+import { notice } from "../easy-tools";
+
+import { initStore } from "../core/store";
+import { initConfigApp } from "./config-app";
+import { initLogApp } from "./log-app";
+async function init() {
+    try {
+        // 初始化配置项
+        initStore();
+        // 初始化所有容器
+        initNotificationHolder(); //先注入通知容器
+        initDialogHolder();
+        /** 先注弹窗app */
+        await initDialogApp();
+        initMenuHolder();
+        initMovePanelHolder();
+        // 初始化网络
+        notice.normal(pkg.name, '注入网络钩子函数')
+        await initSocket();
+        notice.normal(pkg.name, '注入钩子函数')
+        // 刷新查找所有元素
+        refreshAll();
+        // 添加所有钩子函数
+        initHooks();
+        // 注入脚本
+        notice.normal(pkg.name, '注入脚本')
+        ingecteScriptList();
+        notice.normal(pkg.name, '生成菜单')
+        /** 一级菜单 */
+        let menu = document.createElement('hm-menu');
+        menu.content = "HortiMagic";
+        menu.isMenuItem = false;
+
+        /** 二级菜单 */
+        let configMenu = initConfigApp();
+        let logMenu = initLogApp();
+        let scriptMenu = initScriptApp();
+
+        /** 菜单点击事件,开关对应的活动窗口 */
+        menu.addEventListener('hm-menu-click', function () {
+            // menu.flag 会自己改变
+            configMenu.flag = menu.flag;
+            logMenu.flag = menu.flag;
+            scriptMenu.flag = menu.flag;
+        });
+        menuHolder.append(menu, configMenu, logMenu, scriptMenu,);
+        // menuHolder.append(menu, configMenu, scriptMenu,);
+        notice.success(pkg.name, `${pkg.version} 已加载`);
+    } catch (error) {
+        console.error(error);
+    }
+
+
+
+
+}
+
+export {
+    init
+}