修改完成

pages/family/f06-article-editor.vue

@@ -47,7 +47,6 @@
               class="editor-control"
               :class="{ 'editor-control--error': fieldErrors.title }"
             >
-              <image :src="fieldFrame" mode="scaleToFill" />
               <input
                 v-model="form.title"
                 maxlength="40"
@@ -67,7 +66,6 @@
               class="editor-control"
               :class="{ 'editor-control--error': fieldErrors.category }"
             >
-              <image :src="fieldFrame" mode="scaleToFill" />
               <input
                 v-model="form.category"
                 maxlength="20"
@@ -87,7 +85,6 @@
               class="editor-control editor-control--textarea"
               :class="{ 'editor-control--error': fieldErrors.content }"
             >
-              <image :src="fieldFrame" mode="scaleToFill" />
               <textarea
                 v-model="form.content"
                 maxlength="1200"
@@ -127,8 +124,6 @@ import AppLoading from "@/components/AppLoading.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
 
-const fieldFrame =
-  "/static/assets/modules/family/transparent/module-field-frame.png";
 const draftFixture = {
   title: "汤氏家训辑录",
   category: "家风家训",
@@ -136,6 +131,9 @@ const draftFixture = {
     "孝友传家，勤俭立业；敬祖睦宗，诚实待人。愿后人常怀感恩，彼此扶持。",
 };
 const editorState = ref("form");
+const articleId = ref("");
+const editorMode = ref("create");
+const simulateSaveFailure = ref(false);
 const allowedStates = new Set([
   "draft",
   "loading",
@@ -156,8 +154,8 @@ const actionLabel = computed(() =>
       : "保存谱文",
 );
 
-const fillDraft = (failed = false) => {
-  Object.assign(form, draftFixture, failed ? { title: "保存失败" } : {});
+const fillDraft = () => {
+  Object.assign(form, draftFixture);
 };
 const showAllFieldErrors = () => {
   fieldErrors.title = "请填写文章标题";
@@ -166,9 +164,15 @@ const showAllFieldErrors = () => {
 };
 
 onLoad((query) => {
+  articleId.value = query.articleId || "";
+  editorMode.value = articleId.value || query.mode === "edit" ? "edit" : "create";
   const requestedState = allowedStates.has(query.state) ? query.state : "form";
-  if (["draft", "saving", "error"].includes(requestedState)) {
-    fillDraft(requestedState === "error");
+  simulateSaveFailure.value = requestedState === "error";
+  if (
+    editorMode.value === "edit" ||
+    ["draft", "saving", "error"].includes(requestedState)
+  ) {
+    fillDraft();
   }
   if (requestedState === "validation") showAllFieldErrors();
   editorState.value = requestedState;
@@ -197,12 +201,18 @@ const submit = () => {
   }
   editorState.value = "saving";
   saveTimer = setTimeout(() => {
-    editorState.value =
-      form.title.trim() === "保存失败" ? "error" : "success";
+    editorState.value = simulateSaveFailure.value ? "error" : "success";
+    simulateSaveFailure.value = false;
     saveTimer = null;
   }, 320);
 };
-const returnToList = () => uni.navigateBack();
+const returnToList = () =>
+  uni.redirectTo({
+    url:
+      editorMode.value === "edit" && articleId.value
+        ? `/pages/family/f05-article-detail?articleId=${articleId.value}`
+        : "/pages/family/f04-article-list",
+  });
 
 onUnload(() => {
   if (saveTimer) clearTimeout(saveTimer);
@@ -211,16 +221,15 @@ onUnload(() => {
 
 <style scoped lang="scss">
 .article-editor-page {
-  position: relative;
+  display: flex;
   min-height: 100vh;
-  overflow-x: hidden;
+  flex-direction: column;
   background: $paper;
 }
 .article-editor-page__header,
 .article-editor-loading,
 .article-editor-content {
-  position: relative;
-  z-index: 2;
+  z-index: 1;
 }
 .article-editor-loading {
   padding-top: 150rpx;
@@ -230,7 +239,6 @@ onUnload(() => {
 }
 .editor-panel,
 .editor-result-card {
-  position: relative;
   width: 100%;
   border: 20rpx solid transparent;
   border-image-source: url("/static/assets/modules/family/transparent/module-content-frame.png");
@@ -240,8 +248,6 @@ onUnload(() => {
   box-sizing: border-box;
 }
 .editor-panel__body {
-  position: relative;
-  z-index: 1;
   padding: 38rpx 34rpx 42rpx;
 }
 .editor-eyebrow {
@@ -279,22 +285,13 @@ onUnload(() => {
   font-weight: 700;
 }
 .editor-control {
-  position: relative;
   display: flex;
-  height: 82rpx;
+  min-height: 82rpx;
   align-items: center;
-}
-.editor-control > image {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
+  background: url("/static/assets/modules/family/transparent/module-field-frame.png") center / 100% 100% no-repeat;
 }
 .editor-control input,
 .editor-control textarea {
-  position: relative;
-  z-index: 1;
   box-sizing: border-box;
   width: 100%;
   color: $ink;
@@ -302,17 +299,17 @@ onUnload(() => {
 }
 .editor-control input {
   width: 100%;
-  height: 82rpx;
+  min-height: 82rpx;
   padding: 0 28rpx;
 }
 .editor-control--textarea {
-  height: 220rpx;
+  min-height: 220rpx;
   padding: 20rpx 24rpx;
   box-sizing: border-box;
 }
 .editor-control textarea {
   width: 100%;
-  height: 180rpx;
+  min-height: 180rpx;
   line-height: 1.65;
 }
 .editor-control--error {
@@ -350,8 +347,6 @@ onUnload(() => {
   min-height: 420rpx;
 }
 .editor-result-card__body {
-  position: relative;
-  z-index: 1;
   padding: 112rpx 52rpx 68rpx;
   text-align: center;
 }