Refact/menu (Tencent#2172)

* feat: remove useless wrap dom * feat: remove pop menu arrow animation * fix: popup menu style * chore: optimize menu demo * test: update snapshot * feat: update common * feat: update common * test: update snapshot
sinbadmaster · Jun 2, 2023 · 1d66d21 · 1d66d21
1 parent ec54710
commit 1d66d21
Show file tree

Hide file tree

Showing 21 changed files with 2,569 additions and 1,932 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/menu/__tests__/__snapshots__/head-menu.test.jsx.snap b/src/menu/__tests__/__snapshots__/head-menu.test.jsx.snap
@@ -8,16 +8,12 @@ exports[`HeadMenu > props > :active 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <div
-      class="t-menu__container"
+    <ul
+      class="t-menu"
     >
-      <ul
-        class="t-menu"
-      >
-        
-        
-      </ul>
-    </div>
+      
+      
+    </ul>
     <!---->
   </div>
   <!---->
@@ -33,16 +29,12 @@ exports[`HeadMenu > props > :height 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <div
-      class="t-menu__container"
+    <ul
+      class="t-menu"
     >
-      <ul
-        class="t-menu"
-      >
-        
-        
-      </ul>
-    </div>
+      
+      
+    </ul>
     <!---->
   </div>
   <!---->
@@ -57,16 +49,12 @@ exports[`HeadMenu > props > :theme 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <div
-      class="t-menu__container"
+    <ul
+      class="t-menu"
     >
-      <ul
-        class="t-menu"
-      >
-        
-        
-      </ul>
-    </div>
+      
+      
+    </ul>
     <!---->
   </div>
   <!---->
@@ -81,17 +69,13 @@ exports[`HeadMenu > slot > <default> 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <div
-      class="t-menu__container"
+    <ul
+      class="t-menu"
     >
-      <ul
-        class="t-menu"
-      >
-        
-        <div />
-        
-      </ul>
-    </div>
+      
+      <div />
+      
+    </ul>
     <!---->
   </div>
   <!---->
@@ -112,16 +96,12 @@ exports[`HeadMenu > slot > <logo> 1`] = `
       <div />
       
     </div>
-    <div
-      class="t-menu__container"
+    <ul
+      class="t-menu"
     >
-      <ul
-        class="t-menu"
-      >
-        
-        
-      </ul>
-    </div>
+      
+      
+    </ul>
     <!---->
   </div>
   <!---->
@@ -136,16 +116,12 @@ exports[`HeadMenu > slot > <operations> 1`] = `
     class="t-head-menu__inner"
   >
     <!---->
-    <div
-      class="t-menu__container"
+    <ul
+      class="t-menu"
     >
-      <ul
-        class="t-menu"
-      >
-        
-        
-      </ul>
-    </div>
+      
+      
+    </ul>
     <div
       class="t-menu__operations"
     >

diff --git a/src/menu/_example/closable-side.vue b/src/menu/_example/closable-side.vue
@@ -33,7 +33,9 @@
       资源编辑
     </t-menu-item>
     <template #operations>
-      <t-icon class="t-menu__operations-icon" :name="iconName" @click="changeCollapsed" />
+      <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
+        <template #icon><t-icon :name="iconName" /></template>
+      </t-button>
     </template>
   </t-menu>
 </template>

diff --git a/src/menu/_example/custom-header.vue b/src/menu/_example/custom-header.vue
@@ -5,18 +5,38 @@
     <t-menu-item value="item3"> 菜单内容二 </t-menu-item>
     <t-menu-item value="item4" :disabled="true"> 菜单内容三 </t-menu-item>
     <template #operations>
-      <div class="demo-box">自定义内容区域</div>
+      <div class="t-demo-menu--dark">
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="search" /></template>
+        </t-button>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="mail" /></template>
+        </t-button>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="user" /></template>
+        </t-button>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="ellipsis" /></template>
+        </t-button>
+      </div>
     </template>
   </t-head-menu>
 </template>
 
 <style lang="less" scoped>
-.demo-box {
-  width: 200px;
-  height: 40px;
-  line-height: 40px;
-  background: rgba(255, 255, 255, 0.3);
-  color: #fff;
-  text-align: center;
+.t-menu__operations {
+  .t-button {
+    margin-left: 8px;
+  }
+}
+.t-demo-menu--dark {
+  .t-button {
+    color: #fff;
+    &:hover {
+      background-color: #4b4b4b;
+      border-color: transparent;
+      --ripple-color: #383838;
+    }
+  }
 }
 </style>
diff --git a/src/menu/_example/custom-side.vue b/src/menu/_example/custom-side.vue
@@ -1,7 +1,7 @@
 <template>
   <t-menu theme="light" default-value="item2">
     <template #logo>
-      <img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo" />
+      <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
     </template>
     <t-menu-item value="item1">菜单内容</t-menu-item>
     <t-menu-item value="item2">菜单内容</t-menu-item>

diff --git a/src/menu/_example/double.vue b/src/menu/_example/double.vue
@@ -2,7 +2,7 @@
   <div class="box" :style="{ width: '800px' }">
     <t-head-menu default-value="1-1" :default-expanded="expanded">
       <template #logo>
-        <img width="136" src="https://www.tencent.com/img/index/menu_logo_hover.png" alt="logo" />
+        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
       </template>
       <t-submenu value="1">
         <template #title>
@@ -52,24 +52,24 @@
         <t-menu-item value="6-2">子菜单6-2</t-menu-item>
         <t-menu-item value="6-3">子菜单6-3</t-menu-item>
       </t-submenu>
-      <t-submenu value="7">
-        <template #title>
-          <span>菜单7</span>
-        </template>
-        <t-menu-item value="7-1">子菜单7-1</t-menu-item>
-        <t-menu-item value="7-2">子菜单7-2</t-menu-item>
-        <t-menu-item value="7-3">子菜单7-3</t-menu-item>
-      </t-submenu>
       <template #operations>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="search" /></a>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="mail" /></a>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="user" /></a>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="ellipsis" /></a>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="search" /></template>
+        </t-button>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="mail" /></template>
+        </t-button>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="user" /></template>
+        </t-button>
+        <t-button variant="text" shape="square">
+          <template #icon><t-icon name="ellipsis" /></template>
+        </t-button>
       </template>
     </t-head-menu>
     <t-head-menu :default-expanded="expanded2" default-value="1-1" theme="dark" style="margin-top: 24px">
       <template #logo>
-        <img width="136" src="https://www.tencent.com/img/index/menu_logo.png" alt="logo" />
+        <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-dark.png" alt="logo" />
       </template>
       <t-submenu value="1">
         <template #title>
@@ -119,19 +119,21 @@
         <t-menu-item value="6-2">子菜单6-2</t-menu-item>
         <t-menu-item value="6-3">子菜单6-3</t-menu-item>
       </t-submenu>
-      <t-submenu value="7">
-        <template #title>
-          <span>菜单7</span>
-        </template>
-        <t-menu-item value="7-1">子菜单7-1</t-menu-item>
-        <t-menu-item value="7-2">子菜单7-2</t-menu-item>
-        <t-menu-item value="7-3">子菜单7-3</t-menu-item>
-      </t-submenu>
       <template #operations>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="search" /></a>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="mail" /></a>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="user" /></a>
-        <a href="javascript:;"><t-icon class="t-menu__operations-icon" name="ellipsis" /></a>
+        <div class="t-demo-menu--dark">
+          <t-button variant="text" shape="square">
+            <template #icon><t-icon name="search" /></template>
+          </t-button>
+          <t-button variant="text" shape="square">
+            <template #icon><t-icon name="mail" /></template>
+          </t-button>
+          <t-button variant="text" shape="square">
+            <template #icon><t-icon name="user" /></template>
+          </t-button>
+          <t-button variant="text" shape="square">
+            <template #icon><t-icon name="ellipsis" /></template>
+          </t-button>
+        </div>
       </template>
     </t-head-menu>
   </div>
@@ -143,3 +145,20 @@ import { ref } from 'vue';
 const expanded = ref(['1']);
 const expanded2 = ref(['1']);
 </script>
+<style lang="less" scoped>
+.t-menu__operations {
+  .t-button {
+    margin-left: 8px;
+  }
+}
+.t-demo-menu--dark {
+  .t-button {
+    color: #fff;
+    &:hover {
+      background-color: #4b4b4b;
+      border-color: transparent;
+      --ripple-color: #383838;
+    }
+  }
+}
+</style>
diff --git a/src/menu/_example/group-side.vue b/src/menu/_example/group-side.vue
@@ -3,23 +3,61 @@
     <template #logo>
       <img :width="collapsed ? 35 : 136" :src="iconUrl" alt="logo" />
     </template>
-    <t-menu-group title="Classification A">
+    <t-menu-group title="主导航">
       <t-menu-item value="item1">
         <template #icon>
-          <t-icon name="dashboard" />
+          <t-icon name="app" />
         </template>
         仪表盘
       </t-menu-item>
     </t-menu-group>
-    <t-menu-group title="Classification B">
-      <t-menu-item value="item2"> 调度平台 </t-menu-item>
-      <t-menu-item value="item3"> 菜单内容二很长很长很长很长很长很长很长很长 </t-menu-item>
+    <t-menu-group title="组件">
+      <t-submenu title="列表项" value="2-1">
+        <template #icon>
+          <t-icon name="server" />
+        </template>
+        <t-menu-item value="2-1-1">基础列表项</t-menu-item>
+        <t-menu-item value="2-1-2">卡片列表项</t-menu-item>
+        <t-menu-item value="2-1-3">筛选列表项</t-menu-item>
+        <t-menu-item value="2-1-4">树状筛选列表项</t-menu-item>
+      </t-submenu>
+      <t-menu-item value="2-2">
+        <template #icon>
+          <t-icon name="edit-1" />
+        </template>
+        表单项
+      </t-menu-item>
+      <t-menu-item value="2-3">
+        <template #icon>
+          <t-icon name="root-list" />
+        </template>
+        详情页
+      </t-menu-item>
+      <t-menu-item value="2-4">
+        <template #icon>
+          <t-icon name="check" />
+        </template>
+        结果页
+      </t-menu-item>
     </t-menu-group>
-    <t-menu-group title="Classification C">
-      <t-menu-item value="item4" :disabled="true"> 精准监控 </t-menu-item>
+    <t-menu-group title="更多">
+      <t-menu-item value="item3">
+        <template #icon>
+          <t-icon name="user" />
+        </template>
+        个人页
+      </t-menu-item>
+      <t-menu-item value="item4">
+        <template #icon>
+          <t-icon name="login" />
+        </template>
+        登录页
+      </t-menu-item>
     </t-menu-group>
     <template #operations>
-      <t-icon class="t-menu__operations-icon" name="view-list" @click="changeCollapsed" />
+      <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
+        <template #icon><t-icon name="view-list" /></template>
+      </t-button>
     </template>
   </t-menu>
 </template>
@@ -28,15 +66,13 @@
 import { ref, computed } from 'vue';
 
 const collapsed = ref(true);
-const iconUrl = ref('https://www.tencent.com/img/index/menu_logo_hover.png');
-
-const iconName = computed(() => (collapsed.value ? 'chevron-right' : 'chevron-left'));
+const iconUrl = ref('https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png');
 
 const changeCollapsed = () => {
   collapsed.value = !collapsed.value;
   iconUrl.value = collapsed.value
     ? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
-    : 'https://www.tencent.com/img/index/menu_logo_hover.png';
+    : 'https://tdesign.gtimg.com/site/baseLogo-light.png';
 };
 
 const changeHandler = (active) => {