重构：将Hero组件模块化，拆分样式和功能代码

Author: CC11001100

office-website/src/components/Hero/CodeExample.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { 
+  CodeBox, 
+  CodeHeader, 
+  CodeDots 
+} from '../../styles/components/CodeExample.styles';
+import { VisualContainer } from '../../styles/components/Hero.styles';
+import CustomCodeBlock from '../CustomCodeBlock';
+
+// 示例代码
+const codeExample = `// ==UserScript==
+// @name         Typescript Userscript Template
+// @namespace    https://github.com/JSREI/typescript-userscript-template
+// @version      1.0.0
+// @description  A modern userscript template using TypeScript
+// @author       Your Name
+// @match        *://*/*
+// @run-at       document-start
+// @grant        GM_getValue
+// @grant        GM_setValue
+// @grant        GM_xmlhttpRequest
+// ==/UserScript==
+
+import { storeData, retrieveData } from "./gm_api_utils";
+
+class MyUserScript {
+  private config = {
+    enableLogging: true,
+    theme: "dark"
+  };
+
+  constructor() {
+    this.initialize();
+  }
+
+  private async initialize(): Promise<void> {
+    console.log("UserScript initialized!");
+    
+    // 存储并获取上次运行时间
+    await storeData("lastRun", new Date().toISOString());
+    const lastRun = await retrieveData<string>("lastRun", "从未运行");
+    
+    if (this.config.enableLogging) {
+      console.log(\`上次运行时间: \${lastRun}\`);
+    }
+    
+    this.setupEventListeners();
+  }
+
+  private setupEventListeners(): void {
+    document.addEventListener("click", this.handleClick);
+  }
+
+  private handleClick = (e: MouseEvent): void => {
+    if (this.config.enableLogging) {
+      console.log("Clicked:", e.target);
+    }
+  };
+}
+
+// 启动脚本
+new MyUserScript();`;
+
+const CodeExample: React.FC = () => {
+  return (
+    <VisualContainer>
+      <CodeBox>
+        <CodeHeader>
+          <CodeDots>
+            <span></span>
+            <span></span>
+            <span></span>
+          </CodeDots>
+        </CodeHeader>
+        <CustomCodeBlock 
+          code={codeExample} 
+          language="typescript" 
+          showLineNumbers={true} 
+        />
+      </CodeBox>
+    </VisualContainer>
+  );
+};
+
+export default CodeExample; 

office-website/src/components/Hero/HeroContent.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { 
+  ContentLeft, 
+  Title, 
+  Subtitle, 
+  ButtonGroup, 
+  PrimaryButton, 
+  SecondaryButton 
+} from '../../styles/components/Hero.styles';
+import CodeExample from './CodeExample';
+
+const HeroContent: React.FC = () => {
+  return (
+    <>
+      <ContentLeft>
+        <Title>Typescript Userscript 模板</Title>
+        <Subtitle>
+          现代化的油猴脚本开发模板，集成TypeScript、Rollup和自动化工具，让你的UserScript开发更加高效和愉快。
+        </Subtitle>
+        <ButtonGroup>
+          <PrimaryButton href="https://github.com/JSREI/typescript-userscript-template" target="_blank">
+            获取模板
+          </PrimaryButton>
+          <SecondaryButton href="https://github.com/JSREI/typescript-userscript-template#readme" target="_blank">
+            查看文档
+          </SecondaryButton>
+        </ButtonGroup>
+      </ContentLeft>
+      
+      <CodeExample />
+    </>
+  );
+};
+
+export default HeroContent; 

office-website/src/components/Hero/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { HeroSection, HeroContent as StyledHeroContent } from '../../styles/components/Hero.styles';
+import HeroContent from './HeroContent';
+
+const Hero: React.FC = () => {
+  return (
+    <HeroSection id="home">
+      <StyledHeroContent>
+        <HeroContent />
+      </StyledHeroContent>
+    </HeroSection>
+  );
+};
+
+export default Hero; 

office-website/src/styles/components/CodeExample.styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const CodeBox = styled.div`
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  overflow: hidden;
+  box-shadow: ${({ theme }) => theme.boxShadow.large};
+  font-family: 'Fira Code', monospace;
+`;
+
+export const CodeHeader = styled.div`
+  background-color: #1e1e1e;
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+`;
+
+export const CodeDots = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  
+  span {
+    display: block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    
+    &:nth-child(1) {
+      background-color: #ff5f56;
+    }
+    
+    &:nth-child(2) {
+      background-color: #ffbd2e;
+    }
+    
+    &:nth-child(3) {
+      background-color: #27c93f;
+    }
+  }
+`;