layplux 1.0.1 → 2.0.1

package/dist/esm/managers/skeleton.mjs

@@ -1,113 +1,104 @@
-import { ref } from "vue";
-import { useArea } from "./area.mjs";
-import { isWidget, useWidget } from "./widget.mjs";
-import { useWidgetContainer } from "./widget-container.mjs";
-import {
-  FocusTracker,
-  createPluginEventBus,
-  getBuiltInLocale
-} from "../utils/index.mjs";
-import { injectThemeCSS } from "./theme.mjs";
+import { ref } from 'vue';
+import { useArea } from './area.mjs';
+import { isWidget, useWidget } from './widget.mjs';
+import { useWidgetContainer } from './widget-container.mjs';
+import { injectThemeCSS } from './theme.mjs';
+import { createPluginEventBus } from '../utils/event-bus.mjs';
+import { getBuiltInLocale } from '../locales/index.mjs';
+import { FocusTracker } from '../utils/focus-tracker.mjs';
+
 function useSkeleton() {
   const widgets = [];
   const self = {};
-  const containers = /* @__PURE__ */ new Map();
+  const containers = new Map();
   const focusTracker = new FocusTracker();
-  const event = createPluginEventBus("skeleton");
-  const locale = ref(getBuiltInLocale("zh-CN"));
+  const event = createPluginEventBus('skeleton');
+  const locale = ref(getBuiltInLocale('zh-CN'));
   function setLocale(name) {
     locale.value = getBuiltInLocale(name);
   }
-  const theme = ref("system");
-  const systemDark = ref(
-    typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
-  );
+  const theme = ref('system');
+  const systemDark = ref(typeof window !== 'undefined' ? window.matchMedia('(prefers-color-scheme: dark)').matches : false);
   function resolveTheme() {
-    if (theme.value === "system") {
-      return systemDark.value ? "dark" : "light";
+    if (theme.value === 'system') {
+      return systemDark.value ? 'dark' : 'light';
     }
     return theme.value;
   }
   function isDark() {
-    return resolveTheme() === "dark";
+    return resolveTheme() === 'dark';
   }
   function setTheme(t) {
     theme.value = t;
   }
-  const themeName = ref("default");
+  const themeName = ref('default');
   function setThemeName(name) {
     themeName.value = name;
   }
   function registerTheme(name, vars) {
     injectThemeCSS(name, vars);
   }
-  if (typeof window !== "undefined") {
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+
+  // 监听系统主题变化
+  if (typeof window !== 'undefined') {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
       systemDark.value = e.matches;
     });
   }
-  const topArea = useArea(
-    {
-      createContainer
-    },
-    "topArea",
-    (config, container) => createWidget(config, container)
-  );
-  const bottomArea = useArea(
-    {
-      createContainer
-    },
-    "bottomArea",
-    (config, container) => createWidget(config, container)
-  );
-  const leftTopArea = useArea(
-    {
-      createContainer
-    },
-    "leftTopArea",
-    (config, container) => createWidget(config, container)
-  );
-  const leftBottomArea = useArea(
-    {
-      createContainer
-    },
-    "leftBottomArea",
-    (config, container) => createWidget(config, container)
-  );
-  const rightTopArea = useArea(
-    { createContainer },
-    "rightTopArea",
-    (config, container) => createWidget(config, container)
-  );
-  const rightBottomArea = useArea(
-    { createContainer },
-    "rightBottomArea",
-    (config, container) => createWidget(config, container)
-  );
-  const bottomRightArea = useArea(
-    { createContainer },
-    "bottomRightArea",
-    (config, container) => createWidget(config, container)
-  );
-  const bottomLeftArea = useArea(
-    {
-      createContainer
-    },
-    "bottomLeftArea",
-    (config, container) => createWidget(config, container)
-  );
-  const centerArea = useArea(
-    { createContainer },
-    "centerArea",
-    (config, container) => createWidget(config, container)
-  );
+
+  // 顶部工具栏
+  const topArea = useArea({
+    createContainer
+  }, 'topArea', (config, container) => createWidget(config, container));
+
+  // 底部状态栏
+  const bottomArea = useArea({
+    createContainer
+  }, 'bottomArea', (config, container) => createWidget(config, container));
+
+  // 左侧顶部主区域
+  const leftTopArea = useArea({
+    createContainer
+  }, 'leftTopArea', (config, container) => createWidget(config, container));
+
+  // 左侧底部快捷区域
+  const leftBottomArea = useArea({
+    createContainer
+  }, 'leftBottomArea', (config, container) => createWidget(config, container));
+
+  // 右侧顶部主区域
+  const rightTopArea = useArea({
+    createContainer
+  }, 'rightTopArea', (config, container) => createWidget(config, container));
+
+  // 右侧底部区域
+  const rightBottomArea = useArea({
+    createContainer
+  }, 'rightBottomArea', (config, container) => createWidget(config, container));
+
+  // 右侧最底部快捷操作
+  const bottomRightArea = useArea({
+    createContainer
+  }, 'bottomRightArea', (config, container) => createWidget(config, container));
+
+  // 左侧最底部快捷操作（交互型）
+  const bottomLeftArea = useArea({
+    createContainer
+  }, 'bottomLeftArea', (config, container) => createWidget(config, container));
+
+  // 中心区域
+  const centerArea = useArea({
+    createContainer
+  }, 'centerArea', (config, container) => createWidget(config, container));
   function createWidget(config, container) {
     if (isWidget(config)) {
       return config;
     }
     const widget = useWidget(config, container, self);
     widgets.push(widget);
-    event.emitGlobal("skeleton:widget-added", { widget });
+    event.emitGlobal('skeleton:widget-added', {
+      widget
+    });
     return widget;
   }
   const focusedId = ref(null);
@@ -120,34 +111,44 @@ function useSkeleton() {
   }
   function focus(id) {
     focusedId.value = id;
-    event.emitGlobal("skeleton:focus-changed", { focusedId: id });
+    event.emitGlobal('skeleton:focus-changed', {
+      focusedId: id
+    });
   }
   function blur() {
     focusedId.value = null;
-    event.emitGlobal("skeleton:focus-changed", { focusedId: null });
+    event.emitGlobal('skeleton:focus-changed', {
+      focusedId: null
+    });
   }
   function add(config, extraConfig) {
+    // TODO: 处理extraConfig
     if (extraConfig) {
-      config = { ...config, ...extraConfig };
+      config = {
+        ...config,
+        ...extraConfig
+      };
     }
-    const { area } = config;
-    if (area === "topArea") {
+    const {
+      area
+    } = config;
+    if (area === 'topArea') {
       topArea.add(config);
-    } else if (area === "bottomArea") {
+    } else if (area === 'bottomArea') {
       bottomArea.add(config);
-    } else if (area === "leftTopArea") {
+    } else if (area === 'leftTopArea') {
       leftTopArea.add(config);
-    } else if (area === "leftBottomArea") {
+    } else if (area === 'leftBottomArea') {
       leftBottomArea.add(config);
-    } else if (area === "bottomLeftArea") {
+    } else if (area === 'bottomLeftArea') {
       bottomLeftArea.add(config);
-    } else if (area === "rightTopArea") {
+    } else if (area === 'rightTopArea') {
       rightTopArea.add(config);
-    } else if (area === "rightBottomArea") {
+    } else if (area === 'rightBottomArea') {
       rightBottomArea.add(config);
-    } else if (area === "bottomRightArea") {
+    } else if (area === 'bottomRightArea') {
       bottomRightArea.add(config);
-    } else if (area === "centerArea") {
+    } else if (area === 'centerArea') {
       centerArea.add(config);
     }
   }
@@ -156,6 +157,8 @@ function useSkeleton() {
     containers.set(name, container);
     return container;
   }
+
+  // 4. 填充 self 的真正属性
   Object.assign(self, {
     widgets,
     topArea,
@@ -187,6 +190,5 @@ function useSkeleton() {
   });
   return self;
 }
-export {
-  useSkeleton
-};
+
+export { useSkeleton };

package/dist/esm/managers/theme.mjs

@@ -1,17 +1,14 @@
+/** 为指定 theme 注入 CSS 变量样式，重复注册会替换 */
 function injectThemeCSS(name, vars) {
   const styleId = `layplux-theme-${name}`;
   let styleEl = document.getElementById(styleId);
   if (!styleEl) {
-    styleEl = document.createElement("style");
+    styleEl = document.createElement('style');
     styleEl.id = styleId;
     document.head.appendChild(styleEl);
   }
-  const varLines = Object.entries(vars).map(([key, value]) => `    ${key}: ${value};`).join("\n");
-  styleEl.textContent = `.layplux-root[data-theme='${name}'] {
-${varLines}
+  const varLines = Object.entries(vars).map(([key, value]) => `    ${key}: ${value};`).join('\n');
+  styleEl.textContent = `.layplux-root[data-theme='${name}'] {\n${varLines}\n}\n`;
 }
-`;
-}
-export {
-  injectThemeCSS
-};
+
+export { injectThemeCSS };

package/dist/esm/managers/widget-container.mjs

@@ -1,8 +1,20 @@
-import { ref } from "vue";
+import { ref } from 'vue';
+
+/**
+ * handle 函数签名：把原始 item（config 或 widget）转换成 widget 实例。
+ * 第二个参数是所属 container 的引用，方便在创建 widget 时回引。
+ */
+
+/**
+ * widget container 用于管理 widget 的添加、删除、获取等操作
+ * T 为 widget 的类型
+ * G 为 widgetconfig 的配置类型
+ */
 function useWidgetContainer(handle, skeleton) {
   const maps = {};
   const items = ref([]);
-  const activeId = ref(null);
+  const activeId = ref(null); // ✅ 单一数据源
+
   const self = {
     items,
     activeId,
@@ -16,6 +28,7 @@ function useWidgetContainer(handle, skeleton) {
     toggleActive
   };
   function add(item) {
+    // 将config转换为widget,将创建widget的能力交给外部，并把 container 自身传出去
     const nItem = handle(item, self);
     const origin = get(nItem.name);
     if (origin === nItem) return origin;
@@ -43,23 +56,29 @@ function useWidgetContainer(handle, skeleton) {
     const i = items.value.indexOf(item);
     if (i > -1) items.value.splice(i, 1);
     delete maps[name];
-    skeleton.event.emitGlobal("skeleton:widget-removed", { name });
+    skeleton.event.emitGlobal('skeleton:widget-removed', {
+      name
+    });
     return item;
   }
   function activate(id) {
     if (!maps[id]) return;
     activeId.value = id;
     skeleton.focus(id);
-    maps[id].focusable.active();
-    skeleton.event.emitGlobal(`widget:${id}:activated`, { widget: maps[id] });
+    maps[id].focusable.active(); // 面板激活 → 同步焦点栈
+    skeleton.event.emitGlobal(`widget:${id}:activated`, {
+      widget: maps[id]
+    });
   }
   function deactivate() {
     const current = activeId.value;
     activeId.value = null;
     skeleton.blur();
     if (current && maps[current]) {
-      maps[current].focusable.suspense();
-      skeleton.event.emitGlobal(`widget:${current}:deactivated`, { widget: maps[current] });
+      maps[current].focusable.suspense(); // 面板收起 → 从焦点栈移除
+      skeleton.event.emitGlobal(`widget:${current}:deactivated`, {
+        widget: maps[current]
+      });
     }
   }
   function toggleActive(id) {
@@ -71,6 +90,5 @@ function useWidgetContainer(handle, skeleton) {
   }
   return self;
 }
-export {
-  useWidgetContainer
-};
+
+export { useWidgetContainer };

package/dist/esm/managers/widget.mjs

@@ -1,50 +1,80 @@
-import { computed, h, watch } from "vue";
-import { createContent, uniqueId } from "../utils/index.mjs";
-import { WidgetTitleView, WidgetView } from "../components/index.mjs";
-import { usePane } from "./pane.mjs";
+import { computed, h, watch } from 'vue';
+import { usePane } from './pane.mjs';
+import { uniqueId } from '../utils/unique-id.mjs';
+import { createContent } from '../utils/vue.mjs';
+import { WidgetView, WidgetTitleView } from '../components/widget/index.mjs';
+
 function useWidget(config, container, skeleton) {
-  const { name, props, type } = config;
+  const {
+    name,
+    props,
+    type
+  } = config;
   const active = computed(() => container?.activeId.value === name);
   const focused = computed(() => skeleton?.focusedId.value === name);
   const id = uniqueId(type);
-  const align = props?.align ?? "left";
+  const align = props?.align ?? 'left';
   const pane = usePane();
+
+  // ─── Focusable 注册 ──────────────────────────────────────────────────────
+  // range 初始为 () => false，PanelView 挂载后通过 focusable.setRange(el) 注入真实 DOM
   const focusable = skeleton.focusTracker.create({
-    range: (e) => {
+    range: e => {
       const target = e.target;
       if (!target) {
         return false;
       }
+      // 当点击的是panel时，激活
       const el = document.getElementById(id);
       if (el?.contains(target)) {
         return true;
       }
-      if (target.classList.contains("layplux-resize-handle")) {
+      // 当class中包含layplux-resize-handle则不失去焦点
+      if (target.classList.contains('layplux-resize-handle')) {
         return true;
       }
       return false;
     },
     onActive: () => {
       widget.container?.activate(name);
-      skeleton.event?.emitGlobal(`widget:${name}:focus`, { widget });
+      skeleton.event?.emitGlobal(`widget:${name}:focus`, {
+        widget
+      });
     },
     onBlur: () => {
+      // 焦点离开 → 清除 focusedId
       skeleton.blur();
-      skeleton.event?.emitGlobal(`widget:${name}:blur`, { widget });
-      if (pane.viewMode.value === "DockUnpinned" || pane.viewMode.value === "Undock") {
+      skeleton.event?.emitGlobal(`widget:${name}:blur`, {
+        widget
+      });
+      // DockUnpinned：失焦自动收起
+      if (pane.viewMode.value === 'DockUnpinned' || pane.viewMode.value === 'Undock') {
         container?.deactivate();
       }
     }
   });
   function renderBody() {
-    const { content, contentProps } = config;
-    return createContent(content, { ...contentProps, config, event: widget.event });
+    const {
+      content,
+      contentProps
+    } = config;
+    return createContent(content, {
+      ...contentProps,
+      config,
+      event: widget.event
+    });
   }
   function renderContent() {
-    return h(WidgetView, { key: id, widget });
+    return h(WidgetView, {
+      key: id,
+      widget
+    });
   }
   function renderTitle() {
-    return h(WidgetTitleView, { key: id, widget });
+    return h(WidgetTitleView, {
+      key: id,
+      widget
+    });
   }
   const widget = {
     id,
@@ -64,20 +94,20 @@ function useWidget(config, container, skeleton) {
     renderTitle
   };
   props?.onInit?.(widget);
+
+  // Emit view-mode-changed events
   if (skeleton?.event) {
-    watch(
-      () => pane.viewMode.value,
-      (mode) => {
-        skeleton.event.emitGlobal(`widget:${name}:view-mode-changed`, { widget, mode });
-      }
-    );
+    watch(() => pane.viewMode.value, mode => {
+      skeleton.event.emitGlobal(`widget:${name}:view-mode-changed`, {
+        widget,
+        mode
+      });
+    });
   }
   return widget;
 }
 function isWidget(obj) {
   return obj && obj.isWidget;
 }
-export {
-  isWidget,
-  useWidget
-};
+
+export { isWidget, useWidget };

package/dist/esm/types/config.mjs

@@ -0,0 +1 @@
+

package/dist/esm/types/index.mjs

@@ -1 +1 @@
-export * from "./config.mjs";
+

package/dist/esm/types/locale.mjs

@@ -0,0 +1 @@
+

package/dist/esm/utils/event-bus.mjs

@@ -1,27 +1,57 @@
-import EventEmitter2, {} from "eventemitter2";
+import EventEmitter2 from 'eventemitter2';
+
+// =================================================================
+// event-bus.ts — 基于 EventEmitter2 的插件事件总线
+//
+// 利用 EventEmitter2 的三个核心特性：
+//   1. wildcard: true  → 支持 'terminal:*' 订阅整个命名空间
+//   2. delimiter: ':'  → 'namespace:event' 格式的原生支持
+//   3. listener.off()  → 订阅返回 Listener 对象，无需手动传 handler 引用
+// =================================================================
+
+
+// ── 全局总线单例（所有插件共享，跨插件通信用）──────────────────────
+//
+// wildcard + delimiter 让命名空间隔离变成原生能力：
+//   - 插件 A 订阅 'terminal:*'  可以收到所有 terminal 前缀的事件
+//   - 全局订阅 '**' 可以监听所有事件（调试用）
+//   - maxListeners 设大一点，避免大量插件时出现警告
+
 const globalEmitter = new EventEmitter2({
   wildcard: true,
   // 开启通配符
-  delimiter: ":",
+  delimiter: ':',
   // 命名空间分隔符，与原版 createModuleEventBus 保持一致
   newListener: false,
   // 不触发 newListener 事件，减少不必要开销
   maxListeners: 200,
   // 对标原版 createModuleEventBus(pluginName, 200) 的容量参数
-  verboseMemoryLeak: true
-  // 超出 maxListeners 时打印详细的内存泄漏警告
+  verboseMemoryLeak: true // 超出 maxListeners 时打印详细的内存泄漏警告
 });
+// ── 插件私有事件总线工厂函数 ──────────────────────────────────────
+//
+// 每个插件获得一个独立的 emitter 实例（私有事件不污染全局），
+// 同时持有 globalEmitter 引用用于跨插件通信。
+//
+// 命名规则：
+//   ctx.event.emit('data-loaded')       → 实际发出 'terminal:data-loaded'（自动加前缀）
+//   ctx.event.on('data-loaded', fn)     → 订阅 'terminal:data-loaded'
+//   ctx.event.onGlobal('layout:*', fn)  → 订阅全局总线上所有 layout 事件（wildcard）
+//   ctx.event.emitGlobal('layout:ready')→ 向全局总线发出事件，所有插件都能收到
+
 function createPluginEventBus(namespace) {
+  // 每个插件自己的私有 emitter（同样开启 wildcard）
   const privateEmitter = new EventEmitter2({
     wildcard: true,
-    delimiter: ":",
+    delimiter: ':',
     newListener: false,
     maxListeners: 200,
     verboseMemoryLeak: true
   });
-  const prefixed = (event) => `${namespace}:${event}`;
+  const prefixed = event => `${namespace}:${event}`;
   return {
     // ── 私有事件（自动加 namespace 前缀）──────────────────────────
+
     emit(event, payload) {
       privateEmitter.emit(prefixed(event), payload);
     },
@@ -31,11 +61,9 @@ function createPluginEventBus(namespace) {
      * 无需调用方保存 handler 引用。
      */
     on(event, handler) {
-      const listener = privateEmitter.on(
-        prefixed(event),
-        handler,
-        { objectify: true }
-        // 返回 Listener 对象而非 emitter 本身
+      const listener = privateEmitter.on(prefixed(event), handler, {
+        objectify: true
+      } // 返回 Listener 对象而非 emitter 本身
       );
       return () => listener.off();
     },
@@ -52,6 +80,7 @@ function createPluginEventBus(namespace) {
       return () => listener.off();
     },
     // ── 全局事件（跨插件通信，走 globalEmitter）────────────────────
+
     emitGlobal(event, payload) {
       globalEmitter.emit(event, payload);
     },
@@ -95,6 +124,7 @@ function createPluginEventBus(namespace) {
       });
     },
     // ── 清理（插件 destroy 时调用）─────────────────────────────────
+
     /**
      * 移除该插件私有 emitter 上的所有监听器。
      * 全局监听器需要单独 offGlobal（插件应在 teardown 中手动清理）。
@@ -104,6 +134,9 @@ function createPluginEventBus(namespace) {
     }
   };
 }
+
+// ── 系统级全局事件工具函数（PluginManager 使用）────────────────────
+
 function emitSystemEvent(event, payload) {
   globalEmitter.emit(event, payload);
 }
@@ -116,9 +149,5 @@ function onSystemEvent(event, handler) {
 function getGlobalEmitter() {
   return globalEmitter;
 }
-export {
-  createPluginEventBus,
-  emitSystemEvent,
-  getGlobalEmitter,
-  onSystemEvent
-};
+
+export { createPluginEventBus, emitSystemEvent, getGlobalEmitter, onSystemEvent };