feat: 完成前端业务闭环与后端联调

pages/family/article-editor.vue

@@ -73,6 +73,7 @@
             <text v-if="coverFileName" class="upload-receipt"
               >已上传：{{ coverFileName }}</text
             >
+            <button v-if="coverOssId" class="remove-cover-button" :disabled="uploading || isSubmitting" @click="clearCover">移除封面</button>
             <text v-if="uploadError" class="editor-save-error">{{
               uploadError
             }}</text>
@@ -344,6 +345,13 @@ const uploadCover = async () => {
   }
 };
 
+const clearCover = () => {
+  if (uploading.value || isSubmitting.value) return;
+  coverOssId.value = null;
+  coverFileName.value = "";
+  uploadError.value = "";
+};
+
 const saveArticle = async () => {
   if (isSubmitting.value || uploading.value || !hasValidContext.value) return;
   if (!form.articleTitle.trim() || !form.articleContent.trim()) {
@@ -440,6 +448,7 @@ onUnload(() => {
 .editor-result-card {
   @include adaptive-family-panel;
   width: 100%;
+  background-color: rgba($paper, 0.82);
 }
 .editor-panel__body {
   padding: 38rpx 34rpx 42rpx;
@@ -459,6 +468,7 @@ onUnload(() => {
   font-size: clamp(19px, 34rpx, 24px);
   font-weight: 700;
   text-align: center;
+  overflow-wrap: anywhere;
 }
 .editor-intro {
   display: block;
@@ -555,6 +565,18 @@ onUnload(() => {
   font-size: clamp(13px, 21rpx, 16px);
   overflow-wrap: anywhere;
 }
+.remove-cover-button {
+  justify-self: start;
+  min-height: 72rpx;
+  margin: 0;
+  padding: 0 18rpx;
+  border: 1rpx solid rgba($brand-red, 0.38);
+  border-radius: 8rpx;
+  background: transparent;
+  color: $brand-red;
+  font-size: clamp(13px, 21rpx, 16px);
+}
+.remove-cover-button::after { border: 0; }
 .editor-placeholder {
   color: #9e8e79;
 }