Skip to content

Commit 69b6208

Browse files
James-9696James-9696
authored
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
1 parent bcb9323 commit 69b6208

File tree

7 files changed

+151
-53
lines changed

7 files changed

+151
-53
lines changed

‎examples/sites/demos/apis/link-menu.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,62 @@ export default {
6161
mode: ['pc'],
6262
pcDemo: 'custom-icon'
6363
},
64+
{
65+
name: 'expand-icon',
66+
type: 'Component',
67+
defaultValue: '',
68+
meta: {
69+
stable: '3.19.0'
70+
},
71+
desc: {
72+
'zh-CN': '指示展开的图标',
73+
'en-US': 'Indicates the expanded icon'
74+
},
75+
mode: ['pc'],
76+
pcDemo: 'data-resource'
77+
},
78+
{
79+
name: 'expand-icon-color',
80+
type: 'string',
81+
defaultValue: '',
82+
meta: {
83+
stable: '3.19.0'
84+
},
85+
desc: {
86+
'zh-CN': '指示展开的图标色',
87+
'en-US': 'Indicates the expanded icon color'
88+
},
89+
mode: ['pc'],
90+
pcDemo: 'data-resource'
91+
},
92+
{
93+
name: 'shrink-icon',
94+
type: 'Component',
95+
defaultValue: '',
96+
meta: {
97+
stable: '3.19.0'
98+
},
99+
desc: {
100+
'zh-CN': '指示收缩的图标',
101+
'en-US': 'Icon indicating shrink'
102+
},
103+
mode: ['pc'],
104+
pcDemo: 'data-resource'
105+
},
106+
{
107+
name: 'shrink-icon-color',
108+
type: 'string',
109+
defaultValue: '',
110+
meta: {
111+
stable: '3.19.0'
112+
},
113+
desc: {
114+
'zh-CN': '指示收缩的图标色',
115+
'en-US': 'Icon indicating shrink color'
116+
},
117+
mode: ['pc'],
118+
pcDemo: 'data-resource'
119+
},
64120
{
65121
name: 'keep-selected-nodes',
66122
type: 'boolean',

‎examples/sites/demos/pc/app/link-menu/data-resource-composition-api.vue‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
11
<template>
2-
<tiny-link-menu :data="datas" title="收藏夹菜单" wrap :keep-selected-nodes="false"></tiny-link-menu>
2+
<tiny-link-menu
3+
:data="datas"
4+
title="收藏夹菜单"
5+
wrap
6+
:expand-icon="expandIcon"
7+
expandIconColor="#191919"
8+
shrinkIconColor="#191919"
9+
:shrink-icon="shrinkIcon"
10+
:keep-selected-nodes="false"
11+
></tiny-link-menu>
312
</template>
413

514
<script setup lang="jsx">
615
import { ref } from 'vue'
716
import { LinkMenu as TinyLinkMenu } from '@opentiny/vue'
17+
import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
18+
19+
const shrinkIcon = iconExpand()
20+
const expandIcon = iconPutAway()
821
922
const datas = ref([
1023
{

‎examples/sites/demos/pc/app/link-menu/data-resource.vue‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,28 @@
11
<template>
2-
<tiny-link-menu :data="datas" title="收藏夹菜单" wrap :keep-selected-nodes="false"></tiny-link-menu>
2+
<tiny-link-menu
3+
:data="datas"
4+
title="收藏夹菜单"
5+
wrap
6+
expandIconColor="#191919"
7+
shrinkIconColor="#191919"
8+
:expand-icon="expandIcon"
9+
:shrink-icon="shrinkIcon"
10+
:keep-selected-nodes="false"
11+
></tiny-link-menu>
312
</template>
413

514
<script lang="jsx">
615
import { LinkMenu } from '@opentiny/vue'
16+
import { iconPutAway, iconExpand } from '@opentiny/vue-icon'
717
818
export default {
919
components: {
1020
TinyLinkMenu: LinkMenu
1121
},
1222
data() {
1323
return {
24+
shrinkIcon: iconExpand(),
25+
expandIcon: iconPutAway(),
1426
datas: [
1527
{
1628
id: 1,

‎packages/theme/src/link-menu/index.less‎

Lines changed: 30 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626
.component-css-vars-link-menu();
2727

2828
&__nav &__nav-item {
29-
color: var(--ti-link-menu-nav-item-text-color);
30-
font-size: var(--ti-common-font-size-1);
31-
border-right: 1px solid var(--ti-link-menu-nav-item-border-color);
29+
color: var(--tv-Link-menu-nav-item-text-color);
30+
font-size: var(--tv-Link-menu-item-font-size);
31+
border-right: 1px solid var(--tv-Link-menu-nav-item-border-color);
3232
padding: 0 8px;
3333
line-height: 1;
3434
display: inline-block;
@@ -40,7 +40,7 @@
4040
cursor: pointer;
4141

4242
.@{svg-prefix-cls} {
43-
fill: var(--ti-link-menu-nav-item-text-color);
43+
fill: var(--tv-Link-menu-nav-item-text-color);
4444
margin-right: 4px;
4545
}
4646

@@ -67,48 +67,44 @@
6767
}
6868

6969
&__nav {
70-
color: var(--ti-link-menu-btn-text-color);
71-
background: var(--ti-link-menu-btn-bg-color);
70+
color: var(--tv-Link-menu-btn-text-color);
71+
background: var(--tv-Link-menu-btn-bg-color);
7272
padding: 0 8px;
7373
line-height: 1;
7474
outline: 0;
7575
border: none;
7676
cursor: pointer;
7777

7878
.@{svg-prefix-cls} {
79-
fill: var(--ti-link-menu-nav-item-text-color);
79+
fill: var(--tv-Link-menu-nav-item-text-color);
8080
font-size: var(--ti-common-font-size-3);
8181
}
8282
}
8383

8484
&__btn {
8585
width: 32px;
8686
height: 32px;
87-
border-radius: var(--ti-link-menu-btn-border-radius);
88-
border: 1px solid var(--ti-link-menu-btn-border-color);
89-
background: var(--ti-link-menu-btn-bg-color);
87+
border-radius: var(--tv-Link-menu-btn-border-radius);
88+
border: 1px solid var(--tv-Link-menu-btn-border-color);
89+
background: var(--tv-Link-menu-btn-bg-color);
9090
.@{svg-prefix-cls} {
91-
fill: var(--ti-link-menu-nav-item-text-color);
92-
font-size: var(--ti-link-menu-btn-size);
91+
fill: var(--tv-Link-menu-nav-item-text-color);
92+
font-size: var(--tv-Link-menu-btn-size);
9393
}
9494
}
9595

96-
&__dialog-btn {
97-
text-align: center;
98-
}
99-
10096
.@{input-prefix-cls} {
10197
width: 270px;
10298
margin-bottom: 5px;
10399

104100
.@{input-prefix-cls}__inner {
105-
height: var(--ti-link-menu-input-height);
106-
line-height: var(--ti-link-menu-input-height);
107-
font-size: var(--ti-link-menu-input-font-size);
108-
color: var(--ti-link-menu-input-text-color);
109-
background: var(--ti-link-menu-btn-bg-color);
110-
border: 1px solid var(--ti-link-menu-input-border-color);
111-
border-radius: var(--ti-link-menu-input-border-radius);
101+
height: var(--tv-Link-menu-input-height);
102+
line-height: var(--tv-Link-menu-input-height);
103+
font-size: var(--tv-Link-menu-input-font-size);
104+
color: var(--tv-Link-menu-input-text-color);
105+
background: var(--tv-Link-menu-btn-bg-color);
106+
border: 1px solid var(--tv-Link-menu-input-border-color);
107+
border-radius: var(--tv-Link-menu-input-border-radius);
112108
padding: 0 8px;
113109
display: block;
114110
white-space: nowrap;
@@ -119,14 +115,6 @@
119115
}
120116
}
121117

122-
.@{button-prefix-cls} {
123-
&:last-child {
124-
color: var(--ti-link-menu-nav-item-text-color);
125-
background-color: var(--ti-link-menu-btn-bg-color);
126-
border-color: var(--ti-link-menu-input-border-color);
127-
}
128-
}
129-
130118
.@{tree-prefix-cls} {
131119
.@{tree-node-prefix-cls} {
132120
.@{checkbox-prefix-cls} {
@@ -143,16 +131,16 @@
143131
}
144132

145133
.tree-node-name {
146-
color: var(--ti-link-menu-tree-node-text-color);
147-
font-size: var(--ti-link-menu-input-font-size);
148-
border-radius: var(--ti-link-menu-input-border-radius);
134+
color: var(--tv-Link-menu-tree-node-text-color);
135+
font-size: var(--tv-Link-menu-input-font-size);
136+
border-radius: var(--tv-Link-menu-input-border-radius);
149137
padding-left: 4px;
150138
vertical-align: middle;
151139
}
152140

153141
&.is-focusable {
154142
.tree-node-name {
155-
color: var(--ti-link-menu-input-text-color);
143+
color: var(--tv-Link-menu-input-text-color);
156144
}
157145
}
158146
}
@@ -178,6 +166,13 @@
178166
width: calc(100% - 36px);
179167
}
180168

169+
.tree-node-icon {
170+
svg.tiny-svg {
171+
width: var(--tv-Link-menu-icon-size);
172+
height: var(--tv-Link-menu-icon-size);
173+
}
174+
}
175+
181176
.tree-node-name {
182177
width: 100%;
183178
display: inline-block;

‎packages/theme/src/link-menu/vars.less‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,33 @@
1212

1313
.component-css-vars-link-menu() {
1414
// 收藏夹设置按钮图标色(和取消按钮文本色)
15-
--ti-link-menu-nav-item-text-color: var(--ti-common-color-text-gray, #191919);
15+
--tv-Link-menu-nav-item-text-color: var(--tv-color-text);
16+
// 收藏夹设置字体大小
17+
--tv-Link-menu-item-font-size: var(--tv-font-size-md);
1618
// 收藏夹菜单导航右边框色
17-
--ti-link-menu-nav-item-border-color: #c4c4c4;
19+
--tv-Link-menu-nav-item-border-color: var(--tv-color-border);
1820
// 收藏夹菜单按钮文本色
19-
--ti-link-menu-btn-text-color: rgba(24, 144, 255, 0.8);
21+
--tv-Link-menu-btn-text-color: var(--tv-color-info-text);
2022
// 收藏夹设置按钮,弹出框输入框和取消按钮的背景色
21-
--ti-link-menu-btn-bg-color: var(--ti-common-color-light, #ffffff);
23+
--tv-Link-menu-btn-bg-color: var(--tv-color-info-bg-white);
2224
// 收藏夹弹出框的输入框高度
23-
--ti-link-menu-input-height: var(--ti-common-size-height-normal, 32px);
25+
--tv-Link-menu-input-height: var(--tv-size-height-md);
2426
// 收藏夹弹出框字号
25-
--ti-link-menu-input-font-size: var(--ti-common-font-size-base, 14px);
27+
--tv-Link-menu-input-font-size: var(--tv-font-size-md);
2628
// 收藏夹弹出框输入框(和列表项非节点)的文本色
27-
--ti-link-menu-input-text-color: var(--ti-common-color-info-normal, #191919);
29+
--tv-Link-menu-input-text-color: var(--tv-color-text);
2830
// 收藏夹弹出框的输入框和取消按钮边框色
29-
--ti-link-menu-input-border-color: var(--ti-common-color-border, #999999);
31+
--tv-Link-menu-input-border-color: var(--tv-color-border);
3032
// 收藏夹弹出框的输入框圆角
31-
--ti-link-menu-input-border-radius: var(--ti-common-border-radius-normal, 6px);
33+
--tv-Link-menu-input-border-radius: var(--tv-border-radius-md);
3234
// 收藏夹弹出框列表项的节点文本色
33-
--ti-link-menu-tree-node-text-color: var(--ti-common-color-text-disabled, #c2c2c2);
35+
--tv-Link-menu-tree-node-text-color: var(--tv-color-border);
3436
// 按钮边框颜色
35-
--ti-link-menu-btn-border-color: var(--ti-common-color-line-normal, #c2c2c2);
37+
--tv-Link-menu-btn-border-color: var(--tv-color-border);
3638
// 按钮圆角
37-
--ti-link-menu-btn-border-radius: var(--ti-common-border-radius-3, 6px);
39+
--tv-Link-menu-btn-border-radius: var(--tv-border-radius-md);
3840
// 按钮大小
39-
--ti-link-menu-btn-size: var(--ti-common-font-size-2, 16px);
41+
--tv-Link-menu-btn-size: var(--tv-font-size-lg);
42+
// 图标大小
43+
--tv-Link-menu-icon-size: var(--tv-icon-size);
4044
}

‎packages/vue/src/link-menu/src/index.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,16 @@ export default defineComponent({
6060
keepSelectedNodes: {
6161
type: Boolean,
6262
default: true
63+
},
64+
expandIcon: Object,
65+
shrinkIcon: Object,
66+
shrinkIconColor: {
67+
type: String,
68+
default: ''
69+
},
70+
expandIconColor: {
71+
type: String,
72+
default: ''
6373
}
6474
},
6575
setup(props, context) {

‎packages/vue/src/link-menu/src/pc.vue‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@
3939
<tiny-tree
4040
:data="state.datas"
4141
:icon="icon"
42+
:expand-icon="expandIcon"
43+
:expand-icon-color="expandIconColor"
44+
:shrink-icon="shrinkIcon"
45+
:shrink-icon-color="shrinkIconColor"
4246
:class="{
4347
'tiny-link-menu__wrap': wrap,
4448
'tiny-link-menu__overflow': !wrap ? ellipsis : false
@@ -70,12 +74,12 @@
7074
<template #footer>
7175
<div class="tiny-link-menu__dialog-btn">
7276
<slot name="foot">
73-
<tiny-button type="primary" :disabled="state.disabled" :reset-time="0" @click="sureNodevalue">{{
74-
t('ui.linkMenu.sure')
75-
}}</tiny-button>
7677
<tiny-button :disabled="state.disabled" :reset-time="0" @click="hideDialog">{{
7778
t('ui.linkMenu.cancel')
7879
}}</tiny-button>
80+
<tiny-button type="primary" :disabled="state.disabled" :reset-time="0" @click="sureNodevalue">{{
81+
t('ui.linkMenu.sure')
82+
}}</tiny-button>
7983
</slot>
8084
</div>
8185
</template>
@@ -102,6 +106,10 @@ export default defineComponent({
102106
'title',
103107
'defaultExpandAll',
104108
'searchIcon',
109+
'expandIcon',
110+
'expandIconColor',
111+
'shrinkIcon',
112+
'shrinkIconColor',
105113
'ellipsis',
106114
'wrap',
107115
'getMenuDataSync',

0 commit comments

Comments
 (0)