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

opentiny · Sep 23, 2024 · 206a045 · 206a045
1 parent 2f4db09
commit 206a045
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 23 deletions.
diff --git a/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue b/examples/sites/demos/pc/app/popconfirm/type-composition-api.vue
@@ -1,42 +1,44 @@
 <template>
   <div>
-    <tiny-popconfirm :title="title" type="info">
+    <tiny-popconfirm :title="title" type="info" :message="message">
       <template #reference>
         <tiny-button>info</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="error">
+    <tiny-popconfirm :title="title" type="error" :message="message">
       <template #reference>
         <tiny-button>error</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="warning">
+    <tiny-popconfirm :title="title" type="warning" :message="message">
       <template #reference>
         <tiny-button>warning</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="success">
+    <tiny-popconfirm :title="title" type="success" :message="message">
       <template #reference>
         <tiny-button>success</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" :type="TinyIconDel">
+    <tiny-popconfirm :title="title" :type="TinyIconDel" :message="message">
       <template #reference>
         <tiny-button>自定义</tiny-button>
       </template>
     </tiny-popconfirm>
   </div>
 </template>
+
 <script setup>
 import { ref } from 'vue'
 import { Popconfirm as TinyPopconfirm, Button as TinyButton } from '@opentiny/vue'
 import { iconDel } from '@opentiny/vue-icon'
 
-const title = ref('确定要删除该安全组规则吗?')
+const title = ref('提示标题')
+const message = ref('安全组规则是推荐的，确定要删除该安全组规则吗?')
 const TinyIconDel = iconDel()
 </script>
 

diff --git a/examples/sites/demos/pc/app/popconfirm/type.vue b/examples/sites/demos/pc/app/popconfirm/type.vue
@@ -1,30 +1,30 @@
 <template>
   <div>
-    <tiny-popconfirm :title="title" type="info">
+    <tiny-popconfirm :title="title" type="info" :message="message">
       <template #reference>
         <tiny-button>info</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="error">
+    <tiny-popconfirm :title="title" type="error" :message="message">
       <template #reference>
         <tiny-button>error</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="warning">
+    <tiny-popconfirm :title="title" type="warning" :message="message">
       <template #reference>
         <tiny-button>warning</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" type="success">
+    <tiny-popconfirm :title="title" type="success" :message="message">
       <template #reference>
         <tiny-button>success</tiny-button>
       </template>
     </tiny-popconfirm>
 
-    <tiny-popconfirm :title="title" :type="TinyIconDel">
+    <tiny-popconfirm :title="title" :type="TinyIconDel" :message="message">
       <template #reference>
         <tiny-button>自定义</tiny-button>
       </template>
@@ -43,7 +43,8 @@ export default {
   },
   data() {
     return {
-      title: '确定要删除该安全组规则吗?',
+      title: '提示标题',
+      message: '安全组规则是推荐的，确定要删除该安全组规则吗?',
       TinyIconDel: iconDel()
     }
   }

diff --git a/packages/theme/src/popconfirm/index.less b/packages/theme/src/popconfirm/index.less
@@ -41,12 +41,8 @@
   &__header {
     display: flex;
     align-items: center;
-    line-height: var(--ti-popconfirm-popover-line-height);
     margin-bottom: var(--ti-popconfirm-popover-margin-bottom);
   }
-  .no-message {
-    font-weight: 400;
-  }
 
   &__icon {
     height: var(--ti-popconfirm-popover-icon-width);
@@ -56,14 +52,14 @@
   }
 
   &__title {
-    flex: 1 1 auto;
     font-size: var(--ti-popconfirm-popover-title-font-size);
     font-weight: var(--ti-popconfirm-popover-title-font-weight);
+    line-height: var(--ti-popconfirm-popover-title-line-height);
   }
 
   &__content {
     color: var(--ti-popconfirm-popover-text-color);
-    line-height: var(--ti-popconfirm-popover-line-height);
+    line-height: var(--ti-popconfirm-popover-content-line-height);
   }
 
   &__footer {
@@ -73,6 +69,7 @@
   }
 
   &__confirm-button {
+    margin-left: 8px;
     width: 72px;
   }
 

diff --git a/packages/theme/src/popconfirm/vars.less b/packages/theme/src/popconfirm/vars.less
@@ -11,18 +11,20 @@
 */
 
 .component-css-vars-popconfirm() {
-  // 提示弹窗字体行高
-  --ti-popconfirm-popover-line-height: 1.5;
+  // 提示弹窗title字体行高
+  --ti-popconfirm-popover-title-line-height:var(--ti-common-line-height-2);
+  // 提示弹窗content字体行高
+  --ti-popconfirm-popover-content-line-height: var(--ti-common-line-height-1);
   // 底部按钮flex排列方式
   --ti-popconfirm-popover-footer-justify-content: right;
   // 提示弹窗字体大小
   --ti-popconfirm-popover-footer-font-size: var(--ti-common-font-size-base, 12px);
   // 提示弹窗字体颜色
   --ti-popconfirm-popover-footer-font-color: #191919;
   // 提示弹窗容器垂直内边距
-  --ti-popconfirm-popover-container-padding-vertical: unset;
+  --ti-popconfirm-popover-container-padding-vertical: var(--ti-common-space-base);
   // 提示弹窗图标大小
-  --ti-popconfirm-popover-icon-width: var(--ti-common-size-4x);
+  --ti-popconfirm-popover-icon-width: var(--ti-common-size-5x);
   --ti-popconfirm-popover-icon-margin-bottom: 2px;
   // 提示弹窗图标上侧外边距
   --ti-popconfirm-popover-icon-margin-right: var(--ti-common-space-base);
@@ -32,4 +34,6 @@
   --ti-popconfirm-popover-title-font-size: var(--ti-common-font-size-2);
   --ti-popconfirm-popover-title-font-weight: var(--ti-common-font-weight-bold);
   --ti-popconfirm-popover-text-color: #191919;
+  // 标题距离内容下边距
+  --ti-popconfirm-popover-margin-bottom: var(--ti-common-space-2x);
 }
diff --git a/packages/vue/src/popconfirm/src/pc.vue b/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" :class="[message ? '' : 'no-message']">
+            <div class="tiny-popconfirm-popover__title">
               {{ title }}
             </div>
           </div>