├── bin
    └── starProject
├── web
    ├── public
    │   └── icon.webp
    ├── postcss.config.js
    ├── src
    │   ├── App.jsx
    │   ├── main.jsx
    │   ├── components
    │   │   ├── layout
    │   │   │   ├── Layout.jsx
    │   │   │   ├── Footer.jsx
    │   │   │   └── Header.jsx
    │   │   ├── ui
    │   │   │   ├── Loading.jsx
    │   │   │   ├── Card.jsx
    │   │   │   ├── Button.jsx
    │   │   │   ├── Input.jsx
    │   │   │   └── SearchAndFilter.jsx
    │   │   └── project
    │   │   │   └── ProjectCard.jsx
    │   ├── App.css
    │   ├── index.css
    │   ├── assets
    │   │   └── react.svg
    │   └── pages
    │   │   └── HomePage.jsx
    ├── vite.config.js
    ├── .gitignore
    ├── index.html
    ├── README.md
    ├── package.json
    ├── eslint.config.js
    └── tailwind.config.js
├── .gitignore
├── README_CN.md
├── go.mod
├── README.md
├── model
    └── star_model.go
├── go.sum
├── .github
    └── workflows
    │   └── auto-compile-and-commit.yml
├── .trae
    └── documents
    │   ├── notion-style-github-showcase-prd.md
    │   └── notion-style-technical-architecture.md
└── main.go


/bin/starProject:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mran/githubstartog/HEAD/bin/starProject


--------------------------------------------------------------------------------
/web/public/icon.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Mran/githubstartog/HEAD/web/public/icon.webp


--------------------------------------------------------------------------------
/web/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /main_test.go
2 | /.idea/.gitignore
3 | /.idea/deployment.xml
4 | /.idea/githubstartog.iml
5 | *.exe
6 | /.idea/modules.xml
7 | /.idea/vcs.xml
8 | 


--------------------------------------------------------------------------------
/web/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import HomePage from './pages/HomePage';
3 | 
4 | const App = () => {
5 |   return <HomePage />;
6 | };
7 | 
8 | export default App;
9 | 


