格式化

frontend/src/views/public/create/views/EditInfoView.vue

@@ -25,14 +25,8 @@ export default { name: 'EditInfoView' }
             <span>作者署名</span>
             <span class="required-mark">必填</span>
           </div>
-          <input
+          <input v-model="form.author" class="text-input" :class="{ 'input-error': authorError }" placeholder="如：你的名字"
-            v-model="form.author"
+            maxlength="16" @input="authorError = ''" />
-            class="text-input"
-            :class="{ 'input-error': authorError }"
-            placeholder="如：你的名字"
-            maxlength="16"
-            @input="authorError = ''"
-          />
           <div class="field-row-meta">
             <span v-if="authorError" class="field-error">{{ authorError }}</span>
             <span v-else class="field-error placeholder-error">&nbsp;</span>
@@ -46,12 +40,7 @@ export default { name: 'EditInfoView' }
             <span>副标题</span>
             <span class="optional-mark">选填</span>
           </div>
-          <input
+          <input v-model="form.subtitle" class="text-input" placeholder="如：一个关于勇气的故事" maxlength="20" />
-            v-model="form.subtitle"
-            class="text-input"
-            placeholder="如：一个关于勇气的故事"
-            maxlength="20"
-          />
           <div class="field-row-meta">
             <span class="char-count">{{ form.subtitle.length }}/20</span>
           </div>
@@ -64,13 +53,7 @@ export default { name: 'EditInfoView' }
             <span class="optional-mark">选填</span>
             <span class="char-count char-count-right">{{ form.intro.length }}/250</span>
           </div>
-          <textarea
+          <textarea v-model="form.intro" class="textarea-input" placeholder="简单介绍一下这个绘本的故事" maxlength="250" rows="3" />
-            v-model="form.intro"
-            class="textarea-input"
-            placeholder="简单介绍一下这个绘本的故事"
-            maxlength="250"
-            rows="3"
-          />
         </div>
       </div>
 
@@ -92,27 +75,15 @@ export default { name: 'EditInfoView' }
               <plus-outlined />
             </span>
             <span v-else class="tag adding-tag">
-              <input
+              <input ref="tagInput" v-model="newTag" class="tag-input" placeholder="输入标签" maxlength="8"
-                ref="tagInput"
+                @keydown.enter="confirmAddTag" @blur="confirmAddTag" />
-                v-model="newTag"
-                class="tag-input"
-                placeholder="输入标签"
-                maxlength="8"
-                @keydown.enter="confirmAddTag"
-                @blur="confirmAddTag"
-              />
             </span>
           </template>
         </div>
 
         <!-- 推荐标签 -->
         <div v-if="selectedTags.length < 5 && limitedPresets.length > 0" class="preset-tags">
-          <span
+          <span v-for="p in limitedPresets" :key="p" class="tag preset-tag" @click="addPresetTag(p)">
-            v-for="p in limitedPresets"
-            :key="p"
-            class="tag preset-tag"
-            @click="addPresetTag(p)"
-          >
             <plus-outlined />
             <span>{{ p }}</span>
           </span>
