feat(link-menu): [link-menu]modify smb theme (#2210)

* feat(link-menu): modify smb theme * feat(link-menu): modify smb theme * fix: modify review code
opentiny · Sep 30, 2024 · 69b6208 · 69b6208
1 parent bcb9323
commit 69b6208
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 53 deletions.
diff --git a/examples/sites/demos/apis/link-menu.js b/examples/sites/demos/apis/link-menu.js
@@ -61,6 +61,62 @@ export default {
           mode: ['pc'],
           pcDemo: 'custom-icon'
         },
+        {
+          name: 'expand-icon',
+          type: 'Component',
+          defaultValue: '',
+          meta: {
+            stable: '3.19.0'
+          },
+          desc: {
+            'zh-CN': '指示展开的图标',
+            'en-US': 'Indicates the expanded icon'
+          },
+          mode: ['pc'],
+          pcDemo: 'data-resource'
+        },
+        {
+          name: 'expand-icon-color',
+          type: 'string',
+          defaultValue: '',
+          meta: {
+            stable: '3.19.0'
+          },
+          desc: {
+            'zh-CN': '指示展开的图标色',
+            'en-US': 'Indicates the expanded icon color'
+          },
+          mode: ['pc'],
+          pcDemo: 'data-resource'
+        },
+        {
+          name: 'shrink-icon',
+          type: 'Component',
+          defaultValue: '',
+          meta: {
+            stable: '3.19.0'
+          },
+          desc: {
+            'zh-CN': '指示收缩的图标',
+            'en-US': 'Icon indicating shrink'
+          },
+          mode: ['pc'],
+          pcDemo: 'data-resource'
+        },
+        {
+          name: 'shrink-icon-color',
+          type: 'string',
+          defaultValue: '',
+          meta: {
+            stable: '3.19.0'
+          },
+          desc: {
+            'zh-CN': '指示收缩的图标色',
+            'en-US': 'Icon indicating shrink  color'
+          },
+          mode: ['pc'],
+          pcDemo: 'data-resource'
+        },
         {
           name: 'keep-selected-nodes',
           type: 'boolean',

diff --git a/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue b/examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue
@@ -1,10 +1,23 @@
 <template>
-  <tiny-link-menu :data="datas" title="收藏夹菜单" wrap :keep-selected-nodes="false"></tiny-link-menu>
+  <tiny-link-menu
+    :data="datas"
+    title="收藏夹菜单"
+    wrap
+    :expand-icon="expandIcon"
+    expandIconColor="#191919"
+    shrinkIconColor="#191919"
+    :shrink-icon="shrinkIcon"
+    :keep-selected-nodes="false"
+  ></tiny-link-menu>
 </template>
 
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
+import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
+
+const shrinkIcon = iconExpand()
+const expandIcon = iconPutAway()
 
 const datas = ref([
   {

diff --git a/examples/sites/demos/pc/app/link-menu/data-resource.vue b/examples/sites/demos/pc/app/link-menu/data-resource.vue
@@ -1,16 +1,28 @@
 <template>
-  <tiny-link-menu :data="datas" title="收藏夹菜单" wrap :keep-selected-nodes="false"></tiny-link-menu>
+  <tiny-link-menu
+    :data="datas"
+    title="收藏夹菜单"
+    wrap
+    expandIconColor="#191919"
+    shrinkIconColor="#191919"
+    :expand-icon="expandIcon"
+    :shrink-icon="shrinkIcon"
+    :keep-selected-nodes="false"
+  ></tiny-link-menu>
 </template>
 
 <script lang="jsx">
 import { LinkMenu } from '@opentiny/vue'
+import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyLinkMenu: LinkMenu
   },
   data() {
     return {
+      shrinkIcon: iconExpand(),
+      expandIcon: iconPutAway(),
       datas: [
         {
           id: 1,

diff --git a/packages/theme/src/link-menu/index.less b/packages/theme/src/link-menu/index.less
@@ -26,9 +26,9 @@
   .component-css-vars-link-menu();
 
   &__nav &__nav-item {
-    color: var(--ti-link-menu-nav-item-text-color);
-    font-size: var(--ti-common-font-size-1);
-    border-right: 1px solid var(--ti-link-menu-nav-item-border-color);
+    color: var(--tv-Link-menu-nav-item-text-color);
+    font-size: var(--tv-Link-menu-item-font-size);
+    border-right: 1px solid var(--tv-Link-menu-nav-item-border-color);
     padding: 0 8px;
     line-height: 1;
     display: inline-block;
@@ -40,7 +40,7 @@
     cursor: pointer;
 
     .@{svg-prefix-cls} {
-      fill: var(--ti-link-menu-nav-item-text-color);
+      fill: var(--tv-Link-menu-nav-item-text-color);
       margin-right: 4px;
     }
 
@@ -67,48 +67,44 @@
   }
 
   &__nav {
-    color: var(--ti-link-menu-btn-text-color);
-    background: var(--ti-link-menu-btn-bg-color);
+    color: var(--tv-Link-menu-btn-text-color);
+    background: var(--tv-Link-menu-btn-bg-color);
     padding: 0 8px;
     line-height: 1;
     outline: 0;
     border: none;
     cursor: pointer;
 
     .@{svg-prefix-cls} {
-      fill: var(--ti-link-menu-nav-item-text-color);
+      fill: var(--tv-Link-menu-nav-item-text-color);
       font-size: var(--ti-common-font-size-3);
     }
   }
 
   &__btn {
     width: 32px;
     height: 32px;
-    border-radius: var(--ti-link-menu-btn-border-radius);
-    border: 1px solid var(--ti-link-menu-btn-border-color);
-    background: var(--ti-link-menu-btn-bg-color);
+    border-radius: var(--tv-Link-menu-btn-border-radius);
+    border: 1px solid var(--tv-Link-menu-btn-border-color);
+    background: var(--tv-Link-menu-btn-bg-color);
     .@{svg-prefix-cls} {
-      fill: var(--ti-link-menu-nav-item-text-color);
-      font-size: var(--ti-link-menu-btn-size);
+      fill: var(--tv-Link-menu-nav-item-text-color);
+      font-size: var(--tv-Link-menu-btn-size);
     }
   }
 
-  &__dialog-btn {
-    text-align: center;
-  }
-
   .@{input-prefix-cls} {
     width: 270px;
     margin-bottom: 5px;
 
     .@{input-prefix-cls}__inner {
-      height: var(--ti-link-menu-input-height);
-      line-height: var(--ti-link-menu-input-height);
-      font-size: var(--ti-link-menu-input-font-size);
-      color: var(--ti-link-menu-input-text-color);
-      background: var(--ti-link-menu-btn-bg-color);
-      border: 1px solid var(--ti-link-menu-input-border-color);
-      border-radius: var(--ti-link-menu-input-border-radius);
+      height: var(--tv-Link-menu-input-height);
+      line-height: var(--tv-Link-menu-input-height);
+      font-size: var(--tv-Link-menu-input-font-size);
+      color: var(--tv-Link-menu-input-text-color);
+      background: var(--tv-Link-menu-btn-bg-color);
+      border: 1px solid var(--tv-Link-menu-input-border-color);
+      border-radius: var(--tv-Link-menu-input-border-radius);
       padding: 0 8px;
       display: block;
       white-space: nowrap;
@@ -119,14 +115,6 @@
     }
   }
 
-  .@{button-prefix-cls} {
-    &:last-child {
-      color: var(--ti-link-menu-nav-item-text-color);
-      background-color: var(--ti-link-menu-btn-bg-color);
-      border-color: var(--ti-link-menu-input-border-color);
-    }
-  }
-
   .@{tree-prefix-cls} {
     .@{tree-node-prefix-cls} {
       .@{checkbox-prefix-cls} {
@@ -143,16 +131,16 @@
       }
 
       .tree-node-name {
-        color: var(--ti-link-menu-tree-node-text-color);
-        font-size: var(--ti-link-menu-input-font-size);
-        border-radius: var(--ti-link-menu-input-border-radius);
+        color: var(--tv-Link-menu-tree-node-text-color);
+        font-size: var(--tv-Link-menu-input-font-size);
+        border-radius: var(--tv-Link-menu-input-border-radius);
         padding-left: 4px;
         vertical-align: middle;
       }
 
       &.is-focusable {
         .tree-node-name {
-          color: var(--ti-link-menu-input-text-color);
+          color: var(--tv-Link-menu-input-text-color);
         }
       }
     }
@@ -178,6 +166,13 @@
         width: calc(100% - 36px);
       }
 
+      .tree-node-icon {
+        svg.tiny-svg {
+          width: var(--tv-Link-menu-icon-size);
+          height: var(--tv-Link-menu-icon-size);
+        }
+      }
+
       .tree-node-name {
         width: 100%;
         display: inline-block;

diff --git a/packages/theme/src/link-menu/vars.less b/packages/theme/src/link-menu/vars.less
@@ -12,29 +12,33 @@
 
 .component-css-vars-link-menu() {
   // 收藏夹设置按钮图标色(和取消按钮文本色)
-  --ti-link-menu-nav-item-text-color: var(--ti-common-color-text-gray, #191919);
+  --tv-Link-menu-nav-item-text-color: var(--tv-color-text);
+  // 收藏夹设置字体大小
+  --tv-Link-menu-item-font-size: var(--tv-font-size-md);
   // 收藏夹菜单导航右边框色
-  --ti-link-menu-nav-item-border-color: #c4c4c4;
+  --tv-Link-menu-nav-item-border-color: var(--tv-color-border);
   // 收藏夹菜单按钮文本色
-  --ti-link-menu-btn-text-color: rgba(24, 144, 255, 0.8);
+  --tv-Link-menu-btn-text-color: var(--tv-color-info-text);
   // 收藏夹设置按钮,弹出框输入框和取消按钮的背景色
-  --ti-link-menu-btn-bg-color: var(--ti-common-color-light, #ffffff);
+  --tv-Link-menu-btn-bg-color: var(--tv-color-info-bg-white);
   // 收藏夹弹出框的输入框高度
-  --ti-link-menu-input-height: var(--ti-common-size-height-normal, 32px);
+  --tv-Link-menu-input-height: var(--tv-size-height-md);
   // 收藏夹弹出框字号
-  --ti-link-menu-input-font-size: var(--ti-common-font-size-base, 14px);
+  --tv-Link-menu-input-font-size: var(--tv-font-size-md);
   // 收藏夹弹出框输入框(和列表项非节点)的文本色
-  --ti-link-menu-input-text-color: var(--ti-common-color-info-normal, #191919);
+  --tv-Link-menu-input-text-color: var(--tv-color-text);
   // 收藏夹弹出框的输入框和取消按钮边框色
-  --ti-link-menu-input-border-color: var(--ti-common-color-border, #999999);
+  --tv-Link-menu-input-border-color: var(--tv-color-border);
   // 收藏夹弹出框的输入框圆角
-  --ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal, 6px);
+  --tv-Link-menu-input-border-radius: var(--tv-border-radius-md);
   // 收藏夹弹出框列表项的节点文本色
-  --ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
+  --tv-Link-menu-tree-node-text-color: var(--tv-color-border);
   // 按钮边框颜色
-  --ti-link-menu-btn-border-color: var(--ti-common-color-line-normal, #c2c2c2);
+  --tv-Link-menu-btn-border-color: var(--tv-color-border);
   // 按钮圆角
-  --ti-link-menu-btn-border-radius: var(--ti-common-border-radius-3, 6px);
+  --tv-Link-menu-btn-border-radius: var(--tv-border-radius-md);
   // 按钮大小
-  --ti-link-menu-btn-size: var(--ti-common-font-size-2, 16px);
+  --tv-Link-menu-btn-size: var(--tv-font-size-lg);
+  // 图标大小
+  --tv-Link-menu-icon-size: var(--tv-icon-size);
 }
diff --git a/packages/vue/src/link-menu/src/index.ts b/packages/vue/src/link-menu/src/index.ts
@@ -60,6 +60,16 @@ export default defineComponent({
     keepSelectedNodes: {
       type: Boolean,
       default: true
+    },
+    expandIcon: Object,
+    shrinkIcon: Object,
+    shrinkIconColor: {
+      type: String,
+      default: ''
+    },
+    expandIconColor: {
+      type: String,
+      default: ''
     }
   },
   setup(props, context) {

diff --git a/packages/vue/src/link-menu/src/pc.vue b/packages/vue/src/link-menu/src/pc.vue
@@ -39,6 +39,10 @@
       <tiny-tree
         :data="state.datas"
         :icon="icon"
+        :expand-icon="expandIcon"
+        :expand-icon-color="expandIconColor"
+        :shrink-icon="shrinkIcon"
+        :shrink-icon-color="shrinkIconColor"
         :class="{
           'tiny-link-menu__wrap': wrap,
           'tiny-link-menu__overflow': !wrap ? ellipsis : false
@@ -70,12 +74,12 @@
       <template #footer>
         <div class="tiny-link-menu__dialog-btn">
           <slot name="foot">
-            <tiny-button type="primary" :disabled="state.disabled" :reset-time="0" @click="sureNodevalue">{{
-              t('ui.linkMenu.sure')
-            }}</tiny-button>
             <tiny-button :disabled="state.disabled" :reset-time="0" @click="hideDialog">{{
               t('ui.linkMenu.cancel')
             }}</tiny-button>
+            <tiny-button type="primary" :disabled="state.disabled" :reset-time="0" @click="sureNodevalue">{{
+              t('ui.linkMenu.sure')
+            }}</tiny-button>
           </slot>
         </div>
       </template>
@@ -102,6 +106,10 @@ export default defineComponent({
     'title',
     'defaultExpandAll',
     'searchIcon',
+    'expandIcon',
+    'expandIconColor',
+    'shrinkIcon',
+    'shrinkIconColor',
     'ellipsis',
     'wrap',
     'getMenuDataSync',