gold-layout

布局组件库：智能布局引擎（自由拖放 / 响应式网格 / 紧凑策略）+ 中后台 Frame 框架（容器、顶栏、菜单、会话栏、页签）+ 业务扩展组件（分页、对话框、字典下拉）。基于 Vue 3 + TypeScript + element-plus。

安装与注册

pnpm add gold-layout

import GoldLayout from 'gold-layout'
import 'gold-layout/dist/style.css'

app.use(GoldLayout, { prefix: 'Gold' }) // 默认前缀 Gold

组件以 Gold 前缀全局注册（GoldFrameContainer、GoldExtendPagination 等），旧组件名（GoldLayoutFrame 等）以别名形式向后兼容。完整导出见 src/index.ts。

使用示例

Frame 框架（iframe 工作区）

框架容器（FrameContainer）提供 A 区侧边栏（Logo + 标题 + 垂直菜单）与 B 区主区（折叠按钮 + 内容区 + 页签 + 页脚）。访问前需通过 session 预置用户与导航数据：

<template>
  <gold-frame-container title="Gold Tools" cacheable sso @logout="onLogout">
    <template #center>
      <gold-frame-breadcrumb />
    </template>
  </gold-frame-container>
</template>

<script lang="ts" setup>
import { type IOptionTabPane, session, tabPaneAdd } from 'gold-core'
import { EnumSessionKey } from 'gold-layout'

session.set(EnumSessionKey.Session_User, { userCode: '01685246', userName: '李四' })

const listNavigation: IOptionTabPane[] = [
  { label: '测试', href: '/demo/list', closable: false },
  { label: '智能布局', children: [
    { label: '基础布局', href: '/demo/free-layout', closable: false },
  ] },
  { label: '必应', href: 'https://cn.bing.com/' },
]
session.set(EnumSessionKey.Navigation, listNavigation)

const first = listNavigation.find(({ label }) => label === '测试')
if (first?.href) {
  tabPaneAdd(first.href, first)
}

function onLogout(): void {
  location.href = `${location.origin}/login`
}
</script>

分页组件与表单联动

gold-extend-pagination 通过 useModel 与表单模型联动，需先 provide('modelForm', modelForm)：

<template>
  <gold-extend-pagination @change="onChange" />
</template>

<script lang="ts" setup>
import { reactive, provide, unref } from 'vue'
import { useModel, ProxyConsole } from 'gold-core'

const { modelPagination } = useModel()
const modelForm = reactive({ ...unref(modelPagination) })
// 必须设置，否则分页组件不生效
provide('modelForm', modelForm)

function onChange({ pageNum, pageSize }): void {
  ProxyConsole.log(`当前页：${pageNum}；页大小：${pageSize}`)
}
</script>

三态对话框（新增 / 修改 / 详情）

gold-extend-dialog 通过 v-model 控制显隐，配合 useStatus 与 handlerAction：

<template>
  <gold-extend-dialog width="600px" v-model="statusAdd" title="新增" @save="handleAdd">
    <div>我是新增...</div>
  </gold-extend-dialog>
  <gold-extend-dialog width="600px" v-model="statusUpdate" title="修改" @save="handleUpdate">
    <div>我是修改...</div>
  </gold-extend-dialog>
  <gold-extend-dialog width="600px" v-model="statusDetail" title="详情" hidden-action>
    <div>我是详情...</div>
  </gold-extend-dialog>
</template>

<script lang="ts" setup>
import { useStatus } from 'gold-core'
import { handlerAction } from 'gold-layout'

const { statusAdd, statusUpdate, statusDetail } = useStatus()

function handleAdd() {
  handlerAction(async () => {
    statusAdd.value = false
  }, '添加成功')
}

function handleUpdate() {
  handlerAction(async () => {
    statusUpdate.value = false
  }, '修改成功')
}
</script>

子模块文档

各子模块在 src/packages/*/README.md 有独立的 Props / Events / Slots 说明：

| 子模块 | 职责 | |---|---| | layout-frame | 中后台 Frame 框架（容器 / 顶栏 / 菜单 / 会话栏 / 页签） | | layout-intelligent | 智能自由布局引擎 | | extend-dialog | 增强对话框（新增 / 修改 / 详情三态） | | extend-pagination | 增强分页（表单 model 联动） | | data-dictionary | 字典下拉 |

本地预览

pnpm --filter=gold-main run dev
# 访问 http://localhost:8001