@qi-tian-da-sheng/bin-project-ui 1.0.0

package/examples/layout/layoutContainer/assembly.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="border: solid 10px #a19999;position: relative">
+    <p-layout>
+      <p-header>
+        <p-head-menu model-value="item1" height="120px">
+          <template #logo>
+            <img
+                slot="logo"
+                width="136"
+                class="logo"
+                src="https://www.tencent.com/img/index/menu_logo_hover.png"
+                alt="logo"
+            />
+          </template>
+
+          <p-menu-item value="item1">已选内容</p-menu-item>
+          <p-menu-item value="item2">菜单内容一</p-menu-item>
+          <p-menu-item value="item3">菜单内容二</p-menu-item>
+          <p-menu-item value="item4" :disabled="true">菜单内容三</p-menu-item>
+          <template #operations>
+            <a href="javascript:;">
+              <p-icon target="home"/>
+            </a>
+            <a href="javascript:;">
+              <p-icon target="home"/>
+            </a>
+            <a href="javascript:;">
+              <p-icon target="home"/>
+            </a>
+          </template>
+        </p-head-menu>
+      </p-header>
+      <p-layout>
+        <p-aside>
+          <p-menu theme="light" model-value="dashboard" style="margin-right: 50px" height="550px">
+            <p-menu-item value="dashboard">
+              <p-icon target="home"/>
+              仪表盘
+            </p-menu-item>
+            <p-menu-item value="resource">
+              <p-icon target="home"/>
+              资源列表
+            </p-menu-item>
+            <p-menu-item value="root">
+              <p-icon target="home"/>
+              根目录
+            </p-menu-item>
+            <p-menu-item value="control-platform">
+              <p-icon target="home"/>
+              调度平台
+            </p-menu-item>
+            <p-menu-item value="precise-monitor">
+              <p-icon target="home"/>
+              精准监控
+            </p-menu-item>
+            <p-menu-item value="mail">
+              <p-icon target="home"/>
+              消息区
+            </p-menu-item>
+            <p-menu-item value="user-circle">
+              <p-icon target="home"/>
+              个人中心
+            </p-menu-item>
+            <p-menu-item value="play-circle">
+              <p-icon target="home"/>
+              视频区
+            </p-menu-item>
+            <p-menu-item value="edit1">
+              <p-icon target="home"/>
+              资源编辑
+            </p-menu-item>
+          </p-menu>
+        </p-aside>
+        <p-layout>
+          <p-content>
+            <div>Content</div>
+          </p-content>
+          <p-footer>Copyright @ 2019-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</p-footer>
+        </p-layout>
+      </p-layout>
+    </p-layout>
+  </div>
+</template>
+<script setup lang="ts">
+import PLayout from "@bin-ui/components/layout/src/layout.vue";
+import PHeader from "@bin-ui/components/layout/src/header.vue";
+import PHeadMenu from "@bin-ui/components/menu/src/head-menu.vue";
+import PMenuItem from "@bin-ui/components/menu/src/menu-item.vue";
+import PAside from "@bin-ui/components/layout/src/aside.vue";
+import PMenu from "@bin-ui/components/menu/src/menu.vue";
+import PContent from "@bin-ui/components/layout/src/content.vue";
+import PFooter from "@bin-ui/components/layout/src/footer.vue";
+import PIcon from "@bin-ui/components/icon/src/icon.vue";
+
+</script>
+
+
+<style scoped lang="less">
+
+</style>

