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>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 写作工坊 - 结构化生成工具</title>
<link rel="icon" type="image/png" href="/favicon.png">
<!-- 设计系统样式 -->
<link rel="stylesheet" href="/src/styles/design-tokens.css">
@@ -12,24 +14,75 @@
<style>
/* 自定义滚动条样式，适配深色主题 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1e293b;
}
::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* Markdown 内容样式覆盖 */
.prose h1, .prose h2, .prose h3 { color: #e2e8f0; margin-top: 1.5em; margin-bottom: 0.8em; }
.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; }
.prose h1,
.prose h2,
.prose h3 {
color: #e2e8f0;
margin-top: 1.5em;
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>
</head>
<body class="bg-slate-900 text-slate-200 h-screen overflow-hidden font-sans">
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</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="主页"
@click="switchPage('home')"
>
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
<img src="/logo.png" alt="Home" class="sidebar-logo-img">
</button>
<!-- 导航项 -->
@@ -117,11 +113,14 @@ const switchPage = (page) => {
.sidebar-logo.active {
background: var(--info-bg);
box-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
}
.sidebar-logo svg {
.sidebar-logo-img {
width: 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-glow"></div>
<div class="hero-icon">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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>
<img src="/logo.png" alt="Logo" class="hero-logo-img">
</div>
</div>
<h1 class="hero-title">AI 写作工坊</h1>
@@ -248,13 +244,17 @@ onMounted(() => {
border-radius: var(--radius-2xl);
position: relative;
overflow: hidden;
background-image: url('/hero-bg.png');
background-size: cover;
background-position: center;
}
.home-hero::before {
content: '';
position: absolute;
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 {
@@ -286,10 +286,18 @@ onMounted(() => {
justify-content: center;
width: 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);
color: white;
box-shadow: 0 10px 25px rgba(96, 165, 250, 0.4);
overflow: hidden;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.hero-logo-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-title {