feat: Add comprehensive UI/UX preview page (Phase 3)
Created preview.html with 4 main sections: 1. 5 Why Analysis Tool Interface - Input forms for Finding and Job Content - Multi-language selection (7 languages) - Sample 3-perspective analysis results - Interactive guidelines section 2. Analysis History Page - Sortable data table with filters - CSV import/export buttons - Pagination controls - Search and date filtering 3. Admin Dashboard - Statistics overview (4 key metrics) - User management table with CRUD operations - LLM API configuration interface - System settings panel - Audit logs viewer 4. Login Page - Modern gradient design - Remember me function - Forgot password link Features: - Fully responsive design - Tailwind CSS styling - Tab-based navigation - Interactive elements - Color-coded status indicators - Professional UI/UX Ready for user approval before Phase 4 development. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
donald
634
preview.html
Normal file
634
preview.html
Normal file
@@ -0,0 +1,634 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-TW">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>5 Why Root Cause Analyzer - UI/UX Preview</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
|
||||||
|
}
|
||||||
|
.tab-content { display: none; }
|
||||||
|
.tab-content.active { display: block; }
|
||||||
|
.nav-tab { @apply px-4 py-2 text-gray-600 hover:text-blue-600 cursor-pointer; }
|
||||||
|
.nav-tab.active { @apply text-blue-600 border-b-2 border-blue-600 font-semibold; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-50">
|
||||||
|
<!-- Top Navigation Bar -->
|
||||||
|
<nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
|
||||||
|
<div class="max-w-7xl mx-auto px-4">
|
||||||
|
<div class="flex items-center justify-between h-16">
|
||||||
|
<div class="flex items-center space-x-8">
|
||||||
|
<h1 class="text-xl font-bold text-gray-800">🔍 5 Why Analyzer</h1>
|
||||||
|
<div class="hidden md:flex space-x-1">
|
||||||
|
<button class="nav-tab active" onclick="showTab('analysis')">分析工具</button>
|
||||||
|
<button class="nav-tab" onclick="showTab('history')">歷史記錄</button>
|
||||||
|
<button class="nav-tab" onclick="showTab('admin')">管理後台</button>
|
||||||
|
<button class="nav-tab" onclick="showTab('login')">登入頁面</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<span class="text-sm text-gray-600">donald (管理員)</span>
|
||||||
|
<button class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">登出</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Tab 1: 5 Why Analysis Tool -->
|
||||||
|
<div id="analysis" class="tab-content active">
|
||||||
|
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 p-4 md:p-6">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="text-center mb-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-slate-800 mb-2">
|
||||||
|
🔍 5 Why 根因分析器
|
||||||
|
</h2>
|
||||||
|
<p class="text-slate-500 text-sm md:text-base">
|
||||||
|
穿透問題表面，直達根本原因，產出永久性對策
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-slate-400 mt-1">
|
||||||
|
Powered by Ollama API (qwen2.5:3b)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Guidelines (Collapsed by default) -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<button class="w-full py-3 bg-white hover:bg-slate-50 border border-slate-200 rounded-xl text-slate-600 font-medium transition-all flex items-center justify-center gap-2 shadow-sm">
|
||||||
|
📚 5 Why 執行要項指南
|
||||||
|
<span>▼</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Input Section -->
|
||||||
|
<div class="bg-white rounded-2xl p-6 mb-6 border border-slate-200 shadow-sm">
|
||||||
|
<div class="grid md:grid-cols-2 gap-6 mb-6">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-slate-700 mb-2">
|
||||||
|
📋 我負責的 Finding 是什麼？
|
||||||
|
</label>
|
||||||
|
<p class="text-xs text-slate-400 mb-2">
|
||||||
|
請具體描述現象（5W1H）：何人、何事、何時、何地、如何發生
|
||||||
|
</p>
|
||||||
|
<textarea placeholder="範例：A 機台在 12/5 下午 2 點運轉時，主軸溫度達 95°C 觸發過熱保護導致停機，影響當日產能 200 件..." class="w-full h-36 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm"></textarea>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-slate-700 mb-2">
|
||||||
|
💼 我的工作內容是什麼？
|
||||||
|
</label>
|
||||||
|
<p class="text-xs text-slate-400 mb-2">
|
||||||
|
說明您的職責範圍，幫助分析聚焦在可控因素
|
||||||
|
</p>
|
||||||
|
<textarea placeholder="範例：負責生產線設備維護與品質管控，管理 5 台 CNC 機台，需確保 OEE 達 85% 以上..." class="w-full h-36 px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none text-sm"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Language Selection -->
|
||||||
|
<div class="mb-6">
|
||||||
|
<label class="block text-sm font-medium text-slate-700 mb-2">
|
||||||
|
🌐 輸出語言
|
||||||
|
</label>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
<button class="px-3 py-1.5 rounded-lg text-sm font-medium bg-blue-500 text-white shadow-md">🇹🇼 繁體中文</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-lg text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200">🇨🇳 简体中文</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-lg text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200">🇺🇸 English</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-lg text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200">🇯🇵 日本語</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-lg text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200">🇰🇷 한국어</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-lg text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200">🇻🇳 Tiếng Việt</button>
|
||||||
|
<button class="px-3 py-1.5 rounded-lg text-sm font-medium bg-slate-100 text-slate-600 hover:bg-slate-200">🇹🇭 ภาษาไทย</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="w-full py-4 bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white font-bold rounded-xl transition-all duration-300 transform hover:scale-[1.02] shadow-lg">
|
||||||
|
🎯 Find My 5 Why
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sample Result (3 Perspectives) -->
|
||||||
|
<div class="bg-indigo-50 rounded-2xl p-5 mb-6 border border-indigo-200 shadow-sm">
|
||||||
|
<h3 class="text-indigo-700 font-bold mb-2 flex items-center gap-2">
|
||||||
|
📝 問題重新定義（5W1H）
|
||||||
|
</h3>
|
||||||
|
<p class="text-indigo-900">A 機台於 12/5 下午 2 點運轉時，主軸溫度異常升高至 95°C，觸發過熱保護機制導致自動停機，造成當日產能損失 200 件（約佔日產能 8%），由生產線操作員發現並通報維護部門。</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Perspective 1: 流程面 -->
|
||||||
|
<div class="bg-white rounded-2xl border border-blue-200 overflow-hidden shadow-sm">
|
||||||
|
<div class="p-4 bg-blue-500">
|
||||||
|
<h3 class="text-lg font-bold text-white flex items-center gap-2">
|
||||||
|
<span class="text-2xl">⚙️</span>
|
||||||
|
流程面分析
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<div class="bg-slate-50 rounded-lg p-3 border-l-4 border-blue-400">
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span class="bg-slate-200 text-xs px-2 py-1 rounded font-mono text-slate-600">W1</span>
|
||||||
|
<span class="mt-1 text-xs text-emerald-500">✓</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-slate-700 text-sm font-medium mb-1">為什麼主軸溫度過高？</p>
|
||||||
|
<p class="text-slate-500 text-sm">因為冷卻液流量不足</p>
|
||||||
|
<p class="text-xs mt-1 text-emerald-500">已確認：現場檢測流量計讀數低於標準值</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-50 rounded-lg p-3 border-l-4 border-cyan-400">
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span class="bg-slate-200 text-xs px-2 py-1 rounded font-mono text-slate-600">W2</span>
|
||||||
|
<span class="mt-1 text-xs text-emerald-500">✓</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-slate-700 text-sm font-medium mb-1">為什麼冷卻液流量不足？</p>
|
||||||
|
<p class="text-slate-500 text-sm">因為濾網堵塞</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 p-4 bg-amber-50 rounded-xl border border-amber-200">
|
||||||
|
<h4 class="text-amber-700 font-bold text-sm mb-2">🎯 根本原因</h4>
|
||||||
|
<p class="text-amber-900 text-sm">缺乏定期濾網清潔保養機制</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 bg-emerald-50 rounded-xl border border-emerald-200">
|
||||||
|
<h4 class="text-emerald-700 font-bold text-sm mb-2">✅ 永久性對策</h4>
|
||||||
|
<p class="text-emerald-900 text-sm mb-3">建立每週固定濾網檢查清潔 SOP</p>
|
||||||
|
<div class="mb-3">
|
||||||
|
<p class="text-emerald-700 text-xs font-medium mb-1">行動項目：</p>
|
||||||
|
<ul class="space-y-1">
|
||||||
|
<li class="text-emerald-800 text-xs flex items-start gap-1">
|
||||||
|
<span>•</span> 制定濾網清潔標準作業程序
|
||||||
|
</li>
|
||||||
|
<li class="text-emerald-800 text-xs flex items-start gap-1">
|
||||||
|
<span>•</span> 設定每週三為固定保養日
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Perspective 2: 系統面 -->
|
||||||
|
<div class="bg-white rounded-2xl border border-violet-200 overflow-hidden shadow-sm">
|
||||||
|
<div class="p-4 bg-violet-500">
|
||||||
|
<h3 class="text-lg font-bold text-white flex items-center gap-2">
|
||||||
|
<span class="text-2xl">🖥️</span>
|
||||||
|
系統面分析
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<div class="bg-slate-50 rounded-lg p-3 border-l-4 border-violet-400">
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span class="bg-slate-200 text-xs px-2 py-1 rounded font-mono text-slate-600">W1</span>
|
||||||
|
<span class="mt-1 text-xs text-amber-500">?</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-slate-700 text-sm font-medium mb-1">為什麼系統未提前預警？</p>
|
||||||
|
<p class="text-slate-500 text-sm">因為溫度監控系統未設定預警閾值</p>
|
||||||
|
<p class="text-xs mt-1 text-amber-500">需驗證：檢查監控系統設定</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 p-4 bg-amber-50 rounded-xl border border-amber-200">
|
||||||
|
<h4 class="text-amber-700 font-bold text-sm mb-2">🎯 根本原因</h4>
|
||||||
|
<p class="text-amber-900 text-sm">監控系統缺乏多層級預警機制</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Perspective 3: 管理面 -->
|
||||||
|
<div class="bg-white rounded-2xl border border-teal-200 overflow-hidden shadow-sm">
|
||||||
|
<div class="p-4 bg-teal-500">
|
||||||
|
<h3 class="text-lg font-bold text-white flex items-center gap-2">
|
||||||
|
<span class="text-2xl">👥</span>
|
||||||
|
管理面分析
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 space-y-3">
|
||||||
|
<div class="bg-slate-50 rounded-lg p-3 border-l-4 border-teal-400">
|
||||||
|
<div class="flex items-start gap-2">
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span class="bg-slate-200 text-xs px-2 py-1 rounded font-mono text-slate-600">W1</span>
|
||||||
|
<span class="mt-1 text-xs text-emerald-500">✓</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<p class="text-slate-700 text-sm font-medium mb-1">為什麼保養被忽略？</p>
|
||||||
|
<p class="text-slate-500 text-sm">因為無明確責任分配</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 p-4 bg-amber-50 rounded-xl border border-amber-200">
|
||||||
|
<h4 class="text-amber-700 font-bold text-sm mb-2">🎯 根本原因</h4>
|
||||||
|
<p class="text-amber-900 text-sm">缺乏設備保養責任制度</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="mt-8 text-center text-slate-400 text-xs">
|
||||||
|
💡 5 Why 的目的不是「湊滿五個問題」，而是穿透表面症狀直達根本原因
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab 2: History -->
|
||||||
|
<div id="history" class="tab-content">
|
||||||
|
<div class="max-w-7xl mx-auto p-6">
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div class="flex items-center justify-between mb-6">
|
||||||
|
<h2 class="text-2xl font-bold text-gray-800">📊 分析歷史記錄</h2>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">
|
||||||
|
📥 匯入 CSV
|
||||||
|
</button>
|
||||||
|
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
|
||||||
|
📤 匯出 CSV
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filters -->
|
||||||
|
<div class="grid md:grid-cols-4 gap-4 mb-6">
|
||||||
|
<input type="text" placeholder="搜尋 Finding..." class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
|
||||||
|
<select class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
|
||||||
|
<option>所有狀態</option>
|
||||||
|
<option>已完成</option>
|
||||||
|
<option>處理中</option>
|
||||||
|
<option>失敗</option>
|
||||||
|
</select>
|
||||||
|
<input type="date" class="px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
|
||||||
|
<button class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300">🔍 搜尋</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="w-full text-sm">
|
||||||
|
<thead class="bg-gray-50 border-b">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-3 text-left cursor-pointer hover:bg-gray-100">ID ↕</th>
|
||||||
|
<th class="px-4 py-3 text-left cursor-pointer hover:bg-gray-100">Finding ↕</th>
|
||||||
|
<th class="px-4 py-3 text-left cursor-pointer hover:bg-gray-100">使用者 ↕</th>
|
||||||
|
<th class="px-4 py-3 text-left cursor-pointer hover:bg-gray-100">語言 ↕</th>
|
||||||
|
<th class="px-4 py-3 text-left cursor-pointer hover:bg-gray-100">狀態 ↕</th>
|
||||||
|
<th class="px-4 py-3 text-left cursor-pointer hover:bg-gray-100">建立時間 ↕</th>
|
||||||
|
<th class="px-4 py-3 text-left">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y">
|
||||||
|
<tr class="hover:bg-gray-50">
|
||||||
|
<td class="px-4 py-3">#001</td>
|
||||||
|
<td class="px-4 py-3">A 機台過熱停機問題</td>
|
||||||
|
<td class="px-4 py-3">donald</td>
|
||||||
|
<td class="px-4 py-3">🇹🇼 繁中</td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">已完成</span></td>
|
||||||
|
<td class="px-4 py-3">2025-12-05 14:30</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-2">查看</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">刪除</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-gray-50">
|
||||||
|
<td class="px-4 py-3">#002</td>
|
||||||
|
<td class="px-4 py-3">品質不良率上升分析</td>
|
||||||
|
<td class="px-4 py-3">user001</td>
|
||||||
|
<td class="px-4 py-3">🇺🇸 English</td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-yellow-100 text-yellow-700 rounded text-xs">處理中</span></td>
|
||||||
|
<td class="px-4 py-3">2025-12-05 15:20</td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-2">查看</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">刪除</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="flex items-center justify-between mt-6">
|
||||||
|
<span class="text-sm text-gray-600">顯示 1-10 共 25 筆</span>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button class="px-3 py-1 border rounded hover:bg-gray-50">上一頁</button>
|
||||||
|
<button class="px-3 py-1 bg-blue-500 text-white rounded">1</button>
|
||||||
|
<button class="px-3 py-1 border rounded hover:bg-gray-50">2</button>
|
||||||
|
<button class="px-3 py-1 border rounded hover:bg-gray-50">3</button>
|
||||||
|
<button class="px-3 py-1 border rounded hover:bg-gray-50">下一頁</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab 3: Admin Dashboard -->
|
||||||
|
<div id="admin" class="tab-content">
|
||||||
|
<div class="max-w-7xl mx-auto p-6">
|
||||||
|
<!-- Dashboard Stats -->
|
||||||
|
<div class="grid md:grid-cols-4 gap-6 mb-6">
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-sm">總使用者數</p>
|
||||||
|
<p class="text-3xl font-bold text-gray-800 mt-1">156</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-2xl">
|
||||||
|
👥
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-green-600 text-sm mt-2">↑ 12% 本月</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-sm">總分析次數</p>
|
||||||
|
<p class="text-3xl font-bold text-gray-800 mt-1">2,341</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-2xl">
|
||||||
|
📊
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-green-600 text-sm mt-2">↑ 24% 本月</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-sm">平均處理時間</p>
|
||||||
|
<p class="text-3xl font-bold text-gray-800 mt-1">45s</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-2xl">
|
||||||
|
⏱️
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-red-600 text-sm mt-2">↓ 8% 改善</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-gray-500 text-sm">成功率</p>
|
||||||
|
<p class="text-3xl font-bold text-gray-800 mt-1">98.5%</p>
|
||||||
|
</div>
|
||||||
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-2xl">
|
||||||
|
✅
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-green-600 text-sm mt-2">↑ 2% 改善</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Admin Tabs -->
|
||||||
|
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||||
|
<div class="border-b mb-6">
|
||||||
|
<div class="flex space-x-8">
|
||||||
|
<button class="admin-tab-btn pb-3 border-b-2 border-blue-600 text-blue-600 font-semibold" onclick="showAdminTab('users')">
|
||||||
|
👥 使用者管理
|
||||||
|
</button>
|
||||||
|
<button class="admin-tab-btn pb-3 text-gray-600 hover:text-gray-800" onclick="showAdminTab('llm')">
|
||||||
|
🤖 LLM 設定
|
||||||
|
</button>
|
||||||
|
<button class="admin-tab-btn pb-3 text-gray-600 hover:text-gray-800" onclick="showAdminTab('settings')">
|
||||||
|
⚙️ 系統設定
|
||||||
|
</button>
|
||||||
|
<button class="admin-tab-btn pb-3 text-gray-600 hover:text-gray-800" onclick="showAdminTab('audit')">
|
||||||
|
📋 稽核日誌
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Users Management -->
|
||||||
|
<div id="users-admin" class="admin-tab-content">
|
||||||
|
<div class="flex justify-between items-center mb-4">
|
||||||
|
<h3 class="text-xl font-bold">使用者管理</h3>
|
||||||
|
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
|
||||||
|
➕ 新增使用者
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<table class="w-full text-sm">
|
||||||
|
<thead class="bg-gray-50 border-b">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-3 text-left">工號</th>
|
||||||
|
<th class="px-4 py-3 text-left">姓名</th>
|
||||||
|
<th class="px-4 py-3 text-left">Email</th>
|
||||||
|
<th class="px-4 py-3 text-left">部門</th>
|
||||||
|
<th class="px-4 py-3 text-left">權限</th>
|
||||||
|
<th class="px-4 py-3 text-left">狀態</th>
|
||||||
|
<th class="px-4 py-3 text-left">操作</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y">
|
||||||
|
<tr class="hover:bg-gray-50">
|
||||||
|
<td class="px-4 py-3">ADMIN001</td>
|
||||||
|
<td class="px-4 py-3">admin</td>
|
||||||
|
<td class="px-4 py-3">admin@example.com</td>
|
||||||
|
<td class="px-4 py-3">IT</td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">最高權限</span></td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">啟用</span></td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-2">編輯</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">停用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-gray-50">
|
||||||
|
<td class="px-4 py-3">USER001</td>
|
||||||
|
<td class="px-4 py-3">user001</td>
|
||||||
|
<td class="px-4 py-3">user001@example.com</td>
|
||||||
|
<td class="px-4 py-3">Manufacturing</td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">一般使用者</span></td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">啟用</span></td>
|
||||||
|
<td class="px-4 py-3">
|
||||||
|
<button class="text-blue-600 hover:text-blue-800 mr-2">編輯</button>
|
||||||
|
<button class="text-red-600 hover:text-red-800">停用</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LLM Config -->
|
||||||
|
<div id="llm-admin" class="admin-tab-content hidden">
|
||||||
|
<h3 class="text-xl font-bold mb-4">LLM API 設定</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="border rounded-lg p-4">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<h4 class="font-semibold">Ollama API</h4>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" checked class="sr-only peer">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="grid md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-600 mb-1">API URL</label>
|
||||||
|
<input type="text" value="https://ollama_pjapi.theaken.com" class="w-full px-3 py-2 border rounded">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm text-gray-600 mb-1">Model</label>
|
||||||
|
<input type="text" value="qwen2.5:3b" class="w-full px-3 py-2 border rounded">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="mt-3 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">測試連線</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="border rounded-lg p-4 opacity-50">
|
||||||
|
<div class="flex items-center justify-between mb-2">
|
||||||
|
<h4 class="font-semibold">OpenAI API</h4>
|
||||||
|
<label class="relative inline-flex items-center cursor-pointer">
|
||||||
|
<input type="checkbox" class="sr-only peer">
|
||||||
|
<div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-blue-600"></div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-500">未設定</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- System Settings -->
|
||||||
|
<div id="settings-admin" class="admin-tab-content hidden">
|
||||||
|
<h3 class="text-xl font-bold mb-4">系統設定</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="grid md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">應用程式名稱</label>
|
||||||
|
<input type="text" value="5 Why Root Cause Analyzer" class="w-full px-4 py-2 border rounded-lg">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">預設語言</label>
|
||||||
|
<select class="w-full px-4 py-2 border rounded-lg">
|
||||||
|
<option selected>繁體中文</option>
|
||||||
|
<option>簡體中文</option>
|
||||||
|
<option>English</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">每日最大分析次數</label>
|
||||||
|
<input type="number" value="50" class="w-full px-4 py-2 border rounded-lg">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">Session 逾時（分鐘）</label>
|
||||||
|
<input type="number" value="30" class="w-full px-4 py-2 border rounded-lg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">儲存設定</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Audit Logs -->
|
||||||
|
<div id="audit-admin" class="admin-tab-content hidden">
|
||||||
|
<h3 class="text-xl font-bold mb-4">稽核日誌</h3>
|
||||||
|
<table class="w-full text-sm">
|
||||||
|
<thead class="bg-gray-50 border-b">
|
||||||
|
<tr>
|
||||||
|
<th class="px-4 py-3 text-left">時間</th>
|
||||||
|
<th class="px-4 py-3 text-left">使用者</th>
|
||||||
|
<th class="px-4 py-3 text-left">動作</th>
|
||||||
|
<th class="px-4 py-3 text-left">IP位址</th>
|
||||||
|
<th class="px-4 py-3 text-left">狀態</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y">
|
||||||
|
<tr class="hover:bg-gray-50">
|
||||||
|
<td class="px-4 py-3">2025-12-05 16:30:15</td>
|
||||||
|
<td class="px-4 py-3">donald</td>
|
||||||
|
<td class="px-4 py-3">登入系統</td>
|
||||||
|
<td class="px-4 py-3">192.168.1.100</td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">成功</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="hover:bg-gray-50">
|
||||||
|
<td class="px-4 py-3">2025-12-05 16:28:42</td>
|
||||||
|
<td class="px-4 py-3">user001</td>
|
||||||
|
<td class="px-4 py-3">建立分析</td>
|
||||||
|
<td class="px-4 py-3">192.168.1.105</td>
|
||||||
|
<td class="px-4 py-3"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">成功</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Tab 4: Login Page -->
|
||||||
|
<div id="login" class="tab-content">
|
||||||
|
<div class="min-h-screen bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center p-4">
|
||||||
|
<div class="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-md">
|
||||||
|
<div class="text-center mb-8">
|
||||||
|
<h1 class="text-3xl font-bold text-gray-800 mb-2">🔍 5 Why Analyzer</h1>
|
||||||
|
<p class="text-gray-600">根因分析系統</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
工號 / Email
|
||||||
|
</label>
|
||||||
|
<input type="text" placeholder="請輸入工號或 Email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
密碼
|
||||||
|
</label>
|
||||||
|
<input type="password" placeholder="請輸入密碼" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<label class="flex items-center">
|
||||||
|
<input type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
|
||||||
|
<span class="ml-2 text-sm text-gray-600">記住我</span>
|
||||||
|
</label>
|
||||||
|
<a href="#" class="text-sm text-blue-600 hover:text-blue-800">忘記密碼？</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="w-full py-3 bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white font-bold rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-lg">
|
||||||
|
登入
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="mt-6 text-center text-sm text-gray-600">
|
||||||
|
還沒有帳號？<a href="#" class="text-blue-600 hover:text-blue-800 font-medium">聯絡管理員</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-8 pt-6 border-t text-center text-xs text-gray-500">
|
||||||
|
Powered by Ollama API (qwen2.5:3b)<br>
|
||||||
|
© 2025 5 Why Analyzer. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Tab switching
|
||||||
|
function showTab(tabName) {
|
||||||
|
// Hide all tabs
|
||||||
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||||
|
tab.classList.remove('active');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.nav-tab').forEach(btn => {
|
||||||
|
btn.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Show selected tab
|
||||||
|
document.getElementById(tabName).classList.add('active');
|
||||||
|
event.target.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Admin tab switching
|
||||||
|
function showAdminTab(tabName) {
|
||||||
|
document.querySelectorAll('.admin-tab-content').forEach(tab => {
|
||||||
|
tab.classList.add('hidden');
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.admin-tab-btn').forEach(btn => {
|
||||||
|
btn.classList.remove('border-blue-600', 'text-blue-600', 'font-semibold');
|
||||||
|
btn.classList.add('text-gray-600');
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById(tabName + '-admin').classList.remove('hidden');
|
||||||
|
event.target.classList.add('border-blue-600', 'text-blue-600', 'font-semibold');
|
||||||
|
event.target.classList.remove('text-gray-600');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user