JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-11-30 14:32:09 +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 5b16ec00e1
commit 17b52aeaa0
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> <template>
<component class="tmagic-design-button" :is="uiComponent" v-bind="uiProps" @click="clickHandler"> <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"> <template #default v-if="$slots.default">
<slot></slot> <slot></slot>
</template> </template>

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

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

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

@ -18,6 +18,7 @@
> div { > div {
display: flex; display: flex;
gap: 3px;
height: 100%; height: 100%;
z-index: 1; z-index: 1;
align-items: center; align-items: center;
@ -76,5 +77,10 @@
transform: rotate(-90deg); 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> <template>
<i class="t-t-design-adapter-icon"> <i class="t-t-design-adapter-icon t-icon">
<slot></slot> <slot></slot>
</i> </i>
</template> </template>

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

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