diff --git a/packages/design/smb/index.ts b/packages/design/smb/index.ts index 9618bf6f81..1e1f9e21b9 100644 --- a/packages/design/smb/index.ts +++ b/packages/design/smb/index.ts @@ -15,6 +15,7 @@ import Time from './src/time-spinner' import UploadList from './src/upload-list' import BreadcrumbItem from './src/breadcrumb-item' import Milestone from './src/milestone' +import Split from './src/Split' import TransferPanel from './src/transfer-panel' import { version } from './package.json' @@ -39,6 +40,7 @@ export default { BreadcrumbItem, UploadList, Milestone, + Split, TransferPanel } } diff --git a/packages/design/smb/src/split/index.ts b/packages/design/smb/src/split/index.ts new file mode 100644 index 0000000000..21521cae1f --- /dev/null +++ b/packages/design/smb/src/split/index.ts @@ -0,0 +1,4 @@ +export default { + // smb 风格的拖动dom为2条线。 左右面板为 右侧竖线, 上下面板为 下方横线 + triggerBarConWithLine: true +} diff --git a/packages/renderless/src/split/vue.ts b/packages/renderless/src/split/vue.ts index 40ddd50e6a..00d3aa80f1 100644 --- a/packages/renderless/src/split/vue.ts +++ b/packages/renderless/src/split/vue.ts @@ -28,7 +28,7 @@ import { on, off } from '../common/deps/dom' export const api = ['state', 'handleMousedown', 'buttonMousedown', 'buttonLeftTopClick', 'buttonRightBottomClick'] -export const renderless = (props, hooks, { vm, nextTick, emit, constants }) => { +export const renderless = (props, hooks, { vm, nextTick, emit, constants, designConfig }) => { const api = {} const { computed, reactive } = hooks const getUseOffset = useOffset({ nextTick, props, vm, constants, hooks }) @@ -51,6 +51,7 @@ export const renderless = (props, hooks, { vm, nextTick, emit, constants }) => { `${state.prefix}-pane ${props.scrollable ? 'tiny-split-scroll' : ''}`, { [`${state.prefix}-pane-moving`]: state.isMoving } ]), + triggerBarConWithLine: !!designConfig?.triggerBarConWithLine, // smb 风格的拖动块是线条 ...getUseOffset.state }) diff --git a/packages/theme/src/notify/index.less b/packages/theme/src/notify/index.less index d9ed41cacb..cdabde40eb 100644 --- a/packages/theme/src/notify/index.less +++ b/packages/theme/src/notify/index.less @@ -180,6 +180,7 @@ margin: var(--ti-notify-title-margin-top) var(--ti-notify-title-margin-horizontal) var(--ti-notify-title-margin-bottom); line-height: 1.5; + font-weight: var(--ti-notify-title-font-weight); } &__message-zone &__content-wrapper { diff --git a/packages/theme/src/split/index.less b/packages/theme/src/split/index.less index c37d7d3b23..771ef7cafe 100644 --- a/packages/theme/src/split/index.less +++ b/packages/theme/src/split/index.less @@ -71,18 +71,28 @@ &-bar-con { position: absolute; - background: #fff; + background: transparent; &.vertical { top: 50%; height: 28px; transform: translate(0, -50%); + + svg { + transform: translateX(5px); + fill: #d5d5d5; + } } &.horizontal { left: 50%; width: 28px; transform: translate(-50%, 0); + + svg { + transform: translateY(5px); + fill: #d5d5d5; + } } } diff --git a/packages/vue/src/split/src/pc.vue b/packages/vue/src/split/src/pc.vue index 58f99d794f..08c2d35d4c 100644 --- a/packages/vue/src/split/src/pc.vue +++ b/packages/vue/src/split/src/pc.vue @@ -36,9 +36,16 @@ >
-
- -
+ +
-
- -
+ +
import { renderless, api } from '@opentiny/vue-renderless/split/vue' import { props, setup, defineComponent } from '@opentiny/vue-common' -import { IconLeftWard, IconRightward } from '@opentiny/vue-icon' +import { IconLeftWard, IconRightward, IconStretchUpright, IconStretchCrosswise } from '@opentiny/vue-icon' export default defineComponent({ components: { IconLeftWard: IconLeftWard(), - IconRightWard: IconRightward() + IconRightWard: IconRightward(), + IconStretchUpright: IconStretchUpright(), // 纵向 + IconStretchCrosswise: IconStretchCrosswise() // 横向 }, emits: [ 'moving',