diff --git a/frontend/src/views/public/create/views/EditInfoView.vue b/frontend/src/views/public/create/views/EditInfoView.vue
index e723b85..a6c9099 100644
--- a/frontend/src/views/public/create/views/EditInfoView.vue
+++ b/frontend/src/views/public/create/views/EditInfoView.vue
@@ -25,14 +25,8 @@ export default { name: 'EditInfoView' }
作者署名
必填
-
+
{{ authorError }}
@@ -46,12 +40,7 @@ export default { name: 'EditInfoView' }
副标题
选填
-
+
{{ form.subtitle.length }}/20
@@ -64,13 +53,7 @@ export default { name: 'EditInfoView' }
选填
{{ form.intro.length }}/250
-
+
@@ -92,27 +75,15 @@ export default { name: 'EditInfoView' }
-
+
@@ -28,7 +30,8 @@ export default { name: 'UploadView' }
@@ -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 {
- width: 200px; height: 6px; background: var(--ai-border); border-radius: 3px; margin-top: 16px; overflow: hidden;
+
+.uploading-text {
+ 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; }
- &:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(99, 102, 241, 0.38); }
- &:active { transform: scale(0.98); }
+
+ .action-icon {
+ color: #fff;
+ }
+
+ .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;
- padding: 10px 14px; border-radius: 12px;
+ display: flex;
+ 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;
+ }
+}