384 lines
17 KiB
TypeScript
384 lines
17 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import axios from 'axios';
|
|
import { ChevronLeft, ChevronRight, Pencil, Plus, RefreshCw, Search, Trash2, X } from 'lucide-react';
|
|
import { APP_ENDPOINTS } from '../../../config/env';
|
|
import { LucentSelect } from '../../../components/lucent/LucentSelect';
|
|
import type { PlatformSettings, SystemSettingItem } from '../types';
|
|
import { LucentIconButton } from '../../../components/lucent/LucentIconButton';
|
|
import { useLucentPrompt } from '../../../components/lucent/LucentPromptProvider';
|
|
|
|
interface PlatformSettingsPageProps {
|
|
isZh: boolean;
|
|
}
|
|
|
|
interface SystemSettingsResponse {
|
|
items: SystemSettingItem[];
|
|
}
|
|
|
|
interface SettingDraft {
|
|
key: string;
|
|
name: string;
|
|
category: string;
|
|
description: string;
|
|
value_type: string;
|
|
value: string;
|
|
is_public: boolean;
|
|
sort_order: string;
|
|
}
|
|
|
|
const emptyDraft: SettingDraft = {
|
|
key: '',
|
|
name: '',
|
|
category: 'general',
|
|
description: '',
|
|
value_type: 'string',
|
|
value: '',
|
|
is_public: false,
|
|
sort_order: '100',
|
|
};
|
|
|
|
function toDraft(item?: SystemSettingItem): SettingDraft {
|
|
if (!item) return emptyDraft;
|
|
return {
|
|
key: item.key,
|
|
name: item.name,
|
|
category: item.category,
|
|
description: item.description,
|
|
value_type: item.value_type,
|
|
value: item.value_type === 'json' ? JSON.stringify(item.value, null, 2) : String(item.value ?? ''),
|
|
is_public: item.is_public,
|
|
sort_order: String(item.sort_order ?? 100),
|
|
};
|
|
}
|
|
|
|
function parseValue(draft: SettingDraft) {
|
|
if (draft.value_type === 'integer') return Number.parseInt(draft.value || '0', 10) || 0;
|
|
if (draft.value_type === 'float') return Number.parseFloat(draft.value || '0') || 0;
|
|
if (draft.value_type === 'boolean') return ['1', 'true', 'yes', 'on'].includes(draft.value.trim().toLowerCase());
|
|
if (draft.value_type === 'json') return JSON.parse(draft.value || 'null');
|
|
return draft.value;
|
|
}
|
|
|
|
function displayValue(item: SystemSettingItem) {
|
|
if (item.value_type === 'json') return JSON.stringify(item.value);
|
|
if (item.value_type === 'boolean') return String(Boolean(item.value));
|
|
return String(item.value ?? '');
|
|
}
|
|
|
|
function normalizePageSize(value: unknown, fallback = 10) {
|
|
const parsed = Number(value);
|
|
if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
|
|
return Math.max(1, Math.min(100, Math.floor(parsed)));
|
|
}
|
|
|
|
export function PlatformSettingsPage({ isZh }: PlatformSettingsPageProps) {
|
|
const { notify, confirm } = useLucentPrompt();
|
|
const [items, setItems] = useState<SystemSettingItem[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
const [search, setSearch] = useState('');
|
|
const [showEditor, setShowEditor] = useState(false);
|
|
const [editingKey, setEditingKey] = useState('');
|
|
const [draft, setDraft] = useState<SettingDraft>(emptyDraft);
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
const loadRows = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.get<SystemSettingsResponse>(`${APP_ENDPOINTS.apiBase}/platform/system-settings`);
|
|
setItems(Array.isArray(res.data?.items) ? res.data.items : []);
|
|
} catch (error: any) {
|
|
notify(error?.response?.data?.detail || (isZh ? '读取系统参数失败。' : 'Failed to load system settings.'), { tone: 'error' });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const refreshSnapshot = async () => {
|
|
try {
|
|
const res = await axios.get<PlatformSettings>(`${APP_ENDPOINTS.apiBase}/platform/settings`);
|
|
setPageSize(normalizePageSize(res.data?.page_size, 10));
|
|
} catch {
|
|
// ignore snapshot refresh failures
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
setPage(1);
|
|
void (async () => {
|
|
await Promise.allSettled([loadRows(), refreshSnapshot()]);
|
|
})();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setPage(1);
|
|
}, [search]);
|
|
|
|
const filtered = useMemo(() => {
|
|
const keyword = search.trim().toLowerCase();
|
|
if (!keyword) return items;
|
|
return items.filter((item) =>
|
|
[item.key, item.name, item.category, item.description].some((value) => String(value || '').toLowerCase().includes(keyword)),
|
|
);
|
|
}, [items, search]);
|
|
|
|
useEffect(() => {
|
|
const maxPage = Math.max(1, Math.ceil(filtered.length / pageSize));
|
|
if (page > maxPage) setPage(maxPage);
|
|
}, [filtered.length, page, pageSize]);
|
|
|
|
const pageCount = Math.max(1, Math.ceil(filtered.length / pageSize));
|
|
const pagedItems = useMemo(() => filtered.slice((page - 1) * pageSize, page * pageSize), [filtered, page, pageSize]);
|
|
|
|
return (
|
|
<div className="platform-page-stack">
|
|
<section className="panel stack">
|
|
<div className="page-section-head">
|
|
<div>
|
|
<h3>{isZh ? '系统参数' : 'System Settings'}</h3>
|
|
<p className="panel-desc">
|
|
{isZh ? '参数修改后会立即同步到运行时，无需重启平台。' : 'Setting changes are applied to the runtime immediately without restarting the platform.'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="platform-settings-toolbar">
|
|
<div className="ops-searchbar platform-searchbar platform-settings-search">
|
|
<input
|
|
className="input ops-search-input ops-search-input-with-icon"
|
|
type="search"
|
|
value={search}
|
|
onChange={(event) => setSearch(event.target.value)}
|
|
placeholder={isZh ? '搜索参数...' : 'Search settings...'}
|
|
aria-label={isZh ? '搜索参数' : 'Search settings'}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="ops-search-inline-btn"
|
|
onClick={() => setSearch('')}
|
|
title={search.trim() ? (isZh ? '清除搜索' : 'Clear search') : (isZh ? '搜索' : 'Search')}
|
|
aria-label={search.trim() ? (isZh ? '清除搜索' : 'Clear search') : (isZh ? '搜索' : 'Search')}
|
|
>
|
|
{search.trim() ? <X size={14} /> : <Search size={14} />}
|
|
</button>
|
|
</div>
|
|
<div className="skill-market-admin-actions">
|
|
<button className="btn btn-secondary btn-sm" type="button" disabled={loading} onClick={() => void loadRows()}>
|
|
{loading ? <RefreshCw size={14} className="animate-spin" /> : <RefreshCw size={14} />}
|
|
<span style={{ marginLeft: 6 }}>{isZh ? '刷新' : 'Refresh'}</span>
|
|
</button>
|
|
<button
|
|
className="btn btn-primary"
|
|
type="button"
|
|
onClick={() => {
|
|
setEditingKey('');
|
|
setDraft(emptyDraft);
|
|
setShowEditor(true);
|
|
}}
|
|
>
|
|
<Plus size={14} />
|
|
<span style={{ marginLeft: 6 }}>{isZh ? '新增参数' : 'Add Setting'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="platform-settings-table-wrap">
|
|
<table className="table platform-settings-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{isZh ? '参数键' : 'Key'}</th>
|
|
<th>{isZh ? '名称' : 'Name'}</th>
|
|
<th>{isZh ? '当前值' : 'Value'}</th>
|
|
<th>{isZh ? '类型' : 'Type'}</th>
|
|
<th>{isZh ? '分类' : 'Category'}</th>
|
|
<th>{isZh ? '描述' : 'Description'}</th>
|
|
<th>{isZh ? '操作' : 'Actions'}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{pagedItems.map((item) => (
|
|
<tr key={item.key}>
|
|
<td>
|
|
<div className="mono">{item.key}</div>
|
|
{item.is_public ? <div className="platform-setting-public">{isZh ? '前端可访问' : 'Public'}</div> : null}
|
|
</td>
|
|
<td>{item.name}</td>
|
|
<td><span className="platform-setting-value">{displayValue(item)}</span></td>
|
|
<td>{item.value_type}</td>
|
|
<td>{item.category}</td>
|
|
<td>{item.description}</td>
|
|
<td>
|
|
<div className="platform-settings-actions">
|
|
<LucentIconButton
|
|
className="btn btn-secondary btn-sm icon-btn"
|
|
onClick={() => {
|
|
setEditingKey(item.key);
|
|
setDraft(toDraft(item));
|
|
setShowEditor(true);
|
|
}}
|
|
tooltip={isZh ? '编辑' : 'Edit'}
|
|
aria-label={isZh ? '编辑' : 'Edit'}
|
|
>
|
|
<Pencil size={14} />
|
|
</LucentIconButton>
|
|
<LucentIconButton
|
|
className="btn btn-danger btn-sm icon-btn"
|
|
onClick={() => {
|
|
void (async () => {
|
|
const ok = await confirm({
|
|
title: isZh ? '删除系统参数' : 'Delete System Setting',
|
|
message: `${isZh ? '确认删除' : 'Delete'} ${item.key}?`,
|
|
tone: 'warning',
|
|
});
|
|
if (!ok) return;
|
|
try {
|
|
await axios.delete(`${APP_ENDPOINTS.apiBase}/platform/system-settings/${encodeURIComponent(item.key)}`);
|
|
await loadRows();
|
|
await refreshSnapshot();
|
|
} catch (error: any) {
|
|
notify(error?.response?.data?.detail || (isZh ? '删除失败。' : 'Delete failed.'), { tone: 'error' });
|
|
}
|
|
})();
|
|
}}
|
|
tooltip={isZh ? '删除' : 'Delete'}
|
|
aria-label={isZh ? '删除' : 'Delete'}
|
|
>
|
|
<Trash2 size={14} />
|
|
</LucentIconButton>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{filtered.length === 0 ? <div className="ops-empty-inline">{isZh ? '暂无系统参数。' : 'No system settings.'}</div> : null}
|
|
</div>
|
|
<div className="platform-settings-pager">
|
|
<span className="pager-status">{isZh ? `第 ${page} / ${pageCount} 页，共 ${filtered.length} 条` : `Page ${page} / ${pageCount}, ${filtered.length} rows`}</span>
|
|
<div className="platform-usage-pager-actions">
|
|
<LucentIconButton
|
|
className="btn btn-secondary btn-sm icon-btn pager-icon-btn"
|
|
type="button"
|
|
disabled={loading || page <= 1}
|
|
onClick={() => setPage((value) => Math.max(1, value - 1))}
|
|
tooltip={isZh ? '上一页' : 'Previous'}
|
|
aria-label={isZh ? '上一页' : 'Previous'}
|
|
>
|
|
<ChevronLeft size={16} />
|
|
</LucentIconButton>
|
|
<LucentIconButton
|
|
className="btn btn-secondary btn-sm icon-btn pager-icon-btn"
|
|
type="button"
|
|
disabled={loading || page >= pageCount}
|
|
onClick={() => setPage((value) => Math.min(pageCount, value + 1))}
|
|
tooltip={isZh ? '下一页' : 'Next'}
|
|
aria-label={isZh ? '下一页' : 'Next'}
|
|
>
|
|
<ChevronRight size={16} />
|
|
</LucentIconButton>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{showEditor ? (
|
|
<div className="modal-mask" onClick={() => setShowEditor(false)}>
|
|
<div className="modal-card platform-setting-editor" onClick={(event) => event.stopPropagation()}>
|
|
<div className="modal-title-row modal-title-with-close">
|
|
<div className="modal-title-main">
|
|
<h3>{editingKey ? (isZh ? '编辑参数' : 'Edit Setting') : (isZh ? '新增参数' : 'Create Setting')}</h3>
|
|
</div>
|
|
<div className="modal-title-actions">
|
|
<LucentIconButton className="btn btn-secondary btn-sm icon-btn" onClick={() => setShowEditor(false)} tooltip={isZh ? '关闭' : 'Close'} aria-label={isZh ? '关闭' : 'Close'}>
|
|
<X size={14} />
|
|
</LucentIconButton>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="field-label">{isZh ? '参数键' : 'Key'}</label>
|
|
<input className="input" value={draft.key} onChange={(event) => setDraft((prev) => ({ ...prev, key: event.target.value }))} disabled={Boolean(editingKey)} />
|
|
|
|
<label className="field-label">{isZh ? '名称' : 'Name'}</label>
|
|
<input className="input" value={draft.name} onChange={(event) => setDraft((prev) => ({ ...prev, name: event.target.value }))} />
|
|
|
|
<label className="field-label">{isZh ? '类型' : 'Type'}</label>
|
|
<LucentSelect value={draft.value_type} onChange={(event) => setDraft((prev) => ({ ...prev, value_type: event.target.value }))}>
|
|
<option value="string">string</option>
|
|
<option value="integer">integer</option>
|
|
<option value="float">float</option>
|
|
<option value="boolean">boolean</option>
|
|
<option value="json">json</option>
|
|
</LucentSelect>
|
|
|
|
<label className="field-label">{isZh ? '当前值' : 'Value'}</label>
|
|
{draft.value_type === 'json' ? (
|
|
<textarea className="textarea" rows={8} value={draft.value} onChange={(event) => setDraft((prev) => ({ ...prev, value: event.target.value }))} />
|
|
) : (
|
|
<input className="input" value={draft.value} onChange={(event) => setDraft((prev) => ({ ...prev, value: event.target.value }))} />
|
|
)}
|
|
|
|
<label className="field-label">{isZh ? '分类' : 'Category'}</label>
|
|
<input className="input" value={draft.category} onChange={(event) => setDraft((prev) => ({ ...prev, category: event.target.value }))} />
|
|
|
|
<label className="field-label">{isZh ? '描述' : 'Description'}</label>
|
|
<textarea className="textarea" rows={4} value={draft.description} onChange={(event) => setDraft((prev) => ({ ...prev, description: event.target.value }))} />
|
|
|
|
<label className="field-label">{isZh ? '排序值' : 'Sort Order'}</label>
|
|
<input className="input" type="number" value={draft.sort_order} onChange={(event) => setDraft((prev) => ({ ...prev, sort_order: event.target.value }))} />
|
|
|
|
<label className="field-label">
|
|
<input type="checkbox" checked={draft.is_public} onChange={(event) => setDraft((prev) => ({ ...prev, is_public: event.target.checked }))} style={{ marginRight: 8 }} />
|
|
{isZh ? '前端可访问' : 'Public to frontend'}
|
|
</label>
|
|
|
|
<div className="row-between">
|
|
<button className="btn btn-secondary" type="button" onClick={() => setShowEditor(false)}>{isZh ? '取消' : 'Cancel'}</button>
|
|
<button
|
|
className="btn btn-primary"
|
|
type="button"
|
|
disabled={saving}
|
|
onClick={() => {
|
|
void (async () => {
|
|
setSaving(true);
|
|
try {
|
|
const payload = {
|
|
key: draft.key.trim(),
|
|
name: draft.name.trim(),
|
|
category: draft.category.trim(),
|
|
description: draft.description.trim(),
|
|
value_type: draft.value_type,
|
|
value: parseValue(draft),
|
|
is_public: draft.is_public,
|
|
sort_order: Number(draft.sort_order || '100') || 100,
|
|
};
|
|
if (editingKey) {
|
|
await axios.put(`${APP_ENDPOINTS.apiBase}/platform/system-settings/${encodeURIComponent(editingKey)}`, payload);
|
|
} else {
|
|
await axios.post(`${APP_ENDPOINTS.apiBase}/platform/system-settings`, payload);
|
|
}
|
|
await loadRows();
|
|
await refreshSnapshot();
|
|
notify(isZh ? '系统参数已保存。' : 'System setting saved.', { tone: 'success' });
|
|
setShowEditor(false);
|
|
} catch (error: any) {
|
|
const detail = error instanceof SyntaxError
|
|
? (isZh ? 'JSON 参数格式错误。' : 'Invalid JSON value.')
|
|
: (error?.response?.data?.detail || (isZh ? '保存参数失败。' : 'Failed to save setting.'));
|
|
notify(detail, { tone: 'error' });
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
})();
|
|
}}
|
|
>
|
|
{saving ? <RefreshCw size={14} className="animate-spin" /> : null}
|
|
<span style={{ marginLeft: saving ? 6 : 0 }}>{isZh ? '保存' : 'Save'}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|