Split Window

项目简介

Split Window 是一个基于 Vue 3 + TypeScript 的轻量分割窗口与选项卡管理库，提供面板分割、选项卡管理、拖拽、插件扩展等功能，适用于构建可拖拽多面板的应用界面（例如 IDE 风格布局、仪表盘面板等）。

安装

• 从 npm 安装（示例已发布版本）：

npm install split-window

快速开始（最小示例）

在你的 Vue 3 应用中创建组件页面并引入 AutoContainer 与 Manager 并传入配置：

<template>
  <div id="app" style="width:100vw;height:100vh">
    <AutoContainer :manager="manager" :option="optionRef" />
  </div>
</template>

<script setup lang="ts">
import { Manager, AutoContainer } from "split-window"
import "split-window/index.css" // 可在vue的main.ts 引入

// import Test from "./Test.vue"

// const div = document.createElement("div")

const manager = new Manager()

const option = {
  type: 'autoContainer',
  direction: 'horizontal',
  children: [
    {
      type: 'tabPages',
      title: 'Left',
      tabs: [ { type: 'tabPage', title: '左页', element: { type: "url", content: "https://www.npmjs.com/package/split-window" } } ],
      activeName: '左页'
    },
    {
      type: 'tabPages',
      title: 'Right',
      tabs: [ { type: 'tabPage', title: '右页', element: { type: "string",  content: "Welcome to split window" } } ],
    },
    /**
     * 该使用为渲染vue组件页面
     */
    // {
    //   type: 'tabPages',
    //   title: 'vueComponent 新人',
    //   tabs: [ { type: 'tabPage', title: '右页', element: { type: "vueComponent",  content: Test } } ],
    // },

    /**
     * 该使用为直接渲染html元素
     */
    // {
    //   type: 'tabPages',
    //   title: 'Center',
    //   tabs: [ { type: 'tabPage', title: '右页', element: { type: "element",  content: div } } ],
    // },
  ]
}

const optionRef = Manager.createOption(option)
</script>

运行开发服务器：

npm run dev

配置结构（概览）

• IAutoContainer：容器对象，包含 children、direction（horizontal|vertical）、contentSizeMode、layout 等字段。children 可以是 autoContainer、tabPages 或 elementPage。
• ITabPages：代表一组选项卡，包含 tabs: ITabPage[]、activeName 等。
• ITabPage：单个标签页，包含 title、element（string | VNode | HTMLElement）等。

核心 API 概览

• Manager：核心管理器

  • new Manager()：创建管理器实例（默认安装 TabDragPlugin 与 ElementRenderPlugin）。
  • usePlugin(plugin)：安装插件
  • removePlugin(plugin)：卸载插件
  • find(callback) / finds(callback) / findByTitle(title, type)：查找节点
  • mergeUpwards(autoContainer)：向上合并容器
  • static createOption(option)：校验并返回 Ref<IAutoContainer>
  • static optionToJson(option)：将内部配置序列化为 JSON（过滤 parent、eventPanel 等）

• TabManager（通过 manager.tabManager 使用）

  • addElementName(name, generator)：注册自定义 element 生成器
  • removeElementName(name)：移除生成器
  • closetabPage(tabPage)：关闭标签页
  • splitTabPages(tabs, pos)：拆分标签组（pos：left|right|top|bottom）
  • moveTab(tab, tabs, index)：移动标签

事件与插件

• 项目提供 EventPanel 事件系统，可监听如 TabPageEventPanelType.CLOSE_BEFORE 等事件。
• 插件示例位于 src/core/class/plugins/（如 TabDragPlugin、ElementRenderPlugin、FilePlugin、UrlLinkPlugin）。插件需实现 install(manager)，可选实现 unInstall(manager)。

自定义内容渲染示例

若 ITabPage.element 为字符串并需映射到真实内容，可使用：

manager.tabManager.addElementName('left-content', (tab) => {
  const el = document.createElement('div')
  el.innerText = '这是左侧自定义内容'
  return el
})

const data = Manager.createOption({
    direction: "horizontal",
    type: "autoContainer",
    resizable: true,
    children: [
        {
            tabs: [
                {
                    title: "tab1",
                    element: "left-content", // 使用自定义名称
                    type: "tabPage"
                },
            ],
            type: "tabPages",
        }
    ]
})