fix(mobile): some css bugs of input and alert (#1220)

* fix(alert): [alert] Solved the problem of uneven alignment of prompt content

* fix(input): [input] Solve the problem of border style when input box is focused

packages/theme-mobile/src/alert/index.less

@@ -18,13 +18,19 @@
 @alert-prefix-cls: ~'@{css-prefix}mobile-alert';
 
 .@{alert-prefix-cls} {
+  display: flex;
+  align-items: top;
   clear: both;
   position: relative;
+  width: 100%;
   font-size: 0;
 
   .@{alert-prefix-cls}__content {
+    flex: 1;
     color: var(--ti-mobile-alert-content-text-color);
-    padding-left: 8px;
+    padding: 0 var(--ti-mobile-alert-content-padding-horizotal);
+    white-space: pre-wrap;
+    word-break: break-all;
   }
 
   &--normal {
@@ -34,8 +40,6 @@
 
     .@{alert-prefix-cls}__content {
       font-size: var(--ti-mobile-alert-content-font-size, 12px);
-      display: inline-block;
-      vertical-align: middle;
 
       &.is-hideicon {
         padding: 0;
@@ -47,18 +51,19 @@
     padding: var(--ti-mobile-alert-large-padding-vertical) var(--ti-mobile-alert-padding-right) var(--ti-mobile-alert-large-padding-vertical) var(--ti-mobile-alert-padding-left);
 
     .@{alert-prefix-cls}__content {
-      font-size: 15px;
-      display: inline-block;
-      vertical-align: middle;
+      font-size: var(--ti-mobile-alert-large-font-size);
 
       &.is-hideicoalert-variantn {
         padding: 0;
       }
     }
 
     .is-custom {
-      font-size: 15px;
-      color: #fff;
+      font-size: var(--ti-mobile-alert-large-font-size);
+    }
+
+    .@{alert-prefix-cls}__icon {
+      margin-top: 4px;
     }
   }
 
@@ -95,29 +100,22 @@
   }
 
   &__icon {
-    font-size: var(--ti-mobile-alert-icon-size, 16px);
+    margin-top: 2px;
+    font-size: var(--ti-mobile-alert-icon-size);
   }
 
   &.is-center {
     text-align: center;
   }
 
   .is-custom {
-    position: absolute;
-    top: 50%;
-    right: 12px;
-    transform: translateY(-50%);
     cursor: pointer;
-    font-size: 12px;
-    color: #999;
+    font-size: var(--ti-mobile-alert-content-font-size);
+    color: var(--ti-mobile-alert-custom-text-color);
   }
 
   & &__close {
-    font-size: var(--ti-mobile-alert-content-font-size, 12px);
-    position: absolute;
-    top: 50%;
-    right: 12px;
-    transform: translateY(-50%);
+    font-size: var(--ti-mobile-alert-close-icon-font-size);
     cursor: pointer;
   }
 }

packages/theme-mobile/src/alert/vars.less

@@ -43,6 +43,14 @@
   --ti-mobile-alert-content-font-size: var(--ti-mobile-font-size-s, 12px);
   // 字体色
   --ti-mobile-alert-content-text-color: var(--ti-mobile-color-text-primary, #191919);
+  // 内容水平内边距
+  --ti-mobile-alert-content-padding-horizotal: var(--ti-mobile-space-2x, 8px);
+  // large提示字号
+  --ti-mobile-alert-large-font-size: var(--ti-mobile-font-size-l, 16px);
   // large提示垂直内边距
   --ti-mobile-alert-large-padding-vertical: 10px;
+  // 关闭图标大小
+  --ti-mobile-alert-close-icon-font-size: var(--ti-mobile-font-size-l, 16px);
+  // 自定义关闭文本色
+  --ti-mobile-alert-custom-text-color: var(--ti-mobile-color-text-placeholder, #808080);
 }

packages/theme-mobile/src/base/basic-var.less

@@ -126,7 +126,7 @@
   --ti-mobile-border-radius-full: 9999px; // 全圆角(按钮、开关)
 
   /* 边框宽度 */
-  --ti-mobile-border-width: 1px;
+  --ti-mobile-border-width-1: 1px;
 
   /* 边框类型 */
   --ti-mobile-border-style-solid: solid; // 实线

packages/theme-mobile/src/input/index.less

@@ -55,8 +55,9 @@
     font-size: var(--ti-mobile-input-count-font-size);
   }
 
-  &.is-focus {
+  &.is-focus &__inner {
     border-color: var(--ti-mobile-input-border-color-active);
+    border-width: var(--ti-mobile-input-border-width-active);
   }
 
   &.is-showlimit &__inner {
@@ -114,6 +115,11 @@
     width: 6px;
   }
 
+  &.is-focus &__wrapper {
+    border-color: var(--ti-mobile-input-border-color-active);
+    border-width: var(--ti-mobile-input-border-width-active);
+  }
+
   &.is-exceed &__suffix &__count {
     color: var(--ti-mobile-input-exceed-text-color);
   }

packages/theme-mobile/src/input/vars.less

@@ -23,6 +23,8 @@
   --ti-mobile-input-border-color: var(--ti-mobile-color-border-default, #c2c2c2);
   // 输入时边框色
   --ti-mobile-input-border-color-active: var(--ti-mobile-color-border-active, #191919);
+  // 输入时边框宽度
+  --ti-mobile-input-border-width-active: var(--ti-mobile-border-width-1, 1px);
   // 边框禁用色
   --ti-mobile-border-color-disabled: var(--ti-mobile-color-border-disabled, #dbdbdb);
   // 圆角

packages/vue/src/alert/src/mobile.vue

@@ -11,11 +11,7 @@
  -->
 <template>
   <transition name="tiny-mobile-alert-fade">
-    <div
-      v-if="state.show"
-      :class="state.alertClass"
-      :style="state.alertStyle"
-    >
+    <div v-if="state.show" :class="state.alertClass" :style="state.alertStyle">
       <component v-if="showIcon" :is="state.getIcon" class="tiny-mobile-alert__icon" />
       <div :class="['tiny-mobile-alert__content', { 'is-hideicon': !showIcon }]">
         <slot>{{ description }}</slot>
@@ -33,18 +29,32 @@
 <script lang="ts">
 import { renderless, api } from '@opentiny/vue-renderless/alert/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
-import { iconClose, iconSuccess, iconError, iconHelp, iconWarning } from '@opentiny/vue-icon'
+import { iconClose, iconSuccess, iconError, iconHelp, iconWarningTriangle } from '@opentiny/vue-icon'
 import type { IAlertApi } from '@opentiny/vue-renderless/types/alert.type'
 import '@opentiny/vue-theme-mobile/alert/index.less'
 
 export default defineComponent({
-  props: [...props, 'icon', 'type', 'size', 'description', 'closable', 'showIcon', 'closeText', 'duration', 'offset', 'autoHide', 'target', 'center'],
+  props: [
+    ...props,
+    'icon',
+    'type',
+    'size',
+    'description',
+    'closable',
+    'showIcon',
+    'closeText',
+    'duration',
+    'offset',
+    'autoHide',
+    'target',
+    'center'
+  ],
   components: {
     IconClose: iconClose(),
     IconSuccess: iconSuccess(),
     IconError: iconError(),
     IconHelp: iconHelp(),
-    IconWarning: iconWarning()
+    IconWarning: iconWarningTriangle() // key值在 $constants 中已定义
   },
   setup(props, context) {
     return setup({ props, context, renderless, api }) as unknown as IAlertApi

packages/vue/src/input/src/mobile.vue

@@ -132,7 +132,7 @@
       ref="textarea"
       :name="name"
       v-bind="a($attrs, ['type', 'class', 'style', '^on[A-Z]'])"
-      class="tiny-mobile-textarea__inner"
+      :class="['tiny-mobile-textarea__inner', { 'is-focus': state.focused }]"
       :tabindex="tabindex"
       @compositionstart="handleCompositionStart"
       @compositionupdate="handleCompositionUpdate"
@@ -164,7 +164,7 @@
       v-model="state.sheetvalue"
       :menus="selectMenu"
       :ellipsis="ellipsis"
-      :contentStyle="contentStyle"
+      :content-style="contentStyle"
       :visible="state.boxVisibility"
       @update:visible="state.boxVisibility = $event"
     ></tiny-action-sheet>