24024
af7c11d7f9
- 新增图像生成接口，支持试用、积分和自定义API Key模式 - 实现生成图片结果异步上传至MinIO存储，带重试机制 - 优化积分预扣除和异常退还逻辑，保障用户积分准确 - 添加获取生成历史记录接口，支持时间范围和分页 - 提供本地字典配置接口，支持模型、比例、提示模板和尺寸 - 实现图片批量上传接口，支持S3兼容对象存储 feat(admin): 增加管理员角色管理与权限分配接口 - 实现角色列表查询、角色创建、更新及删除功能 - 增加权限列表查询接口 - 实现用户角色分配接口，便于统一管理用户权限 - 增加系统字典增删查改接口，支持分类过滤和排序 - 权限控制全面覆盖管理接口，保证安全访问 feat(auth): 完善用户登录注册及权限相关接口与页面 - 实现手机号验证码发送及校验功能，保障注册安全 - 支持手机号注册、登录及退出接口，集成日志记录 - 增加修改密码功能，验证原密码后更新 - 提供动态导航菜单接口，基于权限展示不同菜单 - 实现管理界面路由及日志、角色、字典管理页面访问权限控制 - 添加系统日志查询接口，支持关键词和等级筛选 feat(app): 初始化Flask应用并配置蓝图与数据库 - 创建应用程序工厂，加载配置，初始化数据库和Redis客户端 - 注册认证、API及管理员蓝图，整合路由 - 根路由渲染主页模板 - 应用上下文中自动创建数据库表，保证运行环境准备完毕 feat(database): 提供数据库创建与迁移支持脚本 - 新增数据库创建脚本，支持自动检测是否已存在 - 添加数据库表初始化脚本，支持创建和删除所有表 - 实现RBAC权限初始化，包含基础权限和角色创建 - 新增字段手动修复脚本，添加用户API Key和积分字段 - 强制迁移脚本支持清理连接和修复表结构，初始化默认数据及角色分配 feat(config): 新增系统配置参数 - 配置数据库、Redis、Session和MinIO相关参数 - 添加AI接口地址及试用Key配置 - 集成阿里云短信服务配置及开发模式相关参数 feat(extensions): 初始化数据库、Redis和MinIO客户端 - 创建全局SQLAlchemy数据库实例和Redis客户端 - 配置基于boto3的MinIO兼容S3客户端 chore(logs): 添加示例系统日志文件 - 记录用户请求、验证码发送成功与失败的日志信息
238 lines
13 KiB
HTML
238 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}系统字典管理 - AI 视界{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen p-8 lg:p-12">
|
|
<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 %}
|