feat(家庭功能): 优化家庭创建和编辑页面的封面图处理

- 添加默认家庭封面图资源 - 统一家庭名称输入限制为10个字符 - 优化封面图上传和预览逻辑，支持默认封面显示 - 调整上传图片大小限制为5MB - 为输入框添加cursorSpacing属性改善用户体验

feat(家庭功能): 优化家庭创建和编辑页面的封面图处理
- 添加默认家庭封面图资源 - 统一家庭名称输入限制为10个字符 - 优化封面图上传和预览逻辑，支持默认封面显示 - 调整上传图片大小限制为5MB - 为输入框添加cursorSpacing属性改善用户体验
hookehuyr
Commit cfa56d537f43fd14167db80c77acde589ac063d4 cfa56d53 1 parent cc540127
Showing 5 changed files with 102 additions and 67 deletions
src/assets/images/default-family-cover.png
src/assets/images/default-family-cover.svg
src/pages/CreateFamily/index.vue
src/pages/EditFamily/index.vue
src/pages/JoinFamily/index.vue
--- a/src/assets/images/default-family-cover.png 0 → 100644
View file @cfa56d5
+++ b/src/assets/images/default-family-cover.png 0 → 100644
View file @cfa56d5
--- a/src/assets/images/default-family-cover.svg 0 → 100644
View file @cfa56d5
+++ b/src/assets/images/default-family-cover.svg 0 → 100644
View file @cfa56d5
+<svg width="400" height="200" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- 背景渐变 -->
+  <defs>
+    <linearGradient id="bg-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#E3F2FD;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#BBDEFB;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  
+  <!-- 背景 -->
+  <rect width="400" height="200" fill="url(#bg-gradient)"/>
+  
+  <!-- 房子图标 -->
+  <g transform="translate(150, 60)">
+    <!-- 房子主体 -->
+    <rect x="20" y="40" width="60" height="50" fill="#FFF3E0" stroke="#FF9800" stroke-width="2" rx="4"/>
+    
+    <!-- 屋顶 -->
+    <polygon points="10,45 50,15 90,45" fill="#FF5722" stroke="#D84315" stroke-width="2"/>
+    
+    <!-- 门 -->
+    <rect x="35" y="65" width="15" height="25" fill="#8D6E63" rx="2"/>
+    <circle cx="46" cy="77" r="1.5" fill="#FFF"/>
+    
+    <!-- 窗户 -->
+    <rect x="25" y="50" width="12" height="10" fill="#81D4FA" stroke="#0277BD" stroke-width="1" rx="1"/>
+    <rect x="63" y="50" width="12" height="10" fill="#81D4FA" stroke="#0277BD" stroke-width="1" rx="1"/>
+    
+    <!-- 窗户十字 -->
+    <line x1="31" y1="50" x2="31" y2="60" stroke="#0277BD" stroke-width="0.5"/>
+    <line x1="25" y1="55" x2="37" y2="55" stroke="#0277BD" stroke-width="0.5"/>
+    <line x1="69" y1="50" x2="69" y2="60" stroke="#0277BD" stroke-width="0.5"/>
+    <line x1="63" y1="55" x2="75" y2="55" stroke="#0277BD" stroke-width="0.5"/>
+  </g>
+  
+  <!-- 文字 -->
+  <text x="200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" fill="#666" font-weight="500">温馨家庭</text>
+  <text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" fill="#999">点击上传家庭封面图</text>
+</svg>
\ No newline at end of file
--- a/src/pages/CreateFamily/index.vue
View file @cfa56d5
+++ b/src/pages/CreateFamily/index.vue
View file @cfa56d5
 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-01 11:37:51
+ * @LastEditTime: 2025-09-02 11:27:00
  * @FilePath: /lls_program/src/pages/CreateFamily/index.vue
  * @Description: 文件描述
 -->
@@ -21,9 +21,9 @@
               type="text"
               v-model="familyName"
               class="w-full text-gray-600 focus:outline-none"
-              placeholder="请输入家庭名称（最多20个字）"
+              placeholder="请输入家庭名称（最多10个字）"
               @blur="validateFamilyName"
-              maxlength="20"
+              maxlength="10"
             />
             <view v-if="familyNameError" class="text-red-500 text-sm mt-2">{{ familyNameError }}</view>
           </view>
@@ -82,6 +82,7 @@
                     @blur="handleBlur(index)"
                     class="w-full h-full bg-transparent text-center"
                     style="font-size: 38rpx;"
+                    :cursorSpacing="100"
                   />
                 </view>
               </view>
@@ -103,36 +104,34 @@
             <view class="block text-lg font-medium mb-2">
               家庭封面图（选填）
             </view>
-            <!-- 已上传封面显示 -->
+            <!-- 封面显示区域 -->
-            <view v-if="familyAvatar" class="mb-4">
+            <view class="mb-4">
               <view class="relative">
                 <image
-                  :src="familyAvatar"
+                  :src="familyAvatar || defaultFamilyCover"
                   class="w-full h-48 rounded-lg object-cover"
                   mode="aspectFill"
                   @tap="previewAvatar"
                 />
                 <view
