frame

页面框架

基础应用

<template>
  <h-frame
    :menu-list="menuList"
    :menu-position="menuPostion"
    :default-active="defaultActive"
    :command-list="commandList"
    :user-name="userName"
    :theme="theme"
    @on-command="onCommandFrame"
  >
    <template #breadcrumb>
      <el-breadcrumb v-if="levelList.length">
        <el-breadcrumb-item
          v-for="(item, index) in levelList"
          :key="index"
          :to="(index === levelList.length - 1 || !item.path || (item.meta && item.meta.redirect === true)) ? undefined : item"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <template #default>
      <h-page
        breadcrumb
        :commands="commands"
        @on-command="onCommand"
      >
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
      </h-page>
    </template>
  </h-frame>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  shallowRef
} from 'vue'
import {
  Edit,
  Delete,
  Plus,
  DataLine,
  Connection,
  PictureFilled,
  QuestionFilled,
  Promotion,
  Tools,
  Setting,
} from '@element-plus/icons-vue'

export default defineComponent({
  setup() {
    const levelList = ref([
      {
        name: 'home',
        path: '/home',
        meta: {
          title: '首页'
        }
      },
      {
        name: 'list',
        path: '/list',
        meta: {
          title: '列表'
        }
      },
      {
        name: 'detail',
        path: '/detail',
        meta: {
          title: '详情',
          redirect: true
        }
      }
    ])
    const menuList = shallowRef([
      {
        name: '告警管理',
        icon: DataLine,
        path: '/demo/alarm',
        children: [
          { name: '告警列表', path: '/demo/alarm/list/index' },
          { name: '异常管理', path: '/demo/alarm/unusual' },
          { name: '用户组配置', path: '/demo/alarm/user-group-config' },
          {
            name: '推送策略',
            path: '/demo/alarm/policy',
            children: [{ name: '定时推送', path: '/demo/alarm/policy/11' }, { name: '立即推送', path: '/222', children: [{ name: '周期推送', path: '/333' }] }],
          },
        ],
      },
      { name: '系统管理', path: '/demo/system', icon: Tools, children: [{ name: '异常管理', path: '/demo/system/unusual' }] },
      { name: '管理', icon: Setting, path: '/page' },
    ])
    const commandList = shallowRef([
      { label: '切换主题', icon: PictureFilled, command: 'theme' },
      { label: '帮助文档', icon: QuestionFilled, command: 'help' },
      { label: '快速指南', icon: Promotion, command: 'promotion' }
    ])
    const commands = shallowRef([
      {
        command: "edit",
        label: "编辑",
        props: {
          type: "default",
          icon: Edit
        }
      },
      {
        command: "delete",
        label: "删除",
        props: {
          type: "default",
          icon: Delete
        }
      },
      {
        command: "create",
        label: "新建",
        props: {
          type: "primary",
          icon: Plus
        },
        on: {
          click: () => {
            console.log("点击了", "create")
          }
        }
      }
    ])
    const theme = ref('dark')
    const onCommandFrame = (cmd: string) => {
      if (cmd === 'theme') {
        theme.value = theme.value === 'dark' ? 'light' : 'dark'
      }
    }
    const onCommand = (cmd: string, item) => {
      console.log(cmd, item)
    }

    return {
      levelList,
      menuList,
      commandList,
      commands,
      menuPostion: 'top',
      defaultActive: '/demo/alarm/policy/11',
      userName: '李诗情',
      theme,
      onCommandFrame,
      onCommand
    }
  },
})
</script>

不同主题