--------------------------------------------------------------------------------
/web/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/web/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import './index.css'
 4 | import App from './App.jsx'
 5 | 
 6 | createRoot(document.getElementById('root')).render(
 7 |   <StrictMode>
 8 |     <App />
 9 |   </StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/web/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 


--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/icon.webp" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>My Github start page</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/README_CN.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img src="web/public/icon.webp" alt="DEMO" width="100" height="100">
 3 | </p>
 4 | 
 5 | [中文]("./README_CN.md") 
 6 | 
 7 | ## 项目描述
 8 | 
 9 | GithubStartog 通过 Github API 获取用户的标星项目，根据项目的标签，并生成一个 Markdown 文件和前端页面。
10 | [DEMO](https://githubstartog.pages.dev/)
11 | 
12 | ## 如何使用
13 | 
14 | 1. fork 本项目
15 | 2. 在 `settings` > `Actions` > `General` 中，启用 Github Actions，允许读写权限
16 | 3. 手动启动 Github Actions 完成构建
17 | 4. 使用 Cloudflare Pages 部署


--------------------------------------------------------------------------------
/web/README.md:
--------------------------------------------------------------------------------
1 | # React + Vite
2 | 
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 | 
5 | Currently, two official plugins are available:
6 | 
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 | 


--------------------------------------------------------------------------------
/go.mod:
--------------------------------------------------------------------------------
 1 | module githubstartog
 2 | 
 3 | go 1.21
 4 | 
 5 | toolchain go1.23.4
 6 | 
 7 | require (
 8 | 	github.com/go-resty/resty/v2 v2.16.2
 9 | 	github.com/openai/openai-go v0.1.0-alpha.39
10 | 	github.com/sashabaranov/go-openai v1.36.0
11 | )
12 | 
13 | require (
14 | 	github.com/tidwall/gjson v1.14.4 // indirect
15 | 	github.com/tidwall/match v1.1.1 // indirect
16 | 	github.com/tidwall/pretty v1.2.1 // indirect
17 | 	github.com/tidwall/sjson v1.2.5 // indirect
18 | 	golang.org/x/net v0.27.0 // indirect
19 | )
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img src="web/public/icon.webp" alt="DEMO" width="100" height="100">
 3 | </p>
 4 | 
 5 | ## Project Description
 6 | 
 7 | GithubStartog uses the Github API to get the starred projects of a user, generate a Markdown file and a frontend page based on the tags of the projects.
 8 | [DEMO](https://githubstartog.pages.dev/)
 9 | 
10 | ## How to use
11 | 
12 | 1. Fork this project
13 | 2. Enable Github Actions in `settings` > `Actions` > `General`>`Read and write permissions`
14 | 3. Wait for Github Actions to finish building
15 | 4. Deploy with Cloudflare Pages


--------------------------------------------------------------------------------
/web/src/components/layout/Layout.jsx:
--------------------------------------------------------------------------------
 1 | import { motion } from 'framer-motion';
 2 | import Header from './Header';
 3 | import Footer from './Footer';
 4 | 
 5 | const Layout = ({ children }) => {
 6 |   return (
 7 |     <div className="min-h-screen bg-white">
 8 |       <main className="flex-1 bg-notion-gray-50">
 9 |         <motion.div
10 |           className="container mx-auto px-4 sm:px-6 py-6 sm:py-8"
11 |           initial={{ opacity: 0, y: 20 }}
12 |           animate={{ opacity: 1, y: 0 }}
13 |           transition={{ duration: 0.6, delay: 0.2 }}
14 |         >
15 |           {children}
16 |         </motion.div>
17 |       </main>
18 |     </div>
19 |   );
20 | };
21 | 
22 | export default Layout;


--------------------------------------------------------------------------------
/web/src/App.css:
--------------------------------------------------------------------------------
 1 | #root {
 2 |   padding: 2rem;
 3 |   text-align: center;
 4 | }
 5 | 
 6 | .logo {
 7 |   height: 6em;
 8 |   padding: 1.5em;
 9 |   will-change: filter;
10 |   transition: filter 300ms;
11 | }
12 | .logo:hover {
13 |   filter: drop-shadow(0 0 2em #646cffaa);
14 | }
15 | .logo.react:hover {
16 |   filter: drop-shadow(0 0 2em #61dafbaa);
17 | }
18 | 
19 | @keyframes logo-spin {
20 |   from {
21 |     transform: rotate(0deg);
22 |   }
23 |   to {
24 |     transform: rotate(360deg);
25 |   }
26 | }
27 | 
28 | @media (prefers-reduced-motion: no-preference) {
29 |   a:nth-of-type(2) .logo {
30 |     animation: logo-spin infinite 20s linear;
31 |   }
32 | }
33 | 
34 | .card {
35 |   padding: 2em;
36 | }
37 | 
38 | .read-the-docs {
39 |   color: #888;
40 | }
41 | 


--------------------------------------------------------------------------------
/web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "web",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "framer-motion": "^12.23.12",
14 |     "fuse.js": "^7.1.0",
15 |     "lucide-react": "^0.542.0",
16 |     "react": "^18.3.1",
17 |     "react-dom": "^18.3.1",
18 |     "react-router-dom": "^7.8.2",
19 |     "typescript": "^5.9.2"
20 |   },
21 |   "devDependencies": {
22 |     "@eslint/js": "^9.15.0",
23 |     "@types/react": "^18.3.24",
24 |     "@types/react-dom": "^18.3.7",
25 |     "@vitejs/plugin-react": "^4.3.4",
26 |     "autoprefixer": "^10.4.20",
27 |     "eslint": "^9.15.0",
28 |     "eslint-plugin-react": "^7.37.2",
29 |     "eslint-plugin-react-hooks": "^5.0.0",
30 |     "eslint-plugin-react-refresh": "^0.4.14",
31 |     "globals": "^15.12.0",
32 |     "postcss": "^8.4.49",
33 |     "tailwindcss": "^3.4.16",
34 |     "vite": "^6.0.1"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/web/src/components/ui/Loading.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { motion } from 'framer-motion';
 3 | 
 4 | const Loading = ({ size = 'medium', text = '加载中...' }) => {
 5 |   const sizeClasses = {
 6 |     small: 'w-6 h-6',
 7 |     medium: 'w-12 h-12',
 8 |     large: 'w-16 h-16'
 9 |   };
10 | 
11 |   return (
12 |     <div className="flex flex-col items-center justify-center space-y-4">
13 |       <motion.div
14 |         className={`${sizeClasses[size]} border-4 border-notion-blue-200 border-t-notion-blue-600 rounded-full`}
15 |         animate={{ rotate: 360 }}
16 |         transition={{
17 |           duration: 1,
18 |           repeat: Infinity,
19 |           ease: 'linear'
20 |         }}
21 |       />
22 |       {text && (
23 |         <motion.p
24 |           className="text-notion-gray-600 text-sm font-medium"
25 |           initial={{ opacity: 0 }}
26 |           animate={{ opacity: 1 }}
27 |           transition={{ delay: 0.2 }}
28 |         >
29 |           {text}
30 |         </motion.p>
31 |       )}
32 |     </div>
33 |   );
34 | };
35 | 
36 | export default Loading;


--------------------------------------------------------------------------------
/web/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import react from 'eslint-plugin-react'
 4 | import reactHooks from 'eslint-plugin-react-hooks'
 5 | import reactRefresh from 'eslint-plugin-react-refresh'
 6 | 
 7 | export default [
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     files: ['**/*.{js,jsx}'],
11 |     languageOptions: {
12 |       ecmaVersion: 2020,
13 |       globals: globals.browser,
14 |       parserOptions: {
15 |         ecmaVersion: 'latest',
16 |         ecmaFeatures: { jsx: true },
17 |         sourceType: 'module',
18 |       },
19 |     },
20 |     settings: { react: { version: '18.3' } },
21 |     plugins: {
22 |       react,
23 |       'react-hooks': reactHooks,
24 |       'react-refresh': reactRefresh,
25 |     },
26 |     rules: {
27 |       ...js.configs.recommended.rules,
28 |       ...react.configs.recommended.rules,
29 |       ...react.configs['jsx-runtime'].rules,
30 |       ...reactHooks.configs.recommended.rules,
31 |       'react/jsx-no-target-blank': 'off',
32 |       'react-refresh/only-export-components': [
33 |         'warn',
34 |         { allowConstantExport: true },
35 |       ],
36 |     },
37 |   },
38 | ]
39 | 


--------------------------------------------------------------------------------
/model/star_model.go:
--------------------------------------------------------------------------------
 1 | package model
 2 | 
 3 | import "time"
 4 | 
 5 | type StarInfo struct {
 6 | 	Name            string    `json:"name"`
 7 | 	FullName        string    `json:"full_name"`
 8 | 	Url             string    `json:"url"`
 9 | 	HtmlUrl         string    `json:"html_url"`
10 | 	Description     *string   `json:"description"`
11 | 	Homepage        *string   `json:"homepage"`
12 | 	Language        *string   `json:"language"`
13 | 	Topics          []string  `json:"topics"`
14 | 	StargazersCount int       `json:"stargazers_count"`
15 | 	UpdatedAt       time.Time `json:"updated_at"`
16 | 	AI_tag          AI_tag    `json:"ai_tag"`
17 | }
18 | type ReadmeData struct {
19 | 	Name        string `json:"name"`
20 | 	Path        string `json:"path"`
21 | 	Sha         string `json:"sha"`
22 | 	Size        int    `json:"size"`
23 | 	Url         string `json:"url"`
24 | 	HtmlUrl     string `json:"html_url"`
25 | 	GitUrl      string `json:"git_url"`
26 | 	DownloadUrl string `json:"download_url"`
27 | 	Type        string `json:"type"`
28 | 	Content     string `json:"content"`
29 | 	RawContent  string
30 | 
31 | 	Encoding string `json:"encoding"`
32 | 	Links    struct {
33 | 		Self string `json:"self"`
34 | 		Git  string `json:"git"`
35 | 		Html string `json:"html"`
36 | 	} `json:"_links"`
37 | }
38 | type AI_tag struct {
39 | 	Group string   `json:"group"`
40 | 	Tags  []string `json:"tags"`
41 | 	Desc  string   `json:"desc"`
42 | }
43 | 


--------------------------------------------------------------------------------
/web/src/components/ui/Card.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { motion } from 'framer-motion';
 3 | 
 4 | const Card = ({ 
 5 |   children, 
 6 |   className = '',
 7 |   hover = true,
 8 |   padding = 'medium',
 9 |   shadow = 'medium',
10 |   onClick,
11 |   ...props 
12 | }) => {
13 |   const baseClasses = 'bg-white border border-notion-gray-200 rounded-lg transition-all duration-200';
14 |   
15 |   const paddingClasses = {
16 |     none: '',
17 |     small: 'p-4',
18 |     medium: 'p-6',
19 |     large: 'p-8'
20 |   };
21 |   
22 |   const shadowClasses = {
23 |     none: '',
24 |     small: 'shadow-sm',
25 |     medium: 'shadow-notion-card',
26 |     large: 'shadow-lg'
27 |   };
28 |   
29 |   const hoverClasses = hover ? 'hover:shadow-notion-card-hover hover:border-notion-gray-300' : '';
30 |   const clickableClasses = onClick ? 'cursor-pointer' : '';
31 |   
32 |   const cardClasses = `
33 |     ${baseClasses}
34 |     ${paddingClasses[padding]}
35 |     ${shadowClasses[shadow]}
36 |     ${hoverClasses}
37 |     ${clickableClasses}
38 |     ${className}
39 |   `.trim();
40 | 
41 |   const cardVariants = {
42 |     initial: { opacity: 0, y: 20 },
43 |     animate: { opacity: 1, y: 0 },
44 |     hover: hover ? { y: -2, scale: 1.01 } : {},
45 |     tap: onClick ? { scale: 0.98 } : {}
46 |   };
47 | 
48 |   return (
49 |     <motion.div
50 |       className={cardClasses}
51 |       onClick={onClick}
52 |       variants={cardVariants}
53 |       initial="initial"
54 |       animate="animate"
55 |       whileHover="hover"
56 |       whileTap="tap"
57 |       transition={{ duration: 0.2, ease: 'easeOut' }}
58 |       {...props}
59 |     >
60 |       {children}
61 |     </motion.div>
62 |   );
63 | };
64 | 
65 | export default Card;


--------------------------------------------------------------------------------
/go.sum:
--------------------------------------------------------------------------------
 1 | github.com/go-resty/resty/v2 v2.16.2 h1:CpRqTjIzq/rweXUt9+GxzzQdlkqMdt8Lm/fuK/CAbAg=
 2 | github.com/go-resty/resty/v2 v2.16.2/go.mod h1:0fHAoK7JoBy/Ch36N8VFeMsK7xQOHhvWaC3iOktwmIU=
 3 | github.com/openai/openai-go v0.1.0-alpha.39 h1:FvoNWy7BPhA0TjGOK5huRGU5sAUEx2jeubLXz34K9LE=
 4 | github.com/openai/openai-go v0.1.0-alpha.39/go.mod h1:3SdE6BffOX9HPEQv8IL/fi3LYZ5TUpRYaqGQZbyk11A=
 5 | github.com/sashabaranov/go-openai v1.36.0 h1:fcSrn8uGuorzPWCBp8L0aCR95Zjb/Dd+ZSML0YZy9EI=
 6 | github.com/sashabaranov/go-openai v1.36.0/go.mod h1:lj5b/K+zjTSFxVLijLSTDZuP7adOgerWeFyZLUhAKRg=
 7 | github.com/tidwall/gjson v1.14.2/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
 8 | github.com/tidwall/gjson v1.14.4 h1:uo0p8EbA09J7RQaflQ1aBRffTR7xedD2bcIVSYxLnkM=
 9 | github.com/tidwall/gjson v1.14.4/go.mod h1:/wbyibRr2FHMks5tjHJ5F8dMZh3AcwJEMf5vlfC0lxk=
10 | github.com/tidwall/match v1.1.1 h1:+Ho715JplO36QYgwN9PGYNhgZvoUSc9X2c80KVTi+GA=
11 | github.com/tidwall/match v1.1.1/go.mod h1:eRSPERbgtNPcGhD8UCthc6PmLEQXEWd3PRB5JTxsfmM=
12 | github.com/tidwall/pretty v1.2.0/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
13 | github.com/tidwall/pretty v1.2.1 h1:qjsOFOWWQl+N3RsoF5/ssm1pHmJJwhjlSbZ51I6wMl4=
14 | github.com/tidwall/pretty v1.2.1/go.mod h1:ITEVvHYasfjBbM0u2Pg8T2nJnzm8xPwvNhhsoaGGjNU=
15 | github.com/tidwall/sjson v1.2.5 h1:kLy8mja+1c9jlljvWTlSazM7cKDRfJuR/bOJhcY5NcY=
16 | github.com/tidwall/sjson v1.2.5/go.mod h1:Fvgq9kS/6ociJEDnK0Fk1cpYF4FIW6ZF7LAe+6jwd28=
17 | golang.org/x/net v0.27.0 h1:5K3Njcw06/l2y9vpGCSdcxWOYHOUk3dVNGDXN+FvAys=
18 | golang.org/x/net v0.27.0/go.mod h1:dDi0PyhWNoiUOrAS8uXv/vnScO4wnHQO4mj9fn/RytE=
19 | golang.org/x/time v0.6.0 h1:eTDhh4ZXt5Qf0augr54TN6suAUudPcawVZeIAPU7D4U=
20 | golang.org/x/time v0.6.0/go.mod h1:3BpzKBy/shNhVucY/MWOyx10tF3SFh9QdLuxbVysPQM=
21 | 


--------------------------------------------------------------------------------
/web/src/components/ui/Button.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { motion } from 'framer-motion';
 3 | 
 4 | const Button = ({ 
 5 |   children, 
 6 |   variant = 'primary', 
 7 |   size = 'medium', 
 8 |   onClick, 
 9 |   disabled = false,
10 |   className = '',
11 |   ...props 
12 | }) => {
13 |   const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
14 |   
15 |   const variants = {
16 |     primary: 'bg-notion-blue-600 text-white hover:bg-notion-blue-700 focus:ring-notion-blue-500 shadow-sm',
17 |     secondary: 'bg-notion-gray-100 text-notion-gray-700 hover:bg-notion-gray-200 focus:ring-notion-gray-500 border border-notion-gray-300',
18 |     ghost: 'text-notion-gray-600 hover:bg-notion-gray-100 hover:text-notion-gray-900 focus:ring-notion-gray-500',
19 |     danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 shadow-sm'
20 |   };
21 |   
22 |   const sizes = {
23 |     small: 'px-3 py-1.5 text-sm',
24 |     medium: 'px-4 py-2 text-sm',
25 |     large: 'px-6 py-3 text-base'
26 |   };
27 |   
28 |   const disabledClasses = 'opacity-50 cursor-not-allowed';
29 |   
30 |   const buttonClasses = `
31 |     ${baseClasses}
32 |     ${variants[variant]}
33 |     ${sizes[size]}
34 |     ${disabled ? disabledClasses : ''}
35 |     ${className}
36 |   `.trim();
37 | 
38 |   return (
39 |     <motion.button
40 |       className={buttonClasses}
41 |       onClick={disabled ? undefined : onClick}
42 |       disabled={disabled}
43 |       whileHover={disabled ? {} : { scale: 1.02 }}
44 |       whileTap={disabled ? {} : { scale: 0.98 }}
45 |       transition={{ duration: 0.1 }}
46 |       {...props}
47 |     >
48 |       {children}
49 |     </motion.button>
50 |   );
51 | };
52 | 
53 | export default Button;


--------------------------------------------------------------------------------
/web/src/components/ui/Input.jsx:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef } from 'react';
 2 | import { motion } from 'framer-motion';
 3 | 
 4 | const Input = forwardRef(({ 
 5 |   type = 'text',
 6 |   placeholder,
 7 |   value,
 8 |   onChange,
 9 |   onFocus,
10 |   onBlur,
11 |   disabled = false,
12 |   error = false,
13 |   className = '',
14 |   icon: Icon,
15 |   ...props 
16 | }, ref) => {
17 |   const baseClasses = 'w-full px-4 py-2.5 text-notion-gray-900 bg-white border rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-0';
18 |   
19 |   const stateClasses = error
20 |     ? 'border-red-300 focus:border-red-500 focus:ring-red-200'
21 |     : 'border-notion-gray-300 focus:border-notion-blue-500 focus:ring-notion-blue-200 hover:border-notion-gray-400';
22 |   
23 |   const disabledClasses = 'opacity-50 cursor-not-allowed bg-notion-gray-50';
24 |   
25 |   const inputClasses = `
26 |     ${baseClasses}
27 |     ${stateClasses}
28 |     ${disabled ? disabledClasses : ''}
29 |     ${Icon ? 'pl-10' : ''}
30 |     ${className}
31 |   `.trim();
32 | 
33 |   return (
34 |     <div className="relative">
35 |       {Icon && (
36 |         <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
37 |           <Icon className="h-5 w-5 text-notion-gray-400" />
38 |         </div>
39 |       )}
40 |       <motion.input
41 |         ref={ref}
42 |         type={type}
43 |         placeholder={placeholder}
44 |         value={value}
45 |         onChange={onChange}
46 |         onFocus={onFocus}
47 |         onBlur={onBlur}
48 |         disabled={disabled}
49 |         className={inputClasses}
50 |         whileFocus={{ scale: 1.01 }}
51 |         transition={{ duration: 0.1 }}
52 |         {...props}
53 |       />
54 |     </div>
55 |   );
56 | });
57 | 
58 | Input.displayName = 'Input';
59 | 
60 | export default Input;


--------------------------------------------------------------------------------
/web/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./src/**/*.{js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       fontFamily: {
10 |         'sans': ['Inter', 'system-ui', 'sans-serif'],
11 |         'mono': ['JetBrains Mono', 'monospace'],
12 |       },
13 |       colors: {
14 |         notion: {
15 |           blue: '#2383E2',
16 |           orange: '#FF6B35',
17 |           gray: {
18 |             50: '#F7F6F3',
19 |             100: '#E9E9E7',
20 |             200: '#CBCAC8',
21 |             300: '#A0A0A0',
22 |             400: '#6F6F6F',
23 |             500: '#2F2F2F',
24 |           }
25 |         }
26 |       },
27 |       animation: {
28 |         'fade-in': 'fadeIn 0.3s ease-out',
29 |         'slide-up': 'slideUp 0.3s ease-out',
30 |         'scale-in': 'scaleIn 0.2s ease-out',
31 |       },
32 |       keyframes: {
33 |         fadeIn: {
34 |           '0%': { opacity: '0' },
35 |           '100%': { opacity: '1' },
36 |         },
37 |         slideUp: {
38 |           '0%': { transform: 'translateY(10px)', opacity: '0' },
39 |           '100%': { transform: 'translateY(0)', opacity: '1' },
40 |         },
41 |         scaleIn: {
42 |           '0%': { transform: 'scale(0.95)', opacity: '0' },
43 |           '100%': { transform: 'scale(1)', opacity: '1' },
44 |         },
45 |       },
46 |       boxShadow: {
47 |         'notion': '0 8px 32px rgba(0, 0, 0, 0.12)',
48 |         'notion-hover': '0 12px 48px rgba(0, 0, 0, 0.18)',
49 |       },
50 |       borderRadius: {
51 |         'notion-sm': '8px',
52 |         'notion-md': '12px',
53 |         'notion-lg': '16px',
54 |       },
55 |       spacing: {
56 |         '18': '4.5rem',
57 |         '88': '22rem',
58 |       },
59 |       transitionDuration: {
60 |         '250': '250ms',
61 |       },
62 |     },
63 |   },
64 |   plugins: [],
65 | }
66 | 
67 | 


