lq/nl-blogs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

后台布局

Browse Source
This commit is contained in:
李琦
2026-01-16 11:06:59 +08:00
parent de821a8645
commit c26e802309
10 changed files with 738 additions and 1504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

372
client/src/pages/admin/Settings.vue
View File

@@ -1,81 +1,101 @@
<template>
<div class="admin-settings">
<h1 class="page-title">系统配置管理</h1>
<div class="table-container">
<table class="admin-table">
<thead>
<tr>
<th>键名</th>
<th>值</th>
<th>描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="setting in settings" :key="setting.id">
<td>{{ setting.keyName }}</td>
<td class="setting-value">{{ setting.value }}</td>
<td>{{ setting.description }}</td>
<td class="actions">
<button @click="editSetting(setting)" class="btn btn-sm btn-secondary">
编辑
</button>
<button @click="deleteSetting(setting.keyName)" class="btn btn-sm btn-danger">
删除
</button>
</td>
</tr>
</tbody>
</table>
<div class="w-full animate-reveal">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-serif italic text-white">系统配置管理</h1>
<!-- Optional: Add Create Button if needed -->
<!-- <button @click="openCreateModal" class="admin-btn-primary">+ 新增配置</button> -->
</div>
<div v-if="settings.length === 0" class="empty-state">
<p>暂无系统配置</p>
<div class="admin-card overflow-hidden">
<div class="overflow-x-auto">
<table class="admin-table">
<thead>
<tr>
<th class="w-1/4">键名</th>
<th class="w-1/3">值</th>
<th>描述</th>
<th class="text-right w-32">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="setting in settings" :key="setting.id" class="group transition-colors duration-200">
<td class="font-mono text-xs text-art-accent">{{ setting.keyName }}</td>
<td class="max-w-xs truncate text-white/80" :title="setting.value">{{ setting.value }}</td>
<td class="text-art-muted text-sm">{{ setting.description }}</td>
<td class="text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<button @click="editSetting(setting)" class="admin-btn-secondary py-1 px-3 text-xs">
编辑
</button>
<button @click="deleteSetting(setting.keyName)" class="admin-btn-danger py-1 px-3 text-xs">
删除
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="settings.length === 0" class="p-16 text-center">
<div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl">⚙️</div>
<h3 class="text-white font-medium mb-2">暂无配置</h3>
</div>
</div>
<!-- Add/Edit Modal -->
<div v-if="showModal" class="modal-overlay">
<div class="modal-content">
<div class="modal-header">
<h2>{{ editingSetting ? '编辑配置' : '新增配置' }}</h2>
<button @click="closeModal" class="close-btn">&times;</button>
<div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4">
<div class="absolute inset-0 bg-black/80 backdrop-blur-sm transition-opacity" @click="closeModal"></div>
<div class="admin-card w-full max-w-lg relative z-10 flex flex-col max-h-[90vh] shadow-2xl animate-reveal">
<div class="flex items-center justify-between p-6 border-b border-white/5">
<h2 class="text-lg font-medium text-white">{{ editingSetting ? '编辑配置' : '新增配置' }}</h2>
<button @click="closeModal" class="text-white/40 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="modal-body">
<form @submit.prevent="saveSetting">
<div class="form-group">
<label for="keyName">键名</label>
<div class="p-6 overflow-y-auto">
<form @submit.prevent="saveSetting" class="space-y-4">
<div class="space-y-2">
<label for="keyName" class="block text-xs font-medium text-art-muted uppercase tracking-wider">键名</label>
<input
type="text"
id="keyName"
v-model="form.keyName"
:disabled="editingSetting"
required
class="form-control"
class="admin-input font-mono disabled:opacity-50 disabled:cursor-not-allowed"
placeholder="例如: site_title"
>
</div>
<div class="form-group">
<label for="value">值</label>
<div class="space-y-2">
<label for="value" class="block text-xs font-medium text-art-muted uppercase tracking-wider">值</label>
<input
type="text"
id="value"
v-model="form.value"
required
class="form-control"
class="admin-input"
placeholder="配置项的值"
>
</div>
<div class="form-group">
<label for="description">描述</label>
<div class="space-y-2">
<label for="description" class="block text-xs font-medium text-art-muted uppercase tracking-wider">描述</label>
<textarea
id="description"
v-model="form.description"
rows="3"
class="form-control"
class="admin-input resize-none"
placeholder="该配置项的用途说明"
></textarea>
</div>
<div class="form-actions">
<button type="button" @click="closeModal" class="btn btn-secondary">取消</button>
<button type="submit" class="btn btn-primary">保存</button>
<div class="pt-4 flex justify-end gap-3">
<button type="button" @click="closeModal" class="admin-btn-secondary">取消</button>
<button type="submit" class="admin-btn-primary">保存</button>
</div>
</form>
</div>
@@ -106,7 +126,7 @@ const fetchSettings = async () => {
settings.value = await getSettings()
} catch (error) {
console.error('Error fetching settings:', error)
toast.error('获取系统配置失败')
toast.showToast('获取系统配置失败', 'error')
}
}
@@ -125,20 +145,20 @@ const saveSetting = async () => {
try {
if (editingSetting.value) {
await updateSetting(form.value)
toast.success('配置更新成功')
toast.showToast('配置更新成功', 'success')
} else {
await createSetting({
keyName: form.value.keyName,
value: form.value.value,
description: form.value.description
})
toast.success('配置创建成功')
toast.showToast('配置创建成功', 'success')
}
closeModal()
fetchSettings()
} catch (error) {
console.error('Error saving setting:', error)
toast.error(editingSetting.value ? '更新配置失败' : '创建配置失败')
toast.showToast(editingSetting.value ? '更新配置失败' : '创建配置失败', 'error')
}
}
@@ -146,11 +166,11 @@ const deleteSetting = async (keyName: string) => {
if (confirm(`确定要删除配置项 "${keyName}" 吗？`)) {
try {
await deleteSettingApi(keyName)
toast.success('配置删除成功')
toast.showToast('配置删除成功', 'success')
fetchSettings()
} catch (error) {
console.error('Error deleting setting:', error)
toast.error('删除配置失败')
toast.showToast('删除配置失败', 'error')
}
}
}
@@ -172,241 +192,5 @@ onMounted(() => {
</script>
<style scoped>
.admin-settings {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.table-container {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-bottom: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.admin-table {
width: 100%;
border-collapse: collapse;
color: white;
}
.admin-table th,
.admin-table td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
.admin-table th {
background: rgba(255, 255, 255, 0.08);
font-weight: 600;
color: #d4b383;
white-space: nowrap;
}
.admin-table tr:hover {
background: rgba(212, 179, 131, 0.05);
}
.setting-value {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.actions {
display: flex;
gap: 0.5rem;
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
border: 1px solid transparent;
font-family: 'Inter', sans-serif;
}
.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
}
.btn-primary {
background-color: #d4b383;
color: #050505;
border-color: #d4b383;
}
.btn-primary:hover {
background-color: transparent;
color: #d4b383;
box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background-color: rgba(212, 179, 131, 0.1);
border-color: #d4b383;
color: #d4b383;
}
.btn-danger {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
border-color: rgba(239, 68, 68, 0.3);
}
.btn-danger:hover {
background-color: rgba(239, 68, 68, 0.3);
border-color: #ef4444;
box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}
.empty-state {
text-align: center;
padding: 2rem;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.05);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: 'Inter', sans-serif;
}
/* Modal Styles */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-content {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
max-height: 80vh;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.modal-header h2 {
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #d4b383;
font-family: 'Inter', sans-serif;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.6);
padding: 0;
line-height: 1;
transition: all 0.3s ease;
}
.close-btn:hover {
color: #d4b383;
transform: rotate(90deg);
}
.modal-body {
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
font-family: 'Inter', sans-serif;
}
.form-control {
width: 100%;
padding: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0.375rem;
font-size: 1rem;
background: rgba(255, 255, 255, 0.05);
color: white;
font-family: 'Inter', sans-serif;
}
.form-control::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-control:focus {
outline: none;
border-color: #d4b383;
box-shadow: 0 0 0 3px rgba(212, 179, 131, 0.2);
}
.form-control:disabled {
background-color: rgba(255, 255, 255, 0.08);
cursor: not-allowed;
border-color: rgba(255, 255, 255, 0.1);
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
margin-top: 1.5rem;
}
</style>
/* Scoped styles removed */
</style>