package/examples/layout/layoutContainer/basic.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="pixel-demo-layout">
+    <p-layout>
+      <p-header>Header</p-header>
+      <p-content>Content</p-content>
+      <p-footer>Footer</p-footer>
+    </p-layout>
+  </div>
+
+  <div class="pixel-demo-layout">
+    <p-layout>
+      <p-header>Header</p-header>
+      <p-layout>
+        <p-aside>Aside</p-aside>
+        <p-content>Content</p-content>
+      </p-layout>
+      <p-footer>Footer</p-footer>
+    </p-layout>
+  </div>
+
+  <div class="pixel-demo-layout">
+    <p-layout>
+      <p-header>Header</p-header>
+      <p-layout>
+        <p-content>Content</p-content>
+        <p-aside>Aside</p-aside>
+      </p-layout>
+      <p-footer>Footer</p-footer>
+    </p-layout>
+  </div>
+
+  <div class="pixel-demo-layout">
+    <p-layout>
+      <p-aside>Aside</p-aside>
+      <p-layout>
+        <p-header>Header</p-header>
+        <p-content>Content</p-content>
+        <p-footer>Footer</p-footer>
+      </p-layout>
+    </p-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PLayout from "@bin-ui/components/layout/src/layout.vue";
+import PHeader from "@bin-ui/components/layout/src/header.vue";
+import PContent from "@bin-ui/components/layout/src/content.vue";
+import PFooter from "@bin-ui/components/layout/src/footer.vue";
+import PAside from "@bin-ui/components/layout/src/aside.vue";
+</script>
+
+<style scoped lang="less">
+.pixel-demo-layout {
+  margin-top: 24px;
+}
+
+.p-layout__header {
+  text-align: center;
+  background-color: #8eabff;
+}
+
+.p-layout__content {
+  text-align: center;
+  background-color: #618dff;
+}
+
+.p-layout__aside {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #366ef4;
+}
+
+.p-layout__footer {
+  text-align: center;
+  background-color: #8eabff;
+}
+</style>

package/examples/layout/layoutContainer/side.vue

@@ -0,0 +1,77 @@
+<template>
+  <div style="border: solid 10px #a19999;position: relative">
+    <p-layout>
+      <p-aside>
+        <p-menu theme="light" model-value="dashboard" style="margin-right: 50px" height="550px" @change="changeHandler">
+          <template #logo>
+            <img width="136" class="logo" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo" />
+          </template>
+          <p-menu-item value="dashboard">
+            <template #icon>
+              <p-icon target="home"/>
+            </template>
+            仪表盘
+          </p-menu-item>
+          <p-menu-item :disabled="true" value="resource">
+            <template #icon>
+              <p-icon target="home"/>
+            </template>
+            资源列表
+          </p-menu-item>
+          <p-menu-item value="root">
+            根目录
+          </p-menu-item>
+          <p-menu-item value="control-platform">
+            调度平台
+          </p-menu-item>
+          <p-menu-item value="precise-monitor">
+            调度平台
+          </p-menu-item>
+          <p-menu-item value="mail">
+            消息区
+          </p-menu-item>
+          <p-menu-item value="user-circle">
+            个人中心
+          </p-menu-item>
+          <p-menu-item value="play-circle">
+            视频区
+          </p-menu-item>
+          <p-menu-item value="edit1">
+            <template #icon>
+              <p-icon target="danger"/>
+            </template>
+            资源编辑
+          </p-menu-item>
+        </p-menu>
+      </p-aside>
+      <p-layout>
+        <p-content>
+          <div>Content</div>
+        </p-content>
+        <p-footer>Copyright @ 2019-{{ new Date().getFullYear() }} Tencent. All Rights Reserved</p-footer>
+      </p-layout>
+    </p-layout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PLayout from "@bin-ui/components/layout/src/layout.vue";
+import PAside from "@bin-ui/components/layout/src/aside.vue";
+import PContent from "@bin-ui/components/layout/src/content.vue";
+import PFooter from "@bin-ui/components/layout/src/footer.vue";
+import PMenu from "@bin-ui/components/menu/src/menu.vue";
+import PMenuItem from "@bin-ui/components/menu/src/menu-item.vue";
+import PIcon from "@bin-ui/components/icon/src/icon.vue";
+
+function changeHandler(active: string) {
+  console.log('change', active);
+}
+</script>
+
+<style scoped lang="less">
+.p-layout__content {
+  text-align: center;
+  padding: 24px 24px 0;
+  background-color: white;
+}
+</style>

package/examples/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import ui from "../index"
+// import "../dist/index.css"
+
+const app = createApp(App)
+app.use(ui,{
+    zIndex:3000
+})
+
+app.mount('#app')

