style(markdown): refine SCSS styles for markdown components and enhance code block presentation

- Updated SCSS styles for markdown elements, improving visual consistency and readability.
- Enhanced the appearance of code blocks with new background colors, borders, and shadows.
- Introduced responsive design adjustments for better mobile compatibility.
- Added new styles for headings, links, and blockquotes to improve overall aesthetics.

These changes significantly enhance the user experience when interacting with markdown content, making it more visually appealing and easier to read.

app/assets/scss/markdown/green.scss

@@ -1,364 +1,356 @@
 
 @mixin chinese() {
-    &.chinese {
+  &.chinese {
-        text-indent: 1.5em;
+    text-indent: 1.5em;
-        font-weight: 300;
+    font-weight: 300;
-        h1,
+
-        h2,
+    h1,
-        h3,
+    h2,
-        h4,
+    h3,
-        h5,
+    h4,
-        h6,
+    h5,
-        ol,
+    h6,
-        ul,
+    ol,
-        blockquote,
+    ul,
-        details,
+    blockquote,
-        summary,
+    details,
-        pre,
+    summary,
-        .tabs {
+    pre,
-            text-indent: 0;
+    .tabs {
-        }
+      text-indent: 0;
     }
+  }
 }
+
 .markdown-body {
-    --color-base: #ef4444;
+  --color-base: var(--color-accent-fg);
-    --markdown-bg: transparent;
+  --color-soft-bg: color-mix(in srgb, var(--color-base) 8%, transparent);
-    --color-bg: #ff47479c;
+  --color-softer-bg: color-mix(in srgb, var(--color-base) 4%, transparent);
-    --color-light: #ef44441a;
+  --markdown-bg: color-mix(in srgb, var(--color-canvas-default) 92%, transparent);
-    --color-extra: rgba(239, 68, 68, 0.3);
+  --markdown-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
-    --color-more: rgba(239, 68, 68, 0.4);
+  --markdown-radius: 10px;
+  --markdown-padding: 1.6em;
+}
+
+.dark .markdown-body {
+  --color-fg-default: #e5e7eb;
+  --color-fg-muted: #c0c7d1;
+  --color-fg-subtle: #9ca3af;
+  --color-canvas-default: #111827;
+  --color-canvas-subtle: #1f2937;
+  --color-border-default: #374151;
+  --color-border-muted: #2c3646;
+  --color-neutral-muted: rgba(148, 163, 184, 0.25);
+  --color-accent-fg: #60a5fa;
+  --markdown-bg: color-mix(in srgb, var(--color-canvas-default) 86%, transparent);
+  --markdown-shadow: 0 10px 28px rgba(2, 6, 23, 0.28);
+  --code-bg: #0f172a;
+  --code-head-bg: #172133;
+  --code-border: #334155;
+  --code-shadow: rgba(2, 6, 23, 0.45);
 }
 
 .markdown-body.green {
-    background-color: var(--markdown-bg);
+  background-color: var(--markdown-bg);
-    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border-radius: var(--markdown-radius);
-    border-radius: 10px;
+  padding: var(--markdown-padding);
-    padding: 1.6em;
+  box-shadow: var(--markdown-shadow);
-    @media screen and (max-width: 768px) {
+  border: 1px solid color-mix(in srgb, var(--color-border-default) 72%, transparent);
-        padding: 0;
+  color: var(--color-fg-default);
-        box-shadow: none;
+  font-size: 1rem;
-    }
+  line-height: 1.9;
+  letter-spacing: 0.01em;
 
-    strong {
+  @media screen and (max-width: 768px) {
-        &::before{
+    background: transparent;
-            content: "『";
+    border: 0;
-        }
+    box-shadow: none;
-        &::after{
+    border-radius: 0;
-            content: "』";
+    padding: 0;
-        }
+    font-size: 0.98rem;
-        // color: #ff4d20;
+    line-height: 1.85;
-    }
+  }
 
-    /* 块/段落引用 */
+  p {
-    // blockquote {
+    color: var(--color-fg-default);
-    //     position: relative;
+  }
-    //     // color: #555;
+
-    //     font-weight: 400;
+  h1,
-    //     border-left: 6px solid var(--color-base);
+  h2,
-    //     padding-left: 1em;
+  h3,
-    //     margin-left: 0;
+  h4,
-    //     padding: 1em;
+  h5,
-    //     background-color: var(--color-light);
+  h6 {
-    // }
+    margin-top: 1.35em;
-
+    margin-bottom: 0.65em;
-    blockquote {
+    line-height: 1.35;
-        position: relative;
+    color: var(--color-fg-default);
-        z-index: 600;
+    scroll-margin-top: 5rem;
-        padding: 20px 20px 15px 20px;
+  }
-        line-height: 1.4 !important;
+
-        background-color: rgba(239, 68, 68, 0.06);
+  h1 {
-        border-radius: .4em;
+    font-size: 2em;
-        > * {
+  }
-            position: relative;
+
-            &:first-child:before {
+  h2 {
-              content: '\201C';
+    font-size: 1.65em;
-              color: var(--color-light);
+    padding-bottom: 0.25em;
-              font-size: 6.5em;
+    border-bottom: 1px solid var(--color-border-muted);
-              font-weight: 700;
+  }
-              transform: rotate(15deg) translateX(-10px);
+
-              opacity: 1;
+  h3 {
-              position: absolute;
+    font-size: 1.35em;
-              top: -.4em;
+  }
-              left: -.2em;    
-              text-shadow: none;
-              z-index: -10;
-            }
-          }
-    }
 
-    .tabs{
+  h4 {
-        margin-top: 0;
+    font-size: 1.15em;
-        margin-bottom: 1em;
+  }
+
+  a {
+    color: var(--color-base);
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-color: color-mix(in srgb, var(--color-base) 45%, transparent);
+    text-underline-offset: 0.18em;
+    transition: color 0.2s ease, text-decoration-color 0.2s ease;
+
+    &:hover {
+      color: color-mix(in srgb, var(--color-base) 78%, var(--color-fg-default));
+      text-decoration-color: currentColor;
     }
+  }
 
-    /* 让链接在 hover 状态下显示下划线 */
+  blockquote {
-    // a {
+    margin-left: 0;
-    //     color: var(--color-base);
+    padding: 0.95em 1.05em;
-    //     text-decoration: none;
+    border-left: 4px solid var(--color-base);
-    //     &:hover {
+    border-radius: 0.55rem;
-    //         text-decoration: underline;
+    background: var(--color-softer-bg);
-    //     }
+    color: var(--color-fg-muted);
-    // }
+  }
-    a {
+
-        position: relative;
+  hr {
-        z-index: 10;
+    height: 1px;
-        transition: color 0.3s linear;
+    margin: 1.6rem 0;
+    background: var(--color-border-muted);
+  }
+
+  img {
+    border-radius: 0.8rem;
+    border: 1px solid var(--color-border-default);
+    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
+  }
+
+  figure {
+    margin: 1.4em auto;
+  }
+
+  figcaption {
+    margin-top: 0.55rem;
+    font-size: 0.82em;
+    color: var(--color-fg-subtle);
+    text-align: center;
+  }
+
+  :not(pre) > code {
+    padding: 0.12em 0.48em;
+    margin: 0 0.12em;
+    border-radius: 0.4rem;
+    background: var(--color-soft-bg);
+    border: 1px solid color-mix(in srgb, var(--color-base) 26%, var(--color-border-default));
+    color: color-mix(in srgb, var(--color-base) 72%, var(--color-fg-default));
+    font-size: 0.92em;
+  }
+
+  pre,
+  pre code {
+    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
+  }
+
+  .code-block-wrapper {
+    margin: 1rem 0 1.25rem;
+    border: 1px solid var(--color-border-default);
+    border-radius: 0.8rem;
+    overflow: hidden;
+    background: var(--color-canvas-subtle);
+    color: var(--color-fg-default);
+    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+
+    .code-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.75rem;
+      padding: 0.55rem 0.85rem;
+      border-bottom: 1px solid var(--color-border-default);
+      background: color-mix(in srgb, var(--color-base) 7%, var(--color-canvas-subtle));
+
+      .code-lang {
+        font-size: 0.76rem;
+        font-weight: 600;
+        letter-spacing: 0.05em;
+        color: var(--color-fg-subtle);
+        text-transform: uppercase;
+      }
+
+      .copy-btn {
+        border: 1px solid var(--color-border-default);
+        background: var(--color-canvas-default);
+        color: var(--color-fg-muted);
+        border-radius: 0.45rem;
+        padding: 0.2rem 0.58rem;
+        font-size: 0.74rem;
+        line-height: 1.35;
         cursor: pointer;
-        font-weight: bolder;
+        transition: all 0.18s ease;
-        // text-decoration: underline #c7254e;
+
-        text-decoration: none;
-        color: var(--color-base);
-        border-bottom: 1px solid currentColor;
-        padding: 0 4px;
-        &[data-footnote-backref],
-        &[data-footnote-ref] {
-            // text-decoration: none;
-            border: none;
-            &:hover {
-                background: none;
-                animation: none;
-            }
-        }
         &:hover {
-            content: '';
+          border-color: var(--color-base);
-            // text-decoration: none;
+          color: var(--color-base);
-            border: none;
-            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23ff4d20' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")
-                repeat-x 0 100%;
-            background-size: 20px auto;
-            animation: waveMove 1s infinite linear;
         }
-        @keyframes waveMove {
+
-            0% {
+        &.is-copied {
-                background-position: 0 100%;
+          border-color: #22c55e;
-            }
+          color: #16a34a;
-            100% {
+          background: color-mix(in srgb, #22c55e 12%, var(--color-canvas-default));
-                background-position: -20px 100%;
-            }
         }
+      }
     }
 
     pre {
-        background: #f7f7f7;
+      margin: 0;
-        font-size: 0.95em;
+      padding: 1.05rem 1.1rem;
-        //     /* border: 1px solid #ddd; */
+      overflow-x: auto;
-        // padding: 1em 1.5em;
+      background: transparent;
-        display: block;
+      box-shadow: none;
-        -webkit-overflow-scrolling: touch;
     }
+  }
 
-    pre,
+  table {
-    pre code {
+    width: max-content;
-        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
+    min-width: 0;
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    margin: 1.2rem 0;
+    border: 1px solid color-mix(in srgb, var(--color-border-default) 88%, transparent);
+    border-radius: 0.8rem;
+    border-collapse: separate;
+    border-spacing: 0;
+    background: color-mix(in srgb, var(--color-canvas-default) 94%, transparent);
+    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
+
+    caption {
+      padding: 0.62em 0.95em;
+      text-align: left;
+      color: var(--color-fg-subtle);
+      border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 84%, transparent);
+      background: color-mix(in srgb, var(--color-canvas-subtle) 80%, transparent);
     }
 
-    //     /* 底部印刷体、版本等标记 */
+    thead th {
-    small,
+      font-weight: 600;
-        /* 图片说明 */
+      color: var(--color-fg-default);
-        figcaption {
+      background: color-mix(in srgb, var(--color-base) 12%, var(--color-canvas-default));
-        font-size: 0.75em;
+      border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 86%, transparent);
-        color: #888;
     }
-    // .markdown-body {
+
-    legend {
+    th,
-        color: #000;
+    td {
-        font-weight: inherit;
+      padding: 0.62em 0.95em;
+      white-space: nowrap;
+      border-right: 1px solid color-mix(in srgb, var(--color-border-default) 82%, transparent);
+      border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 82%, transparent);
     }
-    caption {
+
-        color: #000;
+    th:last-child,
-        font-weight: inherit;
+    td:last-child {
+      border-right: 0;
     }
-    del {
+
-        text-decoration: line-through var(--color-base) 2px;
+    tbody tr:last-child td {
+      border-bottom: 0;
     }
-    /* 行内代码：仅匹配非代码块场景，避免和 pre/code 嵌套互相覆盖 */
+
-    :not(pre) > code {
+    tbody tr:nth-child(even) td {
-        color: #d73a49;
+      background: color-mix(in srgb, var(--color-canvas-subtle) 52%, transparent);
-        background-color: rgba(160, 174, 192, 0.25);
-        font-family: inherit;
-        font-size: 1em;
-        border-radius: 4px;
-        padding: 1px 6px;
-        margin: 0 2px;
-        vertical-align: bottom;
     }
 
-    /* MarkdownIt highlight 输出的代码块容器 */
+    tbody tr:hover td {
-    .code-block-wrapper {
+      background: color-mix(in srgb, var(--color-base) 10%, var(--color-canvas-subtle));
-        margin: 1rem 0;
+    }
-        border-radius: 10px;
+  }
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-        background: #f7f7f7;
-        color: #333;
-        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
-        font-size: 0.95em;
-        line-height: 1.5;
-
-        .code-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0.6rem 1rem;
-            background: #efefef;
-
-            .code-lang {
-                font-size: 0.78rem;
-                font-weight: 600;
-                letter-spacing: 0.02em;
-                color: #64748b;
-                text-transform: uppercase;
-            }
-
-            .copy-btn {
-                border: 1px solid #d0d7de;
-                background: #fff;
-                color: #475569;
-                border-radius: 6px;
-                padding: 0.2rem 0.6rem;
-                font-size: 0.75rem;
-                line-height: 1.3;
-                cursor: pointer;
-                transition: all 0.18s ease;
-
-                &:hover {
-                    background: #f8fafc;
-                    border-color: #b8c2cc;
-                    color: #334155;
-                }
-
-                &.is-copied {
-                    background: #dcfce7;
-                    border-color: #86efac;
-                    color: #166534;
-                }
-            }
-        }
 
-        pre {
+  ul.toc li {
-            margin: 0;
+    list-style-type: none;
-            padding: 1.2rem;
-            overflow-x: auto;
-            background: transparent;
-            box-shadow: none;
-
-            code {
-                display: block;
-                padding: 0;
-                margin: 0;
-                color: inherit;
-                background: transparent;
-                border-radius: 0;
-                white-space: pre;
-            }
 
-        }
+    a {
+      border: 0;
+      text-decoration: none;
     }
-    table {
+  }
-        width: fit-content;
-        display: block;
-        max-width: 100%;
-        overflow-x: auto;
-        border: 1px solid var(--color-light);
-        border-radius: 8px;
-        border-collapse: separate;
-        border-spacing: 0;
-        margin: 1rem 0;
-        background: #fff;
-
-        caption {
-            padding: 0.6em 1em;
-            text-align: left;
-            color: var(--color-fg-subtle);
-            border-bottom: 1px solid var(--color-light);
-            background: #fff;
-        }
 
-        thead th {
+  @include chinese;
-            background: var(--color-extra);
+}
-            border-bottom: 1px solid var(--color-light);
-            font-weight: 600;
-        }
 
-        th,
+.dark .markdown-body.green {
-        td {
+  .code-block-wrapper {
-            padding: 0.55em 1em;
+    border-color: var(--code-border);
-            white-space: nowrap;
+    background: var(--code-bg);
-            border-right: 1px solid var(--color-light);
+    box-shadow: 0 10px 26px var(--code-shadow);
-            border-bottom: 1px solid var(--color-light);
-        }
 
-        th:last-child,
+    .code-header {
-        td:last-child {
+      border-bottom-color: var(--code-border);
-            border-right: 0;
+      background: var(--code-head-bg);
-        }
 
-        tbody tr:last-child td {
+      .code-lang {
-            border-bottom: 0;
+        color: #bfdbfe;
+      }
+
+      .copy-btn {
+        border-color: #475569;
+        background: #1e293b;
+        color: #cbd5e1;
+
+        &:hover {
+          border-color: #60a5fa;
+          background: #0f172a;
+          color: #93c5fd;
         }
 
-        tbody tr:hover td {
+        &.is-copied {
-            background: var(--color-light);
+          border-color: #22c55e;
+          color: #86efac;
+          background: #052e16;
         }
+      }
     }
-    h1,
+
-    h2,
+    pre {
-    h3,
+      background: transparent;
-    h4,
-    h5,
-    h6 {
-        margin-top: 1.2em;
-        margin-bottom: 0.6em;
-        line-height: 1.35;
-        position: relative;
-    }
-    h1 {
-        font-size: 1.8em;
-    }
-    h2 {
-        font-size: 1.6em;
-    }
-    h3 {
-        font-size: 1.4em;
-    }
-    h4 {
-        font-size: 1.2em;
-    }
-    h5 {
-        font-size: 1em;
     }
-    h6 {
+  }
-        font-size: 1em;
+
+  table {
+    border-color: color-mix(in srgb, var(--color-border-default) 92%, transparent);
+    background: color-mix(in srgb, var(--color-canvas-default) 90%, transparent);
+    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.26);
+
+    caption {
+      background: color-mix(in srgb, var(--color-canvas-subtle) 90%, transparent);
+      border-bottom-color: color-mix(in srgb, var(--color-border-default) 90%, transparent);
     }
 
-    ::-webkit-calendar-picker-indicator {
+    thead th {
-        filter: invert(50%);
+      background: color-mix(in srgb, var(--color-base) 18%, var(--color-canvas-subtle));
     }
-    em {
+
-        // color: #000;
+    tbody tr:nth-child(even) td {
-        font-weight: inherit;
+      background: color-mix(in srgb, var(--color-canvas-subtle) 70%, transparent);
-        position: relative;
-        &:after {
-            position: absolute;
-            top: 0.65em;
-            left: 0;
-            width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            pointer-events: none;
-            color: var(--color-base);
-            content: '・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・';
-        }
     }
-    ul.toc {
+
-        li {
+    tbody tr:hover td {
-            list-style-type: none;
+      background: color-mix(in srgb, var(--color-base) 16%, var(--color-canvas-subtle));
-            a {
-                text-decoration: none;
-                border: 0;
-                list-style-type: none;
-            }
-        }
     }
-    @include chinese;
+  }
 }

app/assets/scss/markdown/highlight.scss

@@ -51,3 +51,57 @@
         }
     }
 }
+
+.dark .markdown-body {
+    .code-block-wrapper {
+        pre {
+            code.hljs {
+                color: #e5e7eb;
+            }
+
+            .hljs-comment,
+            .hljs-quote {
+                color: #94a3b8;
+                font-style: italic;
+            }
+
+            .hljs-keyword,
+            .hljs-selector-tag,
+            .hljs-literal,
+            .hljs-section,
+            .hljs-link {
+                color: #c084fc;
+            }
+
+            .hljs-string,
+            .hljs-title,
+            .hljs-name,
+            .hljs-type,
+            .hljs-attribute,
+            .hljs-symbol,
+            .hljs-bullet,
+            .hljs-addition {
+                color: #5eead4;
+            }
+
+            .hljs-number,
+            .hljs-variable,
+            .hljs-template-variable,
+            .hljs-regexp,
+            .hljs-meta .hljs-string {
+                color: #fbbf24;
+            }
+
+            .hljs-built_in,
+            .hljs-function,
+            .hljs-class .hljs-title {
+                color: #60a5fa;
+            }
+
+            .hljs-deletion,
+            .hljs-subst {
+                color: #f87171;
+            }
+        }
+    }
+}

app/pages/@[publicSlug]/posts/[postSlug].vue

@@ -116,7 +116,7 @@ const editPostHref = computed(() =>
         {{ leadSummary }}
       </p>
       <article
-        class="prose dark:prose-invert max-w-none prose-a:text-primary prose-img:rounded-lg markdown-body green"
+        class="prose prose-neutral dark:prose-invert max-w-none prose-a:text-primary prose-img:rounded-lg prose-headings:text-highlighted prose-p:text-default prose-strong:text-highlighted markdown-body green"
         v-html="renderedBody"
       />
       <PostComments mode="public-post" :public-slug="publicSlug" :post-slug="postSlug" />

app/pages/login/index.vue

@@ -49,9 +49,8 @@ onMounted(() => {
 })
 
 const loading = ref(false)
-const resultType = ref<'success' | 'error' | ''>('')
-const resultMessage = ref('')
 const route = useRoute()
+const toast = useToast()
 const { refresh } = useAuthSession()
 const { allowRegister } = useGlobalConfig()
 const { fetchData, getApiErrorMessage } = useClientApi()
@@ -79,8 +78,6 @@ const validate = (formState: LoginFormState): FormError[] => {
 }
 
 const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
-  resultType.value = ''
-  resultMessage.value = ''
   loading.value = true
 
   try {
@@ -97,16 +94,20 @@ const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
 
     await refresh(true)
 
-    resultType.value = 'success'
+    toast.add({
-    resultMessage.value = `登录成功，欢迎 ${res.user.username}`
+      title: `登录成功，欢迎 ${res.user.username}`,
+      color: 'success',
+    })
     const redirectCandidate = Array.isArray(route.query.redirect)
       ? route.query.redirect[0]
       : route.query.redirect
     const redirectTarget = normalizeSafeRedirect(redirectCandidate, DEFAULT_AUTHENTICATED_LANDING_PATH)
     await navigateTo(redirectTarget)
   } catch (error: unknown) {
-    resultType.value = 'error'
+    toast.add({
-    resultMessage.value = getApiErrorMessage(error)
+      title: getApiErrorMessage(error),
+      color: 'error',
+    })
     try {
       await refreshCaptcha()
     } catch {
@@ -160,22 +161,28 @@ const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
         </UFormField>
 
         <UFormField label="验证码" name="captchaAnswer" required>
-          <div class="flex flex-wrap gap-2 items-center">
+          <div class="space-y-2">
-            <img
+            <div class="flex items-center gap-2">
-              v-if="captchaImageSrc"
+              <img
-              :src="captchaImageSrc"
+                v-if="captchaImageSrc"
-              alt="验证码"
+                :src="captchaImageSrc"
-              class="h-10 rounded border border-default bg-elevated shrink-0"
+                alt="验证码"
-            />
+                class="h-10 w-32 rounded border border-default bg-elevated object-cover shrink-0"
+              />
+              <div v-else class="h-10 w-32 rounded border border-default bg-elevated shrink-0" />
+              <UButton type="button" color="neutral" variant="outline" class="shrink-0" @click="refreshCaptcha">
+                看不清？换一张
+              </UButton>
+            </div>
             <UInput
               v-model="state.captchaAnswer"
               placeholder="请输入图中字符"
-              class="flex-1 min-w-[8rem]"
+              class="w-full"
               autocomplete="off"
             />
-            <UButton type="button" color="neutral" variant="outline" class="shrink-0" @click="refreshCaptcha">
+            <p class="text-xs text-muted">
-              换一张
+              请先识别图片字符再输入，不区分大小写。
-            </UButton>
+            </p>
           </div>
         </UFormField>
 
@@ -184,14 +191,6 @@ const onSubmit = async (_event: FormSubmitEvent<LoginFormState>) => {
         </UButton>
       </UForm>
 
-      <UAlert
-        v-if="resultType"
-        :color="resultType === 'success' ? 'success' : 'error'"
-        :title="resultType === 'success' ? '操作成功' : '操作失败'"
-        :description="resultMessage"
-        class="mt-4"
-      />
-
       <div v-if="allowRegister" class="mt-4 flex items-center justify-center text-sm">
         <NuxtLink to="/register" class="text-primary hover:underline">
           没有账号？去注册

app/pages/register/index.vue

@@ -155,22 +155,28 @@ const onSubmit = async (_event: FormSubmitEvent<RegisterFormState>) => {
         </UFormField>
 
         <UFormField label="验证码" name="captchaAnswer" required>
-          <div class="flex flex-wrap gap-2 items-center">
+          <div class="space-y-2">
-            <img
+            <div class="flex items-center gap-2">
-              v-if="captchaImageSrc"
+              <img
-              :src="captchaImageSrc"
+                v-if="captchaImageSrc"
-              alt="验证码"
+                :src="captchaImageSrc"
-              class="h-10 rounded border border-default bg-elevated shrink-0"
+                alt="验证码"
-            />
+                class="h-10 w-32 rounded border border-default bg-elevated object-cover shrink-0"
+              />
+              <div v-else class="h-10 w-32 rounded border border-default bg-elevated shrink-0" />
+              <UButton type="button" color="neutral" variant="outline" class="shrink-0" @click="refreshCaptcha">
+                看不清？换一张
+              </UButton>
+            </div>
             <UInput
               v-model="state.captchaAnswer"
               placeholder="请输入图中字符"
-              class="flex-1 min-w-[8rem]"
+              class="w-full"
               autocomplete="off"
             />
-            <UButton type="button" color="neutral" variant="outline" class="shrink-0" @click="refreshCaptcha">
+            <p class="text-xs text-muted">
-              换一张
+              请先识别图片字符再输入，不区分大小写。
-            </UButton>
+            </p>
           </div>
         </UFormField>