feat: 全站统一横版锁标(官网页头 + 管理端登录页改用 logo.svg)
## 背景 上一提交把官网页头换成了**方形**品牌图标(favicon.svg)+ 文字 span, 用户指出仓库里本就有**横版带字样**的锁标 —— 确实有: `logo/纯色横向.svg`(12.4KB)与 `logo/纯色横向@2x.png`(74.7KB)。 **重要发现**:`logo/纯色横向@2x.png` 与 `software/web/public/logo.png` **是同一个文件**(SHA256 均为 `8E40298E…`、76523 B、3025×829)—— 即管理端登录页早就在用这套设计,只是 PNG 拷贝,且我此前没认出来。 ## 改动 新增 `logo.svg`(由 `logo/纯色横向.svg` 机械变换,**渲染零差异**): 1. `<style>` 的 class 上色 → 内联 `fill`(14 处); 2. 中文 id(`图层_2`/`图层_1-2`)→ ASCII;`data-name` 元数据删除; 3. 删 `<style>` 与空掉的 `<defs>`;加 `<title>`。 > 该 SVG 的 `<text>` 元素数为 **0** —— "艾动智能"字样**已转为路径**, > 无字体依赖,任何环境渲染都一致。 落点: | 位置 | 改动 | |---|---| | `deploy/landing/logo.svg` | 新增;官网页头 `<img src="logo.svg">` | | `deploy/landing/index.html` | 删掉 `<span class="top-name">`(字样已在锁标里,否则重复)及失效的 `.top-name` CSS | | `software/web/public/logo.svg` | 新增;`Login.tsx` 由 `logo.png` 改指 `logo.svg` | | `software/web/public/logo.png` | **删除**(全仓已无引用,74.7KB 死文件) | ## 渲染等价验证 resvg 逐像素比对(600×164):**393600 字节零差异**。 ## 实测(发布后打真实 URL) ``` 200 21.1KB app.anzhizhichong.com/favicon.svg (tab 图标,方形变体) 200 12.3KB app.anzhizhichong.com/logo.svg (官网页头) 200 12.3KB app.anzhizhichong.com/pms/logo.svg (管理端登录页·生产) 200 12.3KB test.anzhizhichong.com/pms/logo.svg (管理端登录页·测试) 200 21.1KB test.anzhizhichong.com/pms/favicon.svg ``` 三处 logo.svg 均确认含 `<title>艾动智能</title>` 与 `fill="#0366e6"` 路径。 ## 一个差点误判的"异常" `/pms/logo.png` 返回 **HTTP 200**,一度以为旧文件没删掉。 实测其 `Content-Type` 是 **`text/html`**、0.47KB(内容是 index.html)—— nginx `location /pms/` 配了 `try_files $uri $uri/ /pms/index.html`(SPA 回退), **任何**不存在路径都返回 200。对照测试:访问一个肯定不存在的 `/pms/definitely-not-exist-xyz.png` 同样 200 + index.html。 服务器目录实测已无 `logo.png`。**是 404 的预期写错了,不是文件没删。** ## 验收 - `npm run typecheck`:exit 0 - `npm run build`:exit 0,产物仅 `logo.svg`(12.3KB,无 logo.png) - 已发布:生产(web + 官网)、测试(web) - 生产 0 ERROR、域名 401/200;nginx `nginx -t` 通过后 reload
This commit is contained in:
parent
8df2c0c7a0
commit
318501d6e7
@ -37,13 +37,12 @@ a { color: inherit; text-decoration: none; }
|
|||||||
|
|
||||||
.top-brand { display: flex; align-items: center; gap: 8px; }
|
.top-brand { display: flex; align-items: center; gap: 8px; }
|
||||||
.logo {
|
.logo {
|
||||||
|
/* 横版锁标 1511.75x413.59(≈3.65:1):48px 高 ⇒ 约 175px 宽,
|
||||||
|
锁标内部的"艾动智能"字样约 24px,与页头原有文字观感一致 */
|
||||||
height: 48px;
|
height: 48px;
|
||||||
width: auto;
|
width: auto;
|
||||||
display: block;
|
display: block;
|
||||||
/* 品牌图标是满幅方形(本身无圆角),48px 下加一点圆角更像 app 图标,不至于是一块硬方块 */
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
.top-name { font-size: 24px; font-weight: 800; color: #1A1C20; letter-spacing: 0.02em; }
|
|
||||||
|
|
||||||
.top-links { display: flex; gap: 8px; }
|
.top-links { display: flex; gap: 8px; }
|
||||||
.top-link {
|
.top-link {
|
||||||
@ -165,9 +164,9 @@ h1 .accent { color: #2563EB; }
|
|||||||
<!-- 上:顶部导航 -->
|
<!-- 上:顶部导航 -->
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="top-brand">
|
<div class="top-brand">
|
||||||
<!-- 页头品牌图标:与 favicon 同一个文件(logo/favicon.svg),保证全站一致 -->
|
<!-- 横版锁标(图标 + "艾动智能"字样,文字已转为路径、无字体依赖)。
|
||||||
<img class="logo" src="favicon.svg" alt="艾动智能">
|
与 tab 图标同源:logo/纯色横向.svg → favicon 用其方形变体 -->
|
||||||
<span class="top-name">艾动智能</span>
|
<img class="logo" src="logo.svg" alt="艾动智能">
|
||||||
</div>
|
</div>
|
||||||
<div class="top-links">
|
<div class="top-links">
|
||||||
<a href="/doc/" class="top-link">开发文档</a>
|
<a href="/doc/" class="top-link">开发文档</a>
|
||||||
|
|||||||
2
deploy/landing/logo.svg
Normal file
2
deploy/landing/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
2
software/web/public/logo.svg
Normal file
2
software/web/public/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
@ -1,4 +1,4 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useAuthStore } from '@/stores/auth';
|
import { useAuthStore } from '@/stores/auth';
|
||||||
import { api } from '@/api/request';
|
import { api } from '@/api/request';
|
||||||
@ -125,7 +125,9 @@ export default function Login() {
|
|||||||
border: '1px solid #e2e8f0',
|
border: '1px solid #e2e8f0',
|
||||||
}}>
|
}}>
|
||||||
<div style={{ textAlign: 'center', marginBottom: 32 }}>
|
<div style={{ textAlign: 'center', marginBottom: 32 }}>
|
||||||
<img src="/pms/logo.png" alt="艾动智能" style={{ height: 40, display: 'block', margin: '0 auto' }} />
|
{/* 横版锁标:与官网页头同源(logo/纯色横向.svg)。用 SVG 而非 PNG 拷贝,
|
||||||
|
矢量更锐利,且 12KB vs 76KB */}
|
||||||
|
<img src="/pms/logo.svg" alt="艾动智能" style={{ height: 40, display: 'block', margin: '0 auto' }} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form onSubmit={handleLoginClick} autoComplete="off">
|
<form onSubmit={handleLoginClick} autoComplete="off">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user