feat(popconfirm): [popconfirm] Adapting to the SMB theme (#2072)

examples/sites/demos/pc/app/popconfirm/basic-usage-composition-api.vue

@@ -13,5 +13,5 @@ import { ref } from 'vue'
 import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
 
 const title = ref('这是气泡标题')
-const message = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。')
+const message = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式。')
 </script>

examples/sites/demos/pc/app/popconfirm/basic-usage.vue

@@ -19,7 +19,7 @@ export default {
   data() {
     return {
       title: '这是气泡标题',
-      message: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。'
+      message: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式。'
     }
   }
 }

packages/theme/src/popconfirm/index.less

@@ -42,6 +42,10 @@
     display: flex;
     align-items: center;
     line-height: var(--ti-popconfirm-popover-line-height);
+    margin-bottom: var(--ti-popconfirm-popover-margin-bottomt);;
+  }
+  .no-message {
+    font-weight: 400;
   }
 
   &__icon {
@@ -57,7 +61,7 @@
   }
 
   &__content {
-    color: #5c6976;
+    color: var(--ti-popconfirm-popover-text-color);
     line-height: var(--ti-popconfirm-popover-line-height);
   }
 

packages/theme/src/popconfirm/smb-theme.js

@@ -6,5 +6,8 @@ export const tinyPopconfirmSmbTheme = {
   'ti-popconfirm-popover-icon-width': 'var(--ti-common-size-4x)',
   'ti-popconfirm-popover-title-font-weight': 'var(--ti-common-font-weight-bold)',
   'ti-popconfirm-popover-title-font-size': 'var(--ti-common-font-size-2)',
-  'ti-popconfirm-popover-icon-margin-right': 'var(--ti-common-space-base)'
+  'ti-popconfirm-popover-icon-margin-right': 'var(--ti-common-space-base)',
+  'ti-popconfirm-popover-margin-bottomt': '8px',
+  'ti-popconfirm-popover-text-color': '#191919',
+  'ti-popconfirm-popover-line-height': '1.5'
 }

packages/theme/src/popconfirm/vars.less

@@ -30,4 +30,5 @@
   // 标题字重、大小
   --ti-popconfirm-popover-title-font-size: var(--ti-common-font-size-1);
   --ti-popconfirm-popover-title-font-weight: var(--ti-common-font-weight-normal, 400);
+  --ti-popconfirm-popover-text-color: #5c6976;
 }

packages/vue/src/popconfirm/src/pc.vue

@@ -22,7 +22,7 @@
               :class="['tiny-popconfirm-popover__icon', type ? `tiny-popconfirm-popover--${type}` : '']"
             >
             </component>
-            <div class="tiny-popconfirm-popover__title">
+            <div class="tiny-popconfirm-popover__title" :class="[message ? '' : 'no-message']">
               {{ title }}
             </div>
           </div>
@@ -96,7 +96,7 @@ export default defineComponent({
     },
     width: {
       type: [String, Number],
-      default: '350'
+      default: '260'
     },
     type: [String, Object],
     reference: {},