JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-11-29 22:12:11 +08:00
Code Issues Projects Releases Wiki Activity

style(design, editor, tdesign-vue-next-adapter): 编辑器顶部导航按钮tdesign下样式优化

Browse Source
This commit is contained in:
roymondchen 2025-10-22 14:44:38 +08:00
parent 08b476e04f
commit 8f0d99a4a6
5 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/design/src/Button.vue
View File

@ -1,5 +1,8 @@
<template>
<component class="tmagic-design-button" :is="uiComponent" v-bind="uiProps" @click="clickHandler">
<template #icon v-if="$slots.icon">
<slot name="icon"></slot>
</template>
<template #default v-if="$slots.default">
<slot></slot>
</template>

19
packages/editor/src/components/ToolButton.vue
View File

@ -12,13 +12,20 @@
<template v-else-if="data.type === 'button'">
<TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
<TMagicButton size="small" link :disabled="disabled"
><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
>
<TMagicButton size="small" link :disabled="disabled">
<template #icon v-if="data.icon">
<MIcon :icon="data.icon"></MIcon>
</template>
<template #default v-if="data.text">{{ data.text }}</template>
</TMagicButton>
</TMagicTooltip>
<TMagicButton v-else size="small" link :disabled="disabled" :title="data.text"
><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
>
<TMagicButton v-else size="small" link :disabled="disabled" :title="data.text">
<template #icon v-if="data.icon">
<MIcon :icon="data.icon"></MIcon>
</template>
<template #default v-if="data.text">{{ data.text }}</template>
</TMagicButton>
</template>
<TMagicDropdown

6
packages/editor/src/theme/nav-menu.scss
View File

@ -18,6 +18,7 @@
> div {
display: flex;
gap: 3px;
height: 100%;
z-index: 1;
align-items: center;
@ -76,5 +77,10 @@
transform: rotate(-90deg);
}
}
.t-button {
padding-left: 1px;
padding-right: 1px;
}
}
}

2
packages/tdesign-vue-next-adapter/src/Icon.vue
View File

@ -1,5 +1,5 @@
<template>
<i class="t-t-design-adapter-icon">
<i class="t-t-design-adapter-icon t-icon">
<slot></slot>
</i>
</template>

4
packages/tdesign-vue-next-adapter/src/index.ts
View File

@ -117,7 +117,7 @@ const adapter: any = {
props: (props: ButtonProps) => ({
theme: props.type,
size: props.size === 'default' ? 'medium' : props.size,
icon: () => (props.icon ? h(Icon, null, { default: () => h(props.icon) }) : null),
icon: props.icon ? () => h(Icon, null, { default: () => h(props.icon) }) : undefined,
variant: props.link || props.text ? 'text' : 'base',
shape: props.circle ? 'circle' : 'rectangle',
}),
@ -449,7 +449,7 @@ const adapter: any = {
component: TTooltip,
props: (props: TooltipProps) => ({
...props,
placement: props.placement,
placement: props.placement?.replace(/\B([A-Z])/g, '-$1').toLowerCase(),
content: props.content,
}),
},