feat(CreateFamily): 添加表单验证并禁用无效提交按钮

当表单未填写完整时禁用提交按钮并显示灰色样式，移除手动验证逻辑

 <!--
 <!--
  * @Date: 2025-08-27 17:44:53
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-08-28 12:55:42
+ * @LastEditTime: 2025-08-28 21:35:16
  * @FilePath: /lls_program/src/pages/CreateFamily/index.vue
  * @FilePath: /lls_program/src/pages/CreateFamily/index.vue
  * @Description: 文件描述
  * @Description: 文件描述
 -->
 -->
@@ -115,7 +115,7 @@
                 />
                 />
                 <view
                 <view
                   @click="deleteAvatar"
                   @click="deleteAvatar"
-                  class="absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center"
+                  class="absolute -top-2 -right-2 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center"
                 >
                 >
                   <view class="text-white text-xs">×</view>
                   <view class="text-white text-xs">×</view>
                 </view>
                 </view>
@@ -140,8 +140,11 @@
       </view>
       </view>
       <!-- Submit Button -->
       <!-- Submit Button -->
       <view
       <view
-        @click="handleCreateFamily"
-        class="w-full py-3 bg-blue-500 text-white text-lg font-medium rounded-lg flex items-center justify-center"
+        @tap="isFormValid ? handleCreateFamily : null"
+        :class="[
+          'w-full py-3 text-white text-lg font-medium rounded-lg flex items-center justify-center',
+          isFormValid ? 'bg-blue-500' : 'bg-gray-400'
+        ]"
       >
       >
         创建家庭
         创建家庭
       </view>
       </view>
@@ -160,7 +163,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, nextTick } from 'vue';
+import { ref, nextTick, computed } 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';
@@ -176,6 +179,14 @@ const familyAvatar = ref('');
 const focusedIndex = ref(-1);
 const focusedIndex = ref(-1);
 const inputRefs = ref([]);
 const inputRefs = ref([]);
 
 
+const isFormValid = computed(() => {
+  return (
+    familyName.value.trim() !== '' &&
+    familyIntro.value.trim() !== '' &&
+    familyMotto.value.every(char => char.trim() !== '')
+  );
+});
+
 // 图片预览相关
 // 图片预览相关
 const previewVisible = ref(false);
 const previewVisible = ref(false);
 const previewImages = ref([]);
 const previewImages = ref([]);
@@ -364,10 +375,6 @@ const validateForm = () => {
  * 创建家庭
  * 创建家庭
  */
  */
 const handleCreateFamily = () => {
 const handleCreateFamily = () => {
-  if (!validateForm()) {
-    return;
-  }
-
   // 在实际应用中，这里会调用API创建家庭
   // 在实际应用中，这里会调用API创建家庭
   // 目前仅作为演示跳转到仪表盘页面
   // 目前仅作为演示跳转到仪表盘页面
   showToast('家庭创建成功', 'success');
   showToast('家庭创建成功', 'success');