添加输入组件测试

app/src/main/ets/pages/Index.ets

@@ -24,6 +24,12 @@ struct Index {
         { name: "TcpSocket", page: 'pages/net/TcpSocketPage'}
       ]
     },
+    {
+      name: 'Component',
+      items: [
+        {name: 'InputPage', page: 'pages/component/InputPage'}
+      ]
+    },
     // 布局
     {
       name: 'Layout',
@@ -126,7 +132,7 @@ struct Index {
     Column() {
       Row() {
         Text(item.name);
-        Image(CommonRes.getImageRes(CommonRes.IC_CHEVRON_RIGHT)).width(32).height(32);
+        Image(CommonRes.getImage(CommonRes.IC_CHEVRON_RIGHT)).width(32).height(32);
       }.width('100%').height(48).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center)
       .padding({left: 16, right: 16})
       Divider().margin({ top: 2 });

app/src/main/ets/pages/component/InputPage.ets

@@ -0,0 +1,35 @@
+import { CommonRes, PhoneInput } from '@devwiki/common_ui/Index';
+
+@Entry
+@Component
+struct InputPage {
+
+  @Builder settingItem() {
+    Button() {
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween,
+        alignItems: ItemAlign.Center
+      }) {
+        Text("AppAbility_label").fontSize(14)
+
+        Row() {
+          Text("hint").margin({right: CommonRes.getFloat('size_4vp')})
+            .fontSize(14)
+
+          Image(CommonRes.getImage('ic_chevron_left')).height(24).width(24);
+        }
+      }.width('100%')
+      .padding({
+        top: 16,
+        bottom: 16
+      })
+    }.type(ButtonType.Normal).width('100%').backgroundColor(Color.Red)
+  }
+
+  build() {
+    Column(){
+      this.settingItem()
+      Text("123")
+    }.width('100%').height('100%')
+  }
+}

app/src/main/ets/pages/component/SVGPage.ets

@@ -0,0 +1,16 @@
+import { CommonRes } from '@devwiki/common_ui/Index'
+
+@Entry
+@Component
+export struct SVGPage {
+  build() {
+    Column() {
+      Text().width(96).height(96).backgroundColor($r('app.media.ic_eye_off'))
+        .linearGradient({
+          angle: 90,
+          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]],
+          repeating: true
+        })
+    }.height('100%').justifyContent(FlexAlign.Center)
+  }
+}

app/src/main/resources/base/media/ic_eye_off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>eye-off</title><path d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" /></svg>

app/src/main/resources/base/profile/main_pages.json

@@ -5,6 +5,7 @@
     "pages/web/WebDialogPage",
     "pages/layout/LinearLayoutPage",
     "pages/layout/RelativeContainerPage",
+    "pages/component/InputPage",
     "pages/animation/CompTransitionPage",
     "pages/media/AVPlayerPage",
     "pages/system/SchemePage",

common_ui/Index.ets

@@ -2,3 +2,5 @@ export { TitleBar, TitleBarMenuType } from './src/main/ets/component/TitleBar'
 export { ComponentConst } from './src/main/ets/component/ComponentConst'
 export { WebView, WebViewController, WebViewParam } from './src/main/ets/component/web/WebView'
 export { CommonRes, CommonMediaName } from './src/main/ets/utils/CommonRes'
+
+export { PhoneInput } from './src/main/ets/component/InputComponent'

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>