PAPA開發實錄 [Day 2/7] - 四層權限系統的文化敏感 UX 設計

作為Blake Lab的文化科技融合實驗，第二天我們深入探討如何用現代 Web 技術實現複雜的阿美族社群權限管理，同時保持使用者體驗的直觀性。

🎯 挑戰：讓複雜權限系統變得直觀

昨天建立的 Django 後端實現了四層權限架構，今天的核心挑戰是：如何在前端呈現複雜的權限邏輯，讓跨世代使用者都能理解？

現實的設計約束

系統管理員、群組管理者、活動管理者、一般參與者四種角色
活動狀態（進行中/已結算）影響操作權限
分攤選項（完全分攤/部分分攤/不參與分攤）的複雜邏輯
跨群組活動的權限繼承問題

這不是教科書上的簡單 RBAC，而是反映阿美族社群現實組織結構的複雜系統。

🎨 阿美族文化色彩系統的技術實現

視覺設計語言

基於深度文化調研，我建立了 PAPA Pangcah 色彩系統：

/* 文化敏感的色彩變數系統 */
:root {
  --papa-earth-brown: #8B4513;    /* 大地棕 - Logo文字色 */
  --papa-coral-pink: #F08080;     /* 珊瑚粉 - 紋樣色 */
  --papa-mountain-green: #2E8B57; /* 山脈色 - 主要操作 */
  --papa-ocean-blue: #5F9EA0;     /* 海洋色 - 輔助功能 */
}

語意化 UI 設計

將抽象的財務概念轉化為阿美族日常生活的具象符號：

// Dashboard 圖標語意系統
const CulturalIcons = {
  Expense: () => <span>⛰️</span>,     // 支出 = 上山（工作獲利）
  Income: () => <span>🌊</span>,      // 收入 = 下海（捕魚收穫）
  Group: () => <span>🏛️</span>,       // 群組 = 部落（社群組織）
  Event: () => <span>🎉</span>,       // 活動 = 祭典（文化活動）
  Split: () => <span>🌿</span>        // 分攤 = 共享（互助精神）
}

🏗️ 權限系統的 UX 挑戰與解決方案

挑戰 1：複雜權限邏輯的視覺化

問題：四層權限×三種活動狀態×四種分攤模式 = 48種可能的權限組合

解決方案：漸進式權限揭示（Progressive Permission Disclosure）

// 權限檢查的前端實現
const checkUserPermissions = (user: User, event: Event, action: string) => {
  const permissions = {
    canViewExpenses: true,  // 基礎權限
    canAddExpenses: false,  // 條件權限
    canManageEvent: false,  // 管理權限
    canSettleEvent: false   // 結算權限
  }
  
  // 階層式權限檢查
  if (user.role === 'ADMIN') {
    return { ...permissions, canAddExpenses: true, canManageEvent: true, canSettleEvent: true }
  }
  
  // 群組管理者權限
  const isManagedGroup = user.managed_groups?.some(g => g.id === event.group_id)
  if (isManagedGroup) {
    permissions.canAddExpenses = true
    permissions.canManageEvent = true
  }
  
  // 活動管理者權限
  if (event.managers?.includes(user.id)) {
    permissions.canAddExpenses = true
    permissions.canSettleEvent = true
  }
  
  return permissions
}

挑戰 2：分攤選項的使用者理解

問題：四種分攤模式對一般使用者來說太複雜

解決方案：生活化的分攤選項說明

const SplitOptions = {
  FULL_SPLIT: {
    label: "完全參與分攤",
    description: "就像家族聚餐，大家一起分攤所有費用",
    icon: "🤝",
    example: "例：總共花費 $3000，5人參與，每人分攤 $600"
  },
  PARTIAL_SPLIT: {
    label: "選擇性分攤", 
    description: "像是點菜時，只分攤自己吃的那幾道菜",
    icon: "🍽️",
    example: "例：只分攤選定的幾筆支出"
  },
  NO_SPLIT: {
    label: "不參與分攤",
    description: "像是已經預付或有其他安排的情況",
    icon: "🙅‍♂️", 
    example: "例：自己開車不需分攤交通費"
  },
  FIXED_AMOUNT: {
    label: "固定金額",
    description: "事先約定的固定貢獻金額",
    icon: "💰",
    example: "例：每人固定出資 $500"
  }
}

📊 ECharts + D3.js 文化化圖表系統

智能化時間軸顯示

考量到阿美族重視時間循環的文化特性，設計了自適應的時間顯示：