+                  v-if="familyAvatar"
                   @click="deleteAvatar"
                   class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center"
                 >
                   <view class="text-white text-sm">×</view>
                 </view>
+                <view
+                  @click="chooseImage"
+                  class="absolute bottom-2 right-2 px-3 py-1 bg-black bg-opacity-50 text-white text-sm rounded-full flex items-center"
+                >
+                  <Photograph size="14" class="mr-1" />
+                  {{ familyAvatar ? '更换' : '上传' }}
+                </view>
               </view>
             </view>
-            <!-- 上传区域 -->
+            <!-- 上传提示 -->
-            <view
+            <view class="text-center text-gray-400 text-sm">
-              v-if="!familyAvatar"
+              支持图片格式（jpg、png）最大5MB
-              class="border border-dashed border-gray-200 rounded-lg p-12 flex flex-col items-center justify-center h-48"
-              @click="chooseImage"
-            >
-              <view class="text-gray-400 mb-4">
-                <Photograph size="32" />
-              </view>
-              <view class="text-center text-gray-400 text-lg">点击上传封面图</view>
-              <view class="text-center text-gray-400 text-sm mt-2">
-                支持图片格式（jpg、png）最大10MB
-              </view>
             </view>
           </view>
         </view>
@@ -178,6 +177,7 @@ import Taro from '@tarojs/taro';
 import { Edit, Tips, Photograph, Right } from '@nutui/icons-vue-taro';
 // import AppHeader from '../../components/AppHeader.vue';
 import BASE_URL from '@/utils/config';
+import defaultFamilyCoverSvg from '@/assets/images/default-family-cover.png';
 const familyName = ref('');
 const familyIntro = ref('');
