新增貼文發布管理功能與測試部署流程

CLAUDE.md

@@ -82,7 +82,106 @@ python -m http.server 8000
 ```
 
 ### 部署平台
-- Hugging Face Spaces: https://huggingface.co/spaces/KyrosDev/kstools-license-manager
+- **正式環境**: https://huggingface.co/spaces/KyrosDev/kstools-license-manager
+- **測試環境**: https://huggingface.co/spaces/KyrosDev/kstools-license-manager-test
+
+### Git 分支策略
+
+```
+main     ─────●─────────────●─────────────●───── 正式版本（穩定）
+              ↑             ↑             ↑
+develop ──●──●──●──●───●───●──●──●───●───●───── 開發分支（測試）
+```
+
+| 分支 | 用途 | 部署目標 |
+|------|------|----------|
+| `main` | 正式穩定版本 | HuggingFace 正式環境 + GitHub |
+| `develop` | 開發測試 | HuggingFace 測試環境 |
+
+### Git Remote 設定
+
+```bash
+# 查看現有 remote
+git remote -v
+
+# 預期設定：
+# github   -> GitHub（main + develop 分支）
+# origin   -> HuggingFace 正式環境（只推 main）
+# test     -> HuggingFace 測試環境（推 develop:main）
+
+# 新增測試環境 remote（如果尚未設定）
+git remote add test https://KyrosDev:<HF_TOKEN>@huggingface.co/spaces/KyrosDev/kstools-license-manager-test
+```
+
+### 開發工作流程
+
+**Step 1: 在 develop 分支開發**
+```bash
+# 確保在 develop 分支
+git checkout develop
+
+# 開發、修改程式碼...
+
+# 提交變更
+git add .
+git commit -m "新增功能描述"
+
+# 推送到 GitHub（養成習慣）
+git push github develop
+```
+
+**Step 2: 部署到測試環境驗證**
+```bash
+# 推送 develop 到測試平台（HF 從 main 分支 build）
+git push test develop:main
+```
+
+**Step 3: 在測試環境驗證**
+- 訪問 https://huggingface.co/spaces/KyrosDev/kstools-license-manager-test
+- 測試所有功能是否正常
+- 確認 API、UI、資料庫連線正常
+
+**Step 4: 測試通過，合併到 main**
+```bash
+# 切換到 main 分支
+git checkout main
+
+# 合併 develop
+git merge develop
+
+# 推送到正式環境和 GitHub
+git push origin main
+git push github main
+```
+
+**Step 5: 回到 develop 繼續開發**
+```bash
+git checkout develop
+```
+
+### 快速指令參考
+
+```bash
+# 日常開發（在 develop 分支）
+git push github develop              # 推送到 GitHub
+
+# 部署測試
+git push test develop:main           # 推送到測試環境
+
+# 發布正式版本（測試通過後）
+git checkout main
+git merge develop
+git push origin main && git push github main
+git checkout develop
+```
+
+### 注意事項
+
+1. **日常開發**: 在 `develop` 分支工作，頻繁推送到 GitHub
+2. **測試部署**: `develop` → 測試平台驗證
+3. **正式發布**: 測試通過後才合併到 `main` 並部署
+4. **環境變數**: 測試環境和正式環境使用相同的 Supabase，資料會互相影響
+5. **如需隔離測試**: 可在測試 Space 設定不同的 Supabase 專案連線
 
 ## Mermaid 圖表顏色規範
 

app/api/post_routes.py

@@ -0,0 +1,481 @@
+"""
+KSTools 貼文管理 API 路由
+處理社群貼文發布、編輯、郵件發送等功能
+"""
+
+from fastapi import APIRouter, HTTPException, Depends, Request
+from typing import Optional, List
+from datetime import datetime
+import logging
+from pydantic import BaseModel
+
+from ..models.supabase_clients import supabase_clients
+from ..services.auth_service import AuthService
+
+logger = logging.getLogger(__name__)
+router = APIRouter(tags=["posts"])
+
+# ==================== 資料模型 ====================
+
+class PostCreate(BaseModel):
+    """建立貼文請求"""
+    version: str
+    product_type: str  # 'revit' 或 'autocad'
+    subject: str
+    content: str
+    version_id: Optional[str] = None
+
+class PostUpdate(BaseModel):
+    """更新貼文請求"""
+    subject: Optional[str] = None
+    content: Optional[str] = None
+
+class PostPublish(BaseModel):
+    """發布貼文請求"""
+    send_email: bool = False  # 是否同時發送郵件
+
+# ==================== 輔助函數 ====================
+
+async def verify_admin(request: Request):
+    """驗證管理員權限"""
+    auth_service = AuthService()
+    token = request.headers.get('Authorization', '').replace('Bearer ', '')
+
+    if not token:
+        raise HTTPException(status_code=401, detail="No authorization token")
+
+    user = auth_service.verify_token(token)
+    if not user:
+        raise HTTPException(status_code=401, detail="Invalid token")
+
+    return user
+
+def get_download_link(version: str, product_type: str) -> str:
+    """取得版本的下載連結"""
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            return ""
+
+        table_name = 'versions_autocad' if product_type == 'autocad' else 'versions'
+        result = client.table(table_name).select('download_url').eq('version', version).execute()
+
+        if result.data and result.data[0].get('download_url'):
+            return result.data[0]['download_url']
+        return ""
+    except Exception as e:
+        logger.error(f"Get download link error: {e}")
+        return ""
+
+def replace_download_link_variable(content: str, download_link: str) -> str:
+    """替換內容中的 {download_link} 變數"""
+    if not download_link:
+        return content
+    return content.replace('{download_link}', download_link)
+
+# ==================== 管理端點 (需要認證) ====================
+
+@router.get("/admin/posts")
+async def get_posts(
+    product_type: Optional[str] = None,
+    status: Optional[str] = None,
+    limit: int = 50,
+    current_user = Depends(verify_admin)
+):
+    """
+    取得貼文列表
+    支援產品類型和狀態篩選
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        query = client.table('posts').select('*').eq('is_deleted', False)
+
+        if product_type and product_type in ['revit', 'autocad']:
+            query = query.eq('product_type', product_type)
+
+        if status and status in ['draft', 'published', 'sent']:
+            query = query.eq('status', status)
+
+        result = query.order('created_at', desc=True).limit(limit).execute()
+
+        return {
+            "posts": result.data,
+            "total": len(result.data)
+        }
+
+    except Exception as e:
+        logger.error(f"Get posts error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/admin/posts")
+async def create_post(
+    post_data: PostCreate,
+    current_user = Depends(verify_admin)
+):
+    """
+    建立新貼文
+    通常在版本發布時自動調用
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        # 驗證產品類型
+        if post_data.product_type not in ['revit', 'autocad']:
+            raise HTTPException(status_code=400, detail="Invalid product_type. Must be 'revit' or 'autocad'")
+
+        # 檢查是否已存在相同版本的貼文
+        existing = client.table('posts').select('id').eq('version', post_data.version).eq('product_type', post_data.product_type).eq('is_deleted', False).execute()
+        if existing.data:
+            raise HTTPException(status_code=400, detail=f"Post for {post_data.product_type} v{post_data.version} already exists")
+
+        # 取得下載連結並替換變數
+        download_link = get_download_link(post_data.version, post_data.product_type)
+        content_with_link = replace_download_link_variable(post_data.content, download_link)
+
+        # 建立貼文記錄
+        new_post = {
+            'version': post_data.version,
+            'product_type': post_data.product_type,
+            'subject': post_data.subject,
+            'content': content_with_link,
+            'status': 'draft',
+            'is_deleted': False
+        }
+
+        if post_data.version_id:
+            new_post['version_id'] = post_data.version_id
+
+        result = client.table('posts').insert(new_post).execute()
+
+        if not result.data:
+            raise HTTPException(status_code=500, detail="Failed to create post")
+
+        logger.info(f"Post created for {post_data.product_type} v{post_data.version}")
+
+        return {
+            "success": True,
+            "message": f"Post created for {post_data.product_type} v{post_data.version}",
+            "post": result.data[0]
+        }
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Create post error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.get("/admin/posts/{post_id}")
+async def get_post(
+    post_id: str,
+    current_user = Depends(verify_admin)
+):
+    """
+    取得單一貼文詳情
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        result = client.table('posts').select('*').eq('id', post_id).eq('is_deleted', False).execute()
+
+        if not result.data:
+            raise HTTPException(status_code=404, detail="Post not found")
+
+        return {
+            "post": result.data[0]
+        }
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Get post error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.put("/admin/posts/{post_id}")
+async def update_post(
+    post_id: str,
+    post_data: PostUpdate,
+    current_user = Depends(verify_admin)
+):
+    """
+    更新貼文內容
+    只能編輯草稿狀態的貼文
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        # 檢查貼文是否存在
+        existing = client.table('posts').select('*').eq('id', post_id).eq('is_deleted', False).execute()
+        if not existing.data:
+            raise HTTPException(status_code=404, detail="Post not found")
+
+        post = existing.data[0]
+
+        # 只能編輯草稿狀態的貼文
+        if post['status'] != 'draft':
+            raise HTTPException(status_code=400, detail="Can only edit draft posts")
+
+        # 準備更新資料
+        update_data = {}
+        if post_data.subject is not None:
+            update_data['subject'] = post_data.subject
+        if post_data.content is not None:
+            # 替換下載連結變數
+            download_link = get_download_link(post['version'], post['product_type'])
+            update_data['content'] = replace_download_link_variable(post_data.content, download_link)
+
+        if not update_data:
+            raise HTTPException(status_code=400, detail="No update data provided")
+
+        result = client.table('posts').update(update_data).eq('id', post_id).execute()
+
+        if not result.data:
+            raise HTTPException(status_code=500, detail="Failed to update post")
+
+        logger.info(f"Post {post_id} updated")
+
+        return {
+            "success": True,
+            "message": "Post updated successfully",
+            "post": result.data[0]
+        }
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Update post error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/admin/posts/{post_id}/publish")
+async def publish_post(
+    post_id: str,
+    publish_data: PostPublish,
+    current_user = Depends(verify_admin)
+):
+    """
+    發布貼文
+    可選擇是否同時發送郵件通知
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        # 檢查貼文是否存在
+        existing = client.table('posts').select('*').eq('id', post_id).eq('is_deleted', False).execute()
+        if not existing.data:
+            raise HTTPException(status_code=404, detail="Post not found")
+
+        post = existing.data[0]
+
+        # 草稿或已發布狀態都可以發布/重新發布
+        if post['status'] == 'sent':
+            raise HTTPException(status_code=400, detail="Post already sent, cannot modify")
+
+        # 更新狀態為已發布
+        update_data = {'status': 'published'}
+
+        email_result = None
+        if publish_data.send_email:
+            # 發送郵件
+            from ..services.email_service import EmailService
+            email_service = EmailService()
+
+            try:
+                recipient_count = await email_service.send_version_announcement(
+                    subject=post['subject'],
+                    content=post['content'],
+                    product_type=post['product_type']
+                )
+
+                update_data['status'] = 'sent'
+                update_data['sent_at'] = datetime.utcnow().isoformat()
+                update_data['sent_by'] = current_user.get('email', 'Unknown')
+                update_data['recipient_count'] = recipient_count
+
+                email_result = {
+                    "sent": True,
+                    "recipient_count": recipient_count
+                }
+
+                logger.info(f"Email sent for post {post_id} to {recipient_count} recipients")
+
+            except Exception as email_error:
+                logger.error(f"Email send error: {email_error}")
+                email_result = {
+                    "sent": False,
+                    "error": str(email_error)
+                }
+
+        result = client.table('posts').update(update_data).eq('id', post_id).execute()
+
+        if not result.data:
+            raise HTTPException(status_code=500, detail="Failed to publish post")
+
+        response = {
+            "success": True,
+            "message": "Post published successfully",
+            "post": result.data[0]
+        }
+
+        if email_result:
+            response["email"] = email_result
+
+        return response
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Publish post error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.post("/admin/posts/{post_id}/send-email")
+async def send_post_email(
+    post_id: str,
+    current_user = Depends(verify_admin)
+):
+    """
+    單獨發送郵件（針對已發布的貼文）
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        # 檢查貼文是否存在
+        existing = client.table('posts').select('*').eq('id', post_id).eq('is_deleted', False).execute()
+        if not existing.data:
+            raise HTTPException(status_code=404, detail="Post not found")
+
+        post = existing.data[0]
+
+        # 只有已發布的貼文可以發送郵件
+        if post['status'] == 'draft':
+            raise HTTPException(status_code=400, detail="Please publish the post first")
+
+        if post['status'] == 'sent':
+            raise HTTPException(status_code=400, detail="Email already sent for this post")
+
+        # 發送郵件
+        from ..services.email_service import EmailService
+        email_service = EmailService()
+
+        recipient_count = await email_service.send_version_announcement(
+            subject=post['subject'],
+            content=post['content'],
+            product_type=post['product_type']
+        )
+
+        # 更新貼文狀態
+        update_data = {
+            'status': 'sent',
+            'sent_at': datetime.utcnow().isoformat(),
+            'sent_by': current_user.get('email', 'Unknown'),
+            'recipient_count': recipient_count
+        }
+
+        result = client.table('posts').update(update_data).eq('id', post_id).execute()
+
+        logger.info(f"Email sent for post {post_id} to {recipient_count} recipients")
+
+        return {
+            "success": True,
+            "message": f"Email sent to {recipient_count} recipients",
+            "recipient_count": recipient_count,
+            "post": result.data[0] if result.data else None
+        }
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Send email error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.delete("/admin/posts/{post_id}")
+async def delete_post(
+    post_id: str,
+    current_user = Depends(verify_admin)
+):
+    """
+    刪除貼文（軟刪除）
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        # 檢查貼文是否存在
+        existing = client.table('posts').select('*').eq('id', post_id).eq('is_deleted', False).execute()
+        if not existing.data:
+            raise HTTPException(status_code=404, detail="Post not found")
+
+        # 軟刪除
+        result = client.table('posts').update({'is_deleted': True}).eq('id', post_id).execute()
+
+        if not result.data:
+            raise HTTPException(status_code=500, detail="Failed to delete post")
+
+        logger.info(f"Post {post_id} deleted")
+
+        return {
+            "success": True,
+            "message": "Post deleted successfully"
+        }
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Delete post error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.get("/admin/posts/stats")
+async def get_post_stats(current_user = Depends(verify_admin)):
+    """
+    取得貼文統計資料
+    """
+    try:
+        client = supabase_clients.get_version_client()
+        if not client:
+            raise HTTPException(status_code=503, detail="Database unavailable")
+
+        # 取得所有未刪除的貼文
+        result = client.table('posts').select('*').eq('is_deleted', False).execute()
+        posts = result.data
+
+        # 統計各狀態數量
+        draft_count = len([p for p in posts if p['status'] == 'draft'])
+        published_count = len([p for p in posts if p['status'] == 'published'])
+        sent_count = len([p for p in posts if p['status'] == 'sent'])
+
+        # 統計各產品類型
+        revit_count = len([p for p in posts if p['product_type'] == 'revit'])
+        autocad_count = len([p for p in posts if p['product_type'] == 'autocad'])
+
+        # 總發送郵件數量
+        total_emails_sent = sum([p.get('recipient_count', 0) or 0 for p in posts if p['status'] == 'sent'])
+
+        return {
+            "total_posts": len(posts),
+            "by_status": {
+                "draft": draft_count,
+                "published": published_count,
+                "sent": sent_count
+            },
+            "by_product": {
+                "revit": revit_count,
+                "autocad": autocad_count
+            },
+            "total_emails_sent": total_emails_sent
+        }
+
+    except Exception as e:
+        logger.error(f"Get post stats error: {e}")
+        raise HTTPException(status_code=500, detail=str(e))

app/api/version_routes.py

@@ -40,6 +40,11 @@ class ReleaseVersionRequest(BaseModel):
     min_revit_version: Optional[str] = None
     download_url: Optional[str] = None  # 可選，如果不上傳檔案則提供外部連結
 
+class PostContent(BaseModel):
+    """貼文內容"""
+    subject: str
+    content: str
+
 # ==================== 公開端點 (不需認證) ====================
 
 @router.post("/check-version")
@@ -189,6 +194,8 @@ async def release_version(
     min_revit_version: Optional[str] = Form(None),
     download_url: Optional[str] = Form(None),
     file: Optional[UploadFile] = File(None),
+    post_subject: Optional[str] = Form(None),  # 貼文主旨
+    post_content: Optional[str] = Form(None),  # 貼文內容
     current_user = Depends(verify_admin)
 ):
     """
@@ -293,11 +300,40 @@ async def release_version(
         # GitBook 同步已移除 - 請手動更新 GitBook 文檔
         # 更新格式請參考 CLAUDE.md 中的 GitBook 更新格式規範
 
+        # 自動建立貼文草稿（如果提供了貼文內容）
+        post_created = False
+        if post_subject and post_content:
+            try:
+                # 替換下載連結變數
+                post_content_with_link = post_content.replace('{download_link}', final_download_url or '')
+
+                post_data = {
+                    'version': version,
+                    'product_type': product_type,
+                    'subject': post_subject,
+                    'content': post_content_with_link,
+                    'status': 'draft',
+                    'is_deleted': False
+                }
+
+                if result.data and result.data[0].get('id'):
+                    post_data['version_id'] = result.data[0]['id']
+
+                post_result = client.table('posts').insert(post_data).execute()
+                if post_result.data:
+                    post_created = True
+                    logger.info(f"Auto-created post for {product_type} v{version}")
+
+            except Exception as post_error:
+                logger.warning(f"Failed to auto-create post: {post_error}")
+                # 不因為貼文建立失敗而中斷版本發布
+
         return {
             "success": True,
             "message": f"{product_type.capitalize()} version {version} released successfully",
             "product_type": product_type,
-            "version": result.data[0] if result.data else version_data
+            "version": result.data[0] if result.data else version_data,
+            "post_created": post_created
         }
 
     except Exception as e:

app/main.py

@@ -10,6 +10,7 @@ import uvicorn
 import os
 
 from app.api import version_routes
+from app.api import post_routes
 
 app = FastAPI(
     title="KSTools License & Version Manager API",
@@ -32,6 +33,7 @@ app.add_middleware(
 app.include_router(license.router, prefix="/api", tags=["license"])
 app.include_router(hardware.router, prefix="/api", tags=["hardware"])
 app.include_router(version_routes.router, prefix="/api", tags=["versions"])
+app.include_router(post_routes.router, prefix="/api", tags=["posts"])
 app.include_router(config_endpoint.router, prefix="/api", tags=["config"])
 
 @app.get("/")

app/services/email_service.py

@@ -0,0 +1,337 @@
+"""
+KSTools 郵件服務
+使用 Gmail SMTP 發送版本更新通知郵件
+"""
+
+import os
+import smtplib
+import asyncio
+import logging
+import re
+from email.mime.text import MIMEText
+from email.mime.multipart import MIMEMultipart
+from typing import List, Optional
+from datetime import datetime
+
+from ..models.supabase_clients import supabase_clients
+
+logger = logging.getLogger(__name__)
+
+
+class EmailService:
+    """
+    郵件服務類別
+    使用 Gmail SMTP 發送郵件
+    """
+
+    def __init__(self):
+        """初始化郵件服務"""
+        self.smtp_host = os.environ.get('SMTP_HOST', 'smtp.gmail.com')
+        self.smtp_port = int(os.environ.get('SMTP_PORT', 587))
+        self.smtp_user = os.environ.get('SMTP_USER', '')
+        self.smtp_pass = os.environ.get('SMTP_PASS', '')
+        self.from_email = os.environ.get('FROM_EMAIL', self.smtp_user)
+        self.from_name = os.environ.get('FROM_NAME', 'KSTools')
+
+        # 批次發送設定
+        self.batch_size = 50  # 每批最多發送 50 封
+        self.batch_delay = 30  # 批次間隔 30 秒
+
+        if not self.smtp_user or not self.smtp_pass:
+            logger.warning("SMTP credentials not configured")
+
+    def is_configured(self) -> bool:
+        """檢查郵件服務是否已設定"""
+        return bool(self.smtp_user and self.smtp_pass)
+
+    async def get_active_user_emails(self, product_type: Optional[str] = None) -> List[str]:
+        """
+        取得所有啟用用戶的郵箱
+        從 licenses 表查詢
+
+        Args:
+            product_type: 產品類型（目前授權是共用的，此參數保留供未來使用）
+
+        Returns:
+            有效郵箱列表
+        """
+        try:
+            client = supabase_clients.get_license_client()
+            if not client:
+                logger.error("License client unavailable")
+                return []
+
+            # 查詢所有啟用的授權
+            result = client.table('licenses').select('email').eq('status', 'active').execute()
+
+            if not result.data:
+                return []
+
+            # 提取並驗證郵箱
+            emails = []
+            email_pattern = re.compile(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$')
+
+            for record in result.data:
+                email = record.get('email', '').strip().lower()
+                if email and email_pattern.match(email):
+                    if email not in emails:  # 去重
+                        emails.append(email)
+
+            logger.info(f"Found {len(emails)} active user emails")
+            return emails
+
+        except Exception as e:
+            logger.error(f"Get user emails error: {e}")
+            return []
+
+    def _format_email_html(self, content: str, product_type: str) -> str:
+        """
+        格式化郵件 HTML 內容
+
+        Args:
+            content: 貼文內容
+            product_type: 產品類型
+
+        Returns:
+            格式化的 HTML 內容
+        """
+        # 將換行轉換為 <br>
+        html_content = content.replace('\n', '<br>')
+
+        # 產品名稱
+        product_name = 'KSTools Revit' if product_type == 'revit' else 'KSTools AutoCAD'
+
+        # HTML 模板
+        html_template = f"""
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {{
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }}
+        .container {{
+            background-color: #ffffff;
+            border-radius: 8px;
+            padding: 30px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }}
+        .header {{
+            text-align: center;
+            margin-bottom: 30px;
+            padding-bottom: 20px;
+            border-bottom: 2px solid #e0e0e0;
+        }}
+        .header h1 {{
+            color: #2563eb;
+            margin: 0;
+            font-size: 24px;
+        }}
+        .content {{
+            padding: 20px 0;
+        }}
+        .footer {{
+            margin-top: 30px;
+            padding-top: 20px;
+            border-top: 1px solid #e0e0e0;
+            text-align: center;
+            color: #666;
+            font-size: 12px;
+        }}
+        a {{
+            color: #2563eb;
+            text-decoration: none;
+        }}
+        a:hover {{
+            text-decoration: underline;
+        }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>{product_name} 版本更新</h1>
+        </div>
+        <div class="content">
+            {html_content}
+        </div>
+        <div class="footer">
+            <p>此郵件由 KSTools 系統自動發送</p>
+            <p>如有任何問題，請聯繫技術支援</p>
+        </div>
+    </div>
+</body>
+</html>
+"""
+        return html_template
+
+    async def _send_single_email(self, server: smtplib.SMTP, recipient: str, subject: str, html_content: str) -> bool:
+        """
+        發送單封郵件
+
+        Args:
+            server: SMTP 伺服器連線
+            recipient: 收件人
+            subject: 郵件主旨
+            html_content: HTML 內容
+
+        Returns:
+            是否發送成功
+        """
+        try:
+            msg = MIMEMultipart('alternative')
+            msg['Subject'] = subject
+            msg['From'] = f"{self.from_name} <{self.from_email}>"
+            msg['To'] = recipient
+
+            html_part = MIMEText(html_content, 'html', 'utf-8')
+            msg.attach(html_part)
+
+            server.send_message(msg)
+            return True
+
+        except Exception as e:
+            logger.error(f"Failed to send email to {recipient}: {e}")
+            return False
+
+    async def send_version_announcement(
+        self,
+        subject: str,
+        content: str,
+        product_type: str
+    ) -> int:
+        """
+        發送版本更新通知郵件
+
+        Args:
+            subject: 郵件主旨
+            content: 郵件內容
+            product_type: 產品類型
+
+        Returns:
+            成功發送的郵件數量
+        """
+        if not self.is_configured():
+            raise ValueError("SMTP not configured. Please set SMTP_USER and SMTP_PASS environment variables.")
+
+        # 取得收件人列表
+        recipients = await self.get_active_user_emails(product_type)
+
+        if not recipients:
+            logger.warning("No recipients found for email notification")
+            return 0
+
+        logger.info(f"Sending version announcement to {len(recipients)} recipients")
+
+        # 格式化 HTML 內容
+        html_content = self._format_email_html(content, product_type)
+
+        sent_count = 0
+        total_batches = (len(recipients) + self.batch_size - 1) // self.batch_size
+
+        # 分批發送
+        for batch_num, i in enumerate(range(0, len(recipients), self.batch_size), 1):
+            batch = recipients[i:i + self.batch_size]
+
+            try:
+                # 建立 SMTP 連線
+                with smtplib.SMTP(self.smtp_host, self.smtp_port, timeout=30) as server:
+                    server.starttls()
+                    server.login(self.smtp_user, self.smtp_pass)
+
+                    # 對每個收件人發送個別郵件
+                    for recipient in batch:
+                        success = await self._send_single_email(server, recipient, subject, html_content)
+                        if success:
+                            sent_count += 1
+
+                logger.info(f"Batch {batch_num}/{total_batches}: Sent {len(batch)} emails")
+
+                # 批次間暫停，避免觸發 Gmail 限制
+                if batch_num < total_batches:
+                    await asyncio.sleep(self.batch_delay)
+
+            except smtplib.SMTPAuthenticationError as e:
+                logger.error(f"SMTP authentication failed: {e}")
+                raise ValueError("SMTP authentication failed. Please check your credentials.")
+
+            except Exception as e:
+                logger.error(f"SMTP error in batch {batch_num}: {e}")
+                # 繼續處理下一批
+                continue
+
+        logger.info(f"Email sending completed: {sent_count}/{len(recipients)} sent successfully")
+        return sent_count
+
+    async def send_test_email(self, recipient: str) -> bool:
+        """
+        發送測試郵件
+
+        Args:
+            recipient: 測試收件人
+
+        Returns:
+            是否發送成功
+        """
+        if not self.is_configured():
+            raise ValueError("SMTP not configured")
+
+        try:
+            subject = "KSTools 郵件服務測試"
+            content = """
+這是一封測試郵件。
+
+如果您收到此郵件，表示 KSTools 郵件服務已正確設定。
+
+此郵件由系統自動發送，請勿回覆。
+"""
+            html_content = self._format_email_html(content, 'revit')
+
+            with smtplib.SMTP(self.smtp_host, self.smtp_port, timeout=30) as server:
+                server.starttls()
+                server.login(self.smtp_user, self.smtp_pass)
+
+                success = await self._send_single_email(server, recipient, subject, html_content)
+
+            if success:
+                logger.info(f"Test email sent to {recipient}")
+            return success
+
+        except Exception as e:
+            logger.error(f"Test email failed: {e}")
+            raise
+
+    def health_check(self) -> dict:
+        """
+        郵件服務健康檢查
+        """
+        return {
+            'service': 'EmailService',
+            'configured': self.is_configured(),
+            'smtp_host': self.smtp_host,
+            'smtp_port': self.smtp_port,
+            'from_email': self.from_email,
+            'from_name': self.from_name,
+            'batch_size': self.batch_size,
+            'timestamp': datetime.now().isoformat()
+        }
+
+
+# 建立全域實例
+_email_service_instance = None
+
+
+def get_email_service() -> EmailService:
+    """取得 EmailService 單例實例"""
+    global _email_service_instance
+    if _email_service_instance is None:
+        _email_service_instance = EmailService()
+    return _email_service_instance

frontend/css/posts.css

@@ -0,0 +1,479 @@
+/**
+ * Posts Management Page Styles
+ * 貼文發布管理頁面樣式
+ */
+
+/* ==================== 篩選區 ==================== */
+
+.filters-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 24px;
+}
+
+.filter-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.filter-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.filter-buttons {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.filter-btn {
+    padding: 6px 12px;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.filter-btn:hover {
+    border-color: var(--accent-blue);
+    color: var(--text-primary);
+}
+
+.filter-btn.active {
+    background: var(--accent-blue);
+    border-color: var(--accent-blue);
+    color: #fff;
+}
+
+/* ==================== 產品標籤 ==================== */
+
+.product-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.product-badge.revit {
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+}
+
+.product-badge.autocad {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+}
+
+/* ==================== 狀態標籤 ==================== */
+
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+}
+
+.status-badge.draft {
+    background: rgba(156, 163, 175, 0.15);
+    color: #9ca3af;
+}
+
+.status-badge.published {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+}
+
+.status-badge.sent {
+    background: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+}
+
+/* ==================== 統計卡片 ==================== */
+
+.stats-row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 16px;
+}
+
+.stat-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+}
+
+.stat-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: rgba(88, 166, 255, 0.1);
+    color: var(--accent-blue);
+    font-size: 16px;
+}
+
+.stat-icon.draft {
+    background: rgba(156, 163, 175, 0.1);
+    color: #9ca3af;
+}
+
+.stat-icon.published {
+    background: rgba(34, 197, 94, 0.1);
+    color: #22c55e;
+}
+
+.stat-icon.sent {
+    background: rgba(59, 130, 246, 0.1);
+    color: #3b82f6;
+}
+
+.stat-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.stat-value {
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--text-primary);
+    line-height: 1;
+}
+
+.stat-label {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+}
+
+/* ==================== 貼文網格 ==================== */
+
+.posts-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 20px;
+}
+
+.post-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: all 0.2s ease;
+}
+
+.post-card:hover {
+    border-color: var(--accent-blue);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.post-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    background: var(--bg-tertiary);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.post-badges {
+    display: flex;
+    gap: 8px;
+}
+
+.post-version {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    padding: 2px 8px;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+}
+
+.post-card-body {
+    flex: 1;
+    padding: 16px;
+}
+
+.post-subject {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 8px 0;
+    line-height: 1.4;
+}
+
+.post-content-preview {
+    font-size: 13px;
+    color: var(--text-secondary);
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.post-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    border-top: 1px solid var(--border-color);
+    background: var(--bg-tertiary);
+}
+
+.post-date {
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+.post-date i {
+    margin-right: 4px;
+}
+
+.post-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.sent-info {
+    font-size: 11px;
+    color: var(--text-secondary);
+    margin-right: 8px;
+}
+
+/* ==================== 空狀態 ==================== */
+
+.empty-state {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    text-align: center;
+}
+
+.empty-state i {
+    font-size: 48px;
+    color: var(--text-secondary);
+    opacity: 0.5;
+    margin-bottom: 16px;
+}
+
+.empty-state h3 {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0 0 8px 0;
+}
+
+.empty-state p {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin: 0 0 16px 0;
+}
+
+/* ==================== Modal ==================== */
+
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 20px;
+}
+
+.modal-dialog {
+    width: 100%;
+    max-width: 600px;
+    background: var(--bg-primary);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.modal-dialog.modal-lg {
+    max-width: 800px;
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+}
+
+.modal-close {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.modal-body {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--border-color);
+}
+
+/* ==================== 表單樣式 ==================== */
+
+.form-input,
+.form-textarea {
+    width: 100%;
+    padding: 10px 14px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-size: 14px;
+    transition: all 0.2s ease;
+}
+
+.form-input:focus,
+.form-textarea:focus {
+    outline: none;
+    border-color: var(--accent-blue);
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
+}
+
+.form-textarea {
+    resize: vertical;
+    min-height: 200px;
+    font-family: inherit;
+    line-height: 1.5;
+}
+
+.form-hint {
+    display: block;
+    margin-top: 6px;
+    font-size: 12px;
+    color: var(--text-secondary);
+}
+
+/* ==================== 按鈕樣式 ==================== */
+
+.btn-sm {
+    padding: 6px 10px;
+    font-size: 12px;
+}
+
+.btn-danger {
+    background: rgba(248, 81, 73, 0.1);
+    color: var(--accent-red);
+    border: 1px solid transparent;
+}
+
+.btn-danger:hover {
+    background: var(--accent-red);
+    color: #fff;
+}
+
+/* ==================== 響應式設計 ==================== */
+
+@media (max-width: 768px) {
+    .filters-container {
+        flex-direction: column;
+        gap: 16px;
+    }
+
+    .filter-buttons {
+        flex-wrap: wrap;
+    }
+
+    .posts-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .stats-row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .modal-dialog {
+        max-width: 100%;
+        margin: 10px;
+    }
+
+    .post-card-footer {
+        flex-direction: column;
+        gap: 12px;
+        align-items: flex-start;
+    }
+
+    .post-actions {
+        width: 100%;
+        justify-content: flex-end;
+    }
+}
+
+@media (max-width: 480px) {
+    .stats-row {
+        grid-template-columns: 1fr;
+    }
+
+    .post-actions .btn {
+        flex: 1;
+    }
+}

frontend/index.html

@@ -6,6 +6,7 @@
     <title>KSTools License Manager</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔑</text></svg>">
     <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/posts.css">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <!-- Hugging Face 推薦的現代載入方式 -->
@@ -107,6 +108,12 @@
                     <span>授權記錄</span>
                 </a>
             </li>
+            <li class="nav-item" data-page="posts">
+                <a href="#" class="nav-link">
+                    <i class="fas fa-bullhorn"></i>
+                    <span>貼文發布</span>
+                </a>
+            </li>
             <li class="nav-item" data-page="settings">
                 <a href="#" class="nav-link">
                     <i class="fas fa-cog"></i>
@@ -180,6 +187,11 @@
                 <!-- Logs content will be loaded here -->
             </div>
 
+            <!-- Posts Page -->
+            <div class="page-content" id="postsPage">
+                <!-- Posts content will be loaded here -->
+            </div>
+
             <!-- Settings Page -->
             <div class="page-content" id="settingsPage">
                 <!-- Settings content will be loaded here -->
@@ -203,6 +215,7 @@
     <script src="js/pages/users.js"></script>
     <script src="js/pages/logs.js"></script>
     <script src="js/pages/settings.js"></script>
+    <script src="js/pages/posts.js"></script>
     <script src="js/app.js"></script>
     <script>
         // 手機選單事件由 app.js 統一處理

frontend/js/api.js

@@ -349,6 +349,67 @@ class ApiClient {
     async getSystemInfo() {
         return this.request('/api/system/info');
     }
+
+    // ==================== Posts API ====================
+
+    // 取得貼文列表
+    async getPosts(productType = null, status = null) {
+        let url = '/api/admin/posts';
+        const params = [];
+
+        if (productType && productType !== 'all') {
+            params.push(`product_type=${productType}`);
+        }
+        if (status && status !== 'all') {
+            params.push(`status=${status}`);
+        }
+
+        if (params.length > 0) {
+            url += '?' + params.join('&');
+        }
+
+        return this.request(url);
+    }
+
+    // 取得單一貼文
+    async getPost(postId) {
+        return this.request(`/api/admin/posts/${postId}`);
+    }
+
+    // 更新貼文
+    async updatePost(postId, data) {
+        return this.request(`/api/admin/posts/${postId}`, {
+            method: 'PUT',
+            body: data
+        });
+    }
+
+    // 發布貼文
+    async publishPost(postId, sendEmail = false) {
+        return this.request(`/api/admin/posts/${postId}/publish`, {
+            method: 'POST',
+            body: { send_email: sendEmail }
+        });
+    }
+
+    // 發送郵件
+    async sendPostEmail(postId) {
+        return this.request(`/api/admin/posts/${postId}/send-email`, {
+            method: 'POST'
+        });
+    }
+
+    // 刪除貼文
+    async deletePost(postId) {
+        return this.request(`/api/admin/posts/${postId}`, {
+            method: 'DELETE'
+        });
+    }
+
+    // 取得貼文統計
+    async getPostStats() {
+        return this.request('/api/admin/posts/stats');
+    }
 }
 
 // Create global instance

frontend/js/app.js

@@ -12,13 +12,15 @@ class App {
             dashboard: window.dashboardPage,
             users: window.usersPage,
             logs: window.logsPage,
+            posts: window.postsPage,
             settings: window.settingsPage
         };
-        
+
         this.pageConfig = {
             dashboard: { title: '系統儀表板' },
             users: { title: '用戶管理' },
             logs: { title: '授權記錄' },
+            posts: { title: '貼文發布' },
             settings: { title: '系統設定' }
         };
     }

frontend/js/pages/posts.js

@@ -0,0 +1,499 @@
+/**
+ * Posts Management Page for KSTools License Manager
+ * 貼文發布管理頁面
+ */
+
+class PostsPage {
+    constructor() {
+        this.posts = [];
+        this.filters = {
+            productType: 'all',
+            status: 'all'
+        };
+        this.currentEditPost = null;
+    }
+
+    async render(container) {
+        container.innerHTML = `
+            <div class="posts-page">
+                <div class="page-header mb-4">
+                    <div class="d-flex justify-between align-center">
+                        <div>
+                            <h2>貼文發布</h2>
+                            <p class="text-secondary">管理版本更新貼文與郵件通知</p>
+                        </div>
+                        <button class="btn btn-primary" onclick="postsPage.refreshPosts()">
+                            <i class="fas fa-sync-alt"></i>
+                            重新整理
+                        </button>
+                    </div>
+                </div>
+
+                <!-- 篩選區 -->
+                <div class="card mb-4">
+                    <div class="card-body">
+                        <div class="filters-container">
+                            <div class="filter-group">
+                                <label class="filter-label">產品類型</label>
+                                <div class="filter-buttons" id="productTypeFilter">
+                                    <button class="filter-btn active" data-value="all">全部</button>
+                                    <button class="filter-btn" data-value="revit">
+                                        <span class="product-badge revit">Revit</span>
+                                    </button>
+                                    <button class="filter-btn" data-value="autocad">
+                                        <span class="product-badge autocad">AutoCAD</span>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="filter-group">
+                                <label class="filter-label">狀態</label>
+                                <div class="filter-buttons" id="statusFilter">
+                                    <button class="filter-btn active" data-value="all">全部</button>
+                                    <button class="filter-btn" data-value="draft">
+                                        <span class="status-badge draft">草稿</span>
+                                    </button>
+                                    <button class="filter-btn" data-value="published">
+                                        <span class="status-badge published">已發布</span>
+                                    </button>
+                                    <button class="filter-btn" data-value="sent">
+                                        <span class="status-badge sent">已發送</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 貼文統計 -->
+                <div class="stats-row mb-4" id="postsStats">
+                    <div class="stat-card">
+                        <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="statTotal">-</span>
+                            <span class="stat-label">總貼文數</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon draft"><i class="fas fa-edit"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="statDraft">-</span>
+                            <span class="stat-label">草稿</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon published"><i class="fas fa-check"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="statPublished">-</span>
+                            <span class="stat-label">已發布</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon sent"><i class="fas fa-envelope"></i></div>
+                        <div class="stat-info">
+                            <span class="stat-value" id="statSent">-</span>
+                            <span class="stat-label">已發送郵件</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 貼文列表 -->
+                <div class="posts-grid" id="postsGrid">
+                    <div class="text-center mt-5">
+                        <div class="spinner mb-3"></div>
+                        <p>載入貼文中...</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 編輯 Modal -->
+            <div class="modal-overlay" id="editPostModal" style="display: none;">
+                <div class="modal-dialog modal-lg">
+                    <div class="modal-header">
+                        <h3 class="modal-title">編輯貼文</h3>
+                        <button class="modal-close" onclick="postsPage.closeEditModal()">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        <form id="editPostForm">
+                            <div class="form-group">
+                                <label class="form-label">主旨</label>
+                                <input type="text" id="editSubject" class="form-input" placeholder="輸入郵件主旨..." required>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">內容</label>
+                                <textarea id="editContent" class="form-textarea" rows="12" placeholder="輸入貼文內容..." required></textarea>
+                                <small class="form-hint">可使用 {download_link} 變數，系統會自動替換為下載連結</small>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="btn btn-secondary" onclick="postsPage.closeEditModal()">取消</button>
+                        <button class="btn btn-primary" onclick="postsPage.savePost()">
+                            <i class="fas fa-save"></i> 儲存
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.setupEventHandlers();
+        await this.loadPosts();
+    }
+
+    setupEventHandlers() {
+        // 產品類型篩選
+        const productTypeFilter = document.getElementById('productTypeFilter');
+        if (productTypeFilter) {
+            productTypeFilter.addEventListener('click', (e) => {
+                const btn = e.target.closest('.filter-btn');
+                if (btn) {
+                    productTypeFilter.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    this.filters.productType = btn.dataset.value;
+                    this.displayPosts();
+                }
+            });
+        }
+
+        // 狀態篩選
+        const statusFilter = document.getElementById('statusFilter');
+        if (statusFilter) {
+            statusFilter.addEventListener('click', (e) => {
+                const btn = e.target.closest('.filter-btn');
+                if (btn) {
+                    statusFilter.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                    this.filters.status = btn.dataset.value;
+                    this.displayPosts();
+                }
+            });
+        }
+
+        // Modal 背景點擊關閉
+        const modal = document.getElementById('editPostModal');
+        if (modal) {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) {
+                    this.closeEditModal();
+                }
+            });
+        }
+    }
+
+    async loadPosts() {
+        try {
+            const result = await api.getPosts();
+            this.posts = result.posts || [];
+            this.updateStats();
+            this.displayPosts();
+        } catch (error) {
+            console.error('Load posts error:', error);
+            const grid = document.getElementById('postsGrid');
+            if (grid) {
+                grid.innerHTML = `
+                    <div class="empty-state">
+                        <i class="fas fa-exclamation-circle"></i>
+                        <h3>載入失敗</h3>
+                        <p>${error.message}</p>
+                        <button class="btn btn-primary" onclick="postsPage.refreshPosts()">重試</button>
+                    </div>
+                `;
+            }
+        }
+    }
+
+    updateStats() {
+        const total = this.posts.length;
+        const draft = this.posts.filter(p => p.status === 'draft').length;
+        const published = this.posts.filter(p => p.status === 'published').length;
+        const sent = this.posts.filter(p => p.status === 'sent').length;
+
+        document.getElementById('statTotal').textContent = total;
+        document.getElementById('statDraft').textContent = draft;
+        document.getElementById('statPublished').textContent = published;
+        document.getElementById('statSent').textContent = sent;
+    }
+
+    displayPosts() {
+        const grid = document.getElementById('postsGrid');
+        if (!grid) return;
+
+        // 篩選貼文
+        let filteredPosts = this.posts;
+
+        if (this.filters.productType !== 'all') {
+            filteredPosts = filteredPosts.filter(p => p.product_type === this.filters.productType);
+        }
+
+        if (this.filters.status !== 'all') {
+            filteredPosts = filteredPosts.filter(p => p.status === this.filters.status);
+        }
+
+        if (filteredPosts.length === 0) {
+            grid.innerHTML = `
+                <div class="empty-state">
+                    <i class="fas fa-inbox"></i>
+                    <h3>沒有貼文</h3>
+                    <p>當發布新版本時，系統會自動建立貼文草稿</p>
+                </div>
+            `;
+            return;
+        }
+
+        grid.innerHTML = filteredPosts.map(post => this.createPostCard(post)).join('');
+    }
+
+    createPostCard(post) {
+        const productBadge = post.product_type === 'revit'
+            ? '<span class="product-badge revit">Revit</span>'
+            : '<span class="product-badge autocad">AutoCAD</span>';
+
+        const statusBadge = this.getStatusBadge(post.status);
+        const contentPreview = this.truncateText(post.content, 150);
+        const createdDate = new Date(post.created_at).toLocaleDateString('zh-TW');
+
+        // 根據狀態顯示不同的操作按鈕
+        let actionButtons = '';
+
+        if (post.status === 'draft') {
+            actionButtons = `
+                <button class="btn btn-sm btn-secondary" onclick="postsPage.editPost('${post.id}')" title="編輯">
+                    <i class="fas fa-edit"></i>
+                </button>
+                <button class="btn btn-sm btn-primary" onclick="postsPage.publishPost('${post.id}')" title="發布">
+                    <i class="fas fa-paper-plane"></i>
+                </button>
+                <button class="btn btn-sm btn-danger" onclick="postsPage.deletePost('${post.id}')" title="刪除">
+                    <i class="fas fa-trash"></i>
+                </button>
+            `;
+        } else if (post.status === 'published') {
+            actionButtons = `
+                <button class="btn btn-sm btn-primary" onclick="postsPage.sendEmail('${post.id}')" title="發送郵件">
+                    <i class="fas fa-envelope"></i> 發送郵件
+                </button>
+                <button class="btn btn-sm btn-danger" onclick="postsPage.deletePost('${post.id}')" title="刪除">
+                    <i class="fas fa-trash"></i>
+                </button>
+            `;
+        } else if (post.status === 'sent') {
+            const sentInfo = post.sent_at
+                ? `<small class="sent-info">已發送 ${post.recipient_count || 0} 封郵件</small>`
+                : '';
+            actionButtons = `
+                ${sentInfo}
+                <button class="btn btn-sm btn-secondary" onclick="postsPage.viewPost('${post.id}')" title="查看">
+                    <i class="fas fa-eye"></i>
+                </button>
+            `;
+        }
+
+        return `
+            <div class="post-card" data-id="${post.id}">
+                <div class="post-card-header">
+                    <div class="post-badges">
+                        ${productBadge}
+                        ${statusBadge}
+                    </div>
+                    <span class="post-version">v${post.version}</span>
+                </div>
+                <div class="post-card-body">
+                    <h4 class="post-subject">${this.escapeHtml(post.subject)}</h4>
+                    <p class="post-content-preview">${this.escapeHtml(contentPreview)}</p>
+                </div>
+                <div class="post-card-footer">
+                    <span class="post-date">
+                        <i class="fas fa-calendar"></i> ${createdDate}
+                    </span>
+                    <div class="post-actions">
+                        ${actionButtons}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    getStatusBadge(status) {
+        const badges = {
+            draft: '<span class="status-badge draft"><i class="fas fa-edit"></i> 草稿</span>',
+            published: '<span class="status-badge published"><i class="fas fa-check"></i> 已發布</span>',
+            sent: '<span class="status-badge sent"><i class="fas fa-envelope"></i> 已發送</span>'
+        };
+        return badges[status] || '';
+    }
+
+    truncateText(text, maxLength) {
+        if (!text) return '';
+        if (text.length <= maxLength) return text;
+        return text.substring(0, maxLength) + '...';
+    }
+
+    escapeHtml(text) {
+        if (!text) return '';
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // 編輯貼文
+    async editPost(postId) {
+        const post = this.posts.find(p => p.id === postId);
+        if (!post) return;
+
+        if (post.status !== 'draft') {
+            Utils.showError('無法編輯', '只能編輯草稿狀態的貼文');
+            return;
+        }
+
+        this.currentEditPost = post;
+        document.getElementById('editSubject').value = post.subject;
+        document.getElementById('editContent').value = post.content;
+        document.getElementById('editPostModal').style.display = 'flex';
+    }
+
+    closeEditModal() {
+        document.getElementById('editPostModal').style.display = 'none';
+        this.currentEditPost = null;
+    }
+
+    async savePost() {
+        if (!this.currentEditPost) return;
+
+        const subject = document.getElementById('editSubject').value.trim();
+        const content = document.getElementById('editContent').value.trim();
+
+        if (!subject || !content) {
+            Utils.showError('驗證錯誤', '請填寫主旨和內容');
+            return;
+        }
+
+        try {
+            await api.updatePost(this.currentEditPost.id, { subject, content });
+            Utils.showSuccess('貼文已更新');
+            this.closeEditModal();
+            await this.loadPosts();
+        } catch (error) {
+            Utils.handleError(error, '更新貼文時');
+        }
+    }
+
+    // 發布貼文
+    async publishPost(postId) {
+        const post = this.posts.find(p => p.id === postId);
+        if (!post) return;
+
+        const confirmed = confirm(`確定要發布「${post.subject}」嗎？\n\n發布後將無法再編輯內容。`);
+        if (!confirmed) return;
+
+        try {
+            await api.publishPost(postId, false);
+            Utils.showSuccess('貼文已發布');
+            await this.loadPosts();
+        } catch (error) {
+            Utils.handleError(error, '發布貼文時');
+        }
+    }
+
+    // 發送郵件
+    async sendEmail(postId) {
+        const post = this.posts.find(p => p.id === postId);
+        if (!post) return;
+
+        const confirmed = confirm(
+            `確定要發送郵件通知嗎？\n\n` +
+            `主旨：${post.subject}\n` +
+            `產品：${post.product_type === 'revit' ? 'Revit' : 'AutoCAD'}\n\n` +
+            `郵件將發送給所有啟用用戶。`
+        );
+        if (!confirmed) return;
+
+        try {
+            const result = await api.sendPostEmail(postId);
+            Utils.showSuccess(`郵件已發送給 ${result.recipient_count || 0} 位用戶`);
+            await this.loadPosts();
+        } catch (error) {
+            Utils.handleError(error, '發送郵件時');
+        }
+    }
+
+    // 查看貼文（已發送的）
+    viewPost(postId) {
+        const post = this.posts.find(p => p.id === postId);
+        if (!post) return;
+
+        // 顯示唯讀 modal
+        this.currentEditPost = null;
+        document.getElementById('editSubject').value = post.subject;
+        document.getElementById('editSubject').disabled = true;
+        document.getElementById('editContent').value = post.content;
+        document.getElementById('editContent').disabled = true;
+
+        // 修改 modal 標題和按鈕
+        const modal = document.getElementById('editPostModal');
+        modal.querySelector('.modal-title').textContent = '查看貼文';
+        modal.querySelector('.modal-footer').innerHTML = `
+            <button class="btn btn-secondary" onclick="postsPage.closeViewModal()">關閉</button>
+        `;
+        modal.style.display = 'flex';
+    }
+
+    closeViewModal() {
+        const modal = document.getElementById('editPostModal');
+        modal.style.display = 'none';
+
+        // 恢復編輯功能
+        document.getElementById('editSubject').disabled = false;
+        document.getElementById('editContent').disabled = false;
+        modal.querySelector('.modal-title').textContent = '編輯貼文';
+        modal.querySelector('.modal-footer').innerHTML = `
+            <button class="btn btn-secondary" onclick="postsPage.closeEditModal()">取消</button>
+            <button class="btn btn-primary" onclick="postsPage.savePost()">
+                <i class="fas fa-save"></i> 儲存
+            </button>
+        `;
+    }
+
+    // 刪除貼文
+    async deletePost(postId) {
+        const post = this.posts.find(p => p.id === postId);
+        if (!post) return;
+
+        const confirmed = confirm(`確定要刪除「${post.subject}」嗎？\n\n此操作無法復原。`);
+        if (!confirmed) return;
+
+        try {
+            await api.deletePost(postId);
+            Utils.showSuccess('貼文已刪除');
+            await this.loadPosts();
+        } catch (error) {
+            Utils.handleError(error, '刪除貼文時');
+        }
+    }
+
+    async refreshPosts() {
+        const grid = document.getElementById('postsGrid');
+        if (grid) {
+            grid.innerHTML = `
+                <div class="text-center mt-5">
+                    <div class="spinner mb-3"></div>
+                    <p>載入貼文中...</p>
+                </div>
+            `;
+        }
+        await this.loadPosts();
+        Utils.showSuccess('已重新整理');
+    }
+
+    async refresh() {
+        await this.loadPosts();
+    }
+
+    destroy() {
+        this.posts = [];
+        this.currentEditPost = null;
+    }
+}
+
+// Create global instance
+window.postsPage = new PostsPage();