package/examples/navi/dropdown/DropdownIndex.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="component-page">
+    <div class="page-header">
+      <h1 class="page-title">Dropdown 下拉菜单</h1>
+      <p class="page-description">将动作或菜单折叠到下拉菜单中。</p>
+    </div>
+
+    <p-row>
+      <p-col span="6">
+        <basic/>
+      </p-col>
+      <p-col span="6">
+        <centers/>
+      </p-col>
+      <p-col span="6">
+        <other/>
+      </p-col>
+      <p-col span="6">
+        <scroll/>
+      </p-col>
+    </p-row>
+
+    <api-table title="Dropdown Props" :data="dropdownProps" />
+    <api-table title="Dropdown Events" :data="dropdownEvents" :headers="eventHeaders" />
+    <api-table title="Dropdown Methods" :data="dropdownMethods" :headers="methodHeaders" />
+    
+    <api-table title="DropdownItem Props" :data="dropdownItemProps" style="margin-top: 32px;" />
+    <api-table title="DropdownItem Events" :data="dropdownItemEvents" :headers="eventHeaders" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Basic from "./basic.vue";
+import Centers from "./centers.vue";
+import Other from "./other.vue";
+import Scroll from "./scroll.vue";
+import ApiTable from "../../components/ApiTable.vue";
+
+const dropdownProps = [
+  { name: 'trigger', description: '触发方式', type: "'hover' | 'click' | 'focus' | 'contextmenu'", default: 'hover' },
+  { name: 'placement', description: '弹出位置', type: "'top' | 'bottom' | 'left' | 'right' ...", default: 'bottom' },
+  { name: 'disabled', description: '是否禁用', type: 'boolean', default: 'false' },
+  { name: 'center', description: '内容是否居中', type: 'boolean', default: 'false' },
+  { name: 'activeColor', description: '激活项颜色', type: 'string', default: 'primary' },
+  { name: 'closeOnClickItem', description: '点击菜单项后是否关闭', type: 'boolean', default: 'true' },
+  { name: 'offset', description: '弹出偏移量', type: 'number', default: '8' },
+  { name: 'show-arrow', description: '是否显示箭头', type: 'boolean', default: 'false' },
+]
+
+const eventHeaders = {
+  name: '事件名',
+  description: '说明',
+  type: '回调参数',
+  default: '-'
+}
+
+const dropdownEvents = [
+  { name: 'select', description: '点击菜单项时触发', type: 'value: string', default: '-' },
+  { name: 'open', description: '下拉框展开时触发', type: '-', default: '-' },
+  { name: 'close', description: '下拉框关闭时触发', type: '-', default: '-' },
+]
+
+const methodHeaders = {
+  name: '方法名',
+  description: '说明',
+  type: '参数',
+  default: '返回值'
+}
+
+const dropdownMethods = [
+  { name: 'open', description: '打开下拉框', type: '-', default: '-' },
+  { name: 'close', description: '关闭下拉框', type: '-', default: '-' },
+  { name: 'toggle', description: '切换下拉框开关', type: '-', default: '-' },
+]
+
+const dropdownItemProps = [
+  { name: 'value', description: '菜单项的值', type: 'string', default: '-' },
+  { name: 'label', description: '菜单项文本', type: 'string', default: '-' },
+  { name: 'active', description: '是否激活', type: 'boolean', default: 'false' },
+  { name: 'disabled', description: '是否禁用', type: 'boolean', default: 'false' },
+  { name: 'prefix-icon', description: '前置图标', type: 'string', default: '-' },
+  { name: 'suffix-icon', description: '后置图标', type: 'string', default: '-' },
+  { name: 'closeOnClick', description: '点击后是否关闭', type: 'boolean', default: 'true' },
+]
+
+const dropdownItemEvents = [
+  { name: 'select', description: '点击菜单项时触发', type: 'value: string', default: '-' },
+  { name: 'click', description: '点击菜单项时触发', type: '-', default: '-' },
+]
+</script>
+
+<style scoped lang="less">
+@import "../../components/page-styles.less";
+</style>

package/examples/navi/dropdown/basic.vue

@@ -0,0 +1,40 @@
+<template>
+  <p-row justify-content="center">
+      <p-dropdown>
+        <template #reference>
+          <p-button>导航项</p-button>
+        </template>
+        <p-dropdown-item
+            label="项目主页"
+            suffix-icon="home"
+            tag="p-link"
+            href="/"
+            target="_self"
+            style="padding: 7px 16px"
+        ></p-dropdown-item>
+        <p-dropdown-item
+            label="个人主页"
+            suffix-icon="user"
+            tag="p-link"
+            href="https://github.com/lastertd"
+            target="_blank"
+            style="padding: 7px 16px"
+        ></p-dropdown-item>
+        <p-dropdown-item
+            label="代码仓库"
+            suffix-icon="collect-1"
+            tag="p-link"
+            href="https://github.com/lastertd/sss-ui-plus"
+            target="_top"
+            style="padding: 7px 16px"
+        ></p-dropdown-item>
+      </p-dropdown>
+    </p-row>
+</template>
+
+<script setup lang="ts">
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PDropdown from "@bin-ui/components/dropdown/src/dropdown.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDropdownItem from "@bin-ui/components/dropdown/src/dropdown-item.vue";
+</script>