--------------------------------------------------------------------------------
/.github/workflows/auto-compile-and-commit.yml:
--------------------------------------------------------------------------------
 1 | name: Go Build and Compile
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 |   workflow_dispatch:
 8 |     # 可以添加可选的输入参数
 9 |     inputs:
10 |       reason:
11 |         description: 'Reason for manual run'
12 |         required: false
13 |         default: 'Manual trigger'
14 | jobs:
15 |   build-and-compile:
16 |     runs-on: ubuntu-latest
17 |     # 设置权限，允许 push
18 |     permissions:
19 |       contents: write
20 | 
21 |     steps:
22 |       - name: Checkout code
23 |         uses: actions/checkout@v4  # 使用最新版本
24 | 
25 |       - name: Set up Go environment
26 |         uses: actions/setup-go@v5  # 使用最新版本
27 |         with:
28 |           go-version: '1.23'
29 |           check-latest: true
30 | 
31 |       # 使用环境变量
32 |       - name: Build and compile
33 |         env:
34 |           LLM_BASEURL: ${{ secrets.LLM_BASEURL }}
35 |           LLM_TOKEN: ${{ secrets.LLM_TOKEN }}
36 |         run: |
37 |           go build -o ./bin/starProject 
38 | 
39 |       - name: Execute compiled binary
40 |         env:
41 |           LLM_BASEURL: ${{ secrets.LLM_BASEURL }}
42 |           LLM_TOKEN: ${{ secrets.LLM_TOKEN }}
43 |           USERNAME: ${{ github.repository_owner }}
44 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
45 |         run: |
46 |           ./bin/starProject
47 |       - name: Copy aiTagProcess.json to web/public
48 |         run: |
49 |           cp aiTagProcess.json web/public/projects.json
50 | 
51 |       - name: Commit all files
52 |         # 使用 GITHUB_TOKEN 进行 git 操作
53 |         env:
54 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
55 |         run: |
56 |           git config --global user.name "github-actions[bot]"
57 |           git config --global user.email "github-actions[bot]@users.noreply.github.com"
58 |           git add .
59 |           git commit -m "Automated commit after execution" || echo "No changes to commit"
60 |           git push


--------------------------------------------------------------------------------
/.trae/documents/notion-style-github-showcase-prd.md:
--------------------------------------------------------------------------------
 1 | # GitHub项目展示平台 - Notion风格重设计
 2 | 
 3 | ## 1. 产品概述
 4 | 
 5 | 这不是一个简单的GitHub项目列表，而是一个具有Notion级别设计标准的知识展示平台。我们要打造一个让开发者沉浸其中、优雅浏览项目的数字空间。
 6 | 
 7 | 产品的核心使命是将冰冷的代码仓库转化为有温度的知识资产，通过极简主义的设计语言和精致的交互体验，让每个项目都能得到应有的展示。
 8 | 
 9 | 目标是成为开发者个人品牌展示的新标杆，重新定义技术项目的呈现方式。
