feat: unify public and admin interfaces
This commit is contained in:
admin_gitea
@@ -0,0 +1,5 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
*.exe
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
+60
-84
@@ -1,104 +1,80 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-view v-if="isAdminPage || isLoginPage" />
|
<div v-if="isPublicPage" class="public-shell">
|
||||||
<template v-else>
|
<div class="background" aria-hidden="true"></div>
|
||||||
<div class="background"></div>
|
<router-view />
|
||||||
<Home />
|
<footer class="site-footer">
|
||||||
<footer>
|
<span>© {{ footerYearText }} Made by <a href="/">{{ userName }}</a></span>
|
||||||
<span>© {{ footerYearText }} Made in <a href="/" target="_blank">{{ userName }}</a></span>
|
<a v-if="icpNumber" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
|
||||||
<a v-if="icpNumber && icpNumber !== '暂未填写' && icpNumber.trim() !== ''" href="https://beian.miit.gov.cn/" target="_blank">{{ icpNumber }}</a>
|
{{ icpNumber }}
|
||||||
<a v-if="policenumber && policenumber !== '暂未填写' && policenumber.trim() !== ''" :href="`https://beian.mps.gov.cn/#/query/webSearch?police=${policenumber}`" target="_blank" class="police_link">
|
</a>
|
||||||
<span class="police_img"></span> {{ policenumber }}
|
<a
|
||||||
|
v-if="policeNumber"
|
||||||
|
:href="`https://beian.mps.gov.cn/#/query/webSearch?police=${policeNumber}`"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="police-link"
|
||||||
|
>
|
||||||
|
<i class="fas fa-shield-alt" aria-hidden="true"></i>
|
||||||
|
{{ policeNumber }}
|
||||||
</a>
|
</a>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</div>
|
||||||
|
<router-view v-else />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, computed } from 'vue';
|
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router'
|
||||||
import Home from './components/Home.vue';
|
import { getSiteConfig } from './api'
|
||||||
import { getSiteConfig } from './api';
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute()
|
||||||
const userName = ref(import.meta.env.VITE_APP_USER_NAME || '用户');
|
const userName = ref(import.meta.env.VITE_APP_USER_NAME || '用户')
|
||||||
const icpNumber = ref(import.meta.env.VITE_APP_ICP_NUMBER || '');
|
const icpNumber = ref('')
|
||||||
const policenumber = ref(import.meta.env.VITE_APP_POLICE_NUMBER || '');
|
const policeNumber = ref('')
|
||||||
|
const footerYearStart = ref('')
|
||||||
// 底部年份（支持起止年份）
|
const footerYearEnd = ref('')
|
||||||
const footerYearStart = ref('');
|
let configChannel = null
|
||||||
const footerYearEnd = ref('');
|
|
||||||
|
|
||||||
|
const isPublicPage = computed(() => route.name === 'home')
|
||||||
const footerYearText = computed(() => {
|
const footerYearText = computed(() => {
|
||||||
const currentYear = new Date().getFullYear().toString();
|
const currentYear = String(new Date().getFullYear())
|
||||||
const start = (footerYearStart.value || '').trim();
|
const start = footerYearStart.value.trim()
|
||||||
const end = (footerYearEnd.value || '').trim();
|
const end = footerYearEnd.value.trim()
|
||||||
|
if (!start && !end) return currentYear
|
||||||
|
if (start && end && start !== end) return `${start}~${end}`
|
||||||
|
return start || end || currentYear
|
||||||
|
})
|
||||||
|
|
||||||
// 后台未配置时，默认显示当前年份
|
const visibleFiling = (value) => {
|
||||||
if (!start && !end) {
|
const normalized = typeof value === 'string' ? value.trim() : ''
|
||||||
return currentYear;
|
return normalized && normalized !== '暂未填写' ? normalized : ''
|
||||||
}
|
}
|
||||||
|
|
||||||
// 只配置了起始年份
|
|
||||||
if (start && !end) {
|
|
||||||
return start;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 起止年份都有且不同
|
|
||||||
if (start && end && start !== end) {
|
|
||||||
return `${start}~${end}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 其他情况（例如起止相同），只显示一个年份
|
|
||||||
return start || end || currentYear;
|
|
||||||
});
|
|
||||||
|
|
||||||
const isAdminPage = computed(() => route.path === '/admin');
|
|
||||||
const isLoginPage = computed(() => route.path === '/login');
|
|
||||||
|
|
||||||
const loadConfig = async () => {
|
const loadConfig = async () => {
|
||||||
|
if (!isPublicPage.value) return
|
||||||
try {
|
try {
|
||||||
const res = await getSiteConfig();
|
const { data } = await getSiteConfig()
|
||||||
// 同步所有配置信息
|
userName.value = data.userName || userName.value
|
||||||
if (res.data.siteName) {
|
icpNumber.value = visibleFiling(data.icpNumber)
|
||||||
// 站点名称可用于页面显示
|
policeNumber.value = visibleFiling(data.policeNumber)
|
||||||
}
|
footerYearStart.value = String(data.footerYearStart || '')
|
||||||
if (res.data.siteURL) {
|
footerYearEnd.value = String(data.footerYearEnd || '')
|
||||||
// 站点URL可用于链接等
|
|
||||||
}
|
|
||||||
if (res.data.siteDescription) {
|
|
||||||
// 站点描述已通过frontendConfig.js同步到meta标签
|
|
||||||
}
|
|
||||||
if (res.data.siteKeywords) {
|
|
||||||
// 站点关键词已通过frontendConfig.js同步到meta标签
|
|
||||||
}
|
|
||||||
// 只有非空且不是"暂未填写"时才显示备案信息
|
|
||||||
if (res.data.icpNumber && res.data.icpNumber !== '暂未填写' && res.data.icpNumber.trim() !== '') {
|
|
||||||
icpNumber.value = res.data.icpNumber;
|
|
||||||
} else {
|
|
||||||
icpNumber.value = '';
|
|
||||||
}
|
|
||||||
if (res.data.policeNumber && res.data.policeNumber !== '暂未填写' && res.data.policeNumber.trim() !== '') {
|
|
||||||
policenumber.value = res.data.policeNumber;
|
|
||||||
} else {
|
|
||||||
policenumber.value = '';
|
|
||||||
}
|
|
||||||
if (res.data.userName) userName.value = res.data.userName;
|
|
||||||
|
|
||||||
// 底部年份配置
|
|
||||||
if (typeof res.data.footerYearStart === 'string') {
|
|
||||||
footerYearStart.value = res.data.footerYearStart;
|
|
||||||
}
|
|
||||||
if (typeof res.data.footerYearEnd === 'string') {
|
|
||||||
footerYearEnd.value = res.data.footerYearEnd;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('加载配置失败:', error);
|
console.error('加载页脚配置失败:', error)
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
|
watch(() => route.name, loadConfig)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (!isAdminPage.value && !isLoginPage.value) {
|
loadConfig()
|
||||||
loadConfig();
|
if (window.BroadcastChannel) {
|
||||||
|
configChannel = new BroadcastChannel('config-update')
|
||||||
|
configChannel.onmessage = ({ data }) => {
|
||||||
|
if (data?.type === 'config-updated') loadConfig()
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => configChannel?.close())
|
||||||
</script>
|
</script>
|
||||||
+5
-2
@@ -29,7 +29,10 @@ api.interceptors.response.use(
|
|||||||
(error) => {
|
(error) => {
|
||||||
if (error.response?.status === 401) {
|
if (error.response?.status === 401) {
|
||||||
localStorage.removeItem('token')
|
localStorage.removeItem('token')
|
||||||
// 可以在这里跳转到登录页
|
if (window.location.pathname.startsWith('/admin')) {
|
||||||
|
const redirect = encodeURIComponent(`${window.location.pathname}${window.location.search}`)
|
||||||
|
window.location.assign(`/login?redirect=${redirect}`)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
}
|
}
|
||||||
@@ -93,7 +96,7 @@ export const adminAPI = {
|
|||||||
getLoginHistory: (limit = 20) => api.get(`/admin/login-history?limit=${limit}`),
|
getLoginHistory: (limit = 20) => api.get(`/admin/login-history?limit=${limit}`),
|
||||||
|
|
||||||
// 轮换文本配置API
|
// 轮换文本配置API
|
||||||
getRotatingTexts: () => api.get('/api/rotating-texts'),
|
getRotatingTexts: () => api.get('/admin/rotating-texts'),
|
||||||
updateRotatingTexts: (texts) => api.put('/admin/rotating-texts', { texts }),
|
updateRotatingTexts: (texts) => api.put('/admin/rotating-texts', { texts }),
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -21,7 +21,7 @@
|
|||||||
<span class="link-desc">Home-Vue</span>
|
<span class="link-desc">Home-Vue</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://github.com/JLinMr/Home-Vue-go" target="_blank" class="github-link">
|
<a href="https://github.com/QWQLwToo/Home-Vue-go" target="_blank" rel="noopener noreferrer" class="github-link">
|
||||||
<i class="fab fa-github"></i>
|
<i class="fab fa-github"></i>
|
||||||
<div class="link-content">
|
<div class="link-content">
|
||||||
<span class="link-title">动态现项目</span>
|
<span class="link-title">动态现项目</span>
|
||||||
|
|||||||
+357
-2887
File diff suppressed because it is too large
Load Diff
+271
-1427
File diff suppressed because it is too large
Load Diff
+257
-425
@@ -1,528 +1,360 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content">
|
<main class="home-view" :aria-busy="loading">
|
||||||
<div class="user-profile-container">
|
<section class="identity" aria-labelledby="home-title">
|
||||||
<div class="user-profile-image" v-motion-pop>
|
<button class="profile-button" type="button" aria-label="查看关于信息" @click="showAbout = true" v-motion-pop>
|
||||||
<img :src="profileImage" alt="头像" @click.stop="toggleInfo">
|
<img v-if="profileImage && !profileImageFailed" :src="profileImage" :alt="`${userName} 的头像`" @error="profileImageFailed = true" />
|
||||||
<span class="status-ball"></span>
|
<span v-else class="profile-fallback"><i class="fas fa-user" aria-hidden="true"></i></span>
|
||||||
</div>
|
<span class="status-ball"><span>在线</span></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div class="user-name" v-motion-slide-left>
|
<div class="user-name" v-motion-slide-left>
|
||||||
<h1>Hi,</h1>
|
<h1 id="home-title">Hi,</h1>
|
||||||
<h1>I'm <span class="name-style">{{ userName }}</span></h1>
|
<h1>I'm <span class="name-style">{{ userName }}</span></h1>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<div class="description" aria-live="polite">
|
||||||
|
<p v-if="loading">正在加载主页...</p>
|
||||||
|
<p v-else ref="descriptionElement"></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="description">
|
|
||||||
<p ref="descriptionElement"></p>
|
<p v-if="loadError" class="home-notice">
|
||||||
</div>
|
<i class="fas fa-circle-info" aria-hidden="true"></i>
|
||||||
<div class="contact-section" v-motion-pop>
|
当前展示本地备用内容
|
||||||
<template v-for="contact in contacts" :key="contact.type">
|
</p>
|
||||||
<a v-if="contact.url" :href="contact.url" target="_blank" class="contact-item" :style="{ '--hover-color': contact.hoverColor }">
|
|
||||||
<i :class="contact.icon"></i>
|
<nav class="contact-section" aria-label="联系方式" v-motion-pop>
|
||||||
|
<template v-for="contact in contacts" :key="contact.id || contact.type">
|
||||||
|
<a
|
||||||
|
v-if="contact.url"
|
||||||
|
:href="contact.url"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="contact-item"
|
||||||
|
:style="{ '--hover-color': contact.hoverColor || 'var(--hover-link-color)' }"
|
||||||
|
:aria-label="contact.type"
|
||||||
|
>
|
||||||
|
<i :class="contact.icon" aria-hidden="true"></i>
|
||||||
<span class="tooltip">{{ contact.type }}</span>
|
<span class="tooltip">{{ contact.type }}</span>
|
||||||
</a>
|
</a>
|
||||||
<span v-else @click="toggleQRCode(contact.qrCode)" class="contact-item" :style="{ '--hover-color': contact.hoverColor }">
|
<button
|
||||||
<i :class="contact.icon"></i>
|
v-else
|
||||||
|
type="button"
|
||||||
|
class="contact-item"
|
||||||
|
:style="{ '--hover-color': contact.hoverColor || 'var(--hover-link-color)' }"
|
||||||
|
:aria-label="`查看${contact.type}二维码`"
|
||||||
|
@click="showQRCode(contact.qrCode)"
|
||||||
|
>
|
||||||
|
<i :class="contact.icon" aria-hidden="true"></i>
|
||||||
<span class="tooltip">{{ contact.type }}</span>
|
<span class="tooltip">{{ contact.type }}</span>
|
||||||
</span>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
<span class="contact-item" @click="toggleDarkMode" :style="{ '--hover-color': isDarkMode ? '#ffcc00' : '#666' }">
|
<button type="button" class="contact-item" :aria-label="themeLabel" @click="toggleTheme">
|
||||||
<i :class="darkModeIconClass"></i>
|
<i :class="themeIcon" aria-hidden="true"></i>
|
||||||
<span class="tooltip">{{ isDarkMode ? '浅色' : '深色' }}</span>
|
<span class="tooltip">{{ isDarkMode ? '浅色' : '深色' }}</span>
|
||||||
</span>
|
</button>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
<Website />
|
<Website />
|
||||||
<!-- 使用v-if确保组件完全从DOM中移除，包括所有class -->
|
<VisitTimer v-if="showVisitTimer" />
|
||||||
<VisitTimer v-if="showVisitTimer" :key="showVisitTimer ? 'visit-timer-show' : 'visit-timer-hide'" />
|
|
||||||
|
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<div v-if="showAbout" class="overlay" @click="showAbout = false">
|
<div v-if="showAbout" class="overlay" role="dialog" aria-modal="true" aria-label="关于本站" @click="showAbout = false">
|
||||||
<div class="modal-content">
|
<div class="modal-content"><AboutPage @close="showAbout = false" /></div>
|
||||||
<AboutPage @close="showAbout = false" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
|
|
||||||
<Transition name="fade">
|
<Transition name="fade">
|
||||||
<div v-if="showQR" class="overlay" @click="hideQRCode">
|
<div v-if="showQR" class="overlay" role="dialog" aria-modal="true" aria-label="二维码" @click="showQR = false">
|
||||||
<div class="modal-content">
|
<div class="modal-content" @click.stop>
|
||||||
<img :src="qrCodeSrc" alt="QR Code" class="qr-image" @click.stop>
|
<img :src="qrCodeSrc" alt="联系方式二维码" class="qr-image" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Transition>
|
</Transition>
|
||||||
</div>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
|
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||||
import { getContacts, getSiteConfig } from '../api';
|
import Typed from 'typed.js'
|
||||||
import api from '../api';
|
import api, { getContacts, getSiteConfig } from '../api'
|
||||||
import Website from './Website.vue';
|
import fallbackContacts from '../config/links.json'
|
||||||
import AboutPage from './AboutPage.vue';
|
import { useTheme } from '../composables/useTheme'
|
||||||
import VisitTimer from './VisitTimer.vue';
|
import AboutPage from './AboutPage.vue'
|
||||||
import Typed from 'typed.js';
|
import VisitTimer from './VisitTimer.vue'
|
||||||
|
import Website from './Website.vue'
|
||||||
|
|
||||||
const contacts = ref([]);
|
const defaultDescriptions = [
|
||||||
const showQR = ref(false);
|
'你好鸭，欢迎来到我的主页！！',
|
||||||
const showAbout = ref(false);
|
'随时可以联系我，期待与你交流。',
|
||||||
const qrCodeSrc = ref('');
|
'愿你历尽千帆，归来仍是少年。',
|
||||||
const profileImage = ref('');
|
'梦想还是要有的，万一实现了呢？',
|
||||||
const userName = ref('');
|
'I hope you have a happy day every day.',
|
||||||
const siteConfig = ref({});
|
]
|
||||||
const descriptionElement = ref(null);
|
|
||||||
const showVisitTimer = ref(true);
|
|
||||||
|
|
||||||
const loadData = async () => {
|
const contacts = ref(fallbackContacts)
|
||||||
try {
|
const userName = ref(import.meta.env.VITE_APP_USER_NAME || '用户')
|
||||||
const [contactsRes, configRes] = await Promise.all([
|
const profileImage = ref(import.meta.env.VITE_APP_PROFILE_IMAGE_URL || '')
|
||||||
getContacts(),
|
const profileImageFailed = ref(false)
|
||||||
getSiteConfig(),
|
const showVisitTimer = ref(true)
|
||||||
]);
|
const descriptions = ref(defaultDescriptions)
|
||||||
contacts.value = contactsRes.data;
|
const descriptionElement = ref(null)
|
||||||
siteConfig.value = configRes.data;
|
const loading = ref(true)
|
||||||
userName.value = configRes.data.userName || import.meta.env.VITE_APP_USER_NAME || '用户';
|
const loadError = ref(false)
|
||||||
profileImage.value = configRes.data.profileImageURL || import.meta.env.VITE_APP_PROFILE_IMAGE_URL || '';
|
const showAbout = ref(false)
|
||||||
// 确保正确读取 showVisitTimer，明确处理 false 值
|
const showQR = ref(false)
|
||||||
const timerValue = configRes.data.showVisitTimer;
|
const qrCodeSrc = ref('')
|
||||||
const newValue = timerValue !== undefined && timerValue !== null
|
const { isDarkMode, themeIcon, themeLabel, toggleTheme } = useTheme()
|
||||||
? Boolean(timerValue)
|
let typedInstance = null
|
||||||
: true;
|
let configChannel = null
|
||||||
// 使用赋值触发响应式更新
|
|
||||||
const oldValue = showVisitTimer.value;
|
|
||||||
showVisitTimer.value = newValue;
|
|
||||||
console.log('加载配置 - showVisitTimer:', {
|
|
||||||
oldValue,
|
|
||||||
newValue,
|
|
||||||
rawValue: timerValue,
|
|
||||||
type: typeof timerValue,
|
|
||||||
isFalse: timerValue === false
|
|
||||||
});
|
|
||||||
|
|
||||||
// 如果从true变为false，确保DOM被移除
|
const initializeTyped = async () => {
|
||||||
if (oldValue && !newValue) {
|
typedInstance?.destroy()
|
||||||
await nextTick();
|
await nextTick()
|
||||||
const timerElements = document.querySelectorAll('.visit-timer-container, .visit-timer');
|
if (!descriptionElement.value) return
|
||||||
if (timerElements.length > 0) {
|
|
||||||
console.warn('检测到需要移除的visit-timer元素，数量:', timerElements.length);
|
|
||||||
timerElements.forEach(el => {
|
|
||||||
console.log('移除元素:', el);
|
|
||||||
el.remove();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载数据失败:', error);
|
|
||||||
// 如果API失败，使用环境变量或默认值
|
|
||||||
userName.value = import.meta.env.VITE_APP_USER_NAME || '用户';
|
|
||||||
profileImage.value = import.meta.env.VITE_APP_PROFILE_IMAGE_URL || '';
|
|
||||||
showVisitTimer.value = true; // 默认显示
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const predefinedDescriptions = ref([
|
|
||||||
"你好鸭，欢迎来到我的主页！！",
|
|
||||||
"随时可以联系我，期待与你交流。",
|
|
||||||
"愿你历尽千帆，归来仍是少年。",
|
|
||||||
"梦想还是要有的，万一实现了呢？",
|
|
||||||
"I hope you have a happy day every day."
|
|
||||||
]);
|
|
||||||
|
|
||||||
let typedInstance = null;
|
|
||||||
|
|
||||||
const loadRotatingTexts = async () => {
|
|
||||||
try {
|
|
||||||
const res = await api.get('/rotating-texts');
|
|
||||||
if (res.data?.texts && res.data.texts.length > 0) {
|
|
||||||
predefinedDescriptions.value = res.data.texts;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.debug('加载轮换文本失败，使用默认文本:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const initializeTyped = () => {
|
|
||||||
if (typedInstance) {
|
|
||||||
typedInstance.destroy();
|
|
||||||
}
|
|
||||||
typedInstance = new Typed(descriptionElement.value, {
|
typedInstance = new Typed(descriptionElement.value, {
|
||||||
strings: predefinedDescriptions.value,
|
strings: descriptions.value,
|
||||||
typeSpeed: 120,
|
typeSpeed: 90,
|
||||||
backSpeed: 80,
|
backSpeed: 55,
|
||||||
|
backDelay: 1400,
|
||||||
showCursor: true,
|
showCursor: true,
|
||||||
cursorChar: '|',
|
cursorChar: '|',
|
||||||
loop: true,
|
loop: true,
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 记录访问统计
|
|
||||||
const trackVisit = async () => {
|
|
||||||
try {
|
|
||||||
const path = window.location.pathname;
|
|
||||||
const referer = document.referrer || '';
|
|
||||||
await api.post('/track-visit', {
|
|
||||||
path: path,
|
|
||||||
referer: referer,
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
// 静默失败，不影响用户体验
|
|
||||||
console.debug('访问统计记录失败:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 监听配置更新消息
|
|
||||||
let broadcastChannel = null
|
|
||||||
if (window.BroadcastChannel) {
|
|
||||||
broadcastChannel = new BroadcastChannel('config-update')
|
|
||||||
broadcastChannel.onmessage = async (event) => {
|
|
||||||
if (event.data.type === 'config-updated') {
|
|
||||||
console.log('收到配置更新消息，重新加载数据...')
|
|
||||||
const oldTimerValue = showVisitTimer.value
|
|
||||||
await loadData()
|
|
||||||
await loadRotatingTexts()
|
|
||||||
if (typedInstance) {
|
|
||||||
typedInstance.destroy()
|
|
||||||
}
|
|
||||||
initializeTyped()
|
|
||||||
// 停留时间显示状态会在loadData中更新
|
|
||||||
// 使用 nextTick 确保 DOM 更新
|
|
||||||
await nextTick()
|
|
||||||
console.log('配置更新后 - showVisitTimer:', showVisitTimer.value, '之前的值:', oldTimerValue, 'DOM已更新')
|
|
||||||
|
|
||||||
// 如果从true变为false，强制检查并移除残留的DOM元素
|
|
||||||
if (oldTimerValue && !showVisitTimer.value) {
|
|
||||||
console.log('showVisitTimer从true变为false，强制清理残留元素')
|
|
||||||
const timerElements = document.querySelectorAll('.visit-timer-container, .visit-timer, [class*="visit-timer"]')
|
|
||||||
if (timerElements.length > 0) {
|
|
||||||
console.warn('发现残留的visit-timer相关元素，强制移除:', timerElements.length)
|
|
||||||
timerElements.forEach(el => {
|
|
||||||
console.log('移除残留元素:', el.className, el)
|
|
||||||
el.remove()
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 再次等待DOM更新
|
|
||||||
await nextTick()
|
const loadData = async () => {
|
||||||
}
|
loading.value = true
|
||||||
}
|
loadError.value = false
|
||||||
}
|
profileImageFailed.value = false
|
||||||
|
|
||||||
|
const [contactsResult, configResult, textsResult] = await Promise.allSettled([
|
||||||
|
getContacts(),
|
||||||
|
getSiteConfig(),
|
||||||
|
api.get('/rotating-texts'),
|
||||||
|
])
|
||||||
|
|
||||||
|
if (contactsResult.status === 'fulfilled' && Array.isArray(contactsResult.value.data)) {
|
||||||
|
contacts.value = contactsResult.value.data
|
||||||
|
} else {
|
||||||
|
contacts.value = fallbackContacts
|
||||||
|
loadError.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听showVisitTimer变化，确保DOM正确更新
|
if (configResult.status === 'fulfilled') {
|
||||||
watch(showVisitTimer, async (newValue, oldValue) => {
|
const config = configResult.value.data || {}
|
||||||
console.log('showVisitTimer变化:', { oldValue, newValue })
|
userName.value = config.userName || import.meta.env.VITE_APP_USER_NAME || '用户'
|
||||||
// 等待DOM更新完成
|
profileImage.value = config.profileImageURL || import.meta.env.VITE_APP_PROFILE_IMAGE_URL || ''
|
||||||
await nextTick()
|
showVisitTimer.value = config.showVisitTimer === undefined ? true : Boolean(config.showVisitTimer)
|
||||||
// 如果设置为false，强制检查并移除任何残留的visit-timer元素
|
} else {
|
||||||
if (!newValue) {
|
loadError.value = true
|
||||||
const timerElements = document.querySelectorAll('.visit-timer-container, .visit-timer')
|
|
||||||
if (timerElements.length > 0) {
|
|
||||||
console.warn('发现残留的visit-timer元素，强制移除:', timerElements.length)
|
|
||||||
timerElements.forEach(el => el.remove())
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (textsResult.status === 'fulfilled' && textsResult.value.data?.texts?.length) {
|
||||||
|
descriptions.value = textsResult.value.data.texts
|
||||||
|
} else {
|
||||||
|
descriptions.value = defaultDescriptions
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = false
|
||||||
|
await initializeTyped()
|
||||||
|
}
|
||||||
|
|
||||||
|
const showQRCode = (src) => {
|
||||||
|
if (!src) return
|
||||||
|
qrCodeSrc.value = src
|
||||||
|
showQR.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeDialogsOnEscape = (event) => {
|
||||||
|
if (event.key !== 'Escape') return
|
||||||
|
showAbout.value = false
|
||||||
|
showQR.value = false
|
||||||
}
|
}
|
||||||
}, { immediate: false })
|
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await loadData();
|
await loadData()
|
||||||
await loadRotatingTexts();
|
api.post('/track-visit', { path: window.location.pathname, referer: document.referrer || '' }).catch(() => {})
|
||||||
initializeTyped();
|
document.addEventListener('keydown', closeDialogsOnEscape)
|
||||||
trackVisit(); // 记录访问
|
|
||||||
});
|
|
||||||
|
|
||||||
// 清理
|
if (window.BroadcastChannel) {
|
||||||
onUnmounted(() => {
|
configChannel = new BroadcastChannel('config-update')
|
||||||
if (broadcastChannel) {
|
configChannel.onmessage = ({ data }) => {
|
||||||
broadcastChannel.close()
|
if (data?.type === 'config-updated') loadData()
|
||||||
}
|
}
|
||||||
if (typedInstance) {
|
|
||||||
typedInstance.destroy()
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
const toggleQRCode = (qrCode) => {
|
onUnmounted(() => {
|
||||||
qrCodeSrc.value = qrCode || '';
|
typedInstance?.destroy()
|
||||||
showQR.value = !showQR.value;
|
configChannel?.close()
|
||||||
};
|
document.removeEventListener('keydown', closeDialogsOnEscape)
|
||||||
|
})
|
||||||
const hideQRCode = () => {
|
|
||||||
showQR.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const toggleInfo = () => {
|
|
||||||
showAbout.value = !showAbout.value;
|
|
||||||
};
|
|
||||||
|
|
||||||
const isDarkMode = ref(false);
|
|
||||||
const darkModeIconClass = ref('fas fa-moon');
|
|
||||||
|
|
||||||
const toggleDarkMode = () => {
|
|
||||||
isDarkMode.value = !isDarkMode.value;
|
|
||||||
document.body.classList.toggle('dark-mode', isDarkMode.value);
|
|
||||||
|
|
||||||
localStorage.setItem('darkMode', isDarkMode.value);
|
|
||||||
|
|
||||||
darkModeIconClass.value = isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon';
|
|
||||||
};
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
const savedDarkMode = localStorage.getItem('darkMode');
|
|
||||||
if (savedDarkMode !== null) {
|
|
||||||
isDarkMode.value = savedDarkMode === 'true';
|
|
||||||
document.body.classList.toggle('dark-mode', isDarkMode.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
darkModeIconClass.value = isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon';
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="less">
|
||||||
.content {
|
.home-view {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
width: min(100%, 760px);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: clamp(28px, 6vh, 64px) 0 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 30px;
|
justify-content: center;
|
||||||
margin-top: 20px;
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.user-profile-container {
|
.identity {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-profile-image {
|
.profile-button {
|
||||||
display: flex;
|
position: relative;
|
||||||
border-radius: 50%;
|
display: grid;
|
||||||
box-shadow: 0 2px 8px var(--shadow-color);
|
place-items: center;
|
||||||
|
width: 166px;
|
||||||
|
height: 166px;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
border: 3px solid var(--border-color);
|
border: 3px solid var(--border-color);
|
||||||
position: relative;
|
border-radius: 50%;
|
||||||
|
color: var(--text-muted);
|
||||||
|
background: var(--surface-muted);
|
||||||
|
box-shadow: 0 2px 8px var(--shadow-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
.profile-button img,
|
||||||
|
.profile-fallback {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.profile-button img { object-fit: cover; }
|
||||||
|
.profile-fallback { display: grid; place-items: center; font-size: 52px; background: var(--surface-color); }
|
||||||
|
|
||||||
.status-ball {
|
.status-ball {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: #00c800;
|
right: 10px;
|
||||||
width: 2em;
|
bottom: 10px;
|
||||||
height: 2em;
|
width: 30px;
|
||||||
border-radius: 20px;
|
height: 30px;
|
||||||
border: 3px solid #eee;
|
|
||||||
bottom: 5px;
|
|
||||||
right: 15px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transition: all 0.3s ease;
|
justify-content: center;
|
||||||
z-index: 1;
|
|
||||||
cursor: pointer;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
border: 3px solid var(--background-color);
|
||||||
&::before {
|
border-radius: 20px;
|
||||||
content: "在线中";
|
color: white;
|
||||||
color: #00c800;
|
background: #248f3d;
|
||||||
opacity: 0;
|
transition: width 0.2s ease;
|
||||||
transition: opacity 0.3s ease-in-out, color 0.1s ease-in-out;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
.status-ball span { opacity: 0; font-size: 12px; white-space: nowrap; }
|
||||||
width: 4.5em;
|
.profile-button:hover .status-ball { width: 56px; }
|
||||||
height: 2em;
|
.profile-button:hover .status-ball span { opacity: 1; }
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::before {
|
.user-name { display: flex; flex-direction: column; align-items: flex-start; font-size: 1.3em; }
|
||||||
opacity: 1;
|
.user-name h1 { margin: 0; letter-spacing: 0; }
|
||||||
color: #eee;
|
.name-style { position: relative; z-index: 0; }
|
||||||
}
|
.name-style::before {
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
font-size: 1.3em;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.name-style {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 5px;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%);
|
bottom: 0;
|
||||||
z-index: -1;
|
|
||||||
content: "";
|
|
||||||
background: #ffcc00ad;
|
|
||||||
height: 30%;
|
|
||||||
width: 110%;
|
width: 110%;
|
||||||
transition: height 0.3s ease-in-out;
|
height: 30%;
|
||||||
}
|
border-radius: 4px;
|
||||||
&:hover::before {
|
background: rgba(var(--hover-link-color-rgb), 0.68);
|
||||||
height: 60%;
|
content: '';
|
||||||
}
|
transform: translateX(-50%);
|
||||||
|
transition: height 0.2s ease;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
.name-style:hover::before { height: 60%; }
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
display: flex;
|
|
||||||
min-height: 32px;
|
min-height: 32px;
|
||||||
width: 100%;
|
max-width: min(100%, 580px);
|
||||||
max-width: 500px;
|
display: flex;
|
||||||
font-family: 'Georgia', serif;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
transition: all 0.3s ease-in-out;
|
font-family: Georgia, serif;
|
||||||
|
font-size: 1.15rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.description::before,
|
||||||
|
.description::after { content: '"'; margin: 0 10px; color: var(--text-muted); font-size: 1.4em; }
|
||||||
|
.description p { min-width: 0; margin: 0; overflow-wrap: anywhere; }
|
||||||
|
|
||||||
&::before,
|
.home-notice { margin: -14px 0 0; color: var(--text-muted); font-size: 13px; }
|
||||||
&::after {
|
|
||||||
content: '"';
|
|
||||||
font-size: 1.5em;
|
|
||||||
color: #999;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-section {
|
.contact-section {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 20px;
|
gap: 18px;
|
||||||
padding: 5px 10px;
|
min-height: 42px;
|
||||||
|
padding: 8px 12px;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
transition: all 0.3s ease-in-out;
|
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||||
|
}
|
||||||
|
.contact-section:hover { border-color: var(--border-color); background: var(--surface-muted); box-shadow: 0 2px 8px var(--shadow-color); }
|
||||||
.contact-item {
|
.contact-item {
|
||||||
|
position: relative;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
background: transparent;
|
||||||
font-size: var(--icon-size);
|
font-size: var(--icon-size);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
|
transition: color 0.2s ease, transform 0.2s ease;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.fas.fa-moon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
}
|
||||||
|
.contact-item:hover { color: var(--hover-color, var(--hover-link-color)); transform: translateY(-3px); }
|
||||||
&:hover {
|
|
||||||
transform: translateY(-5px) rotate(10deg);
|
|
||||||
color: var(--hover-color);
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 100%;
|
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, 10px);
|
bottom: calc(100% + 8px);
|
||||||
opacity: 0;
|
padding: 3px 7px;
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
||||||
white-space: nowrap;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
box-shadow: 0 2px 8px var(--shadow-color);
|
border-radius: 4px;
|
||||||
background-color: rgba(var(--background-color-rgb), 0.2);
|
color: var(--text-color);
|
||||||
}
|
background: var(--surface-solid);
|
||||||
}
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
.overlay {
|
opacity: 0;
|
||||||
position: fixed;
|
pointer-events: none;
|
||||||
top: 0;
|
transform: translate(-50%, 4px);
|
||||||
left: 0;
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.6);
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
}
|
||||||
|
.contact-item:hover .tooltip,
|
||||||
|
.contact-item:focus-visible .tooltip { opacity: 1; transform: translate(-50%, 0); }
|
||||||
|
|
||||||
|
.overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.62); z-index: 1000; }
|
||||||
|
.modal-content { max-width: 100%; }
|
||||||
|
.qr-image { width: min(320px, 82vw); aspect-ratio: 1; object-fit: contain; padding: 18px; border-radius: 8px; background: white; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); }
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active { transition: opacity 0.2s ease; }
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
transition: all 0.3s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-enter-from,
|
.fade-enter-from,
|
||||||
.fade-leave-to {
|
.fade-leave-to { opacity: 0; }
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
.modal-content {
|
@media (max-width: 768px) {
|
||||||
transform: translateY(30px) scale(0.8);
|
.home-view { justify-content: flex-start; gap: 17px; padding-top: 28px; }
|
||||||
opacity: 0;
|
.identity { flex-direction: column; gap: 8px; }
|
||||||
}
|
.profile-button { width: 132px; height: 132px; }
|
||||||
}
|
.profile-button img,
|
||||||
|
.profile-fallback { width: 116px; height: 116px; }
|
||||||
.fade-enter-to,
|
.status-ball { right: 5px; bottom: 5px; }
|
||||||
.fade-leave-from {
|
.user-name { align-items: center; font-size: 1em; }
|
||||||
opacity: 1;
|
.description { min-height: 48px; font-size: 1rem; }
|
||||||
|
.description::before,
|
||||||
.modal-content {
|
.description::after { margin: 0 6px; }
|
||||||
transform: translateY(0) scale(1);
|
.contact-section { gap: 14px; }
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-image {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
background: white;
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
box-shadow: 0 4px 8px var(--shadow-color);
|
|
||||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.03) translateY(-5px);
|
|
||||||
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.content {
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
.content .user-profile-container {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -3,18 +3,21 @@
|
|||||||
<div class="icon-tabs">
|
<div class="icon-tabs">
|
||||||
<button
|
<button
|
||||||
v-if="defaultIconPath"
|
v-if="defaultIconPath"
|
||||||
|
type="button"
|
||||||
:class="['tab-btn', { active: iconMode === 'default' }]"
|
:class="['tab-btn', { active: iconMode === 'default' }]"
|
||||||
@click="iconMode = 'default'"
|
@click="iconMode = 'default'"
|
||||||
>
|
>
|
||||||
默认图标
|
默认图标
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
:class="['tab-btn', { active: iconMode === 'upload' }]"
|
:class="['tab-btn', { active: iconMode === 'upload' }]"
|
||||||
@click="iconMode = 'upload'"
|
@click="iconMode = 'upload'"
|
||||||
>
|
>
|
||||||
上传图标
|
上传图标
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
:class="['tab-btn', { active: iconMode === 'url' }]"
|
:class="['tab-btn', { active: iconMode === 'url' }]"
|
||||||
@click="iconMode = 'url'"
|
@click="iconMode = 'url'"
|
||||||
>
|
>
|
||||||
@@ -28,7 +31,7 @@
|
|||||||
<img :src="defaultIconPath" alt="默认图标" class="icon-preview" />
|
<img :src="defaultIconPath" alt="默认图标" class="icon-preview" />
|
||||||
<p class="icon-hint">使用默认本地图标：{{ defaultIconPath }}</p>
|
<p class="icon-hint">使用默认本地图标：{{ defaultIconPath }}</p>
|
||||||
</div>
|
</div>
|
||||||
<button @click="selectDefault" class="select-btn">使用默认图标</button>
|
<button type="button" @click="selectDefault" class="select-btn">使用默认图标</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 上传图标 -->
|
<!-- 上传图标 -->
|
||||||
@@ -49,7 +52,7 @@
|
|||||||
<img :src="uploadedIconUrl" alt="上传的图标" class="icon-preview" />
|
<img :src="uploadedIconUrl" alt="上传的图标" class="icon-preview" />
|
||||||
<p class="icon-hint">已上传的图标</p>
|
<p class="icon-hint">已上传的图标</p>
|
||||||
</div>
|
</div>
|
||||||
<button @click="$refs.fileInput.click()" class="upload-btn">
|
<button type="button" @click="$refs.fileInput.click()" class="upload-btn">
|
||||||
{{ uploadedIconUrl ? '重新选择' : '选择文件' }}
|
{{ uploadedIconUrl ? '重新选择' : '选择文件' }}
|
||||||
</button>
|
</button>
|
||||||
<div v-if="uploading" class="upload-status">上传中...</div>
|
<div v-if="uploading" class="upload-status">上传中...</div>
|
||||||
@@ -81,7 +84,7 @@
|
|||||||
<img :src="validatedUrl" alt="URL图标" class="icon-preview" @error="handleImageError" />
|
<img :src="validatedUrl" alt="URL图标" class="icon-preview" @error="handleImageError" />
|
||||||
<p class="icon-hint">URL图标预览（支持重定向）</p>
|
<p class="icon-hint">URL图标预览（支持重定向）</p>
|
||||||
</div>
|
</div>
|
||||||
<button @click="selectUrl" class="select-btn" :disabled="!iconUrl || urlValidating || !!urlError">
|
<button type="button" @click="selectUrl" class="select-btn" :disabled="!iconUrl || urlValidating || !!urlError">
|
||||||
{{ urlValidating ? '验证中...' : '使用URL图标' }}
|
{{ urlValidating ? '验证中...' : '使用URL图标' }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -344,37 +347,39 @@ onMounted(() => {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.icon-selector {
|
.icon-selector {
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 8px;
|
border-radius: 7px;
|
||||||
padding: 15px;
|
padding: 14px;
|
||||||
background: rgba(var(--background-color-rgb), 0.3);
|
background: var(--surface-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-tabs {
|
.icon-tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 10px;
|
gap: 6px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 16px;
|
||||||
border-bottom: 2px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-btn {
|
.tab-btn {
|
||||||
padding: 8px 16px;
|
min-height: 36px;
|
||||||
|
padding: 7px 12px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 2px solid transparent;
|
border-bottom: 2px solid transparent;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-btn.active {
|
.tab-btn.active {
|
||||||
border-bottom-color: #007aff;
|
border-bottom-color: var(--accent-color);
|
||||||
color: #007aff;
|
color: var(--text-color);
|
||||||
font-weight: bold;
|
font-weight: 700;
|
||||||
|
background: var(--accent-soft);
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-content {
|
.icon-content {
|
||||||
min-height: 200px;
|
min-height: 170px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.default-icon-preview,
|
.default-icon-preview,
|
||||||
@@ -382,8 +387,9 @@ onMounted(() => {
|
|||||||
.url-preview {
|
.url-preview {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background: rgba(var(--background-color-rgb), 0.5);
|
background: var(--surface-color);
|
||||||
border-radius: 8px;
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 7px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -397,7 +403,7 @@ onMounted(() => {
|
|||||||
|
|
||||||
.icon-hint {
|
.icon-hint {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: var(--text-muted);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -407,9 +413,9 @@ onMounted(() => {
|
|||||||
|
|
||||||
.upload-placeholder {
|
.upload-placeholder {
|
||||||
padding: 40px;
|
padding: 40px;
|
||||||
background: rgba(var(--background-color-rgb), 0.5);
|
background: var(--surface-color);
|
||||||
border-radius: 8px;
|
border-radius: 7px;
|
||||||
border: 2px dashed var(--border-color);
|
border: 1px dashed var(--border-strong);
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -420,16 +426,16 @@ onMounted(() => {
|
|||||||
|
|
||||||
.upload-placeholder .hint {
|
.upload-placeholder .hint {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-btn,
|
.upload-btn,
|
||||||
.select-btn {
|
.select-btn {
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
background: #007aff;
|
background: var(--accent-color);
|
||||||
color: white;
|
color: #2f280d;
|
||||||
border: none;
|
border: 1px solid var(--accent-strong);
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
@@ -437,17 +443,19 @@ onMounted(() => {
|
|||||||
|
|
||||||
.upload-btn:hover,
|
.upload-btn:hover,
|
||||||
.select-btn:hover {
|
.select-btn:hover {
|
||||||
background: #0056b3;
|
background: var(--accent-strong);
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-btn:disabled {
|
.select-btn:disabled {
|
||||||
background: #999;
|
color: var(--text-muted);
|
||||||
|
background: var(--surface-muted);
|
||||||
|
border-color: var(--border-color);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-status {
|
.upload-status {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
color: #007aff;
|
color: var(--text-muted);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -466,8 +474,8 @@ onMounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
background: rgba(var(--background-color-rgb), 0.5);
|
background: var(--surface-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@@ -476,7 +484,7 @@ onMounted(() => {
|
|||||||
display: block;
|
display: block;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: var(--text-muted);
|
||||||
}
|
}
|
||||||
|
|
||||||
.url-status {
|
.url-status {
|
||||||
@@ -484,7 +492,7 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
color: #007aff;
|
color: var(--text-muted);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -493,11 +501,11 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
color: #f44336;
|
color: var(--danger-color);
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background: rgba(244, 67, 54, 0.1);
|
background: rgba(244, 67, 54, 0.1);
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
border: 1px solid rgba(244, 67, 54, 0.2);
|
border: 1px solid rgba(244, 67, 54, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
+163
-356
@@ -1,403 +1,210 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="login-container">
|
<main class="login-page">
|
||||||
<div class="login-background">
|
<div class="background" aria-hidden="true"></div>
|
||||||
<div class="floating-shapes">
|
|
||||||
<div class="shape shape-1"></div>
|
<div class="login-tools">
|
||||||
<div class="shape shape-2"></div>
|
<router-link to="/" class="icon-button" title="返回主页" aria-label="返回主页">
|
||||||
<div class="shape shape-3"></div>
|
<i class="fas fa-house" aria-hidden="true"></i>
|
||||||
|
</router-link>
|
||||||
|
<button type="button" class="icon-button" :title="themeLabel" :aria-label="themeLabel" @click="toggleTheme">
|
||||||
|
<i :class="themeIcon" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<section class="login-panel" aria-labelledby="login-title">
|
||||||
|
<header class="login-header">
|
||||||
|
<span class="site-mark">
|
||||||
|
<img v-if="siteIcon && !iconFailed" :src="siteIcon" alt="" @error="iconFailed = true" />
|
||||||
|
<i v-else class="fas fa-home" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<p class="site-name">{{ siteName }}</p>
|
||||||
|
<h1 id="login-title">管理后台</h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-box">
|
</header>
|
||||||
<div class="login-header">
|
|
||||||
<div class="login-icon">
|
<form class="login-form" @submit.prevent="handleLogin">
|
||||||
<i class="fas fa-lock"></i>
|
<label for="username">用户名</label>
|
||||||
|
<div class="input-control">
|
||||||
|
<i class="fas fa-user" aria-hidden="true"></i>
|
||||||
|
<input id="username" v-model.trim="username" type="text" autocomplete="username" placeholder="请输入用户名" required autofocus />
|
||||||
</div>
|
</div>
|
||||||
<h2>管理员登录</h2>
|
|
||||||
<p class="login-subtitle">欢迎回来，请登录您的账户</p>
|
<label for="password">密码</label>
|
||||||
</div>
|
<div class="input-control">
|
||||||
<form @submit.prevent="handleLogin" class="login-form">
|
<i class="fas fa-lock" aria-hidden="true"></i>
|
||||||
<div class="form-group">
|
|
||||||
<div class="input-wrapper">
|
|
||||||
<i class="fas fa-user input-icon"></i>
|
|
||||||
<input
|
|
||||||
v-model="username"
|
|
||||||
type="text"
|
|
||||||
placeholder="请输入用户名"
|
|
||||||
required
|
|
||||||
class="login-input"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="input-wrapper">
|
|
||||||
<i class="fas fa-lock input-icon"></i>
|
|
||||||
<input
|
<input
|
||||||
|
id="password"
|
||||||
v-model="password"
|
v-model="password"
|
||||||
type="password"
|
:type="showPassword ? 'text' : 'password'"
|
||||||
|
autocomplete="current-password"
|
||||||
placeholder="请输入密码"
|
placeholder="请输入密码"
|
||||||
required
|
required
|
||||||
class="login-input"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
<button
|
||||||
</div>
|
type="button"
|
||||||
<button type="submit" :disabled="loading" class="login-btn">
|
class="password-toggle"
|
||||||
<span v-if="!loading">
|
:title="showPassword ? '隐藏密码' : '显示密码'"
|
||||||
<i class="fas fa-sign-in-alt"></i>
|
:aria-label="showPassword ? '隐藏密码' : '显示密码'"
|
||||||
登录
|
@click="showPassword = !showPassword"
|
||||||
</span>
|
>
|
||||||
<span v-else>
|
<i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" aria-hidden="true"></i>
|
||||||
<i class="fas fa-spinner fa-spin"></i>
|
|
||||||
登录中...
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
<div v-if="error" class="error-message">
|
</div>
|
||||||
<i class="fas fa-exclamation-circle"></i>
|
|
||||||
|
<p v-if="error" class="login-error" role="alert">
|
||||||
|
<i class="fas fa-circle-exclamation" aria-hidden="true"></i>
|
||||||
{{ error }}
|
{{ error }}
|
||||||
</div>
|
</p>
|
||||||
|
|
||||||
|
<button type="submit" class="login-submit" :disabled="loading">
|
||||||
|
<i :class="loading ? 'fas fa-spinner fa-spin' : 'fas fa-arrow-right-to-bracket'" aria-hidden="true"></i>
|
||||||
|
{{ loading ? '正在登录' : '登录' }}
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
|
||||||
</div>
|
<p class="login-footnote">使用站点管理员账户继续</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
import { login } from '../api'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { getSiteConfig, login } from '../api'
|
||||||
|
import { useTheme } from '../composables/useTheme'
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
const username = ref('')
|
const username = ref('')
|
||||||
const password = ref('')
|
const password = ref('')
|
||||||
|
const showPassword = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const error = ref('')
|
const error = ref('')
|
||||||
|
const siteName = ref('Home-Vue')
|
||||||
|
const siteIcon = ref('/favicon.ico')
|
||||||
|
const iconFailed = ref(false)
|
||||||
|
const { themeIcon, themeLabel, toggleTheme } = useTheme()
|
||||||
|
|
||||||
const handleLogin = async () => {
|
const handleLogin = async () => {
|
||||||
|
if (loading.value) return
|
||||||
loading.value = true
|
loading.value = true
|
||||||
error.value = ''
|
error.value = ''
|
||||||
try {
|
try {
|
||||||
const res = await login(username.value, password.value)
|
const { data } = await login(username.value, password.value)
|
||||||
localStorage.setItem('token', res.data.token)
|
localStorage.setItem('token', data.token)
|
||||||
window.location.href = '/admin'
|
const redirect = typeof route.query.redirect === 'string' && route.query.redirect.startsWith('/')
|
||||||
} catch (err) {
|
? route.query.redirect
|
||||||
error.value = err.response?.data?.error || '登录失败'
|
: '/admin'
|
||||||
|
await router.replace(redirect)
|
||||||
|
} catch (requestError) {
|
||||||
|
error.value = requestError.response?.data?.error || '登录失败，请检查用户名和密码'
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await getSiteConfig()
|
||||||
|
siteName.value = data.siteName || data.userName || siteName.value
|
||||||
|
siteIcon.value = data.siteIcon || data.favicon || siteIcon.value
|
||||||
|
} catch {
|
||||||
|
// Public configuration is optional on the login page.
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.login-container {
|
.login-page {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: var(--background-color);
|
min-height: 100dvh;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 72px 20px 32px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-background {
|
.login-tools {
|
||||||
|
position: fixed;
|
||||||
|
top: 18px;
|
||||||
|
right: 18px;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button,
|
||||||
|
.password-toggle {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
color: var(--text-color);
|
||||||
|
background: var(--surface-color);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button:hover { color: var(--hover-link-color); border-color: var(--hover-link-color); }
|
||||||
|
|
||||||
|
.login-panel {
|
||||||
|
position: relative;
|
||||||
|
width: min(100%, 390px);
|
||||||
|
padding: 30px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--surface-color);
|
||||||
|
box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16);
|
||||||
|
backdrop-filter: blur(18px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-panel::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 28px;
|
||||||
right: 0;
|
width: 54px;
|
||||||
bottom: 0;
|
height: 3px;
|
||||||
background: linear-gradient(135deg,
|
|
||||||
rgba(0, 122, 255, 0.1) 0%,
|
|
||||||
rgba(255, 204, 0, 0.1) 50%,
|
|
||||||
rgba(0, 122, 255, 0.1) 100%);
|
|
||||||
background-size: 200% 200%;
|
|
||||||
animation: gradientShift 15s ease infinite;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradientShift {
|
|
||||||
0%, 100% {
|
|
||||||
background-position: 0% 50%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
background-position: 100% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.floating-shapes {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
opacity: 0.1;
|
|
||||||
animation: float 20s infinite ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape-1 {
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
background: var(--hover-link-color);
|
background: var(--hover-link-color);
|
||||||
top: -100px;
|
|
||||||
left: -100px;
|
|
||||||
animation-delay: 0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape-2 {
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
background: #007aff;
|
|
||||||
bottom: -50px;
|
|
||||||
right: -50px;
|
|
||||||
animation-delay: 5s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape-3 {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
background: var(--hover-link-color);
|
|
||||||
top: 50%;
|
|
||||||
right: 10%;
|
|
||||||
animation-delay: 10s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% {
|
|
||||||
transform: translate(0, 0) scale(1);
|
|
||||||
}
|
|
||||||
33% {
|
|
||||||
transform: translate(30px, -30px) scale(1.1);
|
|
||||||
}
|
|
||||||
66% {
|
|
||||||
transform: translate(-20px, 20px) scale(0.9);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-box {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
background: rgba(var(--background-color-rgb), 0.85);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
padding: 48px 40px;
|
|
||||||
border-radius: 20px;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
||||||
box-shadow:
|
|
||||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
|
||||||
inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
||||||
width: 100%;
|
|
||||||
max-width: 420px;
|
|
||||||
animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeInUp {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(30px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-icon {
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
margin: 0 auto 20px;
|
|
||||||
background: linear-gradient(135deg, #007aff, var(--hover-link-color));
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
|
|
||||||
animation: pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% {
|
|
||||||
transform: scale(1);
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-icon i {
|
|
||||||
font-size: 28px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-header h2 {
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: 28px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-subtitle {
|
|
||||||
margin: 0;
|
|
||||||
color: rgba(var(--text-color-rgb, 51, 51, 51), 0.6);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-group {
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrapper {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-icon {
|
|
||||||
position: absolute;
|
|
||||||
left: 16px;
|
|
||||||
color: rgba(var(--text-color-rgb, 51, 51, 51), 0.5);
|
|
||||||
font-size: 16px;
|
|
||||||
z-index: 1;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 14px 16px 14px 48px;
|
|
||||||
border: 2px solid var(--border-color);
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(var(--background-color-rgb), 0.6);
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: 15px;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-input::placeholder {
|
|
||||||
color: rgba(var(--text-color-rgb, 51, 51, 51), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-input:focus {
|
|
||||||
border-color: #007aff;
|
|
||||||
background: rgba(var(--background-color-rgb), 0.8);
|
|
||||||
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-input:focus + .input-icon,
|
|
||||||
.login-input:focus ~ .input-icon {
|
|
||||||
color: #007aff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px;
|
|
||||||
background: linear-gradient(135deg, #007aff, #0056b3);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-top: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn::before {
|
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: rgba(255, 255, 255, 0.3);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
transition: width 0.6s, height 0.6s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-btn:hover::before {
|
.login-header { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
|
||||||
width: 300px;
|
.site-mark { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border-color); border-radius: 50%; background: var(--surface-muted); color: var(--hover-link-color); font-size: 20px; overflow: hidden; }
|
||||||
height: 300px;
|
.site-mark img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.site-name { margin: 0 0 2px; color: var(--text-muted); font-size: 13px; }
|
||||||
|
.login-header h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
|
||||||
|
.login-form { display: flex; flex-direction: column; }
|
||||||
|
.login-form label { margin: 0 0 7px; font-size: 13px; font-weight: 600; }
|
||||||
|
.input-control { position: relative; display: flex; align-items: center; margin-bottom: 18px; }
|
||||||
|
.input-control > i { position: absolute; left: 13px; color: var(--text-muted); pointer-events: none; }
|
||||||
|
.input-control input {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
padding: 0 42px 0 39px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 7px;
|
||||||
|
color: var(--text-color);
|
||||||
|
background: var(--surface-muted);
|
||||||
}
|
}
|
||||||
|
.input-control input:focus { border-color: var(--hover-link-color); outline: 3px solid var(--focus-ring); }
|
||||||
|
.password-toggle { position: absolute; right: 5px; width: 34px; height: 34px; border: 0; border-radius: 5px; background: transparent; }
|
||||||
|
.password-toggle:hover { color: var(--hover-link-color); }
|
||||||
|
.login-error { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 16px; padding: 10px 12px; border-left: 3px solid var(--danger-color); color: var(--danger-color); background: rgba(201, 54, 43, 0.08); font-size: 13px; }
|
||||||
|
.login-submit { height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #d1a700; border-radius: 7px; color: #272100; background: var(--hover-link-color); font-weight: 700; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
|
||||||
|
.login-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(var(--hover-link-color-rgb), 0.28); }
|
||||||
|
.login-submit:disabled { opacity: 0.64; cursor: wait; }
|
||||||
|
.login-footnote { margin: 20px 0 0; color: var(--text-muted); font-size: 12px; text-align: center; }
|
||||||
|
|
||||||
.login-btn:hover {
|
@media (max-width: 480px) {
|
||||||
transform: translateY(-2px);
|
.login-page { padding-inline: 14px; }
|
||||||
box-shadow: 0 6px 20px rgba(0, 122, 255, 0.4);
|
.login-tools { top: 12px; right: 12px; }
|
||||||
}
|
.login-panel { padding: 26px 20px; }
|
||||||
|
|
||||||
.login-btn:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-btn span {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
color: #f44336;
|
|
||||||
margin-top: 16px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 12px;
|
|
||||||
background: rgba(244, 67, 54, 0.1);
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid rgba(244, 67, 54, 0.2);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 14px;
|
|
||||||
animation: shake 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shake {
|
|
||||||
0%, 100% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: translateX(-10px);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translateX(10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.login-box {
|
|
||||||
padding: 36px 24px;
|
|
||||||
margin: 20px;
|
|
||||||
max-width: calc(100% - 40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-header h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shape {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+80
-133
@@ -1,158 +1,105 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<section class="sites" aria-label="站点导航" :aria-busy="loading">
|
||||||
<div class="swiper-container">
|
<div v-if="loading" class="site-grid site-grid--loading" aria-label="正在加载站点">
|
||||||
|
<span v-for="index in 6" :key="index" class="site-skeleton"></span>
|
||||||
|
</div>
|
||||||
|
<div v-else ref="swiperElement" class="swiper sites-swiper">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
<div v-for="(siteChunk, index) in chunkedSites" :key="index" class="swiper-slide">
|
<div v-for="(siteChunk, index) in chunkedSites" :key="index" class="swiper-slide">
|
||||||
<div class="site-grid">
|
<div class="site-grid">
|
||||||
<div v-for="(site, i) in siteChunk" :key="i" class="site-box" @click="openLink(site.url)">
|
<a
|
||||||
<div class="site-content">
|
v-for="site in siteChunk"
|
||||||
|
:key="site.id || site.url"
|
||||||
|
:href="site.url"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="site-box"
|
||||||
|
>
|
||||||
<i :class="site.icon" aria-hidden="true"></i>
|
<i :class="site.icon" aria-hidden="true"></i>
|
||||||
<span class="site-name">{{ site.name }}</span>
|
<span>{{ site.name }}</span>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div ref="paginationElement" class="swiper-pagination"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
|
||||||
import Swiper from 'swiper/bundle';
|
import Swiper from 'swiper/bundle'
|
||||||
import 'swiper/swiper-bundle.css';
|
import 'swiper/swiper-bundle.css'
|
||||||
import { getSites } from '../api';
|
import { getSites } from '../api'
|
||||||
|
import fallbackSites from '../config/site.json'
|
||||||
|
|
||||||
const sites = ref([]);
|
const sites = ref([])
|
||||||
const chunkedSites = ref([]);
|
const loading = ref(true)
|
||||||
|
const swiperElement = ref(null)
|
||||||
|
const paginationElement = ref(null)
|
||||||
|
const chunkedSites = computed(() => sites.value.reduce((chunks, site, index) => {
|
||||||
|
const chunkIndex = Math.floor(index / 6)
|
||||||
|
if (!chunks[chunkIndex]) chunks[chunkIndex] = []
|
||||||
|
chunks[chunkIndex].push(site)
|
||||||
|
return chunks
|
||||||
|
}, []))
|
||||||
|
let swiperInstance = null
|
||||||
|
|
||||||
const loadSites = async () => {
|
const initializeSwiper = async () => {
|
||||||
try {
|
await nextTick()
|
||||||
const res = await getSites();
|
swiperInstance?.destroy(true, true)
|
||||||
sites.value = res.data;
|
if (!swiperElement.value || chunkedSites.value.length < 1) return
|
||||||
// 将站点数据分块（每页6个）
|
swiperInstance = new Swiper(swiperElement.value, {
|
||||||
chunkedSites.value = sites.value.reduce((acc, site, index) => {
|
|
||||||
const chunkIndex = Math.floor(index / 6);
|
|
||||||
if (!acc[chunkIndex]) acc[chunkIndex] = [];
|
|
||||||
acc[chunkIndex].push(site);
|
|
||||||
return acc;
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// 如果数据加载后需要重新初始化Swiper
|
|
||||||
if (chunkedSites.value.length > 0) {
|
|
||||||
setTimeout(() => {
|
|
||||||
initSwiper();
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('加载站点数据失败:', error);
|
|
||||||
// 如果API失败，使用空数组
|
|
||||||
chunkedSites.value = [];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let swiperInstance = null;
|
|
||||||
|
|
||||||
const initSwiper = () => {
|
|
||||||
if (swiperInstance) {
|
|
||||||
swiperInstance.destroy();
|
|
||||||
}
|
|
||||||
swiperInstance = new Swiper('.swiper-container', {
|
|
||||||
slidesPerView: 1,
|
slidesPerView: 1,
|
||||||
spaceBetween: 20,
|
spaceBetween: 18,
|
||||||
pagination: { el: '.swiper-pagination', clickable: true },
|
pagination: { el: paginationElement.value, clickable: true },
|
||||||
mousewheel: true,
|
mousewheel: { forceToAxis: true },
|
||||||
});
|
keyboard: { enabled: true },
|
||||||
};
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const openLink = (url) => {
|
onMounted(async () => {
|
||||||
if (url) window.open(url, '_blank');
|
try {
|
||||||
};
|
const { data } = await getSites()
|
||||||
|
sites.value = Array.isArray(data) && data.length ? data : fallbackSites
|
||||||
|
} catch {
|
||||||
|
sites.value = fallbackSites
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
initializeSwiper()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onUnmounted(() => swiperInstance?.destroy(true, true))
|
||||||
loadSites();
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
<style scoped>
|
.sites { width: min(100%, 700px); min-height: 185px; margin: 2px 0 0; }
|
||||||
.container {
|
.sites-swiper { overflow: hidden; padding: 10px 10px 28px; }
|
||||||
max-width: 700px;
|
.site-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
||||||
width: 100%;
|
.site-box,
|
||||||
margin: 30px 0 20px;
|
.site-skeleton {
|
||||||
}
|
min-width: 0;
|
||||||
|
min-height: 72px;
|
||||||
.swiper-container {
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-pagination {
|
|
||||||
bottom: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-box {
|
|
||||||
padding: 30px;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
background-color: rgba(var(--background-color-rgb), 0.2);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 1px 8px var(--shadow-color);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-content {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
i {
|
|
||||||
font-size: var(--icon-size);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-name {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.17em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.site-content {
|
|
||||||
gap: 5px;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-box {
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
background: var(--surface-muted);
|
||||||
}
|
}
|
||||||
|
.site-box { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 18px; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
|
||||||
|
.site-box:hover { transform: translateY(-2px); border-color: var(--hover-link-color); box-shadow: 0 3px 10px var(--shadow-color); }
|
||||||
|
.site-box i { flex: 0 0 auto; font-size: var(--icon-size); }
|
||||||
|
.site-box span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.site-grid--loading { padding: 10px; }
|
||||||
|
.site-skeleton { animation: pulse 1.2s ease-in-out infinite alternate; }
|
||||||
|
@keyframes pulse { to { opacity: 0.45; } }
|
||||||
|
:deep(.swiper-pagination-bullet) { background: var(--text-muted); }
|
||||||
|
:deep(.swiper-pagination-bullet-active) { width: 20px; border-radius: 5px; background: var(--hover-link-color); }
|
||||||
|
|
||||||
.site-name {
|
@media (max-width: 600px) {
|
||||||
font-size: 16px;
|
.sites { min-height: 160px; }
|
||||||
}
|
.site-grid { gap: 9px; }
|
||||||
|
.site-box,
|
||||||
.site-content i {
|
.site-skeleton { min-height: 60px; }
|
||||||
font-size: 18px;
|
.site-box { flex-direction: column; gap: 5px; padding: 10px 6px; font-size: 14px; }
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.swiper-pagination-bullet-active) {
|
|
||||||
background: #8c8c8c94;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
<template>
|
||||||
|
<section class="collection" :aria-label="kind === 'sites' ? '站点列表' : '联系方式列表'">
|
||||||
|
<header class="collection-summary">
|
||||||
|
<span>{{ kind === 'sites' ? '站点' : '联系方式' }}</span>
|
||||||
|
<strong>{{ items.length }}</strong>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div v-if="items.length" class="desktop-table">
|
||||||
|
<table v-if="kind === 'sites'">
|
||||||
|
<thead><tr><th>名称</th><th>地址</th><th>图标</th><th>排序</th><th><span class="sr-only">操作</span></th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="item in items" :key="item.id">
|
||||||
|
<td><span class="name-cell"><i :class="item.icon" aria-hidden="true"></i>{{ item.name }}</span></td>
|
||||||
|
<td><a :href="item.url" target="_blank" rel="noopener noreferrer" class="url-cell">{{ item.url }}<i class="fas fa-arrow-up-right-from-square"></i></a></td>
|
||||||
|
<td><code>{{ item.icon }}</code></td>
|
||||||
|
<td>{{ item.sortOrder }}</td>
|
||||||
|
<td class="row-actions"><ActionButtons :item="item" @edit="emit('edit', item)" @delete="emit('delete', item)" /></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<table v-else>
|
||||||
|
<thead><tr><th>类型</th><th>图标</th><th>链接或二维码</th><th>悬停颜色</th><th>排序</th><th><span class="sr-only">操作</span></th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="item in items" :key="item.id">
|
||||||
|
<td><strong>{{ item.type }}</strong></td>
|
||||||
|
<td><i :class="item.icon" :style="{ color: item.hoverColor }" aria-hidden="true"></i></td>
|
||||||
|
<td><a v-if="item.url" :href="item.url" target="_blank" rel="noopener noreferrer" class="url-cell">{{ item.url }}<i class="fas fa-arrow-up-right-from-square"></i></a><span v-else class="muted"><i class="fas fa-qrcode"></i> 二维码</span></td>
|
||||||
|
<td><span class="color-cell"><i :style="{ background: item.hoverColor }"></i><code>{{ item.hoverColor }}</code></span></td>
|
||||||
|
<td>{{ item.sortOrder }}</td>
|
||||||
|
<td class="row-actions"><ActionButtons :item="item" @edit="emit('edit', item)" @delete="emit('delete', item)" /></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="items.length" class="mobile-list">
|
||||||
|
<article v-for="item in items" :key="item.id" class="mobile-item">
|
||||||
|
<div class="mobile-icon"><i :class="item.icon" :style="kind === 'contacts' ? { color: item.hoverColor } : {}"></i></div>
|
||||||
|
<div class="mobile-content">
|
||||||
|
<strong>{{ kind === 'sites' ? item.name : item.type }}</strong>
|
||||||
|
<span>{{ item.url || '二维码联系方式' }}</span>
|
||||||
|
<small>排序 {{ item.sortOrder }}</small>
|
||||||
|
</div>
|
||||||
|
<ActionButtons :item="item" @edit="emit('edit', item)" @delete="emit('delete', item)" />
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="!items.length" class="empty-state">
|
||||||
|
<i :class="kind === 'sites' ? 'fas fa-link' : 'fas fa-address-book'" aria-hidden="true"></i>
|
||||||
|
<strong>暂无{{ kind === 'sites' ? '站点' : '联系方式' }}</strong>
|
||||||
|
<p>使用页面右上角的添加按钮创建第一条记录。</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineComponent, h } from 'vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
kind: { type: String, required: true },
|
||||||
|
items: { type: Array, default: () => [] },
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['edit', 'delete'])
|
||||||
|
|
||||||
|
const ActionButtons = defineComponent({
|
||||||
|
emits: ['edit', 'delete'],
|
||||||
|
setup(_, { emit: childEmit }) {
|
||||||
|
return () => h('div', { class: 'action-buttons' }, [
|
||||||
|
h('button', { type: 'button', title: '编辑', 'aria-label': '编辑', onClick: () => childEmit('edit') }, [h('i', { class: 'fas fa-pen' })]),
|
||||||
|
h('button', { type: 'button', title: '删除', 'aria-label': '删除', class: 'delete', onClick: () => childEmit('delete') }, [h('i', { class: 'fas fa-trash' })]),
|
||||||
|
])
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.collection { overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); }
|
||||||
|
.collection-summary { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--border-color); color: var(--text-muted); font-size: 13px; }
|
||||||
|
.collection-summary strong { min-width: 26px; padding: 2px 7px; border-radius: 10px; color: var(--text-color); background: var(--surface-muted); text-align: center; }
|
||||||
|
.desktop-table { overflow-x: auto; }
|
||||||
|
table { width: 100%; border-collapse: collapse; }
|
||||||
|
th,
|
||||||
|
td { padding: 13px 15px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: middle; font-size: 13px; }
|
||||||
|
th { color: var(--text-muted); background: var(--surface-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
|
||||||
|
tbody tr:last-child td { border-bottom: 0; }
|
||||||
|
tbody tr:hover { background: var(--surface-muted); }
|
||||||
|
.name-cell,
|
||||||
|
.color-cell,
|
||||||
|
.url-cell,
|
||||||
|
.muted { display: inline-flex; align-items: center; gap: 8px; }
|
||||||
|
.name-cell { font-weight: 600; }
|
||||||
|
.name-cell i { width: 18px; color: var(--hover-link-color); text-align: center; }
|
||||||
|
.url-cell { max-width: 360px; color: var(--text-muted); }
|
||||||
|
.url-cell:hover { color: var(--hover-link-color); }
|
||||||
|
.url-cell { overflow-wrap: anywhere; }
|
||||||
|
.url-cell i { font-size: 10px; }
|
||||||
|
code { padding: 3px 6px; border-radius: 4px; color: var(--text-muted); background: var(--surface-muted); font: 11px Consolas, monospace; }
|
||||||
|
.color-cell i { width: 13px; height: 13px; border: 1px solid var(--border-color); border-radius: 50%; }
|
||||||
|
.muted { color: var(--text-muted); }
|
||||||
|
.row-actions { width: 94px; text-align: right; }
|
||||||
|
:deep(.action-buttons) { display: inline-flex; gap: 5px; }
|
||||||
|
:deep(.action-buttons button) { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; cursor: pointer; }
|
||||||
|
:deep(.action-buttons button:hover) { border-color: var(--border-color); color: var(--text-color); background: var(--surface-solid); }
|
||||||
|
:deep(.action-buttons button.delete:hover) { border-color: var(--danger-color); color: var(--danger-color); }
|
||||||
|
.mobile-list { display: none; }
|
||||||
|
.empty-state { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: var(--text-muted); text-align: center; }
|
||||||
|
.empty-state > i { font-size: 28px; color: var(--hover-link-color); }
|
||||||
|
.empty-state strong { color: var(--text-color); }
|
||||||
|
.empty-state p { margin: 0; font-size: 13px; }
|
||||||
|
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.desktop-table { display: none; }
|
||||||
|
.mobile-list { display: block; }
|
||||||
|
.mobile-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px; border-bottom: 1px solid var(--border-color); }
|
||||||
|
.mobile-item:last-child { border-bottom: 0; }
|
||||||
|
.mobile-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-muted); }
|
||||||
|
.mobile-content { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
|
||||||
|
.mobile-content span { overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.mobile-content small { color: var(--text-muted); font-size: 10px; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,213 @@
|
|||||||
|
<template>
|
||||||
|
<div class="settings-shell">
|
||||||
|
<nav class="settings-nav" aria-label="配置分类">
|
||||||
|
<button
|
||||||
|
v-for="section in sections"
|
||||||
|
:key="section.name"
|
||||||
|
type="button"
|
||||||
|
:class="{ active: activeSection === section.name }"
|
||||||
|
@click="emit('update:activeSection', section.name)"
|
||||||
|
>
|
||||||
|
<i :class="section.icon" aria-hidden="true"></i>
|
||||||
|
<span>{{ section.name }}</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="settings-workspace">
|
||||||
|
<section class="settings-form" :aria-labelledby="`settings-${activeSection}`">
|
||||||
|
<header class="section-heading">
|
||||||
|
<span><i :class="currentSection.icon" aria-hidden="true"></i></span>
|
||||||
|
<div>
|
||||||
|
<h2 :id="`settings-${activeSection}`">{{ activeSection }}</h2>
|
||||||
|
<p>{{ currentSection.description }}</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div v-if="activeSection === '基础信息'" class="form-grid">
|
||||||
|
<label class="field"><span>站点名称</span><input v-model="config.siteName" type="text" placeholder="Home-Vue" /></label>
|
||||||
|
<label class="field"><span>站点 URL</span><input v-model="config.siteURL" type="url" placeholder="https://example.com" /></label>
|
||||||
|
<label class="field field--full"><span>站点描述</span><textarea v-model="config.siteDescription" rows="3" placeholder="用于搜索和社交分享的站点描述"></textarea></label>
|
||||||
|
<label class="field field--full"><span>站点关键词</span><input v-model="config.siteKeywords" type="text" placeholder="个人主页, Vue3" /><small>使用英文逗号分隔多个关键词</small></label>
|
||||||
|
<label class="field"><span>版权起始年份</span><input v-model="config.footerYearStart" inputmode="numeric" placeholder="2024" /></label>
|
||||||
|
<label class="field"><span>版权结束年份</span><input v-model="config.footerYearEnd" inputmode="numeric" placeholder="留空则只显示起始年份" /></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeSection === '用户信息'" class="form-grid">
|
||||||
|
<label class="field field--full"><span>主页用户名</span><input v-model="config.userName" type="text" placeholder="显示在 Hi, I'm 后方" /></label>
|
||||||
|
<div class="field field--full"><span>头像</span><IconSelector v-model="config.profileImageURL" :default-icon-path="''" /><small>支持上传图片或填写外部图片 URL</small></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeSection === '图标配置'" class="form-grid">
|
||||||
|
<div class="field field--full"><span>站点图标</span><IconSelector v-model="config.siteIcon" default-icon-path="/favicon.ico" /></div>
|
||||||
|
<div class="field field--full"><span>浏览器图标</span><IconSelector v-model="config.favicon" default-icon-path="/favicon.ico" /></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeSection === '备案信息'" class="form-grid">
|
||||||
|
<label class="field"><span>ICP备案号</span><input v-model="config.icpNumber" type="text" placeholder="留空则不显示" /></label>
|
||||||
|
<label class="field"><span>公安备案号</span><input v-model="config.policeNumber" type="text" placeholder="留空则不显示" /></label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeSection === '前端配置'" class="form-grid">
|
||||||
|
<label class="field field--full"><span>网页标题</span><input v-model="config.pageTitle" type="text" placeholder="个人主页" /></label>
|
||||||
|
<label class="field field--full"><span>图标库 CDN 地址</span><input v-model="config.iconLibrary" type="url" placeholder="Font Awesome 样式地址" /></label>
|
||||||
|
<label class="field field--full"><span>字体库 CDN 地址</span><input v-model="config.fontLibrary" type="url" placeholder="留空使用默认字体" /></label>
|
||||||
|
<label class="switch-field field--full">
|
||||||
|
<span><strong>显示访问计时器</strong><small>在主页显示停留时间与日期</small></span>
|
||||||
|
<input v-model="config.showVisitTimer" type="checkbox" role="switch" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else-if="activeSection === '轮换文本'" class="rotating-editor">
|
||||||
|
<div v-for="(text, index) in rotatingTexts" :key="index" class="rotating-row">
|
||||||
|
<span>{{ String(index + 1).padStart(2, '0') }}</span>
|
||||||
|
<input v-model="rotatingTexts[index]" type="text" :placeholder="`第 ${index + 1} 条文本`" />
|
||||||
|
<button type="button" title="删除此文本" aria-label="删除此文本" :disabled="rotatingTexts.length <= 1" @click="emit('removeText', index)">
|
||||||
|
<i class="fas fa-trash" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="inline-actions">
|
||||||
|
<button type="button" class="secondary-button" :disabled="rotatingTexts.length >= 8" @click="emit('addText')">
|
||||||
|
<i class="fas fa-plus" aria-hidden="true"></i>添加文本
|
||||||
|
</button>
|
||||||
|
<button type="button" class="primary-button" @click="emit('saveTexts')">
|
||||||
|
<i class="fas fa-floppy-disk" aria-hidden="true"></i>保存轮换文本
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="form-grid">
|
||||||
|
<label class="field field--full"><span>Umami 统计脚本地址</span><input v-model="config.umamiScript" type="url" placeholder="https://analytics.example.com/script.js" /><small>留空时不加载统计脚本</small></label>
|
||||||
|
<label class="field field--full"><span>Umami 网站 ID</span><input v-model="config.umamiWebsiteId" type="text" placeholder="网站 UUID" /></label>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="live-preview" aria-label="主页即时预览">
|
||||||
|
<header><span>即时预览</span><small>尚未保存</small></header>
|
||||||
|
<div class="preview-stage">
|
||||||
|
<div class="preview-identity">
|
||||||
|
<span class="preview-avatar">
|
||||||
|
<img v-if="config.profileImageURL && !previewImageFailed" :src="config.profileImageURL" alt="头像预览" @error="previewImageFailed = true" />
|
||||||
|
<i v-else class="fas fa-user" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<div><strong>Hi,</strong><strong>I'm <mark>{{ config.userName || '用户' }}</mark></strong></div>
|
||||||
|
</div>
|
||||||
|
<p class="preview-text">“{{ previewText }}”</p>
|
||||||
|
<div class="preview-icons"><i class="fas fa-envelope"></i><i class="fab fa-github"></i><i class="fas fa-moon"></i></div>
|
||||||
|
<div v-if="config.showVisitTimer" class="preview-timer"><i class="fas fa-clock"></i> 停留时间 : 00:03:27</div>
|
||||||
|
</div>
|
||||||
|
<footer>{{ previewFooter }}</footer>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { computed, ref, watch } from 'vue'
|
||||||
|
import IconSelector from '../IconSelector.vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
config: { type: Object, required: true },
|
||||||
|
rotatingTexts: { type: Array, required: true },
|
||||||
|
activeSection: { type: String, required: true },
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['update:activeSection', 'addText', 'removeText', 'saveTexts'])
|
||||||
|
const previewImageFailed = ref(false)
|
||||||
|
const sections = [
|
||||||
|
{ name: '基础信息', icon: 'fas fa-circle-info', description: '站点身份、搜索信息和版权年份' },
|
||||||
|
{ name: '用户信息', icon: 'fas fa-user', description: '主页展示的用户名与头像' },
|
||||||
|
{ name: '图标配置', icon: 'fas fa-image', description: '站点图标和浏览器标签图标' },
|
||||||
|
{ name: '备案信息', icon: 'fas fa-shield-halved', description: '页脚展示的备案信息' },
|
||||||
|
{ name: '前端配置', icon: 'fas fa-code', description: '网页标题、外部资源和计时器' },
|
||||||
|
{ name: '轮换文本', icon: 'fas fa-i-cursor', description: '主页逐条打字展示的短句，最多八条' },
|
||||||
|
{ name: '统计配置', icon: 'fas fa-chart-line', description: 'Umami 访问统计接入信息' },
|
||||||
|
]
|
||||||
|
const currentSection = computed(() => sections.find((section) => section.name === props.activeSection) || sections[0])
|
||||||
|
const previewText = computed(() => props.rotatingTexts.find((text) => text?.trim()) || '欢迎来到我的主页')
|
||||||
|
const previewFooter = computed(() => {
|
||||||
|
const currentYear = String(new Date().getFullYear())
|
||||||
|
const start = String(props.config.footerYearStart || '').trim()
|
||||||
|
const end = String(props.config.footerYearEnd || '').trim()
|
||||||
|
const year = start && end && start !== end ? `${start}~${end}` : start || end || currentYear
|
||||||
|
return `© ${year} Made by ${props.config.userName || '用户'}`
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(() => props.config.profileImageURL, () => { previewImageFailed.value = false })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.settings-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
|
||||||
|
.settings-nav { display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
.settings-nav button { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; text-align: left; cursor: pointer; }
|
||||||
|
.settings-nav button i { width: 18px; text-align: center; }
|
||||||
|
.settings-nav button:hover { color: var(--text-color); background: var(--surface-muted); }
|
||||||
|
.settings-nav button.active { border-color: var(--border-color); color: var(--text-color); background: var(--surface-color); box-shadow: inset 3px 0 var(--hover-link-color); }
|
||||||
|
.settings-workspace { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
|
||||||
|
.settings-form { min-width: 0; }
|
||||||
|
.section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); }
|
||||||
|
.section-heading > span { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #312900; background: var(--hover-link-color); }
|
||||||
|
.section-heading h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: 0; }
|
||||||
|
.section-heading p { margin: 0; color: var(--text-muted); font-size: 13px; }
|
||||||
|
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
|
||||||
|
.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
|
||||||
|
.field--full { grid-column: 1 / -1; }
|
||||||
|
.field > span,
|
||||||
|
.field > label { font-size: 13px; font-weight: 600; }
|
||||||
|
.field small,
|
||||||
|
.switch-field small { color: var(--text-muted); font-size: 12px; font-weight: 400; }
|
||||||
|
.field input,
|
||||||
|
.field textarea,
|
||||||
|
.rotating-row input { width: 100%; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); background: var(--surface-muted); }
|
||||||
|
.field input { height: 40px; padding: 0 11px; }
|
||||||
|
.field textarea { padding: 10px 11px; resize: vertical; }
|
||||||
|
.field input:focus,
|
||||||
|
.field textarea:focus,
|
||||||
|
.rotating-row input:focus { border-color: var(--hover-link-color); outline: 3px solid var(--focus-ring); }
|
||||||
|
.switch-field { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--surface-muted); }
|
||||||
|
.switch-field > span { display: flex; flex-direction: column; gap: 3px; }
|
||||||
|
.switch-field input { width: 42px; height: 22px; accent-color: var(--hover-link-color); }
|
||||||
|
.rotating-editor { display: flex; flex-direction: column; gap: 10px; }
|
||||||
|
.rotating-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
|
||||||
|
.rotating-row > span { color: var(--text-muted); font: 12px Consolas, monospace; }
|
||||||
|
.rotating-row input { height: 40px; padding: 0 11px; }
|
||||||
|
.rotating-row button { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px; color: var(--danger-color); background: transparent; cursor: pointer; }
|
||||||
|
.rotating-row button:hover:not(:disabled) { border-color: currentColor; background: rgba(201, 54, 43, 0.07); }
|
||||||
|
.rotating-row button:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||||
|
.inline-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
|
||||||
|
.primary-button,
|
||||||
|
.secondary-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border-radius: 6px; cursor: pointer; }
|
||||||
|
.primary-button { border: 1px solid #d1a700; color: #292100; background: var(--hover-link-color); font-weight: 700; }
|
||||||
|
.secondary-button { border: 1px solid var(--border-color); color: var(--text-color); background: var(--surface-muted); }
|
||||||
|
.primary-button:disabled,
|
||||||
|
.secondary-button:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
.live-preview { position: sticky; top: 92px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-color); box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08); }
|
||||||
|
.live-preview > header { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--border-color); font-size: 13px; font-weight: 700; }
|
||||||
|
.live-preview > header small { color: var(--warning-color); font-weight: 400; }
|
||||||
|
.preview-stage { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px 16px; background: var(--background-color) var(--background-image) repeat; }
|
||||||
|
.preview-identity { display: flex; align-items: center; gap: 13px; }
|
||||||
|
.preview-avatar { width: 68px; height: 68px; display: grid; place-items: center; overflow: hidden; border: 2px solid var(--border-color); border-radius: 50%; background: var(--surface-color); color: var(--text-muted); }
|
||||||
|
.preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||||||
|
.preview-identity div { display: flex; flex-direction: column; font-size: 16px; }
|
||||||
|
.preview-identity mark { position: relative; color: inherit; background: linear-gradient(transparent 65%, rgba(var(--hover-link-color-rgb), 0.68) 65%); }
|
||||||
|
.preview-text { max-width: 260px; min-height: 34px; margin: 0; color: var(--text-muted); font-family: Georgia, serif; font-size: 12px; text-align: center; }
|
||||||
|
.preview-icons { display: flex; gap: 18px; }
|
||||||
|
.preview-timer { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-muted); font-size: 11px; }
|
||||||
|
.live-preview > footer { padding: 10px 12px; color: var(--text-muted); font-size: 10px; text-align: center; }
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
.settings-workspace { grid-template-columns: minmax(0, 1fr); }
|
||||||
|
.live-preview { position: static; }
|
||||||
|
.preview-stage { min-height: 250px; }
|
||||||
|
}
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.settings-shell { grid-template-columns: 1fr; }
|
||||||
|
.settings-nav { flex-direction: row; overflow-x: auto; padding-bottom: 5px; }
|
||||||
|
.settings-nav button { flex: 0 0 auto; white-space: nowrap; }
|
||||||
|
.settings-nav button.active { box-shadow: inset 0 -3px var(--hover-link-color); }
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.form-grid { grid-template-columns: 1fr; }
|
||||||
|
.field--full { grid-column: auto; }
|
||||||
|
.inline-actions { flex-direction: column-reverse; }
|
||||||
|
.inline-actions button { width: 100%; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
<template>
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition name="modal-fade">
|
||||||
|
<div v-if="open" class="modal-backdrop" @mousedown.self="emit('close')">
|
||||||
|
<section
|
||||||
|
ref="dialogElement"
|
||||||
|
class="admin-modal"
|
||||||
|
:class="[`admin-modal--${size}`]"
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
:aria-labelledby="titleId"
|
||||||
|
:aria-describedby="description ? descriptionId : undefined"
|
||||||
|
tabindex="-1"
|
||||||
|
@keydown.esc="emit('close')"
|
||||||
|
>
|
||||||
|
<header class="modal-header">
|
||||||
|
<div>
|
||||||
|
<h2 :id="titleId">{{ title }}</h2>
|
||||||
|
<p v-if="description" :id="descriptionId">{{ description }}</p>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="modal-close" title="关闭" aria-label="关闭" @click="emit('close')">
|
||||||
|
<i class="fas fa-xmark" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<div class="modal-body"><slot /></div>
|
||||||
|
<footer v-if="$slots.footer" class="modal-footer"><slot name="footer" /></footer>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { nextTick, onUnmounted, ref, watch } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
open: { type: Boolean, default: false },
|
||||||
|
title: { type: String, required: true },
|
||||||
|
description: { type: String, default: '' },
|
||||||
|
size: { type: String, default: 'medium' },
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['close'])
|
||||||
|
const dialogElement = ref(null)
|
||||||
|
const titleId = `modal-title-${Math.random().toString(36).slice(2)}`
|
||||||
|
const descriptionId = `modal-description-${Math.random().toString(36).slice(2)}`
|
||||||
|
let previousFocus = null
|
||||||
|
|
||||||
|
watch(() => props.open, async (open) => {
|
||||||
|
if (open) {
|
||||||
|
previousFocus = document.activeElement
|
||||||
|
document.body.style.overflow = 'hidden'
|
||||||
|
await nextTick()
|
||||||
|
const focusTarget = dialogElement.value?.querySelector('input, textarea, select, button, [tabindex="0"]')
|
||||||
|
;(focusTarget || dialogElement.value)?.focus()
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = ''
|
||||||
|
previousFocus?.focus?.()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.body.style.overflow = ''
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0, 0, 0, 0.58); z-index: 2000; }
|
||||||
|
.admin-modal { width: min(100%, 620px); max-height: min(88vh, 860px); display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); background: var(--surface-solid); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; }
|
||||||
|
.admin-modal--small { max-width: 430px; }
|
||||||
|
.admin-modal--large { max-width: 920px; }
|
||||||
|
.modal-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
|
||||||
|
.modal-header h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
|
||||||
|
.modal-header p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
|
||||||
|
.modal-close { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid transparent; border-radius: 6px; color: var(--text-muted); background: transparent; cursor: pointer; }
|
||||||
|
.modal-close:hover { border-color: var(--border-color); color: var(--text-color); background: var(--surface-muted); }
|
||||||
|
.modal-body { min-height: 0; padding: 20px; overflow-y: auto; }
|
||||||
|
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border-color); background: var(--surface-muted); }
|
||||||
|
.modal-fade-enter-active,
|
||||||
|
.modal-fade-leave-active { transition: opacity 0.18s ease; }
|
||||||
|
.modal-fade-enter-active .admin-modal,
|
||||||
|
.modal-fade-leave-active .admin-modal { transition: transform 0.18s ease; }
|
||||||
|
.modal-fade-enter-from,
|
||||||
|
.modal-fade-leave-to { opacity: 0; }
|
||||||
|
.modal-fade-enter-from .admin-modal,
|
||||||
|
.modal-fade-leave-to .admin-modal { transform: translateY(10px); }
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.modal-backdrop { place-items: end center; padding: 0; }
|
||||||
|
.admin-modal { width: 100%; max-height: 92vh; border-radius: 8px 8px 0 0; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import { computed, ref } from 'vue'
|
||||||
|
|
||||||
|
const isDarkMode = ref(false)
|
||||||
|
let initialized = false
|
||||||
|
|
||||||
|
const applyTheme = (dark) => {
|
||||||
|
isDarkMode.value = Boolean(dark)
|
||||||
|
document.documentElement.classList.toggle('dark-mode', isDarkMode.value)
|
||||||
|
document.body.classList.toggle('dark-mode', isDarkMode.value)
|
||||||
|
document.documentElement.style.colorScheme = isDarkMode.value ? 'dark' : 'light'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const initializeTheme = () => {
|
||||||
|
if (initialized || typeof window === 'undefined') return
|
||||||
|
|
||||||
|
const savedTheme = localStorage.getItem('darkMode')
|
||||||
|
const prefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches
|
||||||
|
applyTheme(savedTheme === null ? prefersDark : savedTheme === 'true')
|
||||||
|
initialized = true
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useTheme = () => {
|
||||||
|
initializeTheme()
|
||||||
|
|
||||||
|
const toggleTheme = () => {
|
||||||
|
applyTheme(!isDarkMode.value)
|
||||||
|
localStorage.setItem('darkMode', String(isDarkMode.value))
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
isDarkMode,
|
||||||
|
themeIcon: computed(() => (isDarkMode.value ? 'fas fa-sun' : 'fas fa-moon')),
|
||||||
|
themeLabel: computed(() => (isDarkMode.value ? '切换到浅色模式' : '切换到深色模式')),
|
||||||
|
toggleTheme,
|
||||||
|
}
|
||||||
|
}
|
||||||
+2
-1
@@ -4,8 +4,9 @@ import './style.less';
|
|||||||
import { MotionPlugin } from '@vueuse/motion';
|
import { MotionPlugin } from '@vueuse/motion';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
import { loadAndApplyFrontendConfig } from './utils/frontendConfig';
|
import { loadAndApplyFrontendConfig } from './utils/frontendConfig';
|
||||||
|
import { initializeTheme } from './composables/useTheme';
|
||||||
|
|
||||||
// 加载前端配置
|
initializeTheme();
|
||||||
loadAndApplyFrontendConfig();
|
loadAndApplyFrontendConfig();
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|||||||
@@ -6,10 +6,12 @@ import Login from '../components/Login.vue'
|
|||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
|
name: 'home',
|
||||||
component: Home,
|
component: Home,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/admin',
|
path: '/admin',
|
||||||
|
name: 'admin',
|
||||||
component: Admin,
|
component: Admin,
|
||||||
beforeEnter: (to, from, next) => {
|
beforeEnter: (to, from, next) => {
|
||||||
const token = localStorage.getItem('token')
|
const token = localStorage.getItem('token')
|
||||||
@@ -22,7 +24,17 @@ const routes = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/login',
|
path: '/login',
|
||||||
|
name: 'login',
|
||||||
component: Login,
|
component: Login,
|
||||||
|
beforeEnter: (to) => {
|
||||||
|
if (localStorage.getItem('token')) {
|
||||||
|
const redirect = typeof to.query.redirect === 'string' && to.query.redirect.startsWith('/')
|
||||||
|
? to.query.redirect
|
||||||
|
: '/admin'
|
||||||
|
return redirect
|
||||||
|
}
|
||||||
|
return true
|
||||||
|
},
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
+92
-80
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user