fix(input): [input] fix textarea x-design style (#2076)

* fix(input): [input] fix textarea x-design style

* fix(input): fix slot e2e error

* fix(input): [input] fix textarea x-design style

examples/sites/demos/pc/app/input/resize-composition-api.vue

@@ -44,7 +44,7 @@ const hoverText = ref('')
 
 <style scoped>
 .demo-input .tiny-textarea {
-  width: 400px;
+  width: fit-content;
   margin: 5px;
 }
 

examples/sites/demos/pc/app/input/resize.spec.ts

@@ -30,7 +30,7 @@ test('可缩放文本域', async ({ page }) => {
     .boundingBox()
     .then((box) => box?.height)
 
-  await expect(fill1Height).not.toEqual(defaultHeight)
+  await expect(fill1Height).toEqual(defaultHeight)
   await expect(fill1Height).toEqual(fill2Height)
 
   // autosize 检查高度
@@ -41,7 +41,7 @@ test('可缩放文本域', async ({ page }) => {
     .then((box) => box?.height)
   await textarea2.nth(1).fill(fillText + fillText)
   fill1Height = await textarea2
-    .nth(0)
+    .nth(1)
     .boundingBox()
     .then((box) => box?.height)
   await expect(fill1Height).not.toBeNull()

examples/sites/demos/pc/app/input/resize.vue

@@ -63,7 +63,7 @@ export default {
 <style lang="less" scoped>
 .demo-input {
   .tiny-textarea {
-    width: 400px;
+    width: fit-content;
     margin: 5px;
   }
   .expand {

examples/sites/demos/pc/app/input/slot.spec.ts

@@ -3,16 +3,18 @@ import { test, expect } from '@playwright/test'
 test('[Input]slot', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('input#slot')
-  
-  const prefix = page.locator('.tiny-input__prefix')
+
+  const demo = page.locator('#slot')
+
+  const prefix = demo.locator('.tiny-input__prefix')
   await expect(prefix).toBeVisible()
 
-  const append = page.locator('.tiny-input-group__append')
+  const append = demo.locator('.tiny-input-group__append')
   await expect(append).toBeVisible()
 
-  const prepend = page.locator('.tiny-input-group__prepend')
+  const prepend = demo.locator('.tiny-input-group__prepend')
   await expect(prepend).toBeVisible()
 
-  const suffix = page.locator('.tiny-input__suffix-inner')
+  const suffix = demo.locator('.tiny-input__suffix-inner')
   await expect(suffix).toBeVisible()
 })

packages/theme/src/textarea/index.less

@@ -28,6 +28,30 @@
   vertical-align: bottom;
   font-size: var(--ti-textarea-font-size);
 
+  &:before {
+    content: '';
+    width: calc(100% - 16px);
+    height: 8px;
+    position: absolute;
+    left: 2px;
+    top: 1px;
+    z-index: 1;
+    background: #fff;
+    border-radius: var(--ti-textarea-border-radius);
+  }
+
+  &:after {
+    content: '';
+    width: calc(100% - 19px);
+    height: 16px;
+    position: absolute;
+    left: 2px;
+    bottom: 1px;
+    z-index: 1;
+    background: #fff;
+    border-radius: var(--ti-textarea-border-radius);
+  }
+
   &.is-disabled &__inner {
     background-color: var(--ti-textarea-disabled-bg-color);
     border-color: var(--ti-textarea-border-color);
@@ -64,12 +88,13 @@
     font-size: var(--ti-textarea-count-font-size);
     text-align: right;
     position: absolute;
+    z-index: 2;
+    line-height: 1.5;
     bottom: var(--ti-textarea-count-bottom);
     right: var(--ti-textarea-count-right);
     width: var(--ti-textarea-count-width);
     border-bottom-left-radius: var(--ti-textarea-count-border-radius);
     padding-right: var(--ti-textarea-count-padding-right);
-    line-height: var(--ti-textarea-count-line-height);
 
     &-text-length {
       color: var(--ti-textarea-count-text-length-color);
@@ -167,6 +192,14 @@
       line-height: 1.5;
     }
 
+    &:before {
+      display: none;
+    }
+
+    &:after {
+      display: none;
+    }
+
     .@{textarea-prefix-cls}__inner-con {
       height: auto;