u

code/base-project/base-vue/packages/ao-design/src/textarea/index.scss

@@ -4,35 +4,105 @@
 $textarea-prefix: #{$prefix}-textarea;
 
 .#{$textarea-prefix}-wrapper {
-  width: 100%;
-  border: 1px solid #ddd;
-  border-radius: 2px;
   box-sizing: border-box;
-  position: relative;
+  margin: 0;
   padding: 0;
-
-  &:hover {
-    border-color: $input-hover-color;
-  }
-
-  &:focus-within {
-    border-color: $input-focus-color;
-    box-shadow: $input-focus-shadow;
-  }
+  list-style: none;
+  position: relative;
+  width: 100%;
 
   .#{$textarea-prefix}-inner {
     width: 100%;
-    min-height: 80px; // 可根据需要
-    padding: 8px; // 内边距
-    border: none; // 去掉默认边框
+    display: flex;
+    padding: 5px 8px;
+    border: none;
     outline: none;
     resize: vertical;
     box-sizing: border-box;
     font-size: 13px;
-    color: #000;
+    transition:
+      all cubic-bezier(0.38, 0, 0.24, 1) 0.2s,
+      height 0s;
+    border: $input-border;
+    border-radius: $border-radius;
 
     &::placeholder {
-      color: #999999;
+      color: $input-placeholder-color;
+    }
+
+    &:hover {
+      border-color: $input-hover-border-color;
+    }
+
+    &:focus-within {
+      border-color: $input-focus-border-color;
+      box-shadow: $input-focus-shadow;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #e5e5e5;
+      border-radius: 0px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: #b2b2b2;
     }
   }
+
+  .#{$textarea-prefix}-disabled {
+    background-color: $input-disabled-bg-color;
+    cursor: not-allowed;
+    color: $input-disabled-font-color;
+
+    &:hover,
+    &:focus-within {
+      border-color: $input-border-color;
+      box-shadow: none;
+    }
+  }
+
+  .#{$textarea-prefix}-readonly {
+    background-color: $input-readonly-bg-color;
+  }
+
+  .#{$textarea-prefix}-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+
+    width: $input-icon-wrapper-size;
+    height: $input-icon-wrapper-size;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    color: $input-affix-color;
+    transition:
+      color 0.2s,
+      background-color 0.2s;
+
+    &:hover {
+      background-color: $input-icon-hover-bg-color;
+      border-radius: 50%;
+    }
+  }
+
+  .#{$textarea-prefix}-count {
+    position: absolute;
+    right: 8px;
+    bottom: 0px;
+    font-size: 12px;
+    color: $input-affix-color;
+  }
 }