feat: 完善 Web UI 细节
新增页面:
- session_detail.html - 会话详情独立页面
- channel_edit.html - 频道配置编辑独立页面
- 错误页面 (401/403/404/500)
功能优化:
- 添加错误处理器支持 HTML 响应
- 更新编辑按钮跳转独立页面
- 完善暗黑主题支持
作者: 小黑 🐶
This commit is contained in:
30
app/templates/errors/401.html
Normal file
30
app/templates/errors/401.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>401 - 未授权 | 智队中枢</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 500: '#0ea5e9', 600: '#0284c7' } } } } }
|
||||
</script>
|
||||
<style>body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
|
||||
<div class="text-center px-4">
|
||||
<div class="text-[150px] font-bold text-yellow-200 dark:text-yellow-900/30 leading-none select-none">401</div>
|
||||
<div class="mt-[-20px] mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">未授权</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400">请先登录后再访问此页面</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<a href="/api/auth/login" class="btn btn-primary flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
|
||||
登录
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8 text-sm text-gray-400 dark:text-gray-500">智队中枢 v0.7.0</div>
|
||||
</div>
|
||||
<script>const savedTheme = localStorage.getItem('theme') || 'light'; document.documentElement.setAttribute('data-theme', savedTheme);</script>
|
||||
</body>
|
||||
</html>
|
||||
30
app/templates/errors/403.html
Normal file
30
app/templates/errors/403.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>403 - 禁止访问 | 智队中枢</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = { darkMode: 'class', theme: { extend: { colors: { primary: { 500: '#0ea5e9', 600: '#0284c7' } } } } }
|
||||
</script>
|
||||
<style>body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
|
||||
<div class="text-center px-4">
|
||||
<div class="text-[150px] font-bold text-red-200 dark:text-red-900/30 leading-none select-none">403</div>
|
||||
<div class="mt-[-20px] mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">禁止访问</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400">您没有权限访问此页面</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<a href="/" class="btn btn-primary flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
|
||||
返回首页
|
||||
</a>
|
||||
</div>
|
||||
<div class="mt-8 text-sm text-gray-400 dark:text-gray-500">智队中枢 v0.7.0</div>
|
||||
</div>
|
||||
<script>const savedTheme = localStorage.getItem('theme') || 'light'; document.documentElement.setAttribute('data-theme', savedTheme);</script>
|
||||
</body>
|
||||
</html>
|
||||
104
app/templates/errors/404.html
Normal file
104
app/templates/errors/404.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - 页面未找到 | 智队中枢</title>
|
||||
|
||||
{# Tailwind CSS #}
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
|
||||
<div class="text-center px-4">
|
||||
{# 404 数字 #}
|
||||
<div class="text-[150px] font-bold text-gray-200 dark:text-gray-700 leading-none select-none">
|
||||
404
|
||||
</div>
|
||||
|
||||
{# 错误信息 #}
|
||||
<div class="mt-[-20px] mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">页面未找到</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400">抱歉，您访问的页面不存在或已被移除</p>
|
||||
</div>
|
||||
|
||||
{# 操作按钮 #}
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<a href="javascript:history.back()" class="btn btn-secondary flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
||||
</svg>
|
||||
返回上一页
|
||||
</a>
|
||||
<a href="/" class="btn btn-primary flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
返回首页
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# 建议 #}
|
||||
<div class="mt-12 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm max-w-md mx-auto">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white mb-3">您可以尝试</h3>
|
||||
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2 text-left">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>检查 URL 是否正确</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>刷新页面</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>联系管理员</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{# 页脚 #}
|
||||
<div class="mt-8 text-sm text-gray-400 dark:text-gray-500">
|
||||
智队中枢 v0.7.0 | <a href="https://github.com/yunxiafei/pit-router" class="hover:text-primary-500">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化主题
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
112
app/templates/errors/500.html
Normal file
112
app/templates/errors/500.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>500 - 服务器错误 | 智队中枢</title>
|
||||
|
||||
{# Tailwind CSS #}
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#f0f9ff',
|
||||
100: '#e0f2fe',
|
||||
200: '#bae6fd',
|
||||
300: '#7dd3fc',
|
||||
400: '#38bdf8',
|
||||
500: '#0ea5e9',
|
||||
600: '#0284c7',
|
||||
700: '#0369a1',
|
||||
800: '#075985',
|
||||
900: '#0c4a6e',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
|
||||
<div class="text-center px-4">
|
||||
{# 500 数字 #}
|
||||
<div class="text-[150px] font-bold text-red-200 dark:text-red-900/30 leading-none select-none">
|
||||
500
|
||||
</div>
|
||||
|
||||
{# 错误信息 #}
|
||||
<div class="mt-[-20px] mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">服务器错误</h1>
|
||||
<p class="text-gray-500 dark:text-gray-400">抱歉，服务器遇到了一个意外情况</p>
|
||||
</div>
|
||||
|
||||
{# 操作按钮 #}
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<button onclick="location.reload()" class="btn btn-secondary flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
刷新页面
|
||||
</button>
|
||||
<a href="/" class="btn btn-primary flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
返回首页
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# 错误详情 #}
|
||||
{% if error %}
|
||||
<div class="mt-8 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg max-w-2xl mx-auto text-left">
|
||||
<h3 class="font-semibold text-red-700 dark:text-red-400 mb-2">错误信息</h3>
|
||||
<pre class="text-sm text-red-600 dark:text-red-300 overflow-auto">{{ error }}</pre>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# 建议 #}
|
||||
<div class="mt-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm max-w-md mx-auto">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-white mb-3">如果问题持续存在</h3>
|
||||
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2 text-left">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>稍后再试</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>清除浏览器缓存</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="w-4 h-4 text-primary-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>联系管理员报告问题</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{# 页脚 #}
|
||||
<div class="mt-8 text-sm text-gray-400 dark:text-gray-500">
|
||||
智队中枢 v0.7.0 | <a href="https://github.com/yunxiafei/pit-router" class="hover:text-primary-500">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化主题
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user