@centit/ui-workspace

ui-workspace

一个开箱即用、统一样式的工作台框架

安装

npm install @centit/ui-workspace --save

[main.js]

import Workspace, { Tools } from '@centit/ui-workspace'
import '@centit/ui-workspace/ui-workspace.css'

...

app.use(Workspace)
app.use(Tools)

使用说明

工作台

<c-workspace :layout="layout" >
  <template #header-left>
    <c-logo-tool />
  </template>
  
  ...
  
  <template #left="{ tab, tabs }">
      <ElementsPanel v-if="tabs[0].resolved" v-show="tab.value === 'C'" />
      <LayersPanel v-if="tabs[1].resolved" v-show="tab.value === 'S'" />
      <PagesPanel v-if="tabs[2].resolved" v-show="tab.value === 'P'" />
  </template>
  
  ...
</c-workspace>

<script>
const layout = {
    header: {
        size: 52,
    },
    tools: {
        size: 48,
    },
    left: {
        size: 300,
        tabs: [
            { value: 'C', label: '组件', icon: BuildOutlined },
            { value: 'S', label: '结构', icon: ApartmentOutlined },
            { value: 'P', label: '页面', icon: FolderOpenOutlined },
            { value: 'A', label: '工程', icon: RocketOutlined },
        ],
        tab: 'C',
    },
    right: {
        size: 300,
    },
    bottom: {
        size: 256,
        isClosed: false,
        isFullscreen: false,
        tabs: [
            { value: 'C', label: '代码', icon: ApiOutlined },
            { value: 'E', label: '效果', icon: AlertOutlined },
        ],
        tab: 'C',
    },
    main: {
        tabs: false,
    },
}
</script>

组件选择Panel

<c-items-panel
  :items="plugins"
  @startDrag="onStartDragItem"
  @endDrag="onEndDragItem"
/>

<script>
const plugins = [
  {
    key: 'Layout',
    label: '布局',
    children: [
      {
        icon: '图标地址或者base64',
        label: '容器'
        ... // 其他自己需要的属性
      },
      ...
    ],
  },
  ... // 其他栏目
]

// 从侧边栏开始拖动元素
function onStartDragItem(e, item) {
  
}

// 结束拖动
function onEndDragItem(e, item) {

}
</script>