<template>
  <h-frame
    :menu-list="menuList"
    :menu-position="menuPostion"
    :default-active="defaultActive"
    :command-list="commandList"
    :user-name="userName"
    :theme="theme"
    @on-command="onCommandFrame"
  >
    <template #breadcrumb>
      <el-breadcrumb v-if="levelList.length">
        <el-breadcrumb-item
          v-for="(item, index) in levelList"
          :key="index"
          :to="(index === levelList.length - 1 || !item.path || (item.meta && item.meta.redirect === true)) ? undefined : item"
        >
          {{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </template>
    <template #default>
      <h-page
        breadcrumb
        :commands="commands"
        @on-command="onCommand"
      >
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <div>主体内容</div>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
        <p>主体内容</p>
      </h-page>
    </template>
  </h-frame>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  shallowRef
} from 'vue'
import {
  Edit,
  Delete,
  Plus,
  DataLine,
  Connection,
  PictureFilled,
  QuestionFilled,
  Promotion,
  Tools,
  Setting,
} from '@element-plus/icons-vue'

export default defineComponent({
  setup() {
    const levelList = ref([
      {
        name: 'home',
        path: '/home',
        meta: {
          title: '首页'
        }
      },
      {
        name: 'list',
        path: '/list',
        meta: {
          title: '列表'
        }
      },
      {
        name: 'detail',
        path: '/detail',
        meta: {
          title: '详情',
          redirect: true
        }
      }
    ])
    const menuList = shallowRef([
      {
        name: '告警管理',
        icon: DataLine,
        path: '/demo/alarm',
        children: [
          { name: '告警列表', path: '/demo/alarm/list/index' },
          { name: '异常管理', path: '/demo/alarm/unusual' },
          { name: '用户组配置', path: '/demo/alarm/user-group-config' },
          {
            name: '推送策略',
            path: '/demo/alarm/policy',
            children: [{ name: '定时推送', path: '/demo/alarm/policy/11' }, { name: '立即推送', path: '/222', children: [{ name: '周期推送', path: '/333' }] }],
          },
        ],
      },
      { name: '系统管理', path: '/demo/system', icon: Tools, children: [{ name: '异常管理', path: '/demo/system/unusual' }] },
      { name: '管理', icon: Setting, path: '/page' },
    ])
    const commandList = shallowRef([
      { label: '切换主题', icon: PictureFilled, command: 'theme' },
      { label: '帮助文档', icon: QuestionFilled, command: 'help' },
      { label: '快速指南', icon: Promotion, command: 'promotion' }
    ])
    const commands = shallowRef([
      {
        command: "edit",
        label: "编辑",
        props: {
          type: "default",
          icon: Edit
        }
      },
      {
        command: "delete",
        label: "删除",
        props: {
          type: "default",
          icon: Delete
        }
      },
      {
        command: "create",
        label: "新建",
        props: {
          type: "primary",
          icon: Plus
        },
        on: {
          click: () => {
            console.log("点击了", "create")
          }
        }
      }
    ])
    const theme = ref('light')
    const onCommandFrame = (cmd: string) => {
      if (cmd === 'theme') {
        theme.value = theme.value === 'dark' ? 'light' : 'dark'
      }
    }
    const onCommand = (cmd: string, item) => {
      console.log(cmd, item)
    }

    return {
      levelList,
      menuList,
      commandList,
      commands,
      menuPostion: 'top',
      defaultActive: '/demo/alarm/policy/11',
      userName: '李诗情',
      theme,
      onCommandFrame,
      onCommand
    }
  },
})
</script>

Frame Attributes

| Attribute | Description | Type | Accepted Values | Default | | -------------- | ---------------- | ------ | --------------- | ----------- | | theme | 主题配置 | string | dark / light | light | | title | 网站名称 | string | — | HightDesign | | menu-position | 菜单位置 | string | side / top | side | | menu-list | 菜单列表 | array | — | — | | default-active | 默认菜单项 | string | — | — | | command-list | 下拉菜单 | array | — | — | | user-name | 当前登录用户信息 | string | — | — |

Frame Events

| Event Name | Description | Parameters | | ---------- | ------------ | ----------------- | | on-command | 下拉菜单点击 | (command: string) |

Frame Slots

| Name | Description | | ---------- | -------------------------- | | — | 主体内容 | | logo | 自定义 logo | | breadcrumb | 自定义面包屑 | | side | 自定义顶部用户信息旁边内容 | | header | 自定义顶部用户信息区 |

Page Attributes

| Attribute | Description | Type | Accepted Values | Default | | ---------- | -------------------- | ------- | --------------- | ------- | | padding | 配置内边距 | string | — | 20px | | gap | 布局间隔 | number | — | 20 | | breadcrumb | 是否显示面包屑 | boolean | — | false | | commands | 操作区按钮配置 | array | — | — | | isBottom | 操作区是否展示在底部 | boolean | — | false | | wrapClass | 内容区样式配置 | string | — | — |

Page Events

| Event Name | Description | Parameters | | ---------- | ------------ | ------------------------------- | | on-command | 下拉菜单点击 | (command: string, item: object) |

Page Slots

| Name | Description | | ---------- | ------------ | | — | 主体内容 | | breadcrumb | 自定义面包屑 | | command | 自定义按钮区 |