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

Author: CC11001100

office-website/src/components/TypescriptSupport.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+export const TypeSafetyIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 12L11 15L16 9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const SmartSuggestionIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 19.15V4.85C9 4.85 15 1.12 15 12C15 22.88 9 19.15 9 19.15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M5.28 9.32C5.28 9.32 7.89 7.5 7.89 12C7.89 16.5 5.28 14.68 5.28 14.68" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18.42 9.32C18.42 9.32 15.81 7.5 15.81 12C15.81 16.5 18.42 14.68 18.42 14.68" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const RefactoringIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 7V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M13 17L17 12L13 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M7 12L17 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export const ModernSyntaxIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 16.8V20.4C6 20.8418 6.12643 21.2627 6.36001 21.6C6.59358 21.9373 6.92161 22.1767 7.29912 22.2836C7.67664 22.3905 8.08474 22.359 8.44016 22.1937C8.79558 22.0284 9.07848 21.7483 9.24 21.4L15.24 10.4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18 14L21 17L18 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M12 8L9 5L12 2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M9 5H13.24C13.8214 5.00014 14.394 5.11665 14.9237 5.34223C15.4535 5.56782 15.9279 5.89725 16.32 6.31C16.7121 6.72276 17.0144 7.21343 17.2103 7.74792C17.4062 8.28242 17.492 8.84889 17.462 9.41718C17.4319 9.98546 17.2868 10.5397 17.0359 11.0486C16.785 11.5574 16.4335 12.0093 16 12.38L9.24 21.4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+); 

office-website/src/components/TypescriptSupport/FeatureIcons.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { CodeContainer } from '../../styles/components/TypescriptSupport.styles';
+import CustomCodeBlock from '../CustomCodeBlock';
+
+const tsCode = `// 类型定义
+interface UserScriptOptions {
+  name: string;
+  version: string;
+  match: string[];
+  namespace?: string;
+  description?: string;
+}
+
+// 类型安全的 API 调用
+GM_addStyle('.my-style { color: #3B82F6; }');
+
+// 泛型支持
+function getData<T>(url: string): Promise<T> {
+  return new Promise((resolve, reject) => {
+    GM_xmlhttpRequest({
+      method: 'GET',
+      url,
+      onload: (response) => {
+        try {
+          const data = JSON.parse(response.responseText) as T;
+          resolve(data);
+        } catch (error) {
+          reject(error);
+        }
+      },
+      onerror: (error) => reject(error)
+    });
+  });
+}
+
+// 使用示例
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+// 类型安全的异步请求
+async function fetchUser(id: number): Promise<User> {
+  return await getData<User>(\`https://api.example.com/users/\${id}\`);
+}`;
+
+const TypescriptCodeExample: React.FC = () => {
+  return (
+    <CodeContainer>
+      <CustomCodeBlock 
+        code={tsCode} 
+        language="typescript" 
+        showLineNumbers={true} 
+      />
+    </CodeContainer>
+  );
+};
+
+export default TypescriptCodeExample; 

office-website/src/components/TypescriptSupport/TypescriptCodeExample.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { 
+  FeatureItem, 
+  FeatureIcon, 
+  FeatureText, 
+  FeatureTitle, 
+  FeatureDescription 
+} from '../../styles/components/TypescriptSupport.styles';
+
+interface TypescriptFeatureProps {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+}
+
+const TypescriptFeature: React.FC<TypescriptFeatureProps> = ({ 
+  title, 
+  description, 
+  icon 
+}) => {
+  return (
+    <FeatureItem>
+      <FeatureIcon>{icon}</FeatureIcon>
+      <FeatureText>
+        <FeatureTitle>{title}</FeatureTitle>
+        <FeatureDescription>{description}</FeatureDescription>
+      </FeatureText>
+    </FeatureItem>
+  );
+};
+
+export default TypescriptFeature;