EasyFlow-Tech-Dev/EasyFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新管理端品牌 Logo 体系

Browse Source 
- 替换主标、暗色主标、收起图标、单色版与 favicon 资源

- 新增暗色收起图标接入能力，补齐公共 logo 配置回退链路

- 增加品牌预览页，集中展示浅色、黑场和应用场景效果
This commit is contained in:
陈子默
2026-03-07 20:59:46 +08:00
parent a93f7ca216
commit 887718d255
13 changed files with 835 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

549
easyflow-ui-admin/app/public/brand-logo-preview.html Normal file
View File

@@ -0,0 +1,549 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EasyFlow Logo Preview</title>
<style>
:root {
color-scheme: light;
--bg: #f4f7fb;
--panel: rgba(255, 255, 255, 0.92);
--panel-dark: #0b0d10;
--panel-mid: #11161d;
--ink: #131a25;
--muted: #5b6777;
--line: rgba(16, 24, 40, 0.08);
--line-dark: rgba(255, 255, 255, 0.08);
--brand: #0b6fd3;
--accent: #18b8d9;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family:
"SF Pro Display",
"PingFang SC",
"Segoe UI",
system-ui,
sans-serif;
background:
radial-gradient(circle at top left, rgba(11, 111, 211, 0.12), transparent 32%),
radial-gradient(circle at top right, rgba(0, 201, 255, 0.12), transparent 28%),
var(--bg);
color: var(--ink);
}
.page {
max-width: 1320px;
margin: 0 auto;
padding: 48px 32px 64px;
}
.hero {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 24px;
margin-bottom: 24px;
}
.card {
border: 1px solid var(--line);
border-radius: 24px;
background: var(--panel);
backdrop-filter: blur(16px);
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
}
.hero-main {
padding: 40px;
}
.hero-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(11, 111, 211, 0.08);
color: var(--brand);
font-size: 13px;
font-weight: 600;
}
.hero h1 {
margin: 20px 0 12px;
font-size: 40px;
line-height: 1.08;
letter-spacing: -0.03em;
}
.hero p {
margin: 0;
max-width: 720px;
color: var(--muted);
font-size: 16px;
line-height: 1.7;
}
.hero-logo {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
.hero-logo img:first-child {
width: 240px;
}
.hero-side {
padding: 28px;
background:
linear-gradient(160deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.08)),
var(--panel);
}
.meta-list {
display: grid;
gap: 16px;
}
.meta-item {
padding: 16px 18px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(16, 24, 40, 0.05);
}
.meta-item strong {
display: block;
font-size: 14px;
margin-bottom: 6px;
}
.meta-item span {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.section {
margin-top: 24px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: end;
gap: 16px;
margin-bottom: 16px;
}
.section-header h2 {
margin: 0;
font-size: 22px;
letter-spacing: -0.02em;
}
.section-header p {
margin: 0;
color: var(--muted);
font-size: 14px;
}
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.sample {
padding: 28px;
min-height: 180px;
}
.sample h3 {
margin: 0 0 10px;
font-size: 15px;
}
.sample p {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.6;
color: var(--muted);
}
.surface-light {
background: linear-gradient(180deg, #ffffff, #f8fbff);
}
.surface-soft {
background:
linear-gradient(180deg, rgba(11, 111, 211, 0.08), rgba(24, 184, 217, 0.03)),
#ffffff;
}
.surface-dark,
.surface-black {
color: #f8fafc;
}
.surface-dark {
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 28%),
linear-gradient(160deg, #151a20, #090b0e);
border-color: var(--line-dark);
}
.surface-black {
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 30%),
linear-gradient(180deg, #060708, #111317);
border-color: var(--line-dark);
}
.surface-dark p,
.surface-black p {
color: rgba(248, 250, 252, 0.74);
}
.logo-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.logo-row img {
display: block;
}
.mini-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.mini-tile {
padding: 20px;
border-radius: 20px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.88);
text-align: center;
}
.mini-tile.dark {
background: var(--panel-mid);
border-color: var(--line-dark);
color: #f8fafc;
}
.mini-tile span {
display: block;
margin-top: 12px;
font-size: 13px;
color: var(--muted);
}
.mini-tile.dark span {
color: rgba(248, 250, 252, 0.68);
}
.app-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.app-shell {
overflow: hidden;
border-radius: 24px;
border: 1px solid var(--line);
background: #ffffff;
}
.app-shell.dark {
border-color: var(--line-dark);
background: #0b0d10;
}
.topbar {
height: 72px;
display: flex;
align-items: center;
padding: 0 24px;
border-bottom: 1px solid rgba(16, 24, 40, 0.06);
background: rgba(255, 255, 255, 0.84);
}
.app-shell.dark .topbar {
border-bottom-color: rgba(255, 255, 255, 0.08);
background: rgba(17, 19, 23, 0.96);
}
.app-body {
display: grid;
grid-template-columns: 104px 1fr;
min-height: 320px;
}
.sidebar {
padding: 24px 20px;
border-right: 1px solid rgba(16, 24, 40, 0.06);
background: linear-gradient(180deg, #f9fbfd, #f2f6fb);
}
.app-shell.dark .sidebar {
border-right-color: rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, #0b0d10, #12161d);
}
.content {
padding: 24px;
background:
radial-gradient(circle at top right, rgba(11, 111, 211, 0.06), transparent 26%),
#f5f7fb;
}
.app-shell.dark .content {
background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 28%),
#11151b;
}
.placeholder {
height: 56px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.74);
border: 1px solid rgba(16, 24, 40, 0.05);
}
.placeholder + .placeholder {
margin-top: 12px;
}
.app-shell.dark .placeholder {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.06);
}
.loading-demo {
display: grid;
place-items: center;
min-height: 320px;
padding: 24px;
background:
radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 30%),
linear-gradient(180deg, #0b0d10, #11151b);
}
.loading-card {
width: min(340px, 100%);
text-align: center;
}
.loading-card img {
width: 190px;
}
.loading-copy {
margin-top: 20px;
color: rgba(248, 250, 252, 0.88);
font-size: 16px;
}
.loading-bar {
margin-top: 18px;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
}
.loading-bar::after {
content: "";
display: block;
width: 62%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #7a8593, #eef2f7);
}
@media (max-width: 960px) {
.page {
padding: 24px 16px 40px;
}
.hero,
.grid,
.mini-grid,
.app-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 32px;
}
}
</style>
</head>
<body>
<main class="page">
<section class="hero">
<article class="card hero-main">
<span class="hero-kicker">Brand refresh / 流动有序</span>
<h1>EasyFlow 全新品牌 Logo 方案</h1>
<p>
基于“双水流交汇”图形重构为一套完整品牌系统。浅色模式保留清透的流序蓝与蓝青层次，
暗色模式改为石墨黑语义，避免深蓝底在深色工作台中显得发闷或过重。
</p>
<div class="hero-logo">
<img src="./logo.svg" alt="EasyFlow 主标" />
<img src="./logoMini.svg" alt="EasyFlow 图标" width="52" height="52" />
</div>
</article>
<aside class="card hero-side">
<div class="meta-list">
<div class="meta-item">
<strong>图形语义</strong>
<span>上下两股水流盘绕汇聚，表达流转、协作、承接与闭环。</span>
</div>
<div class="meta-item">
<strong>浅色方案</strong>
<span>使用蓝到蓝青的连续渐变，延续 EasyFlow 的“流序蓝”识别。</span>
</div>
<div class="meta-item">
<strong>暗色方案</strong>
<span>以黑场和冷灰高光表达深色工作台，不再使用深蓝底主标。</span>
</div>
<div class="meta-item">
<strong>适配场景</strong>
<span>侧栏、顶栏、加载页、浏览器标签页、折叠图标、单色输出全部可用。</span>
</div>
</div>
</aside>
</section>
<section class="section">
<div class="section-header">
<h2>主标系统</h2>
<p>完整锁定不同表面层和导出场景</p>
</div>
<div class="grid">
<article class="card sample surface-light">
<h3>浅色主标</h3>
<div class="logo-row">
<img src="./logo.svg" alt="浅色主标" width="220" />
</div>
<p>主图标保留水流清透感，适合默认后台、白底文档、浅色导航头部。</p>
</article>
<article class="card sample surface-black">
<h3>暗色主标</h3>
<div class="logo-row">
<img src="./logoDark.svg" alt="暗色主标" width="220" />
</div>
<p>暗色版本切换到石墨黑场景语言，图形用冷灰渐层保留细节，不走深蓝底。</p>
</article>
<article class="card sample surface-soft">
<h3>深墨单色版</h3>
<div class="logo-row">
<img src="./logoMono.svg" alt="单色主标" width="220" />
</div>
<p>适合印刷、低彩物料、水印或不允许彩色渐变的系统场景。</p>
</article>
<article class="card sample surface-dark">
<h3>反白单色版</h3>
<div class="logo-row">
<img src="./logoMonoLight.svg" alt="反白单色主标" width="220" />
</div>
<p>适合纯黑背景、封面图、启动页或视频压字等高对比使用环境。</p>
</article>
</div>
</section>
<section class="section">
<div class="section-header">
<h2>图标矩阵</h2>
<p>适配收起侧栏、小尺寸入口和 favicon</p>
</div>
<div class="mini-grid">
<article class="mini-tile">
<img src="./logoMini.svg" alt="彩色图标" width="52" height="52" />
<span>彩色图标</span>
</article>
<article class="mini-tile dark">
<img src="./logoMiniDark.svg" alt="暗色图标" width="52" height="52" />
<span>暗色图标</span>
</article>
<article class="mini-tile">
<img src="./favicon.svg" alt="Favicon" width="52" height="52" />
<span>Favicon</span>
</article>
<article class="mini-tile dark">
<img src="./logoMonoLight.svg" alt="反白锁标" width="140" />
<span>纯黑背景压字</span>
</article>
</div>
</section>
<section class="section">
<div class="section-header">
<h2>应用场景模拟</h2>
<p>直接对齐当前管理端的顶栏、侧栏和加载页使用方式</p>
</div>
<div class="app-grid">
<article class="app-shell">
<div class="topbar">
<img src="./logo.svg" alt="浅色界面主标" width="180" />
</div>
<div class="app-body">
<aside class="sidebar">
<img src="./logoMini.svg" alt="浅色收起图标" width="34" height="34" />
</aside>
<section class="content">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</section>
</div>
</article>
<article class="app-shell dark">
<div class="topbar">
<img src="./logoDark.svg" alt="暗色界面主标" width="180" />
</div>
<div class="app-body">
<aside class="sidebar">
<img src="./logoMiniDark.svg" alt="暗色收起图标" width="34" height="34" />
</aside>
<section class="content">
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
</section>
</div>
</article>
<article class="card loading-demo">
<div class="loading-card">
<img src="./logoDark.svg" alt="加载页主标" />
<div class="loading-copy">正在启动您的 AI 平台...</div>
<div class="loading-bar"></div>
</div>
</article>
<article class="card sample surface-light">
<h3>品牌判断摘要</h3>
<p>这套方案保持了 EasyFlow 的蓝系品牌识别，但把深色场景从“蓝底发光”调整为“黑场承托”，更接近现代工作台而不是传统科技后台。</p>
<p>如果你后续要继续扩展到登录页、官网、海报或 PPT，这一套资产也已经具备横版、图标版、单色版和黑场版的延展基础。</p>
</article>
</div>
</section>
</main>
</body>
</html>