refactor: change project logo and update readme.md

d3george · d3george · commit f9563f58d473 · 2024-04-11T19:46:27.000+08:00
diff --git a/README.md b/README.md
@@ -1,8 +1,11 @@
 <div align="center"> 
 <br> 
 <br>
-<h1>Slash Admin 
-</h1>
+<img src="./src/assets/images/logo.png" height="140" />
+<h1> Slash Admin </h1>
+<p style="font-size: 14px">
+  Slash Admin is a modern admin dashboard template built with React 18, Vite, Ant Design, and TypeScript. It is designed to help developers quickly create powerful admin management systems.
+</p>
 </div>
 
 **English** | [中文](./README.zh-CN.md)
@@ -13,9 +16,6 @@
   <img style="width:300px" src="https://d3george.github.io/github-static/pay/buymeacoffee.png" />
 </div>
 
-## Introduction
-Slash Admin is a modern admin dashboard template built with React 18, Vite, Ant Design, and TypeScript. It is designed to help developers quickly create powerful admin management systems.
-
 ## Preview
 + https://admin.slashspaces.com/
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -1,8 +1,12 @@
 <div align="center"> 
 <br> 
 <br>
-<h1>Slash Admin 
-</h1>
+<img src="./src/assets/images/logo.png" height="140" />
+<h1> Slash Admin </h1>
+<span style="font-size: 14px">
+  Slash Admin 是一款现代化的后台管理模板，基于 React 18、Vite、Ant Design 和 TypeScript 构建。它旨在帮助开发人员快速搭建功能强大的后台管理系统。
+</span>
+
 </div>
 
 **中文** | [English](./README.md)
@@ -13,9 +17,6 @@
   <img style="width:300px" src="https://d3george.github.io/github-static/pay/buymeacoffee.png" />
 </div>
 
-## 简介
-
-Slash Admin 是一个现代化的后台管理模板，基于 React 18、Vite、Ant Design 和 TypeScript 构建。它旨在帮助开发人员快速搭建功能强大的后台管理系统。
 
 ## 预览
 + https://admin.slashspaces.com/
diff --git a/index.html b/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Slash Admin</title>
   </head>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,7 @@
 import { App as AntdApp } from 'antd';
+import { Helmet } from 'react-helmet-async';
 
+import Logo from '@/assets/images/logo.png';
 import Router from '@/router/index';
 import AntdConfig from '@/theme/antd';
 
@@ -10,6 +12,11 @@ function App() {
     <AntdConfig>
       <AntdApp>
         <MotionLazy>
+          <Helmet>
+            <title>Slash Admin</title>
+            <link rel="icon" href={Logo} />
+          </Helmet>
+
           <Router />
         </MotionLazy>
       </AntdApp>
diff --git a/src/assets/images/background/dashboard2.png b/src/assets/images/background/dashboard2.png
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/assets/vite.svg b/src/assets/vite.svg
diff --git a/src/components/logo/index.tsx b/src/components/logo/index.tsx
@@ -2,14 +2,17 @@ import { NavLink } from 'react-router-dom';
 
 import { useThemeToken } from '@/theme/hooks';
 
-function Logo({ className = '' }: { className?: string }) {
+import { Iconify } from '../icon';
+
+interface Props {
+  size?: number | string;
+}
+function Logo({ size = 50 }: Props) {
   const { colorPrimary } = useThemeToken();
 
   return (
-    <NavLink to="/" className="no-underline">
-      <button className={`font-semibold ${className}`} style={{ color: colorPrimary }}>
-        Logo
-      </button>
+    <NavLink to="/">
+      <Iconify icon="solar:code-square-bold" color={colorPrimary} size={size} />
     </NavLink>
   );
 }
diff --git a/src/layouts/_common/header-simple.tsx b/src/layouts/_common/header-simple.tsx
@@ -5,7 +5,7 @@ import SettingButton from './setting-button';
 export default function HeaderSimple() {
   return (
     <header className="flex h-16 w-full items-center justify-between px-6">
-      <Logo />
+      <Logo size={30} />
       <SettingButton />
     </header>
   );
diff --git a/src/layouts/dashboard/header.tsx b/src/layouts/dashboard/header.tsx
@@ -66,9 +66,9 @@ export default function Header({ className = '', offsetTop = false }: Props) {
                 <SvgIcon icon="ic-menu" size="24" />
               </IconButton>
             ) : (
-              <Logo className="mr-2 text-xl" />
+              <Logo />
             )}
-            <div className="hidden md:block">{breadCrumb ? <BreadCrumb /> : null}</div>
+            <div className="ml-4 hidden md:block">{breadCrumb ? <BreadCrumb /> : null}</div>
           </div>
 
           <div className="flex">
diff --git a/src/layouts/dashboard/index.tsx b/src/layouts/dashboard/index.tsx
@@ -49,7 +49,6 @@ function DashboardLayout() {
   return (
     <StyleWrapper $themeMode={themeMode}>
       <ProgressBar />
-
       <div
         className={`flex h-screen overflow-hidden ${
           themeLayout === ThemeLayout.Horizontal ? 'flex-col' : ''
diff --git a/src/layouts/dashboard/nav.tsx b/src/layouts/dashboard/nav.tsx
@@ -24,7 +24,7 @@ export default function Nav(props: Props) {
   const matches = useMatches();
   const { pathname } = useLocation();
 
-  const { colorTextBase, colorBgElevated, colorBorder } = useThemeToken();
+  const { colorPrimary, colorTextBase, colorBgElevated, colorBorder } = useThemeToken();
 
   const settings = useSettings();
   const { themeLayout } = settings;
@@ -122,9 +122,14 @@ export default function Nav(props: Props) {
     >
       <div className="relative flex h-20 items-center justify-center py-4">
         {themeLayout === ThemeLayout.Mini ? (
-          <Logo className="text-lg" />
+          <Logo />
         ) : (
-          <Logo className="text-4xl" />
+          <div className="flex items-center gap-2">
+            <Logo />
+            <span className="text-xl font-bold" style={{ color: colorPrimary }}>
+              Slash Admin
+            </span>
+          </div>
         )}
         <button
           onClick={toggleCollapsed}
