feat(输入框): 添加自动聚焦功能并优化样式

在创建家庭和加入家庭页面中，为输入框添加自动聚焦功能，当输入有效字符时自动跳转到下一个输入框
优化输入框的边框样式，移除不必要的内联样式
将加入家庭成功后的跳转改为 reLaunch 以清除页面栈

@@ -74,6 +74,7 @@
               <view v-for="(char, index) in familyMotto" :key="index" class="flex-1">
               <view v-for="(char, index) in familyMotto" :key="index" class="flex-1">
                 <view class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-lg">
                 <view class="w-full aspect-square flex items-center justify-center bg-gray-100 rounded-lg">
                   <input
                   <input
+                    :ref="(el) => (inputRefs[index] = el)"
                     type="text"
                     type="text"
                     v-model="familyMotto[index]"
                     v-model="familyMotto[index]"
                     :placeholder="familyMottoPlaceholder[index]"
                     :placeholder="familyMottoPlaceholder[index]"
@@ -159,7 +160,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref } from 'vue';
+import { ref, nextTick } from 'vue';
 import Taro from '@tarojs/taro';
 import Taro from '@tarojs/taro';
 import { Edit, Tips, Photograph } from '@nutui/icons-vue-taro';
 import { Edit, Tips, Photograph } from '@nutui/icons-vue-taro';
 // import AppHeader from '../../components/AppHeader.vue';
 // import AppHeader from '../../components/AppHeader.vue';
@@ -173,6 +174,7 @@ const familyMottoPlaceholder = ref(['孝', '敬', '和', '睦']);
 const familySizes = ['2人', '3-5人', '6人+'];
 const familySizes = ['2人', '3-5人', '6人+'];
 const familyAvatar = ref('');
 const familyAvatar = ref('');
 const focusedIndex = ref(-1);
 const focusedIndex = ref(-1);
+const inputRefs = ref([]);
 
 
 // 图片预览相关
 // 图片预览相关
 const previewVisible = ref(false);
 const previewVisible = ref(false);
@@ -192,6 +194,17 @@ const handleInputChange = (index, value) => {
   // 只保留第一个有效字符（汉字、数字、大小写字母）
   // 只保留第一个有效字符（汉字、数字、大小写字母）
   const validChar = value.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
   const validChar = value.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] || '';
   familyMotto.value[index] = validChar;
   familyMotto.value[index] = validChar;
+
+  // 如果输入了有效字符且不是最后一个输入框，自动聚焦下一个
+  if (validChar && index < 3) {
+    focusedIndex.value = index + 1;
+    // 使用 nextTick 确保 DOM 更新后再聚焦
+    nextTick(() => {
+      if (inputRefs.value[index + 1]) {
+        inputRefs.value[index + 1].focus();
+      }
+    });
+  }
 };
 };
 
 
 /**
 /**

@@ -15,7 +15,7 @@
         <view
         <view
           v-for="(char, index) in mottoChars"
           v-for="(char, index) in mottoChars"
           :key="index"
           :key="index"
-          class="w-16 h-16 border border-gray-300 rounded-md flex items-center justify-center"
+          class="w-16 h-16 border border-gray-500 rounded-md flex items-center justify-center"
           :style="{
           :style="{
             borderColor: focusedIndex === index ? '#3b82f6' : '#d1d5db'
             borderColor: focusedIndex === index ? '#3b82f6' : '#d1d5db'
           }"
           }"
@@ -29,7 +29,6 @@
             @focus="focusedIndex = index"
             @focus="focusedIndex = index"
             @blur="handleBlur(index)"
             @blur="handleBlur(index)"
             class="w-full h-full text-center text-xl bg-transparent outline-none"
             class="w-full h-full text-center text-xl bg-transparent outline-none"
-            style="border: none;"
           />
           />
         </view>
         </view>
       </view>
       </view>
@@ -89,7 +88,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, nextTick } from 'vue';
 import Taro from '@tarojs/taro';
 import Taro from '@tarojs/taro';
 import { My } from '@nutui/icons-vue-taro';
 import { My } from '@nutui/icons-vue-taro';
 import AppHeader from '../../components/AppHeader.vue';
 import AppHeader from '../../components/AppHeader.vue';
@@ -108,8 +107,13 @@ const handleInputChange = (index, value) => {
 
 
     // 如果输入了有效字符且不是最后一个输入框，自动聚焦下一个
     // 如果输入了有效字符且不是最后一个输入框，自动聚焦下一个
     if (firstChar && index < 3) {
     if (firstChar && index < 3) {
-      // Taro中无法直接操作DOM进行focus，这里仅保留逻辑
-      // 在小程序中，可以通过设置 `focus` 属性来控制
+      focusedIndex.value = index + 1;
+      // 使用 nextTick 确保 DOM 更新后再聚焦
+      nextTick(() => {
+        if (inputRefs.value[index + 1]) {
+          inputRefs.value[index + 1].focus();
+        }
+      });
     }
     }
   } else {
   } else {
     mottoChars.value[index] = '';
     mottoChars.value[index] = '';
@@ -157,7 +161,7 @@ const isComplete = computed(() => {
 
 
 const handleJoinFamily = () => {
 const handleJoinFamily = () => {
   if (isComplete.value) {
   if (isComplete.value) {
-    Taro.navigateTo({
+    Taro.reLaunch({
       url: '/pages/Dashboard/index'
       url: '/pages/Dashboard/index'
     });
     });
   }
   }