// 自適應時間軸邏輯
const calculateTimeRange = (expenses: DashboardExpense[]) => {
  const timeRange = getDateRange(expenses)
  
  // 根據資料範圍智能切換顯示模式
  if (timeRange.months === 1) {
    // 單月內：按日顯示，符合部落日常作息
    return { unit: 'daily', pattern: 'DD日' }
  } else if (timeRange.months <= 6) {
    // 半年內：按月顯示，對應農作/祭典週期
    return { unit: 'monthly', pattern: 'MM月' }
  } else {
    // 長期：按季度顯示，對應歲時祭儀
    return { unit: 'quarterly', pattern: 'QQ季' }
  }
}

D3.js 進階視覺化

實現三種文化敏感的資料視覺化：

// Sankey 資金流向圖 - 展現部落資源流動
const SankeyDiagram: React.FC<SankeyProps> = ({ data }) => {
  const createSankeyLayout = (): SankeyData => {
    return {
      nodes: [
        { id: 'income', name: '部落收入', color: '#5F9EA0' },
        { id: 'expense', name: '支出項目', color: '#2E8B57' },
        { id: 'members', name: '參與成員', color: '#F08080' }
      ],
      links: data.map(flow => ({
        source: flow.from,
        target: flow.to,
        value: flow.amount,
        color: 'rgba(94, 158, 160, 0.3)'
      }))
    }
  }
}

🚀 AI 輔助開發的實戰效果

GitHub Copilot + Claude 3.5 協作

這次開發大量運用 AI 工具，實際效率提升：

// AI 生成的權限檢查邏輯（經人工優化）
const useEventPermissions = (eventId: string) => {
  const { data: user } = useQuery(['currentUser'], getCurrentUser)
  const { data: event } = useQuery(['event', eventId], () => getEvent(eventId))
  
  return useMemo(() => {
    if (!user || !event) return defaultPermissions
    
    // AI 協助生成的複雜邏輯，但需要文化脈絡的人工調整
    return calculatePermissions(user, event)
  }, [user, event])
}

實際開發數據

程式碼生成效率：提升約 40%
UI 組件開發：使用 AI 生成基礎結構，再進行文化調整
類型定義：AI 輔助生成，減少 TypeScript 錯誤 78%

但最關鍵的文化敏感設計決策，仍需要深度的人文理解，這是 AI 無法取代的。

📱 響應式設計的跨世代考量

移動優先但不忘桌面版

// 針對不同裝置的差異化體驗
const ResponsiveLayout: React.FC = () => {
  return (
    <>
      {/* 移動版 - 為長輩設計的大按鈕界面 */}
      <div className="block md:hidden">
        <div className="grid grid-cols-2 gap-4">
          <ActionButton 
            size="large" 
            icon="➕" 
            label="新增記錄"
            className="text-2xl p-6"
          />
          <ActionButton 
            size="large" 
            icon="📊" 
            label="查看報表"
            className="text-2xl p-6"
          />
        </div>
      </div>
      
      {/* 桌面版 - 完整的管理界面 */}
      <div className="hidden md:block">
        <ComplexDashboard />
      </div>
    </>
  )
}

🔄 即時資料同步的技術實現

WebSocket + React Query 整合

// 即時資料更新系統
const useRealtimeExpenses = (eventId: string) => {
  const queryClient = useQueryClient()
  
  useEffect(() => {
    const ws = new WebSocket(`${WS_URL}/events/${eventId}/`)
    
    ws.onmessage = (event) => {
      const update = JSON.parse(event.data)
      
      // 智能化快取更新，減少不必要的重新渲染
      queryClient.setQueryData(['expenses', eventId], (old: any) => {
        return updateExpenseData(old, update)
      })
    }
    
    return () => ws.close()
  }, [eventId, queryClient])
}

🎯 今日成果與明日預告

今天完成的技術亮點

✅ 四層權限系統的 React 前端實現
✅ 阿美族文化色彩系統建立
✅ ECharts 自適應時間軸設計
✅ D3.js 進階視覺化組件（Sankey、TreeMap、Network）
✅ 響應式權限 UI 設計
✅ WebSocket 即時同步整合

關鍵洞察

複雜不等於難用：透過漸進式揭示，複雜系統也能直觀操作
文化符號勝過文字說明：⛰️🌊 比「收支」更容易理解
AI 是工具，文化是核心：技術可以輔助，但文化理解無法被取代

明日預告

Day 3 將深入 Django 後端架構設計，分享如何用 PostgreSQL + Django ORM 處理複雜的分攤算法，以及 Railway 雲端部署的實戰經驗。

技術與文化的融合，讓每一行程式碼都有溫度。

🚀 Blake Lab - AI時代文化科技雙領先者
💡 20年政府專案 | 🤖 AI原住民應用 | 🎯 族語NLP開發 | 📈 文化敏感設計
🌐 wchung.tw | 📧 [email protected]

關注 Blake Lab，一起探索技術與文化的無限可能！

#BlakeLab #文化科技 #PAPA開發 #原住民創新 #權限系統設計 #UX設計 #React #TypeScript