refactor(installation): 重构Installation组件及InstallationStep子组件，内联样式并优化组件结构

Author: CC11001100

office-website/src/components/Installation/InstallationStep.tsx

@@ -1,13 +1,46 @@
 import React from 'react';
-import { 
-  StepItem, 
-  StepNumber, 
-  StepTitle, 
-  StepDescription, 
-  CodeBlock 
-} from '../../styles/components/Installation.styles';
+import styled from 'styled-components';
 import CustomCodeBlock from '../CustomCodeBlock';
 
+const StepItem = styled.div`
+  position: relative;
+  padding-left: 3.5rem;
+`;
+
+const StepNumber = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 1.25rem;
+`;
+
+const StepTitle = styled.h3`
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 0.75rem;
+`;
+
+const StepDescription = styled.p`
+  color: ${({ theme }) => theme.colors.darkGray};
+  margin-bottom: 1.25rem;
+`;
+
+const CodeBlock = styled.div`
+  background-color: ${({ theme }) => theme.colors.background};
+  border-radius: ${({ theme }) => theme.borderRadius.medium};
+  overflow: hidden;
+  box-shadow: ${({ theme }) => theme.boxShadow.medium};
+`;
+
 interface InstallationStepProps {
   number: number;
   title: string;

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

@@ -1,16 +1,58 @@
 import React from 'react';
-import { 
-  SectionContainer, 
-  SectionInner, 
-  SectionHeading, 
-  Title, 
-  Subtitle, 
-  InstallationContent, 
-  StepsList 
-} from '../../styles/components/Installation.styles';
+import styled from 'styled-components';
 import InstallationStep from './InstallationStep';
 import { leftColumnSteps, rightColumnSteps } from './stepsData';
 
+const SectionContainer = styled.section`
+  padding: 6rem 0;
+  background-color: ${({ theme }) => theme.colors.backgroundAlt};
+`;
+
+const SectionInner = styled.div`
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+`;
+
+const SectionHeading = styled.div`
+  text-align: center;
+  margin-bottom: 4rem;
+`;
+
+const Title = styled.h2`
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-bottom: 1rem;
+  
+  @media (max-width: ${({ theme }) => theme.breakpoints.md}) {
+    font-size: 2rem;
+  }
+`;
+
+const Subtitle = styled.p`
+  font-size: 1.125rem;
+  max-width: 700px;
+  margin: 0 auto 2rem;
+  color: ${({ theme }) => theme.colors.darkGray};
+`;
+
+const InstallationContent = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: start;
+  
+  @media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const StepsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+`;
+
 const Installation: React.FC = () => {
   return (
     <SectionContainer id="installation">