feature: add website logo

3238f139 · fisherdaddy · f819fc58 · 3238f139 · 3238f139 · 3238f139
Commit 3238f139 authored Sep 10, 2024 by fisherdaddy
8 changed files
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
    <meta name="description" content="AI工具箱 - 您的智能助手集合" />
    <title>AI工具箱 | 智能助手集合</title>
    <link rel="stylesheet" href="/src/styles/main.css" />
-    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  </head>
  <body>

--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import LanguageSelector from './LanguageSelector';
 import { useTranslation } from '../js/i18n';
 import '../styles/Header.css'; // 确保创建并导入这个CSS文件
+// 导入 logo 图片
+import logo from '../assets/logo.png'; // 请确保路径正确

 function Header() {
  const { t } = useTranslation();
@@ -10,9 +12,12 @@ function Header() {
  return (
    <header>
      <nav>
-        <Link to="/" className="logo no-underline">
+        <div className="logo-title-container">
+          <img src={logo} alt="Logo" className="logo" />
+          <Link to="/" className="title no-underline">
            {t('title')}
          </Link>
+        </div>
        <LanguageSelector />
      </nav>
    </header>

--- a/src/js/i18n.js
+++ b/src/js/i18n.js
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';

 const i18n = {
  zh: {
-    title: 'AI工具箱',
+    title: 'AI 工具箱',
    slogan: '您的智能助手集合，一站式解决各种AI需求。',
    searchPlaceholder: '搜索工具...',
    tools: {

--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -14,6 +14,7 @@ function Home() {
  return (
    <div>
      <section className="hero">
+        {/* 添加 logo */}
        <h1>{t('title')}</h1>
        <p className="slogan">{t('slogan')}</p>
      </section>

--- a/src/styles/Header.css
+++ b/src/styles/Header.css
@@ -6,3 +6,26 @@
 .no-underline:hover {
  text-decoration: none; /* 确保悬停时也不会出现下划线 */
 }
+
+.logo {
+    width: 40px; /* 调整为适合你的 logo 大小 */
+    height: auto;
+    margin-right: 10px;
+}
+
+.title {
+  font-size: 1.5rem; /* 调整为适合你的设计 */
+  white-space: nowrap;
+}
+
+header nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+.logo-title-container {
+  display: flex;
+  align-items: center;
+}
\ No newline at end of file
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -52,12 +52,6 @@ nav {
  width: 100%;
 }

-.logo {
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: var(--primary-color);
-}
-
 main {
  max-width: 1200px;
  width: 100%;