🎈 perf(完成UI界面和逻辑): 完成

src/components/organizationNameModal/index.module.scss

@@ -4,13 +4,23 @@
   border-radius: 20px;
   padding-top: 20px;
   overflow: hidden;
-  .input {
-    border: 1px solid #eee;
-    margin: 20px 40px;
-    padding: 8px;
-    border-radius: 8px;
+  .inputBar {
+    border: 1px solid transparent;
+    background-color: #f5f5f5;
+    border-radius: 20px;
+    padding: 20px 42px;
+    margin: 32px 40px;
     font-size: 26px;
+    color: #333;
+    &_focus {
+      border: 1px solid #337fff;
+    }
+    &_error {
+      border: 1px solid #f64861;
+      color: #f64861;
+    }
   }
+
   &_title {
     padding: 10px;
     text-align: center;
@@ -44,7 +54,7 @@
       color: #333;
     }
     &_right {
-      color: #606f97;
+      color: #337fff;
     }
   }
   .tips {

src/components/organizationNameModal/index.tsx

@@ -1,6 +1,6 @@
 import type { CommonEventFunction, InputProps } from '@tarojs/components'
 import { Input, View } from '@tarojs/components'
-import { useState } from 'react'
+import React, { useState } from 'react'
 import classNames from 'classnames'
 import Dialog from '../Dialog'
 import InputX from '../InputX'
@@ -23,16 +23,7 @@ const OrganizationNameModal = (props: PropsType) => {
     onConfirm,
   } = props
 
-  const [_show, setShow] = usePropsValue({
-    value: showModal,
-    defaultValue: false,
-    onChange: (value) => {
-      onShowModalChange?.(value)
-    },
-  })
-
   const handleClose = () => {
-    setShow(false)
     onClose?.()
   }
 
@@ -45,16 +36,34 @@ const OrganizationNameModal = (props: PropsType) => {
   const handleConfirm = () => {
     onConfirm?.(text)
   }
+  const [inputStyles, setInputStyles] = useState<string[]>([])
+  const Reg = /^[a-zA-Z0-9\u4E00-\u9FA5]+$/
+
   const handleIntput: CommonEventFunction<InputProps.inputEventDetail> = (e) => {
+    if (!Reg.test(e.detail.value)) {
+      setInputStyles(() => [styles.inputBar_error])
+      setText(e.detail.value)
+      return
+    }
     setText(e.detail.value)
   }
+  const handleFocus = () => {
+    if (text && !Reg.test(text)) {
+      setInputStyles(() => [styles.inputBar_error])
+      return
+    }
+    setInputStyles(() => [styles.inputBar_focus])
+  }
+  const handleBlur = () => {
+    setInputStyles(() => [])
+  }
 
   return <Dialog show={showModal} onClose={handleClose} onChange={onShowModalChange}>
     <View className={styles.organizationNameModal}>
       <View className={styles.organizationNameModal_title}>请设置您的组织昵称</View>
       <View className={styles.organizationNameModal_content}>
         <View className={styles.tips}>公司名称是辨识您身份的重要依据，请谨慎修改。（仅支持修改一次）</View>
-        <InputX customClassName={styles.input} onInput={handleIntput} value={text} type="text" placeholder="请输入 组织/公司/码单昵称" />
+        <Input className={classNames(styles.inputBar, [...inputStyles])} onFocus={handleFocus} onBlur={handleBlur} onInput={handleIntput} value={text} type="text" placeholder="请输入 组织/公司/码单昵称" />
       </View>
       <View className={styles.organizationNameModal_bottomBar}>
         <View hoverClass="hoverClass" className={classNames(styles.button, styles.organizationNameModal_bottomBar_left)} onClick={handleCancel}>下次更改</View>