init
This commit is contained in:
dcr_xuxgc
263
src/stores/settings.js
Normal file
263
src/stores/settings.js
Normal file
@@ -0,0 +1,263 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { api } from '@/services/api'
|
||||
|
||||
export const useSettingsStore = defineStore('settings', () => {
|
||||
const bgType = ref('color')
|
||||
const bgColor = ref('#f5f5f5')
|
||||
const bgImage = ref('')
|
||||
const bgOpacity = ref(1)
|
||||
const language = ref('zh')
|
||||
const favicon = ref('')
|
||||
// 现在存储 {id, url} 而不是 {id, data: base64}
|
||||
const uploadedImages = ref([])
|
||||
const uploadedIcons = ref([])
|
||||
const loading = ref(false)
|
||||
let initialized = false
|
||||
|
||||
async function loadSettings() {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await api.getSettings()
|
||||
bgType.value = data.bgType || 'color'
|
||||
bgColor.value = data.bgColor || '#f5f5f5'
|
||||
bgImage.value = data.bgImage || ''
|
||||
bgOpacity.value = data.bgOpacity ?? 1
|
||||
language.value = data.language || 'zh'
|
||||
favicon.value = data.favicon || ''
|
||||
uploadedImages.value = data.uploadedImages || []
|
||||
uploadedIcons.value = data.uploadedIcons || []
|
||||
applyFavicon(favicon.value)
|
||||
initialized = true
|
||||
} catch (error) {
|
||||
console.error('加载设置失败:', error)
|
||||
initialized = true
|
||||
// 降级到 localStorage
|
||||
const saved = localStorage.getItem('site-settings')
|
||||
if (saved) {
|
||||
try {
|
||||
const settings = JSON.parse(saved)
|
||||
bgType.value = settings.bgType || 'color'
|
||||
bgColor.value = settings.bgColor || '#f5f5f5'
|
||||
bgImage.value = settings.bgImage || ''
|
||||
bgOpacity.value = settings.bgOpacity || 1
|
||||
language.value = settings.language || 'zh'
|
||||
favicon.value = settings.favicon || ''
|
||||
uploadedImages.value = settings.uploadedImages || []
|
||||
uploadedIcons.value = settings.uploadedIcons || []
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveSettings() {
|
||||
if (!initialized) {
|
||||
console.warn('saveSettings 跳过：还未初始化')
|
||||
return
|
||||
}
|
||||
try {
|
||||
await api.updateSettings({
|
||||
bgType: bgType.value,
|
||||
bgColor: bgColor.value,
|
||||
bgImage: bgImage.value,
|
||||
bgOpacity: bgOpacity.value,
|
||||
language: language.value,
|
||||
favicon: favicon.value,
|
||||
uploadedImages: uploadedImages.value,
|
||||
uploadedIcons: uploadedIcons.value
|
||||
})
|
||||
} catch (error) {
|
||||
console.warn('保存到服务器失败:', error.message)
|
||||
}
|
||||
}
|
||||
|
||||
// 上传图片到 RUSTFS，返回 {id, url}
|
||||
async function uploadImageToRustfs(imageData, type = 'background') {
|
||||
try {
|
||||
const result = await api.uploadImage(imageData, type)
|
||||
return { id: result.id, url: result.url }
|
||||
} catch (error) {
|
||||
console.error('图片上传失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 批量上传图片到 RUSTFS
|
||||
async function uploadImagesToRustfs(imageDataList, type = 'background') {
|
||||
try {
|
||||
const images = imageDataList.map((data, index) => ({
|
||||
id: `${Date.now()}-${index}`,
|
||||
data
|
||||
}))
|
||||
const result = await api.uploadImages(images, type)
|
||||
return result.images
|
||||
} catch (error) {
|
||||
console.error('批量图片上传失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 添加单张图片（上传到 RUSTFS）
|
||||
async function addUploadedImage(imageData) {
|
||||
const result = await uploadImageToRustfs(imageData, 'background')
|
||||
uploadedImages.value.push(result)
|
||||
await saveSettings()
|
||||
return result.id
|
||||
}
|
||||
|
||||
// 批量添加图片（不上传到服务器）
|
||||
function addUploadedImagesBatchLocal(imageDataList) {
|
||||
const baseId = Date.now()
|
||||
const tempImages = imageDataList.map((imageData, index) => ({
|
||||
id: `${baseId}-${index}`,
|
||||
data: imageData
|
||||
}))
|
||||
return tempImages
|
||||
}
|
||||
|
||||
// 批量上传图片
|
||||
async function addUploadedImagesBatch(imageDataList) {
|
||||
const uploaded = await uploadImagesToRustfs(imageDataList, 'background')
|
||||
for (const img of uploaded) {
|
||||
if (img.url) {
|
||||
uploadedImages.value.push({ id: img.id, url: img.url })
|
||||
}
|
||||
}
|
||||
await saveSettings()
|
||||
}
|
||||
|
||||
// 设置背景图片（使用 URL）
|
||||
async function setBgImage(value) {
|
||||
bgImage.value = value
|
||||
await saveSettings()
|
||||
}
|
||||
|
||||
// 设置背景图片（上传 base64 后设置）
|
||||
async function setBgImageFromData(imageData) {
|
||||
const result = await uploadImageToRustfs(imageData, 'background')
|
||||
bgImage.value = result.url
|
||||
await saveSettings()
|
||||
}
|
||||
|
||||
function setBgType(value) {
|
||||
bgType.value = value
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
function setBgColor(value) {
|
||||
bgColor.value = value
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
function setBgOpacity(value) {
|
||||
bgOpacity.value = value
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
function setLanguage(value) {
|
||||
language.value = value
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
// 设置图标（上传到 RUSTFS）
|
||||
async function setFaviconFromData(imageData) {
|
||||
const result = await uploadImageToRustfs(imageData, 'icon')
|
||||
favicon.value = result.url
|
||||
applyFavicon(result.url)
|
||||
await saveSettings()
|
||||
}
|
||||
|
||||
// 设置图标（使用已有 URL）
|
||||
async function setFavicon(value) {
|
||||
favicon.value = value
|
||||
applyFavicon(value)
|
||||
await saveSettings()
|
||||
}
|
||||
|
||||
// 添加图标到图标库（上传到 RUSTFS）
|
||||
async function addUploadedIcon(imageData) {
|
||||
const result = await uploadImageToRustfs(imageData, 'icon')
|
||||
uploadedIcons.value.push(result)
|
||||
await saveSettings()
|
||||
return result.id
|
||||
}
|
||||
|
||||
// 批量添加图标
|
||||
async function addUploadedIconsBatch(imageDataList) {
|
||||
const uploaded = await uploadImagesToRustfs(imageDataList, 'icon')
|
||||
for (const icon of uploaded) {
|
||||
if (icon.url) {
|
||||
uploadedIcons.value.push({ id: icon.id, url: icon.url })
|
||||
}
|
||||
}
|
||||
await saveSettings()
|
||||
}
|
||||
|
||||
function removeUploadedImage(id) {
|
||||
uploadedImages.value = uploadedImages.value.filter(img => img.id !== id)
|
||||
// bgImage 现在是 URL，检查是否是被删除图片的 URL
|
||||
const img = uploadedImages.value.find(img => img.url === bgImage.value)
|
||||
if (!img && bgImage.value) {
|
||||
// 当前背景图片被删除了，重置为默认
|
||||
bgImage.value = ''
|
||||
}
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
function removeUploadedIcon(id) {
|
||||
uploadedIcons.value = uploadedIcons.value.filter(icon => icon.id !== id)
|
||||
// favicon 现在是 URL，检查是否是被删除图标的 URL
|
||||
const icon = uploadedIcons.value.find(icon => icon.url === favicon.value)
|
||||
if (!icon && favicon.value) {
|
||||
favicon.value = ''
|
||||
applyFavicon('')
|
||||
}
|
||||
saveSettings()
|
||||
}
|
||||
|
||||
function applyFavicon(value) {
|
||||
const link = document.querySelector("link[rel='icon']")
|
||||
if (link) {
|
||||
if (value) {
|
||||
link.href = value
|
||||
} else {
|
||||
link.href = '/favicon.ico'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
bgType,
|
||||
bgColor,
|
||||
bgImage,
|
||||
bgOpacity,
|
||||
language,
|
||||
favicon,
|
||||
uploadedImages,
|
||||
uploadedIcons,
|
||||
loading,
|
||||
initialized,
|
||||
loadSettings,
|
||||
saveSettings,
|
||||
setBgImage,
|
||||
setBgImageFromData,
|
||||
setBgType,
|
||||
setBgColor,
|
||||
setBgOpacity,
|
||||
setLanguage,
|
||||
setFavicon,
|
||||
setFaviconFromData,
|
||||
addUploadedImage,
|
||||
addUploadedImagesBatch,
|
||||
addUploadedImagesBatchLocal,
|
||||
removeUploadedImage,
|
||||
addUploadedIcon,
|
||||
addUploadedIconsBatch,
|
||||
removeUploadedIcon,
|
||||
applyFavicon
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user