@@ -214,6 +214,7 @@ const districtColumns = ref([
 const familyAvatar = ref('');
 const focusedIndex = ref(-1);
 const inputRefs = ref([]);
+const defaultFamilyCover = ref(defaultFamilyCoverSvg);
 const isFormValid = computed(() => {
   return (
@@ -298,14 +299,14 @@ const chooseImage = () => {
     success: function (res) {
       const tempFilePath = res.tempFilePaths[0];
-      // 检查文件大小（10MB = 10 * 1024 * 1024 bytes）
+      // 检查文件大小（5MB = 5 * 1024 * 1024 bytes）
-      Taro.getFileInfo({
+          Taro.getFileInfo({
-        filePath: tempFilePath,
+            filePath: tempFilePath,
-        success: function (fileInfo) {
+            success: function (fileInfo) {
-          if (fileInfo.size > 10 * 1024 * 1024) {
+              if (fileInfo.size > 5 * 1024 * 1024) {
-            showToast('图片大小不能超过10MB', 'none');
+                showToast('图片大小不能超过5MB', 'none');
-            return;
+                return;
-          }
+              }
           uploadImage(tempFilePath);
         },
         fail: function () {
@@ -364,11 +365,8 @@ const uploadImage = (filePath) => {
  * 预览头像
  */
 const previewAvatar = () => {
-  if (!familyAvatar.value) {
+  const imageToPreview = familyAvatar.value || defaultFamilyCover.value;
-    showToast('暂无图片可预览', 'error');
+  previewImages.value = [{ src: imageToPreview }];
-    return;
-  }
-  previewImages.value = [{ src: familyAvatar.value }];
   previewIndex.value = 0;
   previewVisible.value = true;
 };
@@ -393,8 +391,8 @@ const closePreview = () => {
  */
 const validateFamilyName = () => {
   familyNameError.value = '';
-  if (familyName.value.length > 20) {
+  if (familyName.value.length > 10) {
-    familyNameError.value = '家庭名称不能超过20个字';
+    familyNameError.value = '家庭名称不能超过10个字';
   }
 };
@@ -421,10 +419,10 @@ const validateForm = () => {
     return false;
   }
-  if (familyName.value.length > 20) {
+  if (familyName.value.length > 10) {
     Taro.showModal({
       title: '提示',
-      content: '家庭名称不能超过20个字，请重新输入',
+      content: '家庭名称不能超过10个字，请重新输入',
       showCancel: false
     });
     return false;
--- a/src/pages/EditFamily/index.vue
View file @cfa56d5
+++ b/src/pages/EditFamily/index.vue
View file @cfa56d5
 <!--
  * @Date: 2025-08-27 17:44:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-09-01 11:39:03
+ * @LastEditTime: 2025-09-02 11:23:27
  * @FilePath: /lls_program/src/pages/EditFamily/index.vue
  * @Description: 文件描述
 -->
@@ -21,9 +21,9 @@
               type="text"
               v-model="familyName"
               class="w-full text-gray-600 focus:outline-none"
-              placeholder="请输入家庭名称（最多20个字）"
+              placeholder="请输入家庭名称（最多10个字）"
               @blur="validateFamilyName"
-              maxlength="20"
+              maxlength="10"
             />
             <view v-if="familyNameError" class="text-red-500 text-sm mt-2">{{ familyNameError }}</view>
           </view>
@@ -103,36 +103,34 @@
             <view class="block text-lg font-medium mb-2">
               家庭封面图（选填）
             </view>
-            <!-- 已上传封面显示 -->
+            <!-- 封面显示区域 -->
-            <view v-if="familyAvatar" class="mb-4">
+            <view class="mb-4">
               <view class="relative">
                 <image
-                  :src="familyAvatar"
+                  :src="familyAvatar || defaultFamilyCover"
                   class="w-full h-48 rounded-lg object-cover"
                   mode="aspectFill"
                   @tap="previewAvatar"
                 />
                 <view
+                  v-if="familyAvatar"
                   @click="deleteAvatar"
                   class="absolute -top-2 -right-2 w-6 h-6 bg-red-500 rounded-full flex items-center justify-center"
                 >
                   <view class="text-white text-sm">×</view>
                 </view>
+                <view
+                  @click="chooseImage"
+                  class="absolute bottom-2 right-2 px-3 py-1 bg-black bg-opacity-50 text-white text-sm rounded-full flex items-center"
+                >
+                  <Photograph size="14" class="mr-1" />
+                  {{ familyAvatar ? '更换' : '上传' }}
+                </view>
               </view>
             </view>
-            <!-- 上传区域 -->
+            <!-- 上传提示 -->
-            <view
+            <view class="text-center text-gray-400 text-sm">
-              v-if="!familyAvatar"
+              支持图片格式（jpg、png）最大5MB
-              class="border border-dashed border-gray-200 rounded-lg p-12 flex flex-col items-center justify-center h-48"
-              @click="chooseImage"
-            >
-              <view class="text-gray-400 mb-4">
-                <Photograph size="32" />
-              </view>
-              <view class="text-center text-gray-400 text-lg">点击上传封面图</view>
-              <view class="text-center text-gray-400 text-sm mt-2">
-                支持图片格式（jpg、png）最大10MB
-              </view>
             </view>
           </view>
         </view>
@@ -175,6 +173,7 @@ import Taro from '@tarojs/taro';
 import { Edit, Tips, Photograph, Right } from '@nutui/icons-vue-taro';
 // import AppHeader from '../../components/AppHeader.vue';
 import BASE_URL from '@/utils/config';
+import defaultFamilyCoverSvg from '@/assets/images/default-family-cover.png';
 const familyName = ref('');
 const familyIntro = ref('');
@@ -210,6 +209,7 @@ const districtColumns = ref([
 ]);
 const familyAvatar = ref('');
 const focusedIndex = ref(-1);
+const defaultFamilyCover = ref(defaultFamilyCoverSvg);
 // 图片预览相关
 const previewVisible = ref(false);
@@ -281,12 +281,12 @@ const chooseImage = () => {
     success: function (res) {
       const tempFilePath = res.tempFilePaths[0];
-      // 检查文件大小（10MB = 10 * 1024 * 1024 bytes）
+      // 检查文件大小（5MB = 5 * 1024 * 1024 bytes）
       Taro.getFileInfo({
         filePath: tempFilePath,
         success: function (fileInfo) {
-          if (fileInfo.size > 10 * 1024 * 1024) {
+          if (fileInfo.size > 5 * 1024 * 1024) {
-            showToast('图片大小不能超过10MB', 'none');
+            showToast('图片大小不能超过5MB', 'none');
             return;
           }
           uploadImage(tempFilePath);
@@ -347,11 +347,8 @@ const uploadImage = (filePath) => {
  * 预览头像
  */
 const previewAvatar = () => {
-  if (!familyAvatar.value) {
+  const imageToPreview = familyAvatar.value || defaultFamilyCover.value;
-    showToast('暂无图片可预览', 'none');
+  previewImages.value = [{ src: imageToPreview }];
-    return;
-  }
-  previewImages.value = [{ src: familyAvatar.value }];
   previewIndex.value = 0;
   previewVisible.value = true;
 };
@@ -376,8 +373,8 @@ const closePreview = () => {
  */
 const validateFamilyName = () => {
   familyNameError.value = '';
-  if (familyName.value.length > 20) {
+  if (familyName.value.length > 10) {
-    familyNameError.value = '家庭名称不能超过20个字';
+    familyNameError.value = '家庭名称不能超过10个字';
   }
 };
@@ -404,10 +401,10 @@ const validateForm = () => {
     return false;
   }
-  if (familyName.value.length > 20) {
+  if (familyName.value.length > 10) {
     Taro.showModal({
       title: '提示',
-      content: '家庭名称不能超过20个字，请重新输入',
+      content: '家庭名称不能超过10个字，请重新输入',
       showCancel: false
     });
     return false;
--- a/src/pages/JoinFamily/index.vue
View file @cfa56d5
+++ b/src/pages/JoinFamily/index.vue
View file @cfa56d5
@@ -28,6 +28,7 @@
             @focus="focusedIndex = index"
             @blur="handleBlur(index)"
             class="motto-input"
+            :cursorSpacing="100"
           />
         </view>
       </view>