DIT_C/.02_Vibe_Coding_SOP.md

Markdown

Vibe Coding 專案執行手冊 (SOP & Structure)

說明: 本文件包含標準專案結構與分階段開發流程。

📌 專案結構藍圖 (Project Structure)

請依據此結構進行檔案配置：

project_name/
├── .env                    # 環境變數（不進版控）
├── .env.example            # 環境變數範本
├── .gitignore
├── README.md
├── requirements.txt
├── app.py                  # 主程式入口
├── config.py               # 設定檔
├── preview.html            # UI 預覽 (先預覽，後實作)
│
├── docs/                   # 文件中心 (先文件，後開發)
│   ├── SDD.md              # 系統設計文件
│   ├── security_audit.md   # 資安檢視報告
│   ├── user_command_log.md # 用戶指令記錄
│   ├── CHANGELOG.md        # 版本變更紀錄
│   └── API_DOC.md          # API 文件
│
├── models/                 # 資料庫模型
├── routes/                 # 路由模組
├── services/               # 商業邏輯
├── utils/                  # 工具函式
├── templates/              # HTML 模板
└── static/                 # 靜態資源
    ├── css/
    ├── js/
    └── images/


📌 開發流程標準作業程序 (SOP)
Phase 0: 專案初始化
結構建立：依照上述藍圖建立資料夾與基礎檔案。

環境變數：建立 .env，設定 DB 連線、LLM API Key 與 Flask 設定。

依賴安裝：建立 requirements.txt 並安裝必要套件 (flask, sqlalchemy 等)。

Git 設定：執行 git init 並建立 .gitignore。

Phase 1: 資料庫架構
Schema 設計：優先建立 users, llm_configs, system_logs 等核心表。

文件化：建立 docs/db_schema.md 記錄結構。

種子資料：寫入預設管理員帳號與預設配置。

Phase 2: UI/UX 預覽 (關鍵檢核點)
建立 preview.html：純前端頁面，不連接後端。

確認事項：配色方案、版面配置、RWD 響應式。

規則：必須等待使用者確認 UI 滿意後，才可進入後端實作。

Phase 3: 核心程式開發
主程式：設定 app.py 與 Blueprint 路由註冊。

功能實作：依序開發 auth (認證), admin (後台), api (服務) 模組。

防挫折：若遇錯 3 次即停止並尋求替代方案。

Phase 4: 功能完善與優化
管理者後台：實作使用者管理與 LLM API 設定測試。

通用功能：實作全域錯誤視窗、CSV 匯入/匯出、清單排序。

資安檢視：建立 docs/security_audit.md 並修復高風險項目 (SQL Injection, XSS)。

Phase 5: 交付與部署
文件更新：完善 SDD, CHANGELOG 與 README。

最終檢查：確認 .env 未進版控，所有功能測試通過。

Release：標記版本 tag 並推送到版控伺服器。

--

執行手冊已載入。請等待使用者指令開始 Phase 0。