From 3a16059192fa56ed7a54934060b62192864ca990 Mon Sep 17 00:00:00 2001
From: ajaxzheng <894103554@qq.com>
Date: Mon, 9 Sep 2024 10:32:55 +0800
Subject: [PATCH] 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
---
 .../pc/app/input/resize-composition-api.vue   |  2 +-
 .../sites/demos/pc/app/input/resize.spec.ts   |  4 +--
 examples/sites/demos/pc/app/input/resize.vue  |  2 +-
 .../sites/demos/pc/app/input/slot.spec.ts     | 12 ++++---
 packages/theme/src/textarea/index.less        | 35 ++++++++++++++++++-
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/examples/sites/demos/pc/app/input/resize-composition-api.vue b/examples/sites/demos/pc/app/input/resize-composition-api.vue
index 805996ff9..1cd6fa42f 100644
--- a/examples/sites/demos/pc/app/input/resize-composition-api.vue
+++ b/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;
 }
 
diff --git a/examples/sites/demos/pc/app/input/resize.spec.ts b/examples/sites/demos/pc/app/input/resize.spec.ts
index 6bf8eb126..49691470d 100644
--- a/examples/sites/demos/pc/app/input/resize.spec.ts
+++ b/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()
diff --git a/examples/sites/demos/pc/app/input/resize.vue b/examples/sites/demos/pc/app/input/resize.vue
index 4793df939..8f63019a1 100644
--- a/examples/sites/demos/pc/app/input/resize.vue
+++ b/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 {
diff --git a/examples/sites/demos/pc/app/input/slot.spec.ts b/examples/sites/demos/pc/app/input/slot.spec.ts
index 6d636c8c1..8e127096e 100644
--- a/examples/sites/demos/pc/app/input/slot.spec.ts
+++ b/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()
 })
diff --git a/packages/theme/src/textarea/index.less b/packages/theme/src/textarea/index.less
index f4f74b9fd..3f198453a 100644
--- a/packages/theme/src/textarea/index.less
+++ b/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;