feat(site): 对齐参考站点UI与交互调整
- 页脚:响应耗时文字统一为「响应耗时 XXXms」,版本链接改为 GitHub 官方仓库,默认 ICP 备案号设置为粤ICP备2025450093号 - 顶部栏:恢复主题切换按钮与语言按钮(语言暂为占位提示),放置于用户区左侧 - 主题:修复首屏内联脚本默认主题白名单校验,避免 localStorage 中残留的 light/dark/System 等非法值生效,首屏默认改为 ClassicLight(仅允许 ClassicLight/ModernLight) - 登录页:在密码输入框下方恢复「忘记密码?」入口,新增配套的找回密码引导页 /forgot-password - 默认配置:system-settings 兜底记录与 SYSTEM_SETTINGS_DEFAULTS 新增 icpNumber 默认值
This commit is contained in:
@@ -33,6 +33,30 @@
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="user-section">
|
||||
<ClientOnly>
|
||||
<!-- 主题切换按钮 -->
|
||||
<button
|
||||
class="utility-btn theme-toggle-btn"
|
||||
type="button"
|
||||
aria-label="主题"
|
||||
title="切换主题"
|
||||
@click="handleToggleTheme"
|
||||
>
|
||||
<Icon :name="isDark ? 'sun' : 'moon'" :size="18" />
|
||||
<span class="utility-btn-label">主题</span>
|
||||
</button>
|
||||
|
||||
<!-- 语言切换按钮(占位按钮,当前单语种) -->
|
||||
<button
|
||||
class="utility-btn lang-toggle-btn"
|
||||
type="button"
|
||||
aria-label="语言"
|
||||
title="语言"
|
||||
@click="handleLanguageClick"
|
||||
>
|
||||
<Icon name="globe" :size="18" />
|
||||
<span class="utility-btn-label">语言</span>
|
||||
</button>
|
||||
|
||||
<div v-if="isClientAuthenticated" class="user-info">
|
||||
<div class="user-details-desktop">
|
||||
<span class="user-name">{{ user?.name || '用户' }}</span>
|
||||
@@ -674,12 +698,24 @@ import ConfirmDialog from '~/components/UI/ConfirmDialog.vue'
|
||||
|
||||
import { useNotifications } from '~/composables/useNotifications'
|
||||
import { useSiteConfig } from '~/composables/useSiteConfig'
|
||||
import { useTheme } from '~/composables/useTheme'
|
||||
import CustomSelect from '~/components/UI/Common/CustomSelect.vue'
|
||||
|
||||
// 获取运行时配置
|
||||
const config = useRuntimeConfig()
|
||||
const router = useRouter()
|
||||
|
||||
// 主题
|
||||
const { isDark, toggleTheme } = useTheme()
|
||||
const handleToggleTheme = () => {
|
||||
toggleTheme()
|
||||
}
|
||||
const handleLanguageClick = () => {
|
||||
if (typeof window !== 'undefined' && window.$showNotification) {
|
||||
window.$showNotification('当前版本暂不支持多语言切换', 'info')
|
||||
}
|
||||
}
|
||||
|
||||
// 站点配置
|
||||
const {
|
||||
siteTitle,
|
||||
@@ -1709,6 +1745,55 @@ if (
|
||||
.user-section {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 通用工具按钮(主题/语言) */
|
||||
.utility-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 12px;
|
||||
background: var(--utility-btn-bg, rgba(255, 255, 255, 0.06));
|
||||
color: var(--utility-btn-color, rgba(255, 255, 255, 0.78));
|
||||
border: 1px solid var(--utility-btn-border, rgba(255, 255, 255, 0.12));
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.2s ease,
|
||||
color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
transform 0.15s ease;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.utility-btn:hover {
|
||||
background: var(--utility-btn-hover-bg, rgba(255, 255, 255, 0.12));
|
||||
color: var(--utility-btn-hover-color, #ffffff);
|
||||
border-color: var(--utility-btn-hover-border, rgba(255, 255, 255, 0.22));
|
||||
}
|
||||
|
||||
.utility-btn:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.utility-btn-label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.utility-btn-label {
|
||||
display: none;
|
||||
}
|
||||
.utility-btn {
|
||||
padding: 7px 8px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
|
||||
Reference in New Issue
Block a user