首先問ChatGPT，貼一段TypeScript代碼，問ChatGPT：要運作以上代碼，該怎麼操作？
ChatGPT給出了詳細步驟，下面是實際操作：
建立一個react項目：
npx create-react-app yuanyu-timeline
cd yuanyu-timeline
安裝tailwindcss：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
配置tailwind.config.js檔案：
// tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
配置src/index.css檔案，加入代碼：
/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
建立src/YuanyuTimeline.js，把之前生成的代碼複制進入：
import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Calendar } from 'lucide-react';
const timelineData = [
{ date: '2022-10-01', event: 'PromptCLUE1.0模型' },
{ date: '2022-11-01', event: 'PromptCLUE1.5模型' },
{ date: '2022-12-20', event: 'ChatYuan釋出' },
{ date: '2023-01-12', event: 'ChatYuan大模型開源' },
{ date: '2023-02-03', event: 'API釋出' },
{ date: '2023-02-09', event: '小程式打不開' },
{ date: '2023-02-22', event: 'ChatYuan更新' },
{ date: '2023-03-24', event: '支援手機' },
{ date: '2023-03-30', event: '入選AIGC50' },
{ date: '2023-04-03', event: '與外研線上合作' },
{ date: '2023-04-18', event: '更新版本釋出' },
{ date: '2023-04-21', event: 'KnowX1.0釋出' },
{ date: '2023-04-27', event: '入選AI創新企業TOP20' },
{ date: '2023-08-28', event: '公衆号最後更新' },
];
const TimelineItem = ({ date, event, isLast }) => (
<div className="flex">
<div className="flex flex-col items-center mr-4">
<div className="w-3 h-3 bg-blue-600 rounded-full"></div>
{!isLast && <div className="w-0.5 h-full bg-blue-600"></div>}
</div>
<Card className="mb-4 flex-grow">
<CardContent className="p-4">
<div className="flex items-center mb-2">
<Calendar className="w-4 h-4 mr-2 text-blue-600" />
<span className="text-sm font-semibold">{date}</span>
</div>
<p>{event}</p>
</CardContent>
</Card>
</div>
);
const VerticalTimeline = () => (
<div className="max-w-2xl mx-auto p-4">
<h2 className="text-2xl font-bold mb-6 text-center">Timeline</h2>
<div className="space-y-4">
{timelineData.map((item, index) => (
<TimelineItem
key={item.date}
date={item.date}
event={item.event}
isLast={index === timelineData.length - 1}
/>
))}
</div>
</div>
);
export default VerticalTimeline;
修改src/App.js檔案：
// src/App.js
import React from 'react';
import YuanyuTimeline from './YuanyuTimeline';
function App() {
return (
<div className="App">
<YuanyuTimeline />
</div>
);
}
export default App;
最後，運作指令：npm start