24024
d4b28a731a
- 新增 SystemNotification 模型，实现系统通知的数据存储 - 管理后台新增通知相关接口，支持通知的增删改查 - 用户端新增接口，获取最新激活通知并支持标记已读 - 在前端首页添加全局通知弹窗，实现通知自动轮询及已读同步 - 生成历史记录中兼容支持图片缩略图及新旧图片格式 - 优化后台图片同步逻辑，新增缩略图生成与存储 - 支持上传参考图的拖拽、粘贴、多文件上传及排序功能 - 增加购买积分页面入口及菜单项，调整菜单结构 - 日志系统由 Redis 列表迁移为有序集合，保留 30 天日志 - 优化日志页面样式，提升可读性及滚动体验 - 调整部分模板布局为自定义滚动条容器，增强视觉一致性
238 lines
13 KiB
HTML
238 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}系统字典管理 - AI 视界{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="w-full h-full overflow-y-auto p-8 lg:p-12 custom-scrollbar">
|
|
<div class="max-w-6xl mx-auto space-y-8">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg">
|
|
<i data-lucide="book-open" class="w-7 h-7"></i>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-3xl font-black text-slate-900 tracking-tight">系统字典管理</h1>
|
|
<p class="text-slate-400 text-sm">统一维护模型、比例、提示词等系统参数</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="openModal()" class="btn-primary px-6 py-3 rounded-xl text-sm font-bold shadow-lg flex items-center gap-2">
|
|
<i data-lucide="plus" class="w-4 h-4"></i>
|
|
新增字典项
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 筛选栏 -->
|
|
<div class="flex gap-4 bg-white p-4 rounded-3xl shadow-sm border border-slate-100">
|
|
<button onclick="loadDicts('')" class="dict-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all bg-slate-100 text-slate-600 active-filter">全部</button>
|
|
<button onclick="loadDicts('ai_model')" class="dict-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all hover:bg-slate-50 text-slate-400">AI 模型</button>
|
|
<button onclick="loadDicts('aspect_ratio')" class="dict-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all hover:bg-slate-50 text-slate-400">画面比例</button>
|
|
<button onclick="loadDicts('ai_image_size')" class="dict-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all hover:bg-slate-50 text-slate-400">输出尺寸</button>
|
|
<button onclick="loadDicts('prompt_tpl')" class="dict-filter-btn px-4 py-2 rounded-xl text-xs font-bold transition-all hover:bg-slate-50 text-slate-400">提示词模板</button>
|
|
</div>
|
|
|
|
<!-- 表格 -->
|
|
<div class="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-slate-50 border-b border-slate-100">
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">类型</th>
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">显示名称</th>
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">存储值/内容</th>
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">积分消耗</th>
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">状态</th>
|
|
<th class="px-8 py-5 text-[10px] font-black text-slate-400 uppercase tracking-widest">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="dictTableBody" class="text-sm font-medium">
|
|
<!-- 动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 编辑弹窗 -->
|
|
<div id="dictModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-50 flex items-center justify-center hidden opacity-0 transition-opacity duration-300">
|
|
<div class="bg-white w-full max-w-lg rounded-[2.5rem] shadow-2xl p-10 space-y-8 transform scale-95 transition-transform duration-300">
|
|
<h2 id="modalTitle" class="text-2xl font-black text-slate-900">新增字典项</h2>
|
|
<form id="dictForm" class="space-y-5">
|
|
<input type="hidden" id="dictId">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">字典类型</label>
|
|
<select id="dictType" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
|
<option value="ai_model">AI 模型 (ai_model)</option>
|
|
<option value="aspect_ratio">画面比例 (aspect_ratio)</option>
|
|
<option value="ai_image_size">输出尺寸 (ai_image_size)</option>
|
|
<option value="prompt_tpl">提示词模板 (prompt_tpl)</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">显示名称 (Label)</label>
|
|
<input type="text" id="dictLabel" required class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">存储值/内容 (Value)</label>
|
|
<textarea id="dictValue" required rows="3" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold resize-none"></textarea>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">积分消耗</label>
|
|
<input type="number" id="dictCost" value="0" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">排序权重</label>
|
|
<input type="number" id="dictOrder" value="0" class="w-full bg-slate-50 border border-slate-100 rounded-2xl p-4 outline-none focus:border-indigo-500 transition-all text-sm font-bold">
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 pt-2">
|
|
<input type="checkbox" id="dictActive" checked class="w-4 h-4 rounded border-slate-200 text-indigo-600 focus:ring-indigo-500">
|
|
<label for="dictActive" class="text-sm font-bold text-slate-600">立即启用</label>
|
|
</div>
|
|
<div class="flex gap-4 pt-4">
|
|
<button type="button" onclick="closeModal()" class="flex-1 px-8 py-4 rounded-2xl border border-slate-100 font-bold text-slate-400 hover:bg-slate-50 transition-all">取消</button>
|
|
<button type="submit" class="flex-1 btn-primary px-8 py-4 rounded-2xl font-bold shadow-lg shadow-indigo-100">保存配置</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
let currentType = '';
|
|
|
|
async function loadDicts(type = '') {
|
|
currentType = type;
|
|
// 更新按钮样式
|
|
document.querySelectorAll('.dict-filter-btn').forEach(btn => {
|
|
const btnType = btn.getAttribute('onclick').match(/'(.*)'/)[1];
|
|
if(btnType === type) {
|
|
btn.classList.add('bg-slate-100', 'text-slate-600');
|
|
btn.classList.remove('hover:bg-slate-50', 'text-slate-400');
|
|
} else {
|
|
btn.classList.remove('bg-slate-100', 'text-slate-600');
|
|
btn.classList.add('hover:bg-slate-50', 'text-slate-400');
|
|
}
|
|
});
|
|
|
|
try {
|
|
const r = await fetch(`/api/admin/dicts?type=${type}`);
|
|
const d = await r.json();
|
|
const body = document.getElementById('dictTableBody');
|
|
|
|
body.innerHTML = d.dicts.map(item => `
|
|
<tr class="border-b border-slate-50 hover:bg-slate-50/50 transition-colors">
|
|
<td class="px-8 py-5">
|
|
<span class="px-2 py-0.5 rounded text-[10px] font-black uppercase ${
|
|
item.dict_type === 'ai_model' ? 'bg-indigo-50 text-indigo-600' :
|
|
item.dict_type === 'aspect_ratio' ? 'bg-emerald-50 text-emerald-600' :
|
|
item.dict_type === 'ai_image_size' ? 'bg-rose-50 text-rose-600' : 'bg-amber-50 text-amber-600'
|
|
}">${item.dict_type}</span>
|
|
</td>
|
|
<td class="px-8 py-5 text-slate-700 font-bold">${item.label}</td>
|
|
<td class="px-8 py-5 text-slate-400 text-xs truncate max-w-xs" title="${item.value}">${item.value}</td>
|
|
<td class="px-8 py-5">
|
|
<span class="text-amber-600 font-black">${item.cost}</span>
|
|
</td>
|
|
<td class="px-8 py-5">
|
|
<span class="${item.is_active ? 'text-emerald-500' : 'text-slate-300'}">
|
|
<i data-lucide="${item.is_active ? 'check-circle-2' : 'circle'}" class="w-4 h-4"></i>
|
|
</span>
|
|
</td>
|
|
<td class="px-8 py-5">
|
|
<div class="flex gap-3">
|
|
<button onclick='editDict(${JSON.stringify(item)})' class="text-indigo-400 hover:text-indigo-600 transition-colors">
|
|
<i data-lucide="edit-3" class="w-4 h-4"></i>
|
|
</button>
|
|
<button onclick="deleteDict(${item.id})" class="text-rose-300 hover:text-rose-500 transition-colors">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
lucide.createIcons();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
function openModal(data = null) {
|
|
const modal = document.getElementById('dictModal');
|
|
const form = document.getElementById('dictForm');
|
|
document.getElementById('modalTitle').innerText = data ? '编辑字典项' : '新增字典项';
|
|
document.getElementById('dictId').value = data ? data.id : '';
|
|
document.getElementById('dictType').value = data ? data.dict_type : 'ai_model';
|
|
document.getElementById('dictLabel').value = data ? data.label : '';
|
|
document.getElementById('dictValue').value = data ? data.value : '';
|
|
document.getElementById('dictCost').value = data ? data.cost : 0;
|
|
document.getElementById('dictOrder').value = data ? data.sort_order : 0;
|
|
document.getElementById('dictActive').checked = data ? data.is_active : true;
|
|
|
|
modal.classList.remove('hidden');
|
|
setTimeout(() => {
|
|
modal.classList.remove('opacity-0');
|
|
modal.querySelector('div').classList.remove('scale-95');
|
|
}, 10);
|
|
}
|
|
|
|
function closeModal() {
|
|
const modal = document.getElementById('dictModal');
|
|
modal.classList.add('opacity-0');
|
|
modal.querySelector('div').classList.add('scale-95');
|
|
setTimeout(() => modal.classList.add('hidden'), 300);
|
|
}
|
|
|
|
function editDict(item) {
|
|
openModal(item);
|
|
}
|
|
|
|
async function deleteDict(id) {
|
|
if(!confirm('确定要删除此字典项吗？')) return;
|
|
try {
|
|
const r = await fetch('/api/admin/dicts/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id })
|
|
});
|
|
const d = await r.json();
|
|
if(d.message) {
|
|
showToast(d.message, 'success');
|
|
loadDicts(currentType);
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
}
|
|
|
|
document.getElementById('dictForm').onsubmit = async (e) => {
|
|
e.preventDefault();
|
|
const payload = {
|
|
id: document.getElementById('dictId').value,
|
|
dict_type: document.getElementById('dictType').value,
|
|
label: document.getElementById('dictLabel').value,
|
|
value: document.getElementById('dictValue').value,
|
|
cost: parseInt(document.getElementById('dictCost').value),
|
|
sort_order: parseInt(document.getElementById('dictOrder').value),
|
|
is_active: document.getElementById('dictActive').checked
|
|
};
|
|
|
|
try {
|
|
const r = await fetch('/api/admin/dicts', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const d = await r.json();
|
|
if(d.message) {
|
|
showToast(d.message, 'success');
|
|
closeModal();
|
|
loadDicts(currentType);
|
|
}
|
|
} catch (e) { console.error(e); }
|
|
};
|
|
|
|
loadDicts();
|
|
</script>
|
|
{% endblock %}
|