pyminer-window-manager v0.1.7

基于 Vue 的窗口管理器

设计目标

该窗口管理器基于 Vue 的单页面应用，可通过嵌套的形式，定义其上的组件。 组件支持在不同窗口之间相互拖动,或是将窗口作为悬浮的窗口以展示。

布局组件(layout)

布局组件分为三层：MainWindow, FlexibleLayout， LayoutItem 和 LayoutContent。 Mainwindow 是最下面的主窗口，所有的子窗口都在里面布局。 FlexibleLayout 是底层的布局组件，可以进行嵌套。 LayoutItem 是一个一个的子窗口，可以作为 FlexibleLayout 的子组件，也可以作为 WindowManager 的子组件。

• LayoutItem 拥有全局唯一的 ID，这个 ID 由用户指定。未来将做布局记忆的功能。
• 当位于 FlexibleLayout 上时，status="layout"
• 当位于 FloatWindowManager 上时，status="window"

LayoutContent 又是 LayoutItem 的子组件。它通过 vue 里面的 teleport 标签，将组件传送到指定的 id——这也是必须指定 LayoutItem 的 id 的原因。

数据模型

首先，对于平铺布局 FlexibleLayout 的每一个子对象（FlexibleLayout 或者 LayoutItem），共有的属性如下：

export interface FlexibleLayoutSubItem {
    mainSize: number; // 主尺寸。如果是横向布局，就是宽度，反之为高度
    minSize: number; // 主尺寸的最小值
    maxSize?: number; // 主尺寸的最大值（暂不集成）
}

export interface FlexibleLayoutItemModel extends FlexibleLayoutSubItem {
    is: "layout-item"
    name: string // name既是名称，也是dom上面的id。
    uuid: string
    params: {
        title: string
    }
}
export interface FlexibleLayoutModel extends FlexibleLayoutSubItem {
    is: "flexible-layout"
    name: string
    params: {
        layoutDirection: 'horizontal' | 'vertical'
        components: Array<FlexibleLayoutModel | FlexibleLayoutItemModel>
    }
}

用到的知识总结：

1、有关多种宽度 2、mousemove事件应当绑定在document上面，而不是在单独的控件上。 3、有关drag拖放事件。 4、vue中teleport传送锚点的使用

碰到的问题包括：

1、当目标对象不存在时teleport如何处理。似乎不会自动等teleport目标出现，必须要手动刷新或者用定时器才行。

LayoutItem有如下的属性：

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

构建依赖

首先要确保在 index.ts 里面定义了需要导出的内容。

yarn lib
npm publish


npm login
npm install -g nrm

确认 registry 为官方源。 可以用 nrm npm 来切换过去。

> npm config get registry
https://registry.npmjs.org/