🐍💻 Conda Environment Monitor

一個基於「前後端分離」架構的全端應用程式。旨在透過乾淨、現代化的網頁介面 (Web GUI)，幫助開發者輕鬆監控本機端所有的 Conda 虛擬環境，並一目了然地確認環境的啟用狀態與絕對路徑。

---

🏗️ 系統架構與技術棧 (Tech Stack)

專案採用前後端分離架構，分為兩個主要部分：

• Backend
  • 語言: Python
  • 框架: FastAPI
  • 核心機制: 透過 Python 內建的 subprocess 模組，直接於作業系統底層執行 conda env list 終端機指令，並將回傳的純文字清洗、解析成結構化的 JSON 資料提供給前端。
• Frontend
  • 框架: Next.js (React 架構)
  • 語言: TypeScript
  • 樣式: Vanilla CSS 結合深色模式與現代化 UI 設計。
  • 核心機制: 透過 fetch API 呼叫後端資料，並利用 React 的 useState 進行狀態管理與畫面動態渲染。

---

📂 專案結構

Conda-Environment-Monitor/
├── backend/                # Python 後端伺服器
│   ├── core.py             # 核心指令執行與字串解析邏輯
│   └── main.py             # FastAPI 路由定義與 CORS 設定
├── frontend/               # Next.js 前端網頁
│   ├── src/app/page.tsx    # 主頁面 UI 與 Fetch 邏輯
│   └── ...                 # Next.js 其他配置檔
├── .vscode/                # VS Code 編輯器設定
├── .gitignore              # Git 忽略清單
└── README.md               # 專案說明文件

---

🚀 How to Run

為了讓本機端應用程式順利運作，必須同時啟動前端與後端伺服器。

1. 啟動後端 (FastAPI)

請開啟一個終端機，並確保已經啟動包含了 Python 的虛擬環境（例如 conda-environment-monitor）。

# 切換至後端資料夾
cd backend

# 啟動 FastAPI 開發伺服器
uvicorn main:app --reload

🔌 後端將運行於：http://127.0.0.1:8000 📖 可透過 http://127.0.0.1:8000/docs 檢視自動生成的 Swagger API 說明文件。

2. 啟動前端 (Next.js)

請開啟第二個終端機視窗。

# 切換至前端資料夾
cd frontend

# 啟動 Next.js 開發伺服器
npm run dev

🌐 前端將運行於：http://localhost:3000 💡 開啟瀏覽器訪問此網址，點擊右上角「掃描本地環境」即可看到您的 Conda 列表！