前 20 天我們做了許多 功能小模組，但都還是獨立存在，今天我們要把它們「收編」到一個小網站，未來就能在這裡整合所有 Demo 與文章，像是一個「互動式線上展覽館」。

建立 React + Vite 專案

在 VS Code 專案資料夾輸入：

npm create vite@latest ai-invest-demo
cd ai-invest-demo
npm install
npm run dev

這樣就能快速啟動一個 React 網站。

基本頁面結構

我們設計成 左右分欄，左邊是導航，右邊是內容。

App.jsx 範例：

jsx
import { useState } from "react";
import "./App.css";

const articles = Array.from({ length: 30 }, (_, i) => `Day ${i + 1}`);

function App() {
  const [selectedDay, setSelectedDay] = useState("Day 1");
  const [mode, setMode] = useState("article"); // 'article' or 'demo'

  return (
    <div className="flex h-screen">
      {/* 左邊側邊欄 */}
      <div className="w-64 bg-gray-800 text-white p-4 overflow-y-auto">
        <h2 className="text-xl font-bold mb-4">AI 投資展示館</h2>
        <ul>
          {articles.map((day) => (
            <li
              key={day}
              className={`p-2 cursor-pointer hover:bg-gray-700 ${
                selectedDay === day ? "bg-gray-600" : ""
              }`}
              onClick={() => setSelectedDay(day)}
            >
              {day}
            </li>
          ))}
        </ul>
      </div>

      {/* 右邊主畫面 */}
      <div className="flex-1 p-6">
        <h1 className="text-2xl font-bold mb-4">{selectedDay}</h1>
        
        {/* 模式切換 */}
        <div className="mb-4">
          <button
            onClick={() => setMode("article")}
            className={`mr-2 px-4 py-2 rounded ${
              mode === "article" ? "bg-blue-500 text-white" : "bg-gray-200"
            }`}
          >
            文章
          </button>
          <button
            onClick={() => setMode("demo")}
            className={`px-4 py-2 rounded ${
              mode === "demo" ? "bg-blue-500 text-white" : "bg-gray-200"
            }`}
          >
            Demo
          </button>
        </div>

        {/* 內容顯示區 */}
        {mode === "article" ? (
          <p>
            這裡將會顯示 {selectedDay} 的文章內容（Markdown 或 API 載入）。
          </p>
        ) : (
          <div className="border p-4 rounded bg-gray-100">
            這裡將會顯示 {selectedDay} 的 Demo（互動式功能）。
          </div>
        )}
      </div>
    </div>
  );
}

export default App;

這樣我們就有：

• 左邊側邊欄：可以點選不同的 Day。

• 右邊內容區：能切換「文章 / Demo」。

但在我實作的時候，一直沒辦法在VS Code 正確處理 Tailwind CSS 的 @tailwind 指令。
導致我的呈現是全都直式，沒有區分左右分別的內容。
@tailwind 不是標準 CSS 語法，必須透過 Tailwind CSS 編譯器（通常搭配 PostCSS）來處理。
之後我會繼續嘗試找到解決方法。

執行結果

點選上述任一天，下方就會跟著做更動。

結語

今天成功架設了 React + Vite 的網站，但目前只是放文字，之後我們可以讓文章部分 →
從 Markdown 檔案或 資料庫 載入，讓Demo 部分 → 引入之前寫的 AI 功能（股價查詢、摘要生成、投資報告分析等）。
👉 明天（Day 22），明天我們會把之前寫的文章（Day 1 ~ Day 20）逐步搬進來，讓右邊的「文章模式」真的能看到文章，而不是假文字。