10 | 
11 | ## 2. 核心功能
12 | 
13 | ### 2.1 用户角色
14 | 
15 | 本产品采用单一用户模式，专注于为项目所有者提供最佳的展示体验。
16 | 
17 | ### 2.2 功能模块
18 | 
19 | 我们的重设计包含以下核心页面：
20 | 
21 | 1. **主展示页面**：沉浸式项目浏览体验，智能搜索与筛选系统
22 | 2. **项目详情页面**：深度项目信息展示，优雅的代码预览
23 | 3. **关于页面**：个人品牌故事展示
24 | 
25 | ### 2.3 页面详情
26 | 
27 | | 页面名称 | 模块名称 | 功能描述 |
28 | |---------|---------|----------|
29 | | 主展示页面 | 顶部导航栏 | 极简logo展示，搜索入口，主题切换。采用Notion式的悬浮设计 |
30 | | 主展示页面 | 智能搜索系统 | 实时模糊搜索，智能标签建议，搜索历史。支持快捷键操作 |
31 | | 主展示页面 | 项目卡片网格 | 响应式瀑布流布局，悬停微动效，渐进式加载。每个卡片都是艺术品 |
32 | | 主展示页面 | 高级筛选面板 | 侧边栏筛选器，技术栈分类，时间轴筛选，星标数排序 |
33 | | 主展示页面 | 统计仪表板 | 项目总览数据，技术栈分布图，活跃度热力图 |
34 | | 项目详情页面 | 项目头部信息 | 大标题展示，关键指标可视化，快速操作按钮组 |
35 | | 项目详情页面 | 代码预览模块 | 语法高亮代码展示，文件树导航，在线预览功能 |
36 | | 项目详情页面 | 项目时间线 | 提交历史可视化，里程碑展示，贡献者信息 |
37 | | 关于页面 | 个人简介区域 | 头像展示，技能标签云，联系方式，个人故事 |
38 | | 关于页面 | 技术栈展示 | 交互式技能图表，经验时长可视化，项目关联 |
39 | 
40 | ## 3. 核心流程
41 | 
42 | **主要用户操作流程：**
43 | 
44 | 用户进入主页 → 被优雅的视觉设计吸引 → 通过智能搜索或浏览发现感兴趣的项目 → 点击项目卡片进入详情页 → 深度了解项目信息 → 通过外链访问GitHub仓库或在线演示 → 返回主页继续探索或访问关于页面了解作者
45 | 
46 | **页面导航流程图：**
47 | 
48 | ```mermaid
49 | graph TD
50 |     A[主展示页面] --> B[项目详情页面]
51 |     A --> C[关于页面]
52 |     B --> A
53 |     B --> D[GitHub仓库]
54 |     B --> E[在线演示]
55 |     C --> A
56 |     C --> F[联系方式]
57 | ```
58 | 
59 | ## 4. 用户界面设计
60 | 
61 | ### 4.1 设计风格
62 | 
63 | **色彩系统：**
64 | - 主色调：纯净白色 (#FFFFFF) 和深邃黑色 (#000000)
65 | - 辅助色：温暖灰色系列 (#F7F6F3, #E9E9E7, #CBCAC8)
66 | - 强调色：Notion蓝 (#2383E2) 和警示橙 (#FF6B35)
67 | - 文字色彩：主文字 (#2F2F2F)，次要文字 (#6F6F6F)，辅助文字 (#A0A0A0)
68 | 
69 | **字体系统：**
70 | - 主字体：Inter (现代无衬线，极佳的屏幕显示效果)
71 | - 代码字体：JetBrains Mono (等宽字体，代码展示专用)
72 | - 字号层级：12px/14px/16px/20px/24px/32px/48px
73 | 
74 | **设计原则：**
75 | - 按钮风格：圆角8px，悬停状态微妙阴影，点击反馈
76 | - 布局风格：大量留白，内容居中，最大宽度1200px
77 | - 动效风格：缓动函数 ease-out，持续时间200-300ms
78 | - 图标风格：线性图标，2px描边，24px标准尺寸
79 | 
80 | ### 4.2 页面设计概览
81 | 
82 | | 页面名称 | 模块名称 | UI元素 |
83 | |---------|---------|--------|
84 | | 主展示页面 | 顶部导航栏 | 高度64px，背景模糊效果，固定定位。Logo使用Inter字体，搜索框圆角12px |
85 | | 主展示页面 | 项目卡片 | 白色背景，圆角16px，悬停阴影0 8px 32px rgba(0,0,0,0.12)。标题使用Inter Medium 18px |
86 | | 主展示页面 | 筛选面板 | 侧边栏宽度280px，背景#F7F6F3，分组标题Inter SemiBold 14px |
87 | | 项目详情页面 | 项目头部 | 大标题Inter Bold 32px，指标卡片使用圆角12px，间距24px |
88 | | 项目详情页面 | 代码预览 | 背景#1E1E1E，圆角12px，JetBrains Mono 14px，行高1.5 |
89 | | 关于页面 | 个人简介 | 头像圆形120px，技能标签圆角20px，背景渐变色 |
90 | 
91 | ### 4.3 响应式设计
92 | 
93 | 产品采用移动优先的响应式设计策略：
94 | - 桌面端：1200px+ 三列网格布局，侧边栏固定
95 | - 平板端：768px-1199px 两列网格，侧边栏可收起
96 | - 移动端：<768px 单列布局，底部导航，手势优化
97 | 
98 | 支持触摸交互优化，包括滑动切换、长按菜单、双击缩放等移动端专属交互。


--------------------------------------------------------------------------------
/web/src/index.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
  2 | @tailwind base;
  3 | @tailwind components;
  4 | @tailwind utilities;
  5 | 
  6 | /* Notion风格的CSS变量 */
  7 | :root {
  8 |   --spacing-unit: 8px;
  9 |   --border-radius-sm: 8px;
 10 |   --border-radius-md: 12px;
 11 |   --border-radius-lg: 16px;
 12 |   --transition-fast: 0.15s ease-out;
 13 |   --transition-normal: 0.3s ease-out;
 14 |   --transition-slow: 0.5s ease-out;
 15 |   
 16 |   /* 字体设置 */
 17 |   font-family: 'Inter', system-ui, -apple-system, sans-serif;
 18 |   line-height: 1.6;
 19 |   font-weight: 400;
 20 |   
 21 |   /* 渲染优化 */
 22 |   font-synthesis: none;
 23 |   text-rendering: optimizeLegibility;
 24 |   -webkit-font-smoothing: antialiased;
 25 |   -moz-osx-font-smoothing: grayscale;
 26 |   
 27 |   /* 颜色主题 */
 28 |   color: #2F2F2F;
 29 |   background-color: #FFFFFF;
 30 | }
 31 | 
 32 | /* 全局样式重置 */
 33 | * {
 34 |   box-sizing: border-box;
 35 | }
 36 | 
 37 | body {
 38 |   margin: 0;
 39 |   padding: 0;
 40 |   min-height: 100vh;
 41 |   background-color: #FFFFFF;
 42 |   color: #2F2F2F;
 43 | }
 44 | 
 45 | /* Notion风格的通用组件样式 */
 46 | @layer components {
 47 |   .notion-card {
 48 |     @apply bg-white rounded-notion-lg shadow-notion hover:shadow-notion-hover;
 49 |     @apply transition-all duration-300 ease-out;
 50 |     @apply border border-gray-100;
 51 |   }
 52 |   
 53 |   .notion-button {
 54 |     @apply px-4 py-2 rounded-notion-md font-medium;
 55 |     @apply transition-all duration-200 ease-out;
 56 |     @apply focus:outline-none focus:ring-2 focus:ring-notion-blue focus:ring-opacity-50;
 57 |   }
 58 |   
 59 |   .notion-input {
 60 |     @apply w-full px-4 py-3 rounded-notion-md border border-gray-200;
 61 |     @apply focus:border-notion-blue focus:ring-2 focus:ring-notion-blue focus:ring-opacity-20;
 62 |     @apply transition-all duration-200 ease-out;
 63 |     @apply font-sans placeholder-notion-gray-300;
 64 |   }
 65 |   
 66 |   .notion-text-primary {
 67 |     @apply text-notion-gray-500;
 68 |   }
 69 |   
 70 |   .notion-text-secondary {
 71 |     @apply text-notion-gray-400;
 72 |   }
 73 |   
 74 |   .notion-text-tertiary {
 75 |     @apply text-notion-gray-300;
 76 |   }
 77 | }
 78 | 
 79 | /* 链接样式 */
 80 | a {
 81 |   color: #2383E2;
 82 |   text-decoration: none;
 83 |   transition: color var(--transition-fast);
 84 | }
 85 | 
 86 | a:hover {
 87 |   color: #1a6bc7;
 88 | }
 89 | 
 90 | /* 标题样式 */
 91 | h1, h2, h3, h4, h5, h6 {
 92 |   font-family: 'Inter', sans-serif;
 93 |   font-weight: 600;
 94 |   line-height: 1.3;
 95 |   margin: 0;
 96 | }
 97 | 
 98 | /* 滚动条样式 */
 99 | ::-webkit-scrollbar {
100 |   width: 6px;
101 |   height: 6px;
102 | }
103 | 
104 | ::-webkit-scrollbar-track {
105 |   background: #F7F6F3;
106 | }
107 | 
108 | ::-webkit-scrollbar-thumb {
109 |   background: #CBCAC8;
110 |   border-radius: 3px;
111 | }
112 | 
113 | ::-webkit-scrollbar-thumb:hover {
114 |   background: #A0A0A0;
115 | }
116 | 


--------------------------------------------------------------------------------
/web/src/assets/react.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>


--------------------------------------------------------------------------------
/web/src/components/layout/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import { motion } from 'framer-motion';
  2 | import { Github, Twitter, Linkedin, Mail } from 'lucide-react';
  3 | 
  4 | const Footer = () => {
  5 |   const socialLinks = [
  6 |     { icon: Github, href: '#', label: 'GitHub' },
  7 |     { icon: Twitter, href: '#', label: 'Twitter' },
  8 |     { icon: Linkedin, href: '#', label: 'LinkedIn' },
  9 |     { icon: Mail, href: '#', label: 'Email' },
 10 |   ];
 11 | 
 12 |   return (
 13 |     <footer className="bg-notion-gray-50 border-t border-gray-100 mt-20">
 14 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
 15 |         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-8">
 16 |           {/* Brand */}
 17 |           <div className="space-y-4 text-center sm:text-left sm:col-span-2 md:col-span-1">
 18 |             <div className="flex items-center justify-center sm:justify-start space-x-2">
 19 |               <div className="w-8 h-8 bg-notion-blue rounded-notion-md flex items-center justify-center">
 20 |                 <Github className="w-5 h-5 text-white" />
 21 |               </div>
 22 |               <span className="text-xl font-semibold notion-text-primary">
 23 |                 Projects
 24 |               </span>
 25 |             </div>
 26 |             <p className="notion-text-secondary text-sm leading-relaxed">
 27 |               A curated showcase of my development projects,
 28 |               <br />
 29 |               built with passion and attention to detail.
 30 |             </p>
 31 |           </div>
 32 | 
 33 |           {/* Quick Links */}
 34 |           <div className="space-y-4 text-center sm:text-left">
 35 |             <h3 className="font-semibold notion-text-primary">Quick Links</h3>
 36 |             <nav className="flex flex-col space-y-2">
 37 |               <a
 38 |                 href="#"
 39 |                 className="notion-text-secondary hover:notion-text-primary transition-colors duration-200 text-sm"
 40 |               >
 41 |                 All Projects
 42 |               </a>
 43 |               <a
 44 |                 href="#"
 45 |                 className="notion-text-secondary hover:notion-text-primary transition-colors duration-200 text-sm"
 46 |               >
 47 |                 Featured Work
 48 |               </a>
 49 |               <a
 50 |                 href="#"
 51 |                 className="notion-text-secondary hover:notion-text-primary transition-colors duration-200 text-sm"
 52 |               >
 53 |                 About Me
 54 |               </a>
 55 |               <a
 56 |                 href="#"
 57 |                 className="notion-text-secondary hover:notion-text-primary transition-colors duration-200 text-sm"
 58 |               >
 59 |                 Contact
 60 |               </a>
 61 |             </nav>
 62 |           </div>
 63 | 
 64 |           {/* Social Links */}
 65 |           <div className="space-y-4 text-center sm:text-left">
 66 |             <h3 className="font-semibold notion-text-primary">Connect</h3>
 67 |             <div className="flex justify-center sm:justify-start space-x-4">
 68 |               {socialLinks.map(({ icon: Icon, href, label }) => (
 69 |                 <motion.a
 70 |                   key={label}
 71 |                   href={href}
 72 |                   whileHover={{ scale: 1.1, y: -2 }}
 73 |                   whileTap={{ scale: 0.95 }}
 74 |                   className="p-2 rounded-notion-md bg-white hover:bg-notion-blue hover:text-white transition-all duration-200 shadow-sm"
 75 |                   aria-label={label}
 76 |                 >
 77 |                   <Icon className="w-5 h-5" />
 78 |                 </motion.a>
 79 |               ))}
 80 |             </div>
 81 |           </div>
 82 |         </div>
 83 | 
 84 |         {/* Bottom Bar */}
 85 |         <div className="mt-6 sm:mt-8 pt-6 sm:pt-8 border-t border-gray-200 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
 86 |           <p className="notion-text-tertiary text-sm">
 87 |             © 2024 Projects Showcase. Crafted with ❤️ and attention to detail.
 88 |           </p>
 89 |           <div className="flex space-x-6">
 90 |             <a
 91 |               href="#"
 92 |               className="notion-text-tertiary hover:notion-text-secondary transition-colors duration-200 text-sm"
 93 |             >
 94 |               Privacy
 95 |             </a>
 96 |             <a
 97 |               href="#"
 98 |               className="notion-text-tertiary hover:notion-text-secondary transition-colors duration-200 text-sm"
 99 |             >
100 |               Terms
101 |             </a>
102 |           </div>
103 |         </div>
104 |       </div>
105 |     </footer>
106 |   );
107 | };
108 | 
109 | export default Footer;


--------------------------------------------------------------------------------
/web/src/components/layout/Header.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import { motion, AnimatePresence } from 'framer-motion';
  3 | import { Search, Menu, X, Github } from 'lucide-react';
  4 | import Button from '../ui/Button';
  5 | 
  6 | const Header = () => {
  7 |   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  8 | 
  9 |   return (
 10 |     <motion.header
 11 |       initial={{ y: -64, opacity: 0 }}
 12 |       animate={{ y: 0, opacity: 1 }}
 13 |       transition={{ duration: 0.3, ease: 'easeOut' }}
 14 |       className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100"
 15 |     >
 16 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 17 |         <div className="flex items-center justify-between h-16">
 18 |           {/* Logo */}
 19 |           <motion.div
 20 |             whileHover={{ scale: 1.05 }}
 21 |             whileTap={{ scale: 0.95 }}
 22 |             className="flex items-center space-x-2"
 23 |           >
 24 |             <div className="w-8 h-8 bg-notion-blue rounded-notion-md flex items-center justify-center">
 25 |               <Github className="w-5 h-5 text-white" />
 26 |             </div>
 27 |             <span className="text-xl font-semibold notion-text-primary hidden sm:block">
 28 |               Projects
 29 |             </span>
 30 |           </motion.div>
 31 | 
 32 |           {/* Desktop Navigation */}
 33 |           <nav className="hidden md:flex items-center space-x-8">
 34 |             <motion.a 
 35 |               href="#" 
 36 |               className="text-notion-gray-700 hover:text-notion-gray-900 transition-colors duration-200 font-medium"
 37 |               whileHover={{ y: -1 }}
 38 |               whileTap={{ y: 0 }}
 39 |             >
 40 |               Home
 41 |             </motion.a>
 42 |             <motion.a 
 43 |               href="#" 
 44 |               className="text-notion-gray-700 hover:text-notion-gray-900 transition-colors duration-200 font-medium"
 45 |               whileHover={{ y: -1 }}
 46 |               whileTap={{ y: 0 }}
 47 |             >
 48 |               Projects
 49 |             </motion.a>
 50 |             <motion.a 
 51 |               href="#" 
 52 |               className="text-notion-gray-700 hover:text-notion-gray-900 transition-colors duration-200 font-medium"
 53 |               whileHover={{ y: -1 }}
 54 |               whileTap={{ y: 0 }}
 55 |             >
 56 |               About
 57 |             </motion.a>
 58 |           </nav>
 59 | 
 60 |           {/* Search and Mobile Menu */}
 61 |           <div className="flex items-center space-x-4">
 62 |             <Button
 63 |               variant="ghost"
 64 |               size="small"
 65 |               className="p-2"
 66 |             >
 67 |               <Search className="w-5 h-5 text-notion-gray-600" />
 68 |             </Button>
 69 |             
 70 |             <Button
 71 |               variant="ghost"
 72 |               size="small"
 73 |               className="md:hidden p-2"
 74 |               onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
 75 |             >
 76 |               {isMobileMenuOpen ? (
 77 |                 <X className="w-5 h-5 text-notion-gray-600" />
 78 |               ) : (
 79 |                 <Menu className="w-5 h-5 text-notion-gray-600" />
 80 |               )}
 81 |             </Button>
 82 |           </div>
 83 |         </div>
 84 | 
 85 |       </div>
 86 | 
 87 |       {/* Mobile Navigation Menu */}
 88 |       <AnimatePresence>
 89 |         {isMobileMenuOpen && (
 90 |           <motion.div
 91 |             initial={{ opacity: 0, height: 0 }}
 92 |             animate={{ opacity: 1, height: 'auto' }}
 93 |             exit={{ opacity: 0, height: 0 }}
 94 |             transition={{ duration: 0.3, ease: 'easeInOut' }}
 95 |             className="md:hidden bg-white border-t border-notion-gray-200 overflow-hidden"
 96 |           >
 97 |             <nav className="px-6 py-4 space-y-4">
 98 |               <motion.a
 99 |                 href="#"
100 |                 className="block text-notion-gray-700 hover:text-notion-gray-900 transition-colors duration-200 font-medium py-2"
101 |                 whileHover={{ x: 4 }}
102 |                 onClick={() => setIsMobileMenuOpen(false)}
103 |               >
104 |                 Home
105 |               </motion.a>
106 |               <motion.a
107 |                 href="#"
108 |                 className="block text-notion-gray-700 hover:text-notion-gray-900 transition-colors duration-200 font-medium py-2"
109 |                 whileHover={{ x: 4 }}
110 |                 onClick={() => setIsMobileMenuOpen(false)}
111 |               >
112 |                 Projects
113 |               </motion.a>
114 |               <motion.a
115 |                 href="#"
116 |                 className="block text-notion-gray-700 hover:text-notion-gray-900 transition-colors duration-200 font-medium py-2"
117 |                 whileHover={{ x: 4 }}
118 |                 onClick={() => setIsMobileMenuOpen(false)}
119 |               >
120 |                 About
121 |               </motion.a>
122 |             </nav>
123 |           </motion.div>
124 |         )}
125 |       </AnimatePresence>
126 |     </motion.header>
127 |   );
128 | };
129 | 
130 | export default Header;


--------------------------------------------------------------------------------
/web/src/components/project/ProjectCard.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { motion } from 'framer-motion';
  3 | import { Star, GitFork, ExternalLink, Calendar, Github } from 'lucide-react';
  4 | import Card from '../ui/Card';
  5 | import Button from '../ui/Button';
  6 | 
  7 | const ProjectCard = ({ project, index = 0 }) => {
  8 |   // Merge tags from different sources
  9 |   const allTags = [
 10 |     ...(project.topics || []),
 11 |     ...(project.ai_tag?.tags || []),
 12 |     project.language
 13 |   ].filter(Boolean);
 14 | 
 15 |   // Notion-style tag colors
 16 |   const getTagStyle = (tag) => {
 17 |     const tagStyles = {
 18 |       'JavaScript': 'bg-yellow-50 text-yellow-700 border-yellow-200',
 19 |       'TypeScript': 'bg-blue-50 text-blue-700 border-blue-200',
 20 |       'React': 'bg-cyan-50 text-cyan-700 border-cyan-200',
 21 |       'Vue': 'bg-green-50 text-green-700 border-green-200',
 22 |       'Python': 'bg-emerald-50 text-emerald-700 border-emerald-200',
 23 |       'Java': 'bg-red-50 text-red-700 border-red-200',
 24 |       'CSS': 'bg-indigo-50 text-indigo-700 border-indigo-200',
 25 |       'HTML': 'bg-orange-50 text-orange-700 border-orange-200',
 26 |       'Node.js': 'bg-lime-50 text-lime-700 border-lime-200',
 27 |       'default': 'bg-notion-gray-50 text-notion-gray-600 border-notion-gray-200'
 28 |     };
 29 |     return tagStyles[tag] || tagStyles.default;
 30 |   };
 31 | 
 32 |   // Format date
 33 |   const formatDate = (dateString) => {
 34 |     return new Date(dateString).toLocaleDateString('en-US', {
 35 |       year: 'numeric',
 36 |       month: 'short',
 37 |       day: 'numeric'
 38 |     });
 39 |   };
 40 | 
 41 |   return (
 42 |     <Card
 43 |       className="group overflow-hidden"
 44 |       padding="none"
 45 |       hover={true}
 46 |     >
 47 |       {/* Card Header */}
 48 |       <div className="p-6 pb-4">
 49 |         <div className="flex items-start justify-between mb-3">
 50 |           <motion.h3 
 51 |             className="text-lg font-semibold notion-text-primary group-hover:text-notion-blue transition-colors duration-200 line-clamp-1"
 52 |             whileHover={{ scale: 1.02 }}
 53 |           >
 54 |             <a
 55 |               href={project.html_url}
 56 |               target="_blank"
 57 |               rel="noopener noreferrer"
 58 |               className="hover:underline"
 59 |             >
 60 |               {project.name || project.full_name}
 61 |             </a>
 62 |           </motion.h3>
 63 |           
 64 |           {/* Star Count */}
 65 |           {project.stargazers_count !== undefined && (
 66 |             <motion.div 
 67 |               className="flex items-center space-x-1 text-notion-gray-500 bg-notion-gray-50 px-2 py-1 rounded-notion-sm"
 68 |               whileHover={{ scale: 1.05 }}
 69 |             >
 70 |               <Star className="w-4 h-4 fill-current" />
 71 |               <span className="text-sm font-medium">{project.stargazers_count}</span>
 72 |             </motion.div>
 73 |           )}
 74 |         </div>
 75 | 
 76 |         {/* Description */}
 77 |         <p className="notion-text-secondary text-sm leading-relaxed mb-4 line-clamp-2">
 78 |           {project.description || 'No description available'}
 79 |         </p>
 80 | 
 81 |         {/* Tags */}
 82 |         {allTags.length > 0 && (
 83 |           <div className="flex flex-wrap gap-1.5 mb-4">
 84 |             {allTags.slice(0, 4).map((tag) => (
 85 |               <motion.span
 86 |                 key={tag}
 87 |                 whileHover={{ scale: 1.05 }}
 88 |                 className={`px-2 py-1 text-xs font-medium rounded-notion-sm border transition-colors duration-200 ${getTagStyle(tag)}`}
 89 |               >
 90 |                 {tag}
 91 |               </motion.span>
 92 |             ))}
 93 |             {allTags.length > 4 && (
 94 |               <span className="px-2 py-1 text-xs font-medium rounded-notion-sm border bg-notion-gray-50 text-notion-gray-500 border-notion-gray-200">
 95 |                 +{allTags.length - 4}
 96 |               </span>
 97 |             )}
 98 |           </div>
 99 |         )}
100 |       </div>
101 | 
102 |       {/* Card Footer */}
103 |       <div className="px-6 py-4 bg-notion-gray-25 border-t border-notion-gray-100">
104 |         <div className="flex items-center justify-between">
105 |           {/* Last Updated */}
106 |           <div className="flex items-center space-x-1 text-notion-gray-500">
107 |             <Calendar className="w-3.5 h-3.5" />
108 |             <span className="text-xs">
109 |               {project.updated_at ? formatDate(project.updated_at) : 'Unknown'}
110 |             </span>
111 |           </div>
112 | 
113 |           {/* Action Buttons */}
114 |           <div className="flex items-center space-x-4">
115 |             <Button
116 |               variant="secondary"
117 |               size="small"
118 |               onClick={() => window.open(project.html_url, '_blank')}
119 |               className="flex items-center space-x-2"
120 |             >
121 |               <Github className="w-4 h-4" />
122 |               <span>GitHub</span>
123 |             </Button>
124 |             {project.homepage && (
125 |               <Button
126 |                 variant="primary"
127 |                 size="small"
128 |                 onClick={() => window.open(project.homepage, '_blank')}
129 |                 className="flex items-center space-x-2"
130 |               >
131 |                 <ExternalLink className="w-4 h-4" />
132 |                 <span>Live Demo</span>
133 |               </Button>
134 |             )}
135 |           </div>
136 |         </div>
137 |       </div>
138 |     </Card>
139 |   );
140 | };
141 | 
142 | export default ProjectCard;


--------------------------------------------------------------------------------
/main.go:
--------------------------------------------------------------------------------
  1 | package main
  2 | 
  3 | import (
  4 | 	"context"
  5 | 	"encoding/base64"
  6 | 	"encoding/json"
  7 | 	"fmt"
  8 | 	"github.com/go-resty/resty/v2"
  9 | 	"github.com/openai/openai-go"
 10 | 	"github.com/openai/openai-go/option"
 11 | 	"githubstartog/model"
 12 | 	"os"
 13 | 	"strconv"
 14 | 	"strings"
 15 | 	"sync"
 16 | 	//"github.com/sashabaranov/go-openai"
 17 | )
 18 | 
 19 | func FetchUserStar(user string, page int) *[]model.StarInfo {
 20 | 	client := resty.New()
 21 | 	// 请求https://api.github.com/users/mran/starred?page=10
 22 | 	url := "https://api.github.com/users/" + user + "/starred"
 23 | 	token := os.Getenv("GITHUB_TOKEN")
 24 | 	resp, err := client.R().
 25 | 		SetQueryParam("page", strconv.Itoa(page)).
 26 | 		SetHeader("Authorization", "token "+token).
 27 | 		Get(url)
 28 | 	if err != nil {
 29 | 		panic(err)
 30 | 	}
 31 | 	body := resp.String()
 32 | 	if len(body) == 0 {
 33 | 		return nil
 34 | 	}
 35 | 	//转为json 对象
 36 | 	var infos []model.StarInfo
 37 | 	er := json.Unmarshal([]byte(body), &infos)
 38 | 	if er != nil {
 39 | 		fmt.Println(body)
 40 | 		panic(er)
 41 | 	}
 42 | 	return &infos
 43 | }
 44 | 
 45 | // openai 通用请求代码
 46 | func OpenaiRequest(prompt string) string {
 47 | 	// 如果 prompt 的长度（以字节计）大于 65536 则截断（注意中文字符）
 48 | 	if len([]rune(prompt)) > 10000 {
 49 | 		prompt = string([]rune(prompt)[:10000])
 50 | 	}
 51 | 	a := []option.RequestOption{
 52 | 		option.WithAPIKey(LLMTOKEN),
 53 | 		option.WithBaseURL(LLMBASEURL),
 54 | 	}
 55 | 	client := openai.NewClient(a...)
 56 | 	chatCompletion, err := client.Chat.Completions.New(
 57 | 		context.TODO(),
 58 | 		openai.ChatCompletionNewParams{
 59 | 			Messages: openai.F([]openai.ChatCompletionMessageParamUnion{
 60 | 				openai.UserMessage(
 61 | 					`我有一个标过star的github库需要进行分类和标记，给出最相关的8个标记。我会给你它的的readme文件，请你分析后给出一个json结构的标签，
 62 | 限制：只给出严格的json结果，其他内容比如json标签等不需要。
 63 | 输出格式严格如下
 64 | {
 65 |   "tags": []
 66 | }`,
 67 | 				),
 68 | 				openai.UserMessage(prompt),
 69 | 			}),
 70 | 			Model: openai.F("deepseek-chat"),
 71 | 		},
 72 | 	)
 73 | 	if err != nil {
 74 | 		fmt.Println(prompt)
 75 | 		return ""
 76 | 	}
 77 | 	return chatCompletion.Choices[0].Message.Content
 78 | }
 79 | 
 80 | // 获取指定的github项目的readme 内容
 81 | func GetReadme(redmeUrl string) *model.ReadmeData {
 82 | 	client := resty.New()
 83 | 	//client.SetProxy("http://127.0.0.1:11081")
 84 | 	url := redmeUrl + "/readme"
 85 | 	resp, err := client.R().
 86 | 		SetHeader("Authorization", "token "+gtihubToken).
 87 | 		Get(url)
 88 | 	if err != nil {
 89 | 		return nil
 90 | 
 91 | 	}
 92 | 	body := resp.String()
 93 | 	var data model.ReadmeData
 94 | 	err = json.Unmarshal([]byte(body), &data)
 95 | 	if err != nil {
 96 | 		return nil
 97 | 	}
 98 | 	decodedContent, _ := base64.StdEncoding.DecodeString(data.Content)
 99 | 	data.RawContent = string(decodedContent)
100 | 	return &data
101 | }
102 | 
103 | // 并行处理
104 | func AIParallelProcess(data []model.StarInfo) []model.StarInfo {
105 | 
106 | 	var wg sync.WaitGroup
107 | 	results := make(chan model.StarInfo, len(data))
108 | 	//增加一个限速
109 | 	limiter := make(chan struct{}, 30)
110 | 	for _, star := range data {
111 | 		wg.Add(1)
112 | 		go func(star model.StarInfo) {
113 | 			defer wg.Done()
114 | 			limiter <- struct{}{}
115 | 			defer func() { <-limiter }()
116 | 			// 获取readme
117 | 			readme := GetReadme(star.Url)
118 | 			if readme == nil {
119 | 				return
120 | 			}
121 | 			fmt.Println(star.FullName)
122 | 			// 调用openai接口
123 | 			result := OpenaiRequest(readme.RawContent)
124 | 			var ai_tag model.AI_tag
125 | 			err := json.Unmarshal([]byte(result), &ai_tag)
126 | 			if err != nil {
127 | 				return
128 | 			}
129 | 			star.AI_tag = ai_tag
130 | 			//还results需要添加对应的github项目标签
131 | 			results <- star
132 | 		}(star)
133 | 	}
134 | 
135 | 	go func() {
136 | 		wg.Wait()
137 | 		close(results)
138 | 	}()
139 | 	//取出结果
140 | 	var resultlist []model.StarInfo
141 | 	for result := range results {
142 | 		resultlist = append(resultlist, result)
143 | 		fmt.Println("Result from OpenAI:", result)
144 | 	}
145 | 	return resultlist
146 | }
147 | 
148 | func SaveMiddleResult(allStar interface{}, fileName string) {
149 | 	//	结果写入文件
150 | 	file, err := os.Create(fileName)
151 | 	if err != nil {
152 | 		panic(err)
153 | 	}
154 | 	defer file.Close()
155 | 	encoder := json.NewEncoder(file)
156 | 	encoder.SetIndent("", "  ")
157 | 	err = encoder.Encode(allStar)
158 | 	if err != nil {
159 | 		panic(err)
160 | 	}
161 | }
162 | func readFileCache(filename string) []model.StarInfo {
163 | 	//读取allStar.json
164 | 	var allStar []model.StarInfo
165 | 
166 | 	file, err := os.Open(filename)
167 | 	if err != nil {
168 | 		return allStar
169 | 	}
170 | 	defer file.Close()
171 | 	decoder := json.NewDecoder(file)
172 | 	err = decoder.Decode(&allStar)
173 | 	if err != nil {
174 | 		panic(err)
175 | 	}
176 | 	return allStar
177 | }
178 | func Json2md(aiTagProcess []model.StarInfo) string {
179 | 	var md string
180 | 	for _, star := range aiTagProcess {
181 | 		md += fmt.Sprintf("### [%s](%s)\n", star.FullName, star.HtmlUrl)
182 | 		if star.Description != nil {
183 | 			md += fmt.Sprintf("- **Description:** %s\n", *star.Description)
184 | 		}
185 | 		if len(star.AI_tag.Tags) > 0 {
186 | 			md += fmt.Sprintf("- **Tags:** %s\n", strings.Join(star.AI_tag.Tags, ", "))
187 | 		}
188 | 		md += "\n"
189 | 	}
190 | 	//保存md到文件
191 | 	file, err := os.Create("starProject.md")
192 | 	if err != nil {
193 | 		panic(err)
194 | 	}
195 | 	defer file.Close()
196 | 	_, err = file.WriteString(md)
197 | 	if err != nil {
198 | 		panic(err)
199 | 	}
200 | 	return md
201 | 
202 | }
203 | 
204 | var gtihubToken = os.Getenv("GITHUB_TOKEN")
205 | var LLMTOKEN = os.Getenv("LLM_TOKEN")
206 | var LLMBASEURL = os.Getenv("LLM_BASEURL")
207 | var username = os.Getenv("USERNAME")
208 | 
209 | // main 加入启动参数
210 | func main() {
211 | 	if len(username) == 0 {
212 | 		panic("need username")
213 | 	}
214 | 	if len(gtihubToken) == 0 {
215 | 		panic("need gtihubToken")
216 | 
217 | 	}
218 | 
219 | 	//分页获取用户所有的star，加入数组
220 | 	var allStar []model.StarInfo
221 | 	page := 1
222 | 	for {
223 | 		stars := FetchUserStar(username, page)
224 | 		if len(*stars) == 0 {
225 | 			break
226 | 		}
227 | 		for _, star := range *stars {
228 | 			println(star.FullName)
229 | 			allStar = append(allStar, star)
230 | 		}
231 | 
232 | 		page++
233 | 	}
234 | 	//保存两份
235 | 	SaveMiddleResult(allStar, "allStar.json")
236 | 	SaveMiddleResult(allStar, "aiTagProcess.json")
237 | 
238 | 	var aiTagProcess []model.StarInfo
239 | 	aiTagProcess = readFileCache("aiTagProcess.json")
240 | 	//需要AI标签的处理
241 | 	if len(LLMTOKEN) != 0 && len(LLMBASEURL) != 0 {
242 | 		if len(allStar) != 0 {
243 | 			aiTagProcess := AIParallelProcess(allStar)
244 | 			SaveMiddleResult(aiTagProcess, "aiTagProcess.json")
245 | 		}
246 | 	}
247 | 
248 | 	Json2md(aiTagProcess)
249 | }
250 | 


--------------------------------------------------------------------------------
/.trae/documents/notion-style-technical-architecture.md:
--------------------------------------------------------------------------------
  1 | # GitHub项目展示平台 - 技术架构设计
  2 | 
  3 | ## 1. 架构设计
  4 | 
  5 | ```mermaid
  6 | graph TD
  7 |     A[用户浏览器] --> B[React 18 前端应用]
  8 |     B --> C[Framer Motion 动画引擎]
  9 |     B --> D[Tailwind CSS 样式系统]
 10 |     B --> E[Fuse.js 搜索引擎]
 11 |     B --> F[静态JSON数据源]
 12 |     
 13 |     subgraph "前端层"
 14 |         B
 15 |         C
 16 |         D
 17 |         E
 18 |     end
 19 |     
 20 |     subgraph "数据层"
 21 |         F
 22 |     end
 23 |     
 24 |     subgraph "构建工具链"
 25 |         G[Vite 构建工具]
 26 |         H[PostCSS 处理器]
 27 |     end
 28 | ```
 29 | 
 30 | ## 2. 技术描述
 31 | 
 32 | * **前端框架**: React\@18 + TypeScript\@5 + Vite\@6
 33 | 
 34 | * **样式系统**: Tailwind CSS\@3 + PostCSS\@8 + Autoprefixer\@10
 35 | 
 36 | * **动画库**: Framer Motion\@11 (实现Notion级别的微交互)
 37 | 
 38 | * **搜索引擎**: Fuse.js\@7 (模糊搜索和智能筛选)
 39 | 
 40 | * **图标系统**: Lucide React\@0.400+ (一致的线性图标)
 41 | 
 42 | * **字体**: Inter字体族 + JetBrains Mono (代码显示)
 43 | 
 44 | * **构建优化**: Vite插件生态 + 代码分割 + 懒加载
 45 | 
 46 | ## 3. 路由定义
 47 | 
 48 | | 路由           | 用途                |
 49 | | ------------ | ----------------- |
 50 | | /            | 主展示页面，项目网格展示和搜索功能 |
 51 | | /project/:id | 项目详情页面，深度展示单个项目信息 |
 52 | | /about       | 关于页面，个人品牌和技能展示    |
 53 | | /search      | 高级搜索页面，复杂筛选和排序功能  |
 54 | 
 55 | ## 4. 组件架构设计
 56 | 
 57 | ### 4.1 核心组件层次
 58 | 
 59 | ```mermaid
 60 | graph TD
 61 |     A[App 根组件] --> B[Layout 布局组件]
 62 |     B --> C[Header 顶部导航]
 63 |     B --> D[Main 主内容区]
 64 |     B --> E[Footer 底部信息]
 65 |     
 66 |     D --> F[ProjectGrid 项目网格]
 67 |     D --> G[SearchPanel 搜索面板]
 68 |     D --> H[FilterSidebar 筛选侧栏]
 69 |     
 70 |     F --> I[ProjectCard 项目卡片]
 71 |     I --> J[ProjectMeta 项目元信息]
 72 |     I --> K[TechStack 技术栈标签]
 73 |     I --> L[ProjectStats 项目统计]
 74 |     
 75 |     subgraph "原子组件"
 76 |         M[Button 按钮]
 77 |         N[Input 输入框]
 78 |         O[Tag 标签]
 79 |         P[Avatar 头像]
 80 |         Q[Icon 图标]
 81 |     end
 82 | ```
 83 | 
 84 | ### 4.2 状态管理架构
 85 | 
 86 | ```typescript
 87 | // 全局状态接口定义
 88 | interface AppState {
 89 |   projects: Project[];
 90 |   searchTerm: string;
 91 |   selectedTags: string[];
 92 |   sortMethod: 'default' | 'stars' | 'updated' | 'name';
 93 |   viewMode: 'grid' | 'list' | 'masonry';
 94 |   theme: 'light' | 'dark' | 'auto';
 95 |   isLoading: boolean;
 96 |   error: string | null;
 97 | }
 98 | 
 99 | // 项目数据接口
100 | interface Project {
101 |   id: string;
102 |   full_name: string;
103 |   description: string;
104 |   html_url: string;
105 |   homepage?: string;
106 |   stargazers_count: number;
107 |   language: string;
108 |   topics: string[];
109 |   updated_at: string;
110 |   created_at: string;
111 |   ai_tag?: {
112 |     tags: string[];
113 |     category: string;
114 |     complexity: 'beginner' | 'intermediate' | 'advanced';
115 |   };
116 | }
117 | ```
118 | 
119 | ## 5. 样式系统架构
120 | 
121 | ### 5.1 Tailwind配置扩展
122 | 
123 | ```javascript
124 | // tailwind.config.js 核心配置
125 | module.exports = {
126 |   content: ['./src/**/*.{js,jsx,ts,tsx}'],
127 |   theme: {
128 |     extend: {
129 |       fontFamily: {
130 |         'sans': ['Inter', 'system-ui', 'sans-serif'],
131 |         'mono': ['JetBrains Mono', 'monospace'],
132 |       },
133 |       colors: {
134 |         notion: {
135 |           blue: '#2383E2',
136 |           gray: {
137 |             50: '#F7F6F3',
138 |             100: '#E9E9E7',
139 |             200: '#CBCAC8',
140 |             300: '#A0A0A0',
141 |             400: '#6F6F6F',
142 |             500: '#2F2F2F',
143 |           }
144 |         }
145 |       },
146 |       animation: {
147 |         'fade-in': 'fadeIn 0.3s ease-out',
148 |         'slide-up': 'slideUp 0.3s ease-out',
149 |         'scale-in': 'scaleIn 0.2s ease-out',
150 |       },
151 |       boxShadow: {
152 |         'notion': '0 8px 32px rgba(0, 0, 0, 0.12)',
153 |         'notion-hover': '0 12px 48px rgba(0, 0, 0, 0.18)',
154 |       }
155 |     }
156 |   }
157 | }
158 | ```
159 | 
160 | ### 5.2 组件样式规范
161 | 
162 | ```css
163 | /* 核心样式变量 */
164 | :root {
165 |   --spacing-unit: 8px;
166 |   --border-radius-sm: 8px;
167 |   --border-radius-md: 12px;
168 |   --border-radius-lg: 16px;
169 |   --transition-fast: 0.15s ease-out;
170 |   --transition-normal: 0.3s ease-out;
171 |   --transition-slow: 0.5s ease-out;
172 | }
173 | 
174 | /* 通用组件基础样式 */
175 | .notion-card {
176 |   @apply bg-white rounded-lg shadow-notion hover:shadow-notion-hover;
177 |   @apply transition-all duration-300 ease-out;
178 |   @apply border border-gray-100;
179 | }
180 | 
181 | .notion-button {
182 |   @apply px-4 py-2 rounded-lg font-medium;
183 |   @apply transition-all duration-200 ease-out;
184 |   @apply focus:outline-none focus:ring-2 focus:ring-notion-blue focus:ring-opacity-50;
185 | }
186 | 
187 | .notion-input {
188 |   @apply w-full px-4 py-3 rounded-lg border border-gray-200;
189 |   @apply focus:border-notion-blue focus:ring-2 focus:ring-notion-blue focus:ring-opacity-20;
190 |   @apply transition-all duration-200 ease-out;
191 | }
192 | ```
193 | 
194 | ## 6. 性能优化策略
195 | 
196 | ### 6.1 代码分割和懒加载
197 | 
198 | ```typescript
199 | // 路由级别的代码分割
200 | const ProjectDetail = lazy(() => import('./pages/ProjectDetail'));
201 | const About = lazy(() => import('./pages/About'));
202 | const Search = lazy(() => import('./pages/Search'));
203 | 
204 | // 组件级别的懒加载
205 | const HeavyChart = lazy(() => import('./components/HeavyChart'));
206 | ```
207 | 
208 | ### 6.2 图片和资源优化
209 | 
210 | * 使用WebP格式图片，fallback到PNG
211 | 
212 | * 实现图片懒加载和渐进式加载
213 | 
214 | * SVG图标内联优化
215 | 
216 | * 字体子集化，只加载需要的字符
217 | 
218 | ### 6.3 搜索性能优化
219 | 
220 | ```typescript
221 | // 搜索防抖和缓存策略
222 | const useOptimizedSearch = () => {
223 |   const [searchResults, setSearchResults] = useState([]);
224 |   const searchCache = useRef(new Map());
225 |   
226 |   const debouncedSearch = useMemo(
227 |     () => debounce((term: string) => {
228 |       if (searchCache.current.has(term)) {
229 |         setSearchResults(searchCache.current.get(term));
230 |         return;
231 |       }
232 |       
233 |       const results = fuse.search(term);
234 |       searchCache.current.set(term, results);
235 |       setSearchResults(results);
236 |     }, 300),
237 |     []
238 |   );
239 |   
240 |   return { searchResults, debouncedSearch };
241 | };
242 | ```
243 | 
244 | ## 7. 部署和构建配置
245 | 
246 | ### 7.1 Vite构建优化
247 | 
248 | ```javascript
249 | // vite.config.js
250 | export default defineConfig({
251 |   plugins: [react()],
252 |   build: {
253 |     rollupOptions: {
254 |       output: {
255 |         manualChunks: {
256 |           vendor: ['react', 'react-dom'],
257 |           animations: ['framer-motion'],
258 |           search: ['fuse.js'],
259 |         }
260 |       }
261 |     },
262 |     chunkSizeWarningLimit: 1000,
263 |   },
264 |   optimizeDeps: {
265 |     include: ['react', 'react-dom', 'framer-motion', 'fuse.js']
266 |   }
267 | });
268 | ```
269 | 
270 | ### 7.2 静态资源处理
271 | 
272 | * 项目数据通过静态JSON文件提供
273 | 
274 | * 支持增量更新和版本控制
275 | 
276 | * CDN部署优化，全球加速访问
277 | 
278 | * Gzip压缩和Brotli压缩支持
279 | 
280 | 


--------------------------------------------------------------------------------
/web/src/components/ui/SearchAndFilter.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useMemo } from 'react';
  2 | import { motion, AnimatePresence } from 'framer-motion';
  3 | import { Search, Filter, X, ChevronDown, SortAsc, SortDesc } from 'lucide-react';
  4 | import Input from './Input';
  5 | import Button from './Button';
  6 | 
  7 | const SearchAndFilter = ({ 
  8 |   searchTerm, 
  9 |   onSearchChange, 
 10 |   selectedTags, 
 11 |   onTagsChange, 
 12 |   sortMethod, 
 13 |   onSortChange,
 14 |   tagFrequency,
 15 |   totalProjects,
 16 |   filteredCount
 17 | }) => {
 18 |   const [isFilterOpen, setIsFilterOpen] = useState(false);
 19 |   const [isSortOpen, setIsSortOpen] = useState(false);
 20 | 
 21 |   // Get top tags for display
 22 |   const topTags = useMemo(() => {
 23 |     return Object.entries(tagFrequency)
 24 |       .sort((a, b) => b[1] - a[1])
 25 |       .slice(0, 20)
 26 |       .map(([tag, count]) => ({ tag, count }));
 27 |   }, [tagFrequency]);
 28 | 
 29 |   const sortOptions = [
 30 |     { value: 'default', label: 'Default Order', icon: null },
 31 |     { value: 'stars', label: 'Most Stars', icon: SortDesc },
 32 |     { value: 'updated-time', label: 'Recently Updated', icon: SortAsc },
 33 |   ];
 34 | 
 35 |   const handleTagToggle = (tag) => {
 36 |     const newTags = selectedTags.includes(tag)
 37 |       ? selectedTags.filter(t => t !== tag)
 38 |       : [...selectedTags, tag];
 39 |     onTagsChange(newTags);
 40 |   };
 41 | 
 42 |   const clearAllFilters = () => {
 43 |     onSearchChange('');
 44 |     onTagsChange([]);
 45 |     onSortChange('default');
 46 |   };
 47 | 
 48 |   const hasActiveFilters = searchTerm || selectedTags.length > 0 || sortMethod !== 'default';
 49 | 
 50 |   return (
 51 |     <div className="space-y-4 sm:space-y-6">
 52 |       {/* Search Bar */}
 53 |       <div className="relative mb-4 sm:mb-0">
 54 |         <motion.div
 55 |           initial={{ opacity: 0, y: 20 }}
 56 |           animate={{ opacity: 1, y: 0 }}
 57 |           transition={{ duration: 0.3 }}
 58 |           className="relative"
 59 |         >
 60 |           <Input
 61 |             type="text"
 62 |             placeholder="Search projects by name, description, or technology..."
 63 |             value={searchTerm}
 64 |             onChange={(e) => onSearchChange(e.target.value)}
 65 |             icon={Search}
 66 |           />
 67 |           {searchTerm && (
 68 |             <motion.button
 69 |               initial={{ opacity: 0, scale: 0.8 }}
 70 |               animate={{ opacity: 1, scale: 1 }}
 71 |               exit={{ opacity: 0, scale: 0.8 }}
 72 |               onClick={() => onSearchChange('')}
 73 |               className="absolute right-4 top-1/2 transform -translate-y-1/2 p-1 rounded-notion-sm hover:bg-notion-gray-100 text-notion-gray-400 hover:text-notion-gray-600 transition-colors duration-200"
 74 |             >
 75 |               <X className="w-4 h-4" />
 76 |             </motion.button>
 77 |           )}
 78 |         </motion.div>
 79 |       </div>
 80 | 
 81 |       {/* Filter and Sort Controls */}
 82 |       <motion.div
 83 |         initial={{ opacity: 0, y: 20 }}
 84 |         animate={{ opacity: 1, y: 0 }}
 85 |         transition={{ duration: 0.3, delay: 0.1 }}
 86 |         className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-start sm:items-center justify-between"
 87 |       >
 88 |         <div className="flex flex-wrap gap-3">
 89 |           {/* Filter Button */}
 90 |           <div className="relative">
 91 |             <Button
 92 |               variant={isFilterOpen || selectedTags.length > 0 ? 'primary' : 'secondary'}
 93 |               onClick={() => setIsFilterOpen(!isFilterOpen)}
 94 |               className="flex items-center space-x-2"
 95 |             >
 96 |               <Filter className="w-4 h-4" />
 97 |               <span className="text-sm font-medium">Filter</span>
 98 |               {selectedTags.length > 0 && (
 99 |                 <span className="bg-white/20 text-xs px-1.5 py-0.5 rounded-full">
100 |                   {selectedTags.length}
101 |                 </span>
102 |               )}
103 |               <motion.div
104 |                 animate={{ rotate: isFilterOpen ? 180 : 0 }}
105 |                 transition={{ duration: 0.2 }}
106 |               >
107 |                 <ChevronDown className="w-4 h-4" />
108 |               </motion.div>
109 |             </Button>
110 |           </div>
111 | 
112 |           {/* Sort Button */}
113 |           <div className="relative">
114 |             <motion.button
115 |               whileHover={{ scale: 1.02 }}
116 |               whileTap={{ scale: 0.98 }}
117 |               onClick={() => setIsSortOpen(!isSortOpen)}
118 |               className={`flex items-center space-x-2 px-4 py-2 rounded-notion-md border transition-all duration-200 ${
119 |                 isSortOpen || sortMethod !== 'default'
120 |                   ? 'bg-notion-blue text-white border-notion-blue'
121 |                   : 'bg-white text-notion-gray-600 border-notion-gray-200 hover:border-notion-gray-300'
122 |               }`}
123 |             >
124 |               {sortOptions.find(opt => opt.value === sortMethod)?.icon && (
125 |                 React.createElement(sortOptions.find(opt => opt.value === sortMethod).icon, { className: 'w-4 h-4' })
126 |               )}
127 |               <span className="text-sm font-medium">
128 |                 {sortOptions.find(opt => opt.value === sortMethod)?.label}
129 |               </span>
130 |               <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${
131 |                 isSortOpen ? 'rotate-180' : ''
132 |               }`} />
133 |             </motion.button>
134 | 
135 |             {/* Sort Dropdown */}
136 |             <AnimatePresence>
137 |               {isSortOpen && (
138 |                 <motion.div
139 |                   initial={{ opacity: 0, y: 8, scale: 0.95 }}
140 |                   animate={{ opacity: 1, y: 0, scale: 1 }}
141 |                   exit={{ opacity: 0, y: 8, scale: 0.95 }}
142 |                   transition={{ duration: 0.15 }}
143 |                   className="absolute top-full left-0 mt-2 w-48 bg-white border border-notion-gray-200 rounded-notion-md shadow-notion-hover z-20"
144 |                 >
145 |                   {sortOptions.map((option) => (
146 |                     <motion.button
147 |                       key={option.value}
148 |                       whileHover={{ backgroundColor: 'rgb(247, 247, 245)' }}
149 |                       onClick={() => {
150 |                         onSortChange(option.value);
151 |                         setIsSortOpen(false);
152 |                       }}
153 |                       className={`w-full flex items-center space-x-3 px-4 py-3 text-left transition-colors duration-150 first:rounded-t-notion-md last:rounded-b-notion-md ${
154 |                         sortMethod === option.value
155 |                           ? 'bg-notion-blue text-white'
156 |                           : 'text-notion-gray-700 hover:bg-notion-gray-50'
157 |                       }`}
158 |                     >
159 |                       {option.icon && <option.icon className="w-4 h-4" />}
160 |                       <span className="text-sm font-medium">{option.label}</span>
161 |                     </motion.button>
162 |                   ))}
163 |                 </motion.div>
164 |               )}
165 |             </AnimatePresence>
166 |           </div>
167 | 
168 |           {/* Clear Filters */}
169 |           {hasActiveFilters && (
170 |             <motion.button
171 |               initial={{ opacity: 0, scale: 0.8 }}
172 |               animate={{ opacity: 1, scale: 1 }}
173 |               exit={{ opacity: 0, scale: 0.8 }}
174 |               whileHover={{ scale: 1.02 }}
175 |               whileTap={{ scale: 0.98 }}
176 |               onClick={clearAllFilters}
177 |               className="flex items-center space-x-2 px-3 py-2 text-sm text-notion-gray-500 hover:text-notion-gray-700 hover:bg-notion-gray-50 rounded-notion-md transition-all duration-200"
178 |             >
179 |               <X className="w-4 h-4" />
180 |               <span>Clear all</span>
181 |             </motion.button>
182 |           )}
183 |         </div>
184 | 
185 |         {/* Results Count */}
186 |         <div className="text-sm text-notion-gray-500">
187 |           Showing <span className="font-medium text-notion-gray-700">{filteredCount}</span> of{' '}
188 |           <span className="font-medium text-notion-gray-700">{totalProjects}</span> projects
189 |         </div>
190 |       </motion.div>
191 | 
192 |       {/* Filter Tags Panel */}
193 |       <AnimatePresence>
194 |         {isFilterOpen && (
195 |           <motion.div
196 |             initial={{ opacity: 0, height: 0 }}
197 |             animate={{ opacity: 1, height: 'auto' }}
198 |             exit={{ opacity: 0, height: 0 }}
199 |             transition={{ duration: 0.3 }}
200 |             className="bg-white border border-notion-gray-200 rounded-notion-lg p-6 space-y-4"
201 |           >
202 |             <h3 className="text-sm font-semibold text-notion-gray-700 mb-3">
203 |               Filter by Technology
204 |             </h3>
205 |             <div className="flex flex-wrap gap-2">
206 |               {topTags.map(({ tag, count }) => (
207 |                 <Button
208 |                   key={tag}
209 |                   variant={selectedTags.includes(tag) ? 'primary' : 'secondary'}
210 |                   size="small"
211 |                   onClick={() => handleTagToggle(tag)}
212 |                   className="flex items-center space-x-1 sm:space-x-2 justify-start text-xs sm:text-sm"
213 |                 >
214 |                   <span>{tag}</span>
215 |                   <span className={`text-xs px-1 sm:px-1.5 py-0.5 rounded-full ${
216 |                     selectedTags.includes(tag)
217 |                       ? 'bg-white/20 text-white'
218 |                       : 'bg-notion-gray-200 text-notion-gray-500'
219 |                   }`}>
220 |                     {count}
221 |                   </span>
222 |                 </Button>
223 |               ))}
224 |             </div>
225 |           </motion.div>
226 |         )}
227 |       </AnimatePresence>
228 | 
229 |       {/* Active Filters Display */}
230 |       {selectedTags.length > 0 && (
231 |         <motion.div
232 |           initial={{ opacity: 0, y: 10 }}
233 |           animate={{ opacity: 1, y: 0 }}
234 |           className="flex flex-wrap gap-2"
235 |         >
236 |           <span className="text-sm text-notion-gray-500 self-center">Active filters:</span>
237 |           {selectedTags.map((tag) => (
238 |             <motion.span
239 |               key={tag}
240 |               initial={{ opacity: 0, scale: 0.8 }}
241 |               animate={{ opacity: 1, scale: 1 }}
242 |               exit={{ opacity: 0, scale: 0.8 }}
243 |               className="flex items-center space-x-1 bg-notion-blue text-white px-3 py-1 rounded-notion-md text-sm"
244 |             >
245 |               <span>{tag}</span>
246 |               <button
247 |                 onClick={() => handleTagToggle(tag)}
248 |                 className="hover:bg-white/20 rounded-full p-0.5 transition-colors duration-150"
249 |               >
250 |                 <X className="w-3 h-3" />
251 |               </button>
252 |             </motion.span>
253 |           ))}
254 |         </motion.div>
255 |       )}
256 |     </div>
257 |   );
258 | };
259 | 
260 | export default SearchAndFilter;


--------------------------------------------------------------------------------
/web/src/pages/HomePage.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect, useMemo } from 'react';
  2 | import { motion, AnimatePresence } from 'framer-motion';
  3 | import Fuse from 'fuse.js';
  4 | import Layout from '../components/layout/Layout';
  5 | import ProjectCard from '../components/project/ProjectCard';
  6 | import SearchAndFilter from '../components/ui/SearchAndFilter';
  7 | import Loading from '../components/ui/Loading';
  8 | import Card from '../components/ui/Card';
  9 | import { Github, Sparkles } from 'lucide-react';
 10 | 
 11 | const HomePage = () => {
 12 |   const [projects, setProjects] = useState([]);
 13 |   const [isLoading, setIsLoading] = useState(true);
 14 |   const [searchTerm, setSearchTerm] = useState('');
 15 |   const [selectedTags, setSelectedTags] = useState([]);
 16 |   const [sortMethod, setSortMethod] = useState('default');
 17 | 
 18 |   // Load JSON data
 19 |   useEffect(() => {
 20 |     const loadProjects = async () => {
 21 |       try {
 22 |         const response = await fetch('/projects.json');
 23 |         const data = await response.json();
 24 |         setProjects(data);
 25 |         setIsLoading(false);
 26 |       } catch (error) {
 27 |         console.error('Error loading projects:', error);
 28 |         setIsLoading(false);
 29 |       }
 30 |     };
 31 | 
 32 |     loadProjects();
 33 |   }, []);
 34 | 
 35 |   // Calculate tag frequencies
 36 |   const tagFrequency = useMemo(() => {
 37 |     const frequencies = {};
 38 |     projects.forEach(project => {
 39 |       const projectTags = [
 40 |         ...(project.topics || []),
 41 |         ...(project.ai_tag?.tags || []),
 42 |         project.language
 43 |       ].filter(Boolean);
 44 | 
 45 |       projectTags.forEach(tag => {
 46 |         frequencies[tag] = (frequencies[tag] || 0) + 1;
 47 |       });
 48 |     });
 49 |     return frequencies;
 50 |   }, [projects]);
 51 | 
 52 |   // Fuzzy search setup
 53 |   const fuse = useMemo(() => {
 54 |     const options = {
 55 |       keys: ['full_name', 'name', 'description', 'ai_tag.tags', 'topics', 'language'],
 56 |       threshold: 0.3,
 57 |       includeScore: true,
 58 |     };
 59 |     return new Fuse(projects, options);
 60 |   }, [projects]);
 61 | 
 62 |   // Filtered and sorted projects
 63 |   const filteredProjects = useMemo(() => {
 64 |     let result = projects;
 65 | 
 66 |     // Apply fuzzy search if there's a search term
 67 |     if (searchTerm.trim()) {
 68 |       result = fuse.search(searchTerm.trim()).map(r => r.item);
 69 |     }
 70 | 
 71 |     // Apply tag filtering
 72 |     if (selectedTags.length > 0) {
 73 |       result = result.filter(project => {
 74 |         const projectTags = [
 75 |           ...(project.topics || []),
 76 |           ...(project.ai_tag?.tags || []),
 77 |           project.language
 78 |         ].filter(Boolean);
 79 | 
 80 |         return selectedTags.every(tag => projectTags.includes(tag));
 81 |       });
 82 |     }
 83 | 
 84 |     // Apply sorting
 85 |     if (sortMethod === 'stars') {
 86 |       result = [...result].sort((a, b) =>
 87 |         (b.stargazers_count || 0) - (a.stargazers_count || 0)
 88 |       );
 89 |     } else if (sortMethod === 'updated-time') {
 90 |       result = [...result].sort((a, b) =>
 91 |         new Date(b.updated_at) - new Date(a.updated_at)
 92 |       );
 93 |     }
 94 | 
 95 |     return result;
 96 |   }, [projects, searchTerm, selectedTags, sortMethod, fuse]);
 97 | 
 98 |   // Loading state
 99 |   if (isLoading) {
100 |     return (
101 |       <Layout>
102 |         <div className="min-h-screen flex items-center justify-center">
103 |           <Loading size="large" text="正在加载项目数据..." />
104 |         </div>
105 |       </Layout>
106 |     );
107 |   }
108 | 
109 |   return (
110 |     <Layout>
111 |       {/* GitHub Star Button - Fixed Position */}
112 |       <motion.a
113 |         href="https://github.com/Mran/githubstartog"
114 |         target="_blank"
115 |         rel="noopener noreferrer"
116 |         initial={{ opacity: 0, scale: 0.8 }}
117 |         animate={{ opacity: 1, scale: 1 }}
118 |         transition={{ delay: 0.5 }}
119 |         whileHover={{ scale: 1.05, y: -2 }}
120 |         whileTap={{ scale: 0.95 }}
121 |         className="fixed top-20 right-6 z-40 flex items-center space-x-2 bg-gray-900 text-white px-4 py-2.5 rounded-notion-lg shadow-notion-hover hover:shadow-notion-strong transition-all duration-300 group"
122 |       >
123 |         <Github className="w-5 h-5" />
124 |         <span className="text-sm font-medium">Star on GitHub</span>
125 |         <motion.div
126 |           animate={{ scale: [1, 1.2, 1] }}
127 |           transition={{ duration: 2, repeat: Infinity }}
128 |           className="w-2 h-2 bg-yellow-400 rounded-full"
129 |         />
130 |       </motion.a>
131 | 
132 |       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
133 |         {/* Hero Section */}
134 |         <motion.div
135 |           initial={{ opacity: 0, y: 30 }}
136 |           animate={{ opacity: 1, y: 0 }}
137 |           transition={{ duration: 0.6 }}
138 |           className="text-center mb-8 sm:mb-12 px-4 sm:px-0"
139 |         >
140 |           <motion.div
141 |             initial={{ scale: 0.8, opacity: 0 }}
142 |             animate={{ scale: 1, opacity: 1 }}
143 |             transition={{ duration: 0.5, delay: 0.2 }}
144 |             className="inline-flex items-center space-x-2 bg-notion-blue/10 text-notion-blue px-4 py-2 rounded-notion-full mb-6"
145 |           >
146 |             <Sparkles className="w-4 h-4" />
147 |             <span className="text-sm font-medium">Curated Project Collection</span>
148 |           </motion.div>
149 |           
150 |           <motion.h1
151 |             initial={{ opacity: 0, y: 20 }}
152 |             animate={{ opacity: 1, y: 0 }}
153 |             transition={{ duration: 0.6, delay: 0.3 }}
154 |             className="text-4xl md:text-5xl lg:text-6xl font-bold notion-text-primary mb-6 leading-tight"
155 |           >
156 |             My GitHub
157 |             <br />
158 |             <span className="text-notion-blue">Project Showcase</span>
159 |           </motion.h1>
160 |           
161 |           <motion.p
162 |             initial={{ opacity: 0, y: 20 }}
163 |             animate={{ opacity: 1, y: 0 }}
164 |             transition={{ duration: 0.6, delay: 0.4 }}
165 |             className="text-lg md:text-xl notion-text-secondary max-w-3xl mx-auto leading-relaxed"
166 |           >
167 |             A carefully curated collection of my development projects, showcasing innovation,
168 |             <br className="hidden md:block" />
169 |             craftsmanship, and attention to detail in every line of code.
170 |           </motion.p>
171 |         </motion.div>
172 | 
173 |         {/* Search and Filter */}
174 |         <motion.div
175 |           initial={{ opacity: 0, y: 20 }}
176 |           animate={{ opacity: 1, y: 0 }}
177 |           transition={{ duration: 0.5, delay: 0.5 }}
178 |           className="mb-6 sm:mb-8 px-4 sm:px-0"
179 |         >
180 |           <SearchAndFilter
181 |             searchTerm={searchTerm}
182 |             onSearchChange={setSearchTerm}
183 |             selectedTags={selectedTags}
184 |             onTagsChange={setSelectedTags}
185 |             sortMethod={sortMethod}
186 |             onSortChange={setSortMethod}
187 |             tagFrequency={tagFrequency}
188 |             totalProjects={projects.length}
189 |             filteredCount={filteredProjects.length}
190 |           />
191 |         </motion.div>
192 | 
193 |         {/* Projects Grid */}
194 |         <motion.div
195 |           initial={{ opacity: 0 }}
196 |           animate={{ opacity: 1 }}
197 |           transition={{ duration: 0.5, delay: 0.6 }}
198 |         >
199 |           {filteredProjects.length > 0 ? (
200 |             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
201 |               {filteredProjects.map((project, index) => (
202 |                 <ProjectCard
203 |                   key={project.full_name || project.name}
204 |                   project={project}
205 |                   index={index}
206 |                 />
207 |               ))}
208 |             </div>
209 |           ) : (
210 |             <motion.div
211 |               initial={{ opacity: 0, scale: 0.9 }}
212 |               animate={{ opacity: 1, scale: 1 }}
213 |               transition={{ duration: 0.4 }}
214 |               className="text-center py-16"
215 |             >
216 |               <div className="w-24 h-24 bg-notion-gray-100 rounded-notion-full flex items-center justify-center mx-auto mb-6">
217 |                 <Github className="w-12 h-12 text-notion-gray-400" />
218 |               </div>
219 |               <h3 className="text-xl font-semibold notion-text-primary mb-2">
220 |                 No projects found
221 |               </h3>
222 |               <p className="notion-text-secondary mb-6">
223 |                 Try adjusting your search terms or filters to find what you're looking for.
224 |               </p>
225 |               <motion.button
226 |                 whileHover={{ scale: 1.05 }}
227 |                 whileTap={{ scale: 0.95 }}
228 |                 onClick={() => {
229 |                   setSearchTerm('');
230 |                   setSelectedTags([]);
231 |                   setSortMethod('default');
232 |                 }}
233 |                 className="bg-notion-blue text-white px-6 py-3 rounded-notion-md font-medium hover:bg-notion-blue/90 transition-colors duration-200"
234 |               >
235 |                 Clear all filters
236 |               </motion.button>
237 |             </motion.div>
238 |           )}
239 |         </motion.div>
240 | 
241 |         {/* Stats Section */}
242 |         {filteredProjects.length > 0 && (
243 |           <motion.div
244 |             initial={{ opacity: 0, y: 20 }}
245 |             animate={{ opacity: 1, y: 0 }}
246 |             transition={{ duration: 0.5, delay: 0.8 }}
247 |             className="mt-16 text-center"
248 |           >
249 |             <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-8 max-w-2xl mx-auto px-4 sm:px-0">
250 |               <Card className="text-center">
251 |                 <motion.div 
252 |                   className="text-3xl font-bold text-notion-blue"
253 |                   initial={{ scale: 0 }}
254 |                   animate={{ scale: 1 }}
255 |                   transition={{ delay: 0.4, type: 'spring', stiffness: 200 }}
256 |                 >
257 |                   {projects.length}
258 |                 </motion.div>
259 |                 <div className="text-sm notion-text-secondary font-medium">
260 |                   Total Projects
261 |                 </div>
262 |               </Card>
263 |               <Card className="text-center">
264 |                 <motion.div 
265 |                   className="text-3xl font-bold text-notion-blue"
266 |                   initial={{ scale: 0 }}
267 |                   animate={{ scale: 1 }}
268 |                   transition={{ delay: 0.5, type: 'spring', stiffness: 200 }}
269 |                 >
270 |                   {Object.keys(tagFrequency).length}
271 |                 </motion.div>
272 |                 <div className="text-sm notion-text-secondary font-medium">
273 |                   Technologies
274 |                 </div>
275 |               </Card>
276 |               <Card className="text-center">
277 |                 <motion.div 
278 |                   className="text-3xl font-bold text-notion-blue"
279 |                   initial={{ scale: 0 }}
280 |                   animate={{ scale: 1 }}
281 |                   transition={{ delay: 0.6, type: 'spring', stiffness: 200 }}
282 |                 >
283 |                   {projects.reduce((sum, p) => sum + (p.stargazers_count || 0), 0)}
284 |                 </motion.div>
285 |                 <div className="text-sm notion-text-secondary font-medium">
286 |                   Total Stars
287 |                 </div>
288 |               </Card>
289 |             </div>
290 |           </motion.div>
291 |         )}
292 |       </div>
293 |     </Layout>
294 |   );
295 | };
296 | 
297 | export default HomePage;


--------------------------------------------------------------------------------