let5see/ai-write
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加项目 Logo 和优化主页

Browse Source 
- 添加 favicon.png, logo.png, hero-bg.png 静态资源
- 优化 index.html 配置
- 优化 HomePage.vue 样式

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
empty
2026-01-12 04:02:33 +08:00
parent 4212b63df2
commit 81e597ccdc
6 changed files with 88 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
index.html
View File

@@ -1,9 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 写作工坊 - 结构化生成工具</title> <title>AI 写作工坊 - 结构化生成工具</title>
<link rel="icon" type="image/png" href="/favicon.png">
<!-- 设计系统样式 --> <!-- 设计系统样式 -->
<link rel="stylesheet" href="/src/styles/design-tokens.css"> <link rel="stylesheet" href="/src/styles/design-tokens.css">
@@ -12,24 +14,75 @@
<style> <style>
/* 自定义滚动条样式，适配深色主题 */ /* 自定义滚动条样式，适配深色主题 */
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar {
::-webkit-scrollbar-track { background: #1e293b; } width: 8px;
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; } height: 8px;
::-webkit-scrollbar-thumb:hover { background: #64748b; } }
::-webkit-scrollbar-track {
background: #1e293b;
}
::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* Markdown 内容样式覆盖 */ /* Markdown 内容样式覆盖 */
.prose h1, .prose h2, .prose h3 { color: #e2e8f0; margin-top: 1.5em; margin-bottom: 0.8em; } .prose h1,
.prose p { margin-bottom: 1.2em; line-height: 1.75; color: #cbd5e1; } .prose h2,
.prose ul { list-style-type: disc; padding-left: 1.5em; margin-bottom: 1.2em; color: #cbd5e1; } .prose h3 {
.prose strong { color: #60a5fa; font-weight: 600; } color: #e2e8f0;
.prose blockquote { border-left-color: #3b82f6; background: #1e293b; padding: 0.5rem 1rem; font-style: italic; } margin-top: 1.5em;
.prose code { background: #334155; padding: 0.2em 0.4em; border-radius: 4px; font-size: 0.9em; color: #f8fafc; } margin-bottom: 0.8em;
}
[v-cloak] { display: none; } .prose p {
margin-bottom: 1.2em;
line-height: 1.75;
color: #cbd5e1;
}
.prose ul {
list-style-type: disc;
padding-left: 1.5em;
margin-bottom: 1.2em;
color: #cbd5e1;
}
.prose strong {
color: #60a5fa;
font-weight: 600;
}
.prose blockquote {
border-left-color: #3b82f6;
background: #1e293b;
padding: 0.5rem 1rem;
font-style: italic;
}
.prose code {
background: #334155;
padding: 0.2em 0.4em;
border-radius: 4px;
font-size: 0.9em;
color: #f8fafc;
}
[v-cloak] {
display: none;
}
</style> </style>
</head> </head>
<body class="bg-slate-900 text-slate-200 h-screen overflow-hidden font-sans"> <body class="bg-slate-900 text-slate-200 h-screen overflow-hidden font-sans">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 435 KiB

BIN
public/hero-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 KiB

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 435 KiB

11
src/components/GlobalSidebar.vue
View File

@@ -7,11 +7,7 @@
title="主页" title="主页"
@click="switchPage('home')" @click="switchPage('home')"
> >
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <img src="/logo.png" alt="Home" class="sidebar-logo-img">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button> </button>
<!-- 导航项 --> <!-- 导航项 -->
@@ -117,11 +113,14 @@ const switchPage = (page) => {
.sidebar-logo.active { .sidebar-logo.active {
background: var(--info-bg); background: var(--info-bg);
box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
} }
.sidebar-logo svg { .sidebar-logo-img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover;
border-radius: inherit;
} }
/* 导航区域 */ /* 导航区域 */

26
src/components/HomePage.vue
View File

@@ -13,11 +13,7 @@
<div class="hero-icon-wrapper"> <div class="hero-icon-wrapper">
<div class="hero-icon-glow"></div> <div class="hero-icon-glow"></div>
<div class="hero-icon"> <div class="hero-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <img src="/logo.png" alt="Logo" class="hero-logo-img">
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div> </div>
</div> </div>
<h1 class="hero-title">AI 写作工坊</h1> <h1 class="hero-title">AI 写作工坊</h1>
@@ -248,13 +244,17 @@ onMounted(() => {
border-radius: var(--radius-2xl); border-radius: var(--radius-2xl);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-image: url('/hero-bg.png');
background-size: cover;
background-position: center;
} }
.home-hero::before { .home-hero::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(135deg, rgba(96, 165, 250, 0.05) 0%, transparent 50%, rgba(192, 132, 252, 0.05) 100%); background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.4) 100%);
z-index: 1;
} }
.hero-content { .hero-content {
@@ -286,10 +286,18 @@ onMounted(() => {
justify-content: center; justify-content: center;
width: 80px; width: 80px;
height: 80px; height: 80px;
background: linear-gradient(135deg, var(--accent-primary), #c084fc); background: var(--glass-bg);
backdrop-filter: blur(8px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
color: white; overflow: hidden;
box-shadow: 0 10px 25px rgba(96, 165, 250, 0.4); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.hero-logo-img {
width: 100%;
height: 100%;
object-fit: cover;
} }
.hero-title { .hero-title {