添加输入组件测试

common_ui/src/main/ets/component/InputComponent.ets

@@ -0,0 +1,68 @@
+import { CommonRes } from '../utils/CommonRes';
+
+@Extend(TextInput)
+function textInputStyle() {
+  .fontSize(15)
+  .height(45)
+  .backgroundColor(Color.White)
+  .padding(5)
+}
+
+@Preview
+@Component
+export struct PhoneInput {
+  @Prop countryCode: string = "+86"
+  onCountryCodeClick?: () => void;
+  @State inputText: string = ''
+  onInputChanged?: (value: string) => void;
+  @State isClearVisible: boolean = false;
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.SpaceBetween,
+      alignItems: ItemAlign.Center,
+    }) {
+      // 国家码
+      Row() {
+        Text(this.countryCode)
+          .height(44)
+        Image($r('app.media.ic_chevron_down'))
+          .objectFit(ImageFit.Contain)
+          .width(12)
+          .height(12)
+          .backgroundColor(Color.Red)
+          .margin({
+            left: 2,
+            right: 24
+          })
+      }.backgroundColor(Color.Green).width('')
+      .onClick(() => {
+        this.onCountryCodeClick?.();
+      })
+
+      // 账号输入框
+      TextInput({ placeholder: "请输入号码", text: this.inputText })
+        .maxLength(20)
+        .type(InputType.Normal)
+        .textInputStyle()
+        .onChange((value: string) => {
+          if (value) {
+            this.isClearVisible = value.length > 0;
+          } else {
+            this.isClearVisible = false;
+          }
+          this.onInputChanged?.(value);
+        })
+        .width('100%')
+
+      Image($r('app.media.ic_clear_circle'))
+        .width(18)
+        .height(18)
+        .backgroundColor(Color.Green)
+        .colorBlend('#e1e2e5').objectFit(ImageFit.Contain)
+        .onClick(() => {
+          this.inputText = ''
+        }).visibility(this.isClearVisible ? Visibility.Visible : Visibility.None)
+    }
+  }
+}

common_ui/src/main/ets/utils/CommonRes.ets

@@ -30,9 +30,17 @@ export class CommonRes {
     return $r("app.media.ic_eye_off");
   }
 
-  public static getImageRes(resName: string): Resource {
+  public static getImage(resName: string): Resource {
     return $r(`app.media.${resName}`);
   }
+
+  public static getString(name: string): ResourceStr {
+    return $r(`app.string.${name}`);
+  }
+
+  public static getFloat(name: string): ResourceStr {
+    return $r(`app.float.${name}`)
+  }
 }
 
 export class CommonMediaName {

common_ui/src/main/resources/base/element/color.json

@@ -3,6 +3,10 @@
     {
       "name": "white",
       "value": "#FFFFFF"
+    },
+    {
+      "name": "title_text_grey",
+      "value": "#FF393946"
     }
   ]
 }

common_ui/src/main/resources/base/element/float.json

@@ -0,0 +1,8 @@
+{
+  "float": [
+    {
+      "name": "float_1",
+      "value": "30.6"
+    }
+  ]
+}

common_ui/src/main/resources/base/media/ic_back_new.svg

@@ -0,0 +1,6 @@
+<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="&#232;&#191;&#148;&#229;&#155;&#158;" opacity="0.9">
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;" x="10.1694" y="0.0195312" width="1.5" height="14" rx="0.75" transform="rotate(45 10.1694 0.0195312)" fill="#393946"/>
+<rect id="&#231;&#159;&#169;&#229;&#189;&#162;&#229;&#164;&#135;&#228;&#187;&#189;" x="11.2301" y="18.9189" width="1.5" height="14" rx="0.75" transform="rotate(135 11.2301 18.9189)" fill="#393946"/>
+</g>
+</svg>

common_ui/src/main/resources/base/media/ic_chevron_down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>chevron-down</title><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>

common_ui/src/main/resources/base/media/ic_clear_circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>close-circle</title><path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" /></svg>

common_ui/src/main/resources/base/media/ic_eye_close.svg

@@ -0,0 +1 @@
+<svg t="1715323929951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4240" width="32" height="32"><path d="M512 554.752A661.76 661.76 0 0 1 42.688 361.216a25.6 25.6 0 1 1 36.096-36.352c115.904 115.2 269.76 178.688 433.152 178.688s317.312-63.488 433.216-178.688a25.6 25.6 0 1 1 36.096 36.352 661.568 661.568 0 0 1-469.312 193.536z" p-id="4241"></path><path d="M362.304 706.56a25.728 25.728 0 0 1-25.28-30.016l28.416-163.328a25.664 25.664 0 0 1 50.496 8.768l-28.416 163.328a25.6 25.6 0 0 1-25.216 21.184zM674.688 704a25.536 25.536 0 0 1-25.088-20.736l-31.104-160.768a25.6 25.6 0 0 1 50.24-9.728l31.104 160.768a25.6 25.6 0 0 1-25.152 30.464zM80.192 596.352a25.6 25.6 0 0 1-20.928-40.256l94.848-135.936a25.6 25.6 0 1 1 41.984 29.312L101.248 585.408a25.664 25.664 0 0 1-21.056 10.944zM942.848 596.352a25.6 25.6 0 0 1-20.992-10.944l-94.848-135.936a25.6 25.6 0 0 1 41.984-29.312l94.848 135.936a25.6 25.6 0 0 1-20.992 40.256z" p-id="4242"></path></svg>

common_ui/src/main/resources/base/media/ic_eye_open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye</title><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>