workspace/code/g3soft-libs/docs/examples/layout/basic.vue

<script setup lang="ts">
// 布局骨架演示：切换 7 种布局模式，菜单/页签/内容都由本示例以数据注入。
// 注意：SSR 预渲染下不要在 setup 顶层用 window/document，这里只用静态数据 + ref。
import { ref } from 'vue'
import { G3Layout, type G3TabItem, type LayoutType, type NavItem } from '@g3soft/framework'

const modes: { value: LayoutType; label: string }[] = [
  { value: 'sidebar-nav', label: '垂直菜单' },
  { value: 'header-nav', label: '顶部菜单' },
  { value: 'sidebar-mixed-nav', label: '双列菜单' },
  { value: 'mixed-nav', label: '顶+侧' },
  { value: 'header-sidebar-nav', label: '顶栏+侧栏' },
  { value: 'header-mixed-nav', label: '顶部混合' },
  { value: 'full-content', label: '通栏内容' },
]

const layout = ref<LayoutType>('sidebar-nav')
const activeKey = ref('/dashboard')

const menus: NavItem[] = [
  { key: '/dashboard', title: '工作台', path: '/dashboard' },
  {
    key: '/base',
    title: '基础资料',
    children: [
      { key: '/base/company', title: '公司档案', path: '/base/company' },
      { key: '/base/customer', title: '客户档案', path: '/base/customer' },
      { key: '/base/supplier', title: '供应商', path: '/base/supplier' },
    ],
  },
  {
    key: '/biz',
    title: '业务管理',
    children: [
      { key: '/biz/order', title: '订单', path: '/biz/order' },
      { key: '/biz/stock', title: '库存', path: '/biz/stock' },
    ],
  },
  {
    key: '/system',
    title: '系统设置',
    children: [
      { key: '/system/menu', title: '菜单管理', path: '/system/menu' },
      { key: '/system/user', title: '用户管理', path: '/system/user' },
    ],
  },
]

const tabs = ref<G3TabItem[]>([
  { key: '/dashboard', title: '工作台', affix: true },
  { key: '/base/customer', title: '客户档案' },
])

function onNavigate(payload: { key: string }): void {
  activeKey.value = payload.key
}

function onTabChange(key: string): void {
  activeKey.value = key
}

function onTabClose(key: string): void {
  tabs.value = tabs.value.filter((tab) => tab.key !== key)
}
</script>

<template>
  <div class="layout-demo">
    <div class="layout-demo__modes">
      <button
        v-for="mode in modes"
        :key="mode.value"
        type="button"
        class="layout-demo__mode"
        :class="{ 'is-active': layout === mode.value }"
        @click="layout = mode.value"
      >
        {{ mode.label }}
      </button>
    </div>

    <div class="layout-demo__stage">
      <G3Layout
        :layout="layout"
        :menus="menus"
        :active-key="activeKey"
        :tabs="layout === 'full-content' ? [] : tabs"
        @navigate="onNavigate"
        @tab-change="onTabChange"
        @tab-close="onTabClose"
      >
        <template #logo>
          <span class="layout-demo__logo">G3 FMS</span>
        </template>
        <template #header-right>
          <span class="layout-demo__user">admin</span>
        </template>
        <template #page>
          <div class="layout-demo__page" />
        </template>
      </G3Layout>
    </div>
  </div>
</template>

<style>
.layout-demo {
  width: 100%;
}

.layout-demo__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.layout-demo__mode {
  padding: 5px 10px;
  border: 1px solid var(--ui-border, #e5e7eb);
  border-radius: 6px;
  background: var(--ui-bg, #fff);
  color: var(--ui-text-muted, #52525b);
  font-size: 12px;
  cursor: pointer;
}

.layout-demo__mode.is-active {
  border-color: var(--g3-color-primary, #18181b);
  color: var(--g3-color-primary, #18181b);
  font-weight: 600;
}

.layout-demo__stage {
  height: 620px;
  border: 1px solid var(--ui-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

.layout-demo__logo {
  font-size: 15px;
  font-weight: 700;
}

.layout-demo__user {
  font-size: 13px;
  color: var(--g3-color-text-secondary, #52525b);
}

.layout-demo__page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 1px dashed var(--ui-border, #e5e7eb);
  border-radius: 8px;
  background: var(--ui-bg, #fff);
  color: var(--g3-color-text-secondary, #52525b);
  font-size: 14px;
}
</style>