package/examples/navi/dropdown/centers.vue

@@ -0,0 +1,24 @@
+<template>
+  <p-row justify-content="center">
+    <p-dropdown
+        style="height: 200px;width: 150px"
+        close-on-click-body
+        center
+    >
+      <template #reference>
+        <p-button>导航项</p-button>
+      </template>
+      <p-dropdown-item
+          v-for="i in 15"
+          :label="`item ${i}`"
+      ></p-dropdown-item>
+    </p-dropdown>
+  </p-row>
+</template>
+
+<script setup>
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PDropdown from "@bin-ui/components/dropdown/src/dropdown.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDropdownItem from "@bin-ui/components/dropdown/src/dropdown-item.vue";
+</script>

package/examples/navi/dropdown/other.vue

@@ -0,0 +1,55 @@
+<template>
+	<p-row justify-content="center">
+		<p-dropdown
+			style="width: 150px"
+			close-on-click-body
+		>
+			<template #reference>
+				<p-button>导航项</p-button>
+			</template>
+
+			<div class="pixel-dropdown-title">Page</div>
+			<p-divider :gap="5"></p-divider>
+			<p-dropdown-item
+				label="page1"
+				suffix-icon="edit"
+			></p-dropdown-item>
+			<p-dropdown-item
+				label="page2"
+				active
+				suffix-icon="edit"
+			></p-dropdown-item>
+			<div class="pixel-dropdown-title">Friend</div>
+			<p-divider :gap="5"></p-divider>
+			<p-dropdown-item
+				label="friend1"
+				disabled
+				suffix-icon="user"
+			></p-dropdown-item>
+			<p-dropdown-item
+				label="friend2"
+				suffix-icon="user-1"
+			></p-dropdown-item>
+		</p-dropdown>
+	</p-row>
+
+</template>
+
+<script setup lang="ts">
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PDropdown from "@bin-ui/components/dropdown/src/dropdown.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDropdownItem from "@bin-ui/components/dropdown/src/dropdown-item.vue";
+import PDivider from "@bin-ui/components/divider/src/divider.vue";
+</script>
+
+<style lang="less">
+.pixel-dropdown-title{
+  margin: 5px 0 0 0;
+  font-weight: 1000;
+  font-size: 10px;
+  color: var(--pixel-color-primary-light);
+  padding: 7px 16px;
+  text-align: left;
+}
+</style>

package/examples/navi/dropdown/scroll.vue

@@ -0,0 +1,23 @@
+<template>
+  <p-row justify-content="center">
+    <p-dropdown
+        style="height: 150px"
+        close-on-click-body
+    >
+      <template #reference>
+        <p-button>导航项</p-button>
+      </template>
+      <p-dropdown-item
+          v-for="i in 10"
+          :label="`item ${i}`"
+      ></p-dropdown-item>
+    </p-dropdown>
+  </p-row>
+</template>
+
+<script setup lang="ts">
+import PRow from "@bin-ui/components/grid/src/row.vue";
+import PDropdown from "@bin-ui/components/dropdown/src/dropdown.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PDropdownItem from "@bin-ui/components/dropdown/src/dropdown-item.vue";
+</script>

package/examples/navi/menu/HeadMenu.vue