@@ -386,11 +357,13 @@ onMounted(() => {
   justify-content: center;
   padding: 80px 0;
 }
+
 .loading-icon {
   font-size: 44px;
   color: var(--ai-primary);
   margin-bottom: 14px;
 }
+
 .loading-text {
   color: var(--ai-text-sub);
   font-size: 14px;
@@ -413,12 +386,14 @@ onMounted(() => {
   box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
   border: 1px solid rgba(99, 102, 241, 0.06);
 }
+
 .cover-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }
+
 .cover-title-overlay {
   position: absolute;
   bottom: 0;
@@ -443,7 +418,10 @@ onMounted(() => {
 
 .field-item {
   margin-bottom: 16px;
-  &:last-child { margin-bottom: 0; }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
 .field-label {
@@ -471,6 +449,7 @@ onMounted(() => {
   font-weight: 700;
   letter-spacing: 0.5px;
 }
+
 .optional-mark {
   color: var(--ai-text-sub);
   font-size: 11px;
@@ -496,7 +475,9 @@ onMounted(() => {
   font-weight: 500;
   transition: all 0.2s;
 
-  &::placeholder { color: #b8b6c4; }
+  &::placeholder {
+    color: #b8b6c4;
+  }
 
   &:focus {
     border-color: var(--ai-primary);
@@ -504,6 +485,7 @@ onMounted(() => {
     box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
   }
 }
+
 .textarea-input {
   resize: none;
   line-height: 1.6;
@@ -512,6 +494,7 @@ onMounted(() => {
 
 .input-error {
   border-color: #ef4444 !important;
+
   &:focus {
     border-color: #ef4444 !important;
     box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1) !important;
@@ -526,17 +509,23 @@ onMounted(() => {
   margin-top: 6px;
   min-height: 16px;
 }
+
 .field-error {
   color: #ef4444;
   font-size: 12px;
   font-weight: 500;
 }
-.placeholder-error { visibility: hidden; }
+
+.placeholder-error {
+  visibility: hidden;
+}
+
 .char-count {
   font-size: 11px;
   color: var(--ai-text-sub);
   margin-left: auto;
 }
+
 .char-count-right {
   margin-left: auto;
 }
@@ -548,6 +537,7 @@ onMounted(() => {
   gap: 8px;
   margin-bottom: 12px;
 }
+
 .tag {
   display: inline-flex;
   align-items: center;
@@ -565,12 +555,16 @@ onMounted(() => {
   color: var(--ai-primary);
   border: 1px solid rgba(99, 102, 241, 0.2);
 }
+
 .tag-remove {
   font-size: 11px;
   opacity: 0.6;
   margin-left: 2px;
   transition: opacity 0.2s;
-  &:hover { opacity: 1; }
+
+  &:hover {
+    opacity: 1;
+  }
 }
 
 .add-tag {
@@ -578,7 +572,11 @@ onMounted(() => {
   color: var(--ai-text-sub);
   border: 1px dashed rgba(99, 102, 241, 0.3);
   padding: 6px 14px;
-  :deep(.anticon) { font-size: 12px; }
+
+  :deep(.anticon) {
+    font-size: 12px;
+  }
+
   &:hover {
     color: var(--ai-primary);
     border-color: var(--ai-primary);
@@ -590,6 +588,7 @@ onMounted(() => {
   border: 1.5px solid var(--ai-primary);
   padding: 4px 10px;
 }
+
 .tag-input {
   border: none;
   outline: none;
@@ -605,6 +604,7 @@ onMounted(() => {
   flex-wrap: wrap;
   gap: 6px;
 }
+
 .preset-tag {
   background: rgba(99, 102, 241, 0.04);
   color: var(--ai-text-sub);
@@ -613,7 +613,9 @@ onMounted(() => {
   padding: 4px 10px;
   font-weight: 500;
 
-  :deep(.anticon) { font-size: 10px; }
+  :deep(.anticon) {
+    font-size: 10px;
+  }
 
   &:hover {
     background: rgba(99, 102, 241, 0.1);
@@ -627,6 +629,7 @@ onMounted(() => {
   display: flex;
   gap: 10px;
 }
+
 .action-btn {
   flex: 1;
   display: flex;
@@ -642,10 +645,18 @@ onMounted(() => {
   white-space: nowrap;
   min-width: 0;
 
-  :deep(.anticon) { font-size: 14px; }
+  :deep(.anticon) {
+    font-size: 14px;
+  }
 
-  &:active { transform: scale(0.97); }
+  &:active {
-  &:disabled { opacity: 0.4; pointer-events: none; }
+    transform: scale(0.97);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
 }
 
 /* 保存草稿：最弱，透明 + 紫色淡边 */

frontend/src/views/public/create/views/UploadView.vue

@@ -12,14 +12,16 @@ export default { name: 'UploadView' }
           <template v-if="uploading">
             <cloud-upload-outlined class="uploading-icon" />
             <div class="uploading-text">正在上传...</div>
-            <div class="progress-bar"><div class="progress-fill" /></div>
+            <div class="progress-bar">
+              <div class="progress-fill" />
+            </div>
           </template>
           <template v-else>
             <div class="upload-icon-wrap">
               <picture-outlined class="upload-icon" />
             </div>
             <div class="upload-title">上传你的画作</div>
-            <div class="upload-desc">支持拍照或从相册选择<br/>AI 会自动识别画中的角色</div>
+            <div class="upload-desc">支持拍照或从相册选择<br />AI 会自动识别画中的角色</div>
           </template>
         </div>
 
@@ -28,7 +30,8 @@ export default { name: 'UploadView' }
           <div class="action-btn camera" @click="pickImage('camera')">
             <camera-outlined class="action-icon" />
             <div class="action-label">拍照</div>
-            <input ref="cameraInput" type="file" accept="image/*" capture="environment" @change="onFileChange" style="display:none" />
+            <input ref="cameraInput" type="file" accept="image/*" capture="environment" @change="onFileChange"
+              style="display:none" />
           </div>
           <div class="action-btn album" @click="pickImage('album')">
             <folder-open-outlined class="action-icon" />
@@ -330,12 +333,14 @@ const goNext = async () => {
   display: flex;
   flex-direction: column;
 }
+
 .content {
   flex: 1;
   padding: 16px 20px;
   display: flex;
   flex-direction: column;
 }
+
 .upload-area {
   flex: 1;
   min-height: 280px;
@@ -350,6 +355,7 @@ const goNext = async () => {
   padding: 32px;
   transition: all 0.2s;
 }
+
 .upload-icon-wrap {
   display: inline-flex;
   align-items: center;
@@ -360,41 +366,71 @@ const goNext = async () => {
   background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1));
   margin-bottom: 18px;
 }
+
 .upload-icon {
   font-size: 36px;
   color: var(--ai-primary);
 }
+
 .uploading-icon {
   font-size: 56px;
   color: var(--ai-primary);
   animation: pulse 1.5s infinite;
 }
+
 .upload-title {
   font-size: 17px;
   font-weight: 700;
   color: var(--ai-text);
 }
+
 .upload-desc {
   font-size: 13px;
   color: var(--ai-text-sub);
   margin-top: 8px;
   line-height: 1.6;
 }
-.uploading-text { font-size: 16px; font-weight: 600; margin-top: 16px; color: var(--ai-text); }
+
-.progress-bar {
+.uploading-text {
-  width: 200px; height: 6px; background: var(--ai-border); border-radius: 3px; margin-top: 16px; overflow: hidden;
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 16px;
+  color: var(--ai-text);
 }
+
+.progress-bar {
+  width: 200px;
+  height: 6px;
+  background: var(--ai-border);
+  border-radius: 3px;
+  margin-top: 16px;
+  overflow: hidden;
+}
+
 .progress-fill {
-  width: 100%; height: 100%; background: var(--ai-gradient); border-radius: 3px;
+  width: 100%;
+  height: 100%;
+  background: var(--ai-gradient);
+  border-radius: 3px;
   animation: loading 1.5s ease-in-out infinite;
 }
-@keyframes loading { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }
+
+@keyframes loading {
+  0% {
+    transform: translateX(-100%)
+  }
+
+  100% {
+    transform: translateX(200%)
+  }
+}
 
 .action-btns {
   display: flex;
   gap: 12px;
   margin-top: 20px;
 }
+
 .action-btn {
   flex: 1;
   display: flex;
@@ -411,36 +447,76 @@ const goNext = async () => {
     background: var(--ai-gradient);
     color: #fff;
     box-shadow: 0 8px 22px rgba(99, 102, 241, 0.32);
-    .action-icon { color: #fff; }
+
-    .action-label { color: #fff; }
+    .action-icon {
-    &:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(99, 102, 241, 0.38); }
+      color: #fff;
-    &:active { transform: scale(0.98); }
+    }
+
+    .action-label {
+      color: #fff;
+    }
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 26px rgba(99, 102, 241, 0.38);
+    }
+
+    &:active {
+      transform: scale(0.98);
+    }
   }
 
   &.album {
     background: #fff;
     border: 1.5px solid rgba(99, 102, 241, 0.22);
     box-shadow: 0 2px 10px rgba(99, 102, 241, 0.06);
-    .action-icon { color: var(--ai-primary); }
+
-    .action-label { color: var(--ai-primary); }
+    .action-icon {
+      color: var(--ai-primary);
+    }
+
+    .action-label {
+      color: var(--ai-primary);
+    }
+
     &:hover {
       transform: translateY(-2px);
       border-color: var(--ai-primary);
       box-shadow: 0 6px 18px rgba(99, 102, 241, 0.14);
     }
-    &:active { transform: scale(0.98); }
+
+    &:active {
+      transform: scale(0.98);
+    }
   }
 }
-.action-icon { font-size: 26px; }
-.action-label { font-size: 15px; font-weight: 700; }
 
-.preview-card { overflow: hidden; flex: 1; }
+.action-icon {
+  font-size: 26px;
+}
+
+.action-label {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.preview-card {
+  overflow: hidden;
+  flex: 1;
+}
+
 .preview-image {
   width: 100%;
   aspect-ratio: 4/3;
   background: #f1f0f7;
-  img { width: 100%; height: 100%; object-fit: cover; }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
+
 .preview-info {
   padding: 18px;
   display: flex;
@@ -448,21 +524,32 @@ const goNext = async () => {
   justify-content: center;
   gap: 8px;
 }
-.preview-ok-icon { font-size: 18px; color: var(--ai-success); }
+
-.preview-ok-text { font-size: 14px; font-weight: 600; color: var(--ai-success); }
+.preview-ok-icon {
+  font-size: 18px;
+  color: var(--ai-success);
+}
+
+.preview-ok-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ai-success);
+}
 
 /* 识别中 */
 .recognizing-box {
-  background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(236,72,153,0.04));
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(236, 72, 153, 0.04));
   border-radius: 0 0 var(--ai-radius) var(--ai-radius);
   padding: 24px 16px;
   text-align: center;
 }
+
 .recognizing-spinner {
   font-size: 32px;
   color: var(--ai-primary);
   margin-bottom: 12px;
 }
+
 .recognizing-text {
   font-size: 14px;
   font-weight: 600;
@@ -471,8 +558,12 @@ const goNext = async () => {
 
 // 等待内容
 .waiting-content {
-  display: flex; flex-direction: column; gap: 12px; flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
 }
+
 .waiting-card {
   background: #fff;
   border: 1px solid rgba(99, 102, 241, 0.06);
@@ -480,33 +571,70 @@ const goNext = async () => {
   padding: 18px 20px;
   box-shadow: 0 4px 16px rgba(99, 102, 241, 0.06);
 }
+
 .waiting-title {
-  font-size: 15px; font-weight: 700; color: var(--ai-text); margin-bottom: 14px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--ai-text);
+  margin-bottom: 14px;
 }
-.waiting-steps { display: flex; flex-direction: column; gap: 10px; }
+
+.waiting-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 .w-step {
-  display: flex; align-items: center; gap: 10px;
+  display: flex;
-  padding: 10px 14px; border-radius: 12px;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 12px;
   background: rgba(99, 102, 241, 0.04);
-  font-size: 14px; color: var(--ai-text-sub); transition: all 0.3s;
+  font-size: 14px;
+  color: var(--ai-text-sub);
+  transition: all 0.3s;
+
   &.active {
     background: rgba(99, 102, 241, 0.1);
     color: var(--ai-text);
     font-weight: 600;
   }
 }
-.w-icon { font-size: 18px; color: var(--ai-primary); }
+
-.w-done { margin-left: auto; color: var(--ai-success); font-size: 16px; }
+.w-icon {
+  font-size: 18px;
+  color: var(--ai-primary);
+}
+
+.w-done {
+  margin-left: auto;
+  color: var(--ai-success);
+  font-size: 16px;
+}
 
 .waiting-funfact {
-  display: flex; align-items: center; gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(236, 72, 153, 0.06));
   border: 1px solid rgba(99, 102, 241, 0.08);
   border-radius: var(--ai-radius-sm);
   padding: 14px 16px;
 }
-.ff-icon { font-size: 18px; flex-shrink: 0; color: #8b5cf6; }
+
-.ff-text { font-size: 13px; color: var(--ai-text); line-height: 1.6; }
+.ff-icon {
+  font-size: 18px;
+  flex-shrink: 0;
+  color: #8b5cf6;
+}
+
+.ff-text {
+  font-size: 13px;
+  color: var(--ai-text);
+  line-height: 1.6;
+}
 
 .quota-warn {
   background: rgba(245, 158, 11, 0.1);
@@ -518,6 +646,7 @@ const goNext = async () => {
   margin-top: 12px;
   font-weight: 600;
 }
+
 .upload-error {
   color: #ef4444;
   font-size: 13px;
@@ -525,13 +654,25 @@ const goNext = async () => {
   margin-top: 12px;
   font-weight: 500;
 }
-.preview-actions { display: flex; gap: 12px; margin-top: 12px; button { flex: 1; } }
+
+.preview-actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+
+  button {
+    flex: 1;
+  }
+}
+
 .preview-next-btn {
   display: flex !important;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  :deep(.anticon) { font-size: 16px; }
-}
 
+  :deep(.anticon) {
+    font-size: 16px;
+  }
+}
 </style>