fix(notify): [notify, split] Dev update notifycrop split (#2020)

* fix(notify): fix title bold * fix(split): update split's handler for smb design
opentiny · Aug 31, 2024 · 56e8819 · 56e8819
1 parent 506a842
commit 56e8819
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -36,9 +36,16 @@
       >
         <slot name="trigger">
           <div :class="[`${state.prefix}-trigger`, `${state.prefix}-trigger-vertical`]">
-            <div v-if="!triggerSimple" :class="[`${state.prefix}-trigger-bar-con`, 'vertical']">
-              <i v-for="i in 3" v-once :class="`${state.prefix}-trigger-bar`" :key="`trigger-${i}`"></i>
-            </div>
+            <template v-if="!state.triggerBarConWithLine">
+              <div v-if="!triggerSimple" :class="[`${state.prefix}-trigger-bar-con`, 'vertical']">
+                <i v-for="i in 3" v-once :class="`${state.prefix}-trigger-bar`" :key="`trigger-${i}`"></i>
+              </div>
+            </template>
+            <template v-else>
+              <div v-if="!triggerSimple" :class="[`${state.prefix}-trigger-bar-con`, 'vertical']">
+                <IconStretchUpright />
+              </div>
+            </template>
           </div>
         </slot>
         <div
@@ -104,9 +111,16 @@
       >
         <slot name="trigger">
           <div :class="[`${state.prefix}-trigger`, `${state.prefix}-trigger-horizontal`]">
-            <div v-if="!triggerSimple" :class="[`${state.prefix}-trigger-bar-con`, 'horizontal']">
-              <i v-for="i in 3" v-once :class="`${state.prefix}-trigger-bar`" :key="`trigger-${i}`"></i>
-            </div>
+            <template v-if="!state.triggerBarConWithLine">
+              <div v-if="!triggerSimple" :class="[`${state.prefix}-trigger-bar-con`, 'horizontal']">
+                <i v-for="i in 3" v-once :class="`${state.prefix}-trigger-bar`" :key="`trigger-${i}`"></i>
+              </div>
+            </template>
+            <template v-else>
+              <div v-if="!triggerSimple" :class="[`${state.prefix}-trigger-bar-con`, 'horizontal']">
+                <IconStretchCrosswise />
+              </div>
+            </template>
           </div>
         </slot>
         <div
@@ -153,12 +167,14 @@
 <script lang="ts">
 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',