@@ -0,0 +1,158 @@
+<template>
+  <div style="border: solid 10px #a19999;position: relative">
+<!--    <p-head-menu v-model="menu1Value" theme="light" @change="changeHandler">-->
+<!--      <template #logo>-->
+<!--        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />-->
+<!--      </template>-->
+<!--      <p-menu-item value="item1">-->
+<!--        <template #icon>-->
+<!--          <p-icon target="home"/>-->
+<!--        </template>-->
+<!--        菜单1-->
+<!--      </p-menu-item>-->
+<!--      <p-menu-item value="item2"> 菜单2 </p-menu-item>-->
+<!--      <p-menu-item value="item4" :disabled="true"> 禁用菜单 </p-menu-item>-->
+<!--      <template #operations>-->
+<!--        <p-button variant="ghost" prefix-icon="edit"/>-->
+<!--        <p-button variant="fantasy" prefix-icon="edit"/>-->
+<!--        <p-button variant="empty" prefix-icon="edit"/>-->
+<!--        <p-button variant="ghost" prefix-icon="edit"/>-->
+<!--      </template>-->
+<!--    </p-head-menu>-->
+
+<!--    <p-head-menu v-model="menu2Value" :expanded="expanded" @expand="expandHandler">-->
+<!--      <template #logo>-->
+<!--        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />-->
+<!--      </template>-->
+<!--      <p-submenu value="1">-->
+<!--        <template #icon>-->
+<!--          <p-icon target="home"/>-->
+<!--        </template>-->
+<!--        <template #title>-->
+<!--          <span>菜单1</span>-->
+<!--        </template>-->
+<!--        <p-menu-item value="1-1">子菜单1-1</p-menu-item>-->
+<!--        <p-menu-item value="1-2">子菜单1-2</p-menu-item>-->
+<!--        <p-menu-item value="1-3">子菜单1-3</p-menu-item>-->
+<!--      </p-submenu>-->
+<!--      <p-submenu value="2" title="菜单2">-->
+<!--        <p-menu-item value="2-1">子菜单2-1</p-menu-item>-->
+<!--        <p-menu-item value="2-2">子菜单2-2</p-menu-item>-->
+<!--        <p-menu-item value="2-3">子菜单2-3</p-menu-item>-->
+<!--      </p-submenu>-->
+<!--      <p-submenu value="3" title="菜单3">-->
+<!--        <p-menu-item value="3-1">子菜单3-1</p-menu-item>-->
+<!--        <p-menu-item value="3-2">子菜单3-2</p-menu-item>-->
+<!--        <p-menu-item value="3-3">子菜单3-3</p-menu-item>-->
+<!--      </p-submenu>-->
+<!--      <p-submenu value="4" title="菜单4">-->
+<!--        <p-menu-item value="4-1">子菜单4-1</p-menu-item>-->
+<!--        <p-menu-item value="4-2">子菜单4-2</p-menu-item>-->
+<!--        <p-menu-item value="4-3">子菜单4-3</p-menu-item>-->
+<!--      </p-submenu>-->
+<!--      <p-submenu value="5" title="菜单5">-->
+<!--        <p-menu-item value="5-1">子菜单5-1</p-menu-item>-->
+<!--        <p-menu-item value="5-2">子菜单5-2</p-menu-item>-->
+<!--        <p-menu-item value="5-3">子菜单5-3</p-menu-item>-->
+<!--      </p-submenu>-->
+<!--      <p-submenu value="6" title="菜单6">-->
+<!--        <p-menu-item value="6-1">子菜单6-1</p-menu-item>-->
+<!--        <p-menu-item value="6-2">子菜单6-2</p-menu-item>-->
+<!--        <p-menu-item value="6-3">子菜单6-3</p-menu-item>-->
+<!--      </p-submenu>-->
+<!--      <template #operations>-->
+<!--        <p-button variant="ghost" prefix-icon="edit"/>-->
+<!--        <p-button variant="fantasy" prefix-icon="edit"/>-->
+<!--        <p-button variant="empty" prefix-icon="edit"/>-->
+<!--        <p-button variant="ghost" prefix-icon="edit"/>-->
+<!--      </template>-->
+<!--    </p-head-menu>-->
+
+    <p-head-menu v-model="menu3Value" expand-type="popup">
+      <template #logo>
+        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
+      </template>
+      <p-submenu value="1">
+        <template #title>
+          <span>菜单1</span>
+        </template>
+        <p-submenu value="1-0" title="子菜单1-1">
+          <p-menu-item value="1-1-1"> 子菜单1-1-1 </p-menu-item>
+          <p-menu-item value="1-1-3"> 子菜单1-1-3 </p-menu-item>
+          <p-menu-item value="1-1-2"> 子菜单1-1-2 </p-menu-item>
+          <p-menu-item value="1-1-4"> 子菜单1-1-4 </p-menu-item>
+          <p-menu-item value="1-1-5"> 子菜单1-1-5 </p-menu-item>
+          <p-menu-item value="1-1-6"> 子菜单1-1-6 </p-menu-item>
+          <p-menu-item value="1-1-7"> 子菜单1-1-7 </p-menu-item>
+          <p-menu-item value="1-1-8"> 子菜单1-1-8 </p-menu-item>
+          <p-menu-item value="1-1-9"> 子菜单1-1-9 </p-menu-item>
+          <p-submenu value="1-1-10" title="子菜单1-10">
+            <p-menu-item value="1-1-10-1"> 子菜单1-1-10-1 </p-menu-item>
+            <p-menu-item value="1-1-10-3"> 子菜单1-1-10-3 </p-menu-item>
+            <p-menu-item value="1-1-10-2"> 子菜单1-1-10-2 </p-menu-item>
+            <p-menu-item value="1-1-10-4"> 子菜单1-1-10-4 </p-menu-item>
+            <p-menu-item value="1-1-10-5"> 子菜单1-1-10-5 </p-menu-item>
+            <p-menu-item value="1-1-10-6"> 子菜单1-1-10-6 </p-menu-item>
+            <p-menu-item value="1-1-10-7"> 子菜单1-1-10-7 </p-menu-item>
+            <p-menu-item value="1-1-10-8"> 子菜单1-1-10-8 </p-menu-item>
+            <p-menu-item value="1-1-10-9"> 子菜单1-1-10-9 </p-menu-item>
+          </p-submenu>
+        </p-submenu>
+        <p-menu-item value="1-2"> 子菜单1-2 </p-menu-item>
+        <p-menu-item value="1-3"> 子菜单1-3 </p-menu-item>
+        <p-menu-item value="1-4"> 子菜单1-4 </p-menu-item>
+        <p-submenu value="1-5" title="子菜单1-5">
+          <p-menu-item value="1-5-1"> 子菜单1-5-1 </p-menu-item>
+          <p-menu-item value="1-5-2"> 子菜单1-5-2 </p-menu-item>
+          <p-menu-item value="1-5-3"> 子菜单1-5-3 </p-menu-item>
+          <p-menu-item value="1-5-4"> 子菜单1-5-4 </p-menu-item>
+          <p-menu-item value="1-5-5"> 子菜单1-5-5 </p-menu-item>
+          <p-menu-item value="1-5-6"> 子菜单1-5-6 </p-menu-item>
+          <p-menu-item value="1-5-7"> 子菜单1-5-7 </p-menu-item>
+          <p-menu-item value="1-5-8"> 子菜单1-5-8 </p-menu-item>
+          <p-menu-item value="1-5-9"> 子菜单1-5-9 </p-menu-item>
+          <p-menu-item value="1-5-10"> 子菜单1-5-10 </p-menu-item>
+        </p-submenu>
+      </p-submenu>
+      <p-submenu value="2" title="菜单2">
+        <p-menu-item value="2-1"> 子菜单2-1 </p-menu-item>
+        <p-menu-item value="2-2"> 子菜单2-2 </p-menu-item>
+        <p-menu-item value="2-3"> 子菜单2-3 </p-menu-item>
+      </p-submenu>
+      <template #operations>
+        <p-button variant="ghost" prefix-icon="edit"/>
+        <p-button variant="fantasy" prefix-icon="edit"/>
+        <p-button variant="empty" prefix-icon="edit"/>
+        <p-button variant="ghost" prefix-icon="edit"/>
+      </template>
+    </p-head-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PHeadMenu from "@bin-ui/components/menu/src/head-menu.vue";
+import PMenuItem from "@bin-ui/components/menu/src/menu-item.vue";
+import PSubmenu from "@bin-ui/components/menu/src/submenu.vue";
+import PButton from "@bin-ui/components/button/src/button.vue";
+import PIcon from "@bin-ui/components/icon/src/icon.vue";
+import {ref} from "vue";
+
+const menu1Value = ref('item2');
+const changeHandler = (active: string) => {
+  console.log('change', active);
+};
+
+const menu2Value = ref('1-1');
+const expanded = ref(['1']);
+const expandHandler = (expandValue: Array<string>) => {
+  expanded.value = expandValue;
+  console.log('expand', expandValue);
+};
+
+const menu3Value = ref('2-1');
+
+</script>
+
+<style scoped lang="less">
+
+</style>