页面优化,功能修复

This commit is contained in:
jiangdong.cheng
2026-02-12 13:06:12 +08:00
parent d35c397e8d
commit 67cd9501de
24 changed files with 975 additions and 242 deletions

View File

@@ -36,6 +36,22 @@
--page-section-gap: .9rem;
}
:root[data-theme="dark"] {
color-scheme: dark;
--bg-page: #0f1528;
--bg-surface: #141d35;
--bg-soft: #1a2747;
--text-main: #e7ecff;
--text-muted: #a5b1d6;
--brand: #6f88ff;
--brand-strong: #8ea3ff;
--brand-soft: #1c2a52;
--line: #27365f;
--line-strong: #334775;
--shadow-sm: 0 8px 20px rgba(4, 8, 20, .45);
--shadow-md: 0 14px 30px rgba(4, 8, 20, .58);
}
html,
body {
min-height: 100%;
@@ -51,6 +67,13 @@
var(--bg-page);
}
:root[data-theme="dark"] body {
background:
radial-gradient(circle at 12% -10%, rgba(67, 78, 136, .2) 0, rgba(67, 78, 136, 0) 45%),
radial-gradient(circle at 86% -12%, rgba(75, 98, 164, .22) 0, rgba(75, 98, 164, 0) 38%),
var(--bg-page);
}
.container {
max-width: var(--page-max-width);
}
@@ -778,6 +801,39 @@
font-size: .92rem;
}
:root[data-theme="dark"] .footer-shell {
background: rgba(16, 24, 44, .78);
}
.float-actions {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1200;
display: grid;
gap: .5rem;
}
.float-btn {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-surface);
color: var(--text-main);
min-width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.feedback-modal .modal-content {
border-color: var(--line);
background: var(--bg-surface);
color: var(--text-main);
}
:where(a, button, input, textarea, select, [role="button"]):focus-visible {
outline: 2px solid color-mix(in srgb, var(--brand) 62%, transparent);
outline-offset: 2px;
@@ -950,7 +1006,7 @@
<footer class="footer-shell py-4 mt-3">
<div class="container d-flex flex-column flex-lg-row justify-content-between gap-2">
<div> {{ date('Y') }} AIWeb AI鑱氬悎瀵艰埅 妯″瀷鎺ㄨ崘 鏁欑▼瀛︿範</div>
<div>© {{ date('Y') }} AIWeb · AI工具集 · 模型推荐 · 教程学习</div>
<div>
<a class="text-decoration-none me-3" href="{{ route('seo.sitemap') }}">Sitemap</a>
<a class="text-decoration-none" href="{{ route('seo.robots') }}">Robots</a>
@@ -958,7 +1014,79 @@
</div>
</footer>
<div class="float-actions">
<button type="button" class="float-btn" id="themeToggle" title="切换主题" aria-label="切换明暗模式">
<i class="bi bi-moon-stars"></i>
</button>
<button type="button" class="float-btn" data-bs-toggle="modal" data-bs-target="#feedbackModal" title="提交反馈" aria-label="提交反馈">
<i class="bi bi-chat-dots"></i>
</button>
</div>
<div class="modal fade feedback-modal" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form method="post" action="{{ route('feedback.store') }}">
@csrf
<div class="modal-header">
<h5 class="modal-title" id="feedbackModalLabel">提交反馈</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
</div>
<div class="modal-body d-grid gap-2">
<select class="form-select" name="feedback_type" required>
<option value="">请选择类型</option>
<option value="tool">推荐新工具</option>
<option value="model">推荐新模型</option>
<option value="news">资讯纠错/补充</option>
<option value="guide">教程建议</option>
<option value="other">其他建议</option>
</select>
<input class="form-control" type="text" name="title" maxlength="180" placeholder="标题(如:建议收录某某工具)" required>
<textarea class="form-control" name="description" rows="5" maxlength="4000" placeholder="请详细描述你的建议、来源链接、补充说明等" required></textarea>
<input class="form-control" type="text" name="contact" maxlength="160" placeholder="联系方式(可选:邮箱/微信)">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary">提交反馈</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
(() => {
const root = document.documentElement;
const storageKey = 'aiweb-theme';
const toggle = document.getElementById('themeToggle');
const meta = document.getElementById('themeColorMeta');
const applyTheme = (theme) => {
root.setAttribute('data-theme', theme);
if (meta) {
meta.setAttribute('content', theme === 'dark' ? '#0f1528' : '#eef3fb');
}
if (toggle) {
const icon = toggle.querySelector('i');
if (icon) {
icon.className = theme === 'dark' ? 'bi bi-sun' : 'bi bi-moon-stars';
}
}
};
const initial = localStorage.getItem(storageKey)
|| (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
applyTheme(initial);
toggle?.addEventListener('click', () => {
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
localStorage.setItem(storageKey, next);
applyTheme(next);
});
})();
</script>
@yield('scripts')
</body>
</html>