feat(website): add core website components and content - Add App with theme context - Add project structure and sample code - Add Home page and icons

Author: CC11001100

office-website/src/App.tsx

@@ -1,7 +1,4 @@
-import React from 'react';
-import { ThemeProvider } from 'styled-components';
-import { theme } from './styles/Theme';
-import GlobalStyles from './styles/GlobalStyles';
+import React, { useState, useEffect, useContext } from 'react';
 import Header from './components/Header';
 import Hero from './components/Hero';
 import Features from './components/Features';
@@ -10,22 +7,72 @@ import Installation from './components/Installation';
 import TypescriptSupport from './components/TypescriptSupport';
 import Community from './components/Community';
 import Footer from './components/Footer';
+import { ThemeProvider } from 'styled-components';
+import { lightTheme, darkTheme } from './styles/Theme';
+import GlobalStyles from './styles/GlobalStyles';
+
+// 创建主题上下文
+export const ThemeContext = React.createContext({
+  isDarkMode: true,
+  toggleTheme: () => {},
+});
+
+// 提供一个钩子函数用于获取主题上下文
+export const useTheme = () => useContext(ThemeContext);
 
 const App: React.FC = () => {
+  // 主题状态
+  const [isDarkMode, setIsDarkMode] = useState(true);
+  
+  // 切换主题函数
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+    localStorage.setItem('darkMode', (!isDarkMode).toString());
+  };
+  
+  // 从本地存储获取主题设置
+  useEffect(() => {
+    const savedDarkMode = localStorage.getItem('darkMode');
+    if (savedDarkMode !== null) {
+      setIsDarkMode(savedDarkMode === 'true');
+    } else {
+      // 如果没有保存过设置，则检查系统偏好
+      const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      setIsDarkMode(prefersDarkMode);
+    }
+  }, []);
+  
+  useEffect(() => {
+    // 更新页面滚动位置
+    window.scrollTo(0, 0);
+    
+    // 监听浏览器历史变化
+    const handlePopState = () => {
+      // 移除与 currentPage 相关的逻辑
+      window.scrollTo(0, 0);
+    };
+    
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+  
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyles />
-      <Header />
-      <main>
-        <Hero />
-        <Features />
-        <WorkflowDemo />
-        <Installation />
-        <TypescriptSupport />
-        <Community />
-      </main>
-      <Footer />
-    </ThemeProvider>
+    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
+      <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
+        <GlobalStyles />
+        
+        <div>
+          <Header />
+          <Hero />
+          <Features />
+          <WorkflowDemo />
+          <Installation />
+          <TypescriptSupport />
+          <Community />
+          <Footer />
+        </div>
+      </ThemeProvider>
+    </ThemeContext.Provider>
   );
 };
 

office-website/src/constants/ProjectStructure.ts

@@ -0,0 +1,80 @@
+// 项目目录结构的常量文件，用于VSCodeSidebar组件中展示
+
+// 文件类型枚举
+export enum FileType {
+  TYPESCRIPT = 'typescript',
+  JAVASCRIPT = 'javascript'
+}
+
+// 文件项接口
+export interface FileItem {
+  name: string;
+  type: 'file' | 'folder';
+  active?: boolean;
+  expanded?: boolean;
+  badge?: string;
+  children?: FileItem[];
+}
+
+// 项目结构
+export const PROJECT_STRUCTURE: FileItem[] = [
+  {
+    name: 'typescript-userscript-template',
+    type: 'folder',
+    expanded: true,
+    children: [
+      {
+        name: 'dist',
+        type: 'folder',
+        expanded: false,
+        children: [
+          {
+            name: 'index.js',
+            type: 'file',
+            active: true
+          }
+        ]
+      },
+      {
+        name: 'src',
+        type: 'folder',
+        expanded: true,
+        children: [
+          {
+            name: 'index.ts',
+            type: 'file'
+          },
+          {
+            name: 'userscript.ts',
+            type: 'file'
+          },
+          {
+            name: 'gm_api_utils.ts',
+            type: 'file'
+          }
+        ]
+      },
+      {
+        name: '.gitignore',
+        type: 'file'
+      },
+      {
+        name: 'package.json',
+        type: 'file',
+        badge: 'npm'
+      },
+      {
+        name: 'README.md',
+        type: 'file'
+      },
+      {
+        name: 'tsconfig.json',
+        type: 'file'
+      },
+      {
+        name: 'webpack.config.js',
+        type: 'file'
+      }
+    ]
+  }
+];