style: 精简并居中登录页品牌区

design-qa.md

@@ -132,6 +132,22 @@ Chat and group timelines now use the reference cool blue-gray conversation canva
 
 final result: passed
 
+## Mobile login simplification pass
+
+- Source visual truth: the four user browser annotations attached in the current turn, captured at 542 × 788 and marking the product wordmark, brand block, login copy, and footer note.
+- Browser-rendered implementation: `/tmp/hermes-yaoyao-login-centered-542x788.jpg`, 542 × 788 CSS viewport, light theme, anonymous/error login state.
+- Density normalization: source and implementation use the same CSS viewport; implementation capture is 542 × 788 pixels at density 1.
+- Full-view comparison: the 72px AppIcon is centered over the form, the product wordmark is absent, “登录 Hermes” is centered, and both requested small-copy regions are removed.
+- Focused evidence: DOM measurements report panel center `271px` and Logo center `271px`; heading `text-align: center`; `.brand-mark__name`, `.login-copy p`, and `.login-note` counts are all `0`; no horizontal overflow and no console errors/warnings.
+- Fonts and typography: the existing UI font, 18px/630 login heading, and compact form hierarchy are preserved.
+- Spacing and layout rhythm: the centered brand-to-heading gap is 34px; form alignment and control sizing remain unchanged.
+- Colors and visual tokens: existing neutral canvas, form surfaces, error state, and theme control remain unchanged.
+- Image quality and asset fidelity: the original mobile AppIcon is retained at native proportions with no replacement asset.
+- Copy and content: “夭夭 Web”, the 9119 explanatory subtitle, and the credential-storage footer note are removed exactly as annotated.
+- No actionable P0/P1/P2 findings.
+
+final result: passed
+
 ## File-card scale pass
 
 - Source visual truth: current `yaoyao-webui` file-library implementation and user screenshot, using 220px minimum cards, 154px previews, 36px type icons, 13px titles, and 11px metadata.

src/client/views/LoginView.vue

@@ -34,10 +34,9 @@ async function login() {
     </button>
     <div class="login-atmosphere" aria-hidden="true"><i /><i /><i /></div>
     <section class="login-panel" aria-labelledby="login-title">
-      <BrandMark :size="72" label />
+      <BrandMark :size="72" />
       <div class="login-copy">
         <h1 id="login-title">登录 Hermes</h1>
-        <p>使用 9119 Gateway 的现有账号继续。</p>
       </div>
       <form @submit.prevent="login">
         <label><span>账号</span><input v-model="username" name="username" autocomplete="username" autofocus required placeholder="用户名" /></label>
@@ -48,7 +47,6 @@ async function login() {
           <span>{{ submitting ? '正在登录…' : '登录' }}</span><AppIcon v-if="!submitting" name="arrow-up" :size="15" />
         </button>
       </form>
-      <p class="login-note"><span class="status-dot" />凭据只发送到当前 8800 服务，不会写入浏览器存储。</p>
     </section>
   </main>
 </template>
@@ -57,14 +55,13 @@ async function login() {
 .login-view { position: relative; display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; padding: 24px; background: var(--canvas); }
 .theme-button { position: absolute; z-index: 3; top: max(15px, env(safe-area-inset-top)); right: 16px; }
 .login-atmosphere { position: absolute; inset: 0; pointer-events: none; opacity: .75; }.login-atmosphere i { position: absolute; display: block; border: 1px solid var(--line); border-radius: 50%; }.login-atmosphere i:nth-child(1) { width: 520px; height: 520px; top: -360px; left: -180px; }.login-atmosphere i:nth-child(2) { width: 310px; height: 310px; right: -190px; bottom: -170px; }.login-atmosphere i:nth-child(3) { width: 3px; height: 3px; top: 22%; right: 18%; border: 0; background: var(--text-muted); box-shadow: -80px 160px 0 var(--line-strong), 90px 270px 0 var(--line-strong), -900px 340px 0 var(--line-strong); }
-.login-panel { position: relative; z-index: 2; width: min(368px, 100%); animation: login-enter 360ms var(--ease-out) both; }.login-panel :deep(.brand-mark) { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }.login-panel :deep(.brand-mark__name) { font-size: 25px; }
-.login-copy { margin: 38px 0 22px; }.login-copy h1 { margin: 0; font-size: 18px; font-weight: 630; letter-spacing: -.03em; }.login-copy p { margin: 6px 0 0; color: var(--text-muted); font-size: 11px; }
+.login-panel { position: relative; z-index: 2; width: min(368px, 100%); animation: login-enter 360ms var(--ease-out) both; }.login-panel :deep(.brand-mark) { display: flex; justify-content: center; width: 100%; }
+.login-copy { margin: 34px 0 22px; text-align: center; }.login-copy h1 { margin: 0; font-size: 18px; font-weight: 630; letter-spacing: -.03em; }
 form { display: flex; flex-direction: column; gap: 13px; } label { display: flex; flex-direction: column; gap: 6px; color: var(--text-secondary); font-size: 10px; } label span { display: flex; justify-content: space-between; } label small { color: var(--text-muted); font-weight: 400; }
 input { width: 100%; height: 43px; padding: 0 11px; border: 1px solid var(--line); border-radius: 11px; outline: 0; background: var(--surface-raised); color: var(--text-primary); font-size: 13px; transition: border-color 140ms ease, box-shadow 140ms ease; } input::placeholder { color: var(--text-muted); } input:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--focus-ring); }
 .provider { margin-top: 1px; }.provider input { height: 37px; background: var(--surface-soft); font-size: 11px; }
 .login-error { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 8px 9px; border-radius: 9px; background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); font-size: 10px; line-height: 1.5; }
 .login-submit { justify-content: space-between; width: 100%; height: 43px; margin-top: 3px; padding: 0 12px 0 15px; }.login-submit .app-icon { transform: rotate(45deg); }
-.login-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0 0; color: var(--text-muted); font-size: 9px; line-height: 1.5; text-align: center; }.login-note .status-dot { width: 5px; height: 5px; background: var(--success); }
 @keyframes login-enter { from { opacity: 0; transform: translateY(10px); } }
-@media (max-width: 480px) { .login-view { place-items: start center; padding: max(74px, calc(env(safe-area-inset-top) + 58px)) 22px 24px; overflow-y: auto; }.login-panel :deep(.brand-mark__plate) { width: 64px !important; height: 64px !important; }.login-copy { margin-top: 30px; } }
+@media (max-width: 480px) { .login-view { place-items: start center; padding: max(74px, calc(env(safe-area-inset-top) + 58px)) 22px 24px; overflow-y: auto; }.login-panel :deep(.brand-mark__plate) { width: 64px !important; height: 64px !important; }.login-copy { margin-top: 28px; } }
 </style>