/* ============================================================ 系統設置 — 倉庫 · 物資分類 · AI 規則 · 權限 · 通用（真實資料 + 持久化） ============================================================ */ const { useState: useStateSet, useEffect: useEffectSet } = React; const SETTINGS_API_BASE = typeof window.WAREHOUSE_API_BASE === "string" ? window.WAREHOUSE_API_BASE : "http://127.0.0.1:8090"; const RISK_COLOR = { critical: "#E0245E", high: "#E8830C", normal: "#1B6BFF", low: "#6B7A90" }; async function settingsJson(path, options) { const res = await (window.authFetch || fetch)(SETTINGS_API_BASE + path, options); const data = await res.json(); if (!res.ok) throw new Error(data.error || res.statusText); return data; } const saveSettings = (group, values) => (window.authFetch || fetch)(`${SETTINGS_API_BASE}/api/settings/save`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ group, values }), }).then((r) => r.json()); const saveDeepSeekConfig = (apiKey) => settingsJson("/api/integrations/deepseek/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ api_key: apiKey }), }); const validateDeepSeekConfig = (apiKey) => settingsJson("/api/integrations/deepseek/validate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(apiKey ? { api_key: apiKey } : {}), }); const validateVisionConfig = (apiKey) => settingsJson("/api/integrations/vision/validate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(apiKey ? { api_key: apiKey } : {}), }); const saveVisionConfig = (apiKey) => settingsJson("/api/integrations/vision/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ api_key: apiKey }), }); const VisionKeySet = () => { const [status, setStatus] = useStateSet({}); const [apiKey, setApiKey] = useStateSet(""); const [busy, setBusy] = useStateSet(""); const [result, setResult] = useStateSet(null); const [editing, setEditing] = useStateSet(false); useEffectSet(() => { settingsJson("/api/integrations/vision").then((d) => { setStatus(d.vision || {}); }).catch(() => {}); }, []); const validate = async () => { setBusy("validate"); setResult(null); try { const payload = await validateVisionConfig(apiKey.trim()); if (payload.vision) setStatus(payload.vision); setResult(payload); } catch (err) { setResult({ ok: false, error: err.message }); } finally { setBusy(""); } }; const save = async () => { const key = apiKey.trim(); if (!key) { setResult({ ok: false, error: "請先輸入 API Key。" }); return; } setBusy("save"); setResult(null); try { const d = await saveVisionConfig(key); if (!d.ok) throw new Error(d.error || "保存失敗"); if (d.vision) setStatus(d.vision); setApiKey(""); setEditing(false); const check = d.validation || {}; setResult(check.ok ? { ...check, message: "全局密鑰已保存並驗證成功，所有用戶後續都會共用此 key 進行圖片識別。" } : { ...check, ok: false, error: "密鑰未保存：" + (check.error || "請檢查 API Key 或網絡。") }); } catch (err) { setResult({ ok: false, error: err.message }); } finally { setBusy(""); } }; const configured = !!status.configured; const connection = status.connection || {}; const connected = configured && !!(status.connected || connection.ok || status.connection_status === "connected"); const failed = configured && (status.connection_status === "failed" || connection.status === "failed"); const showEditor = !connected || editing; const badgeClass = connected ? "badge-ok" : failed ? "badge-danger" : "badge-warn"; const badgeText = connected ? "可連接" : failed ? "連接失敗" : configured ? "待驗證" : "未配置"; const displayModel = connected ? (status.model || connection.model || "—") : "—"; return ( {badgeText}}>
全局狀態
{badgeText}
共用 Key
{status.masked_key || "—"}
當前模型
{displayModel}
最近驗證
{connection.checked_at || "—"}
{connected && (
圖片識別連接正常，所有用戶會共用資料庫中的全局 key。
)} {failed && (
連接失敗：{connection.error || "請檢查 API Key、模型權限或服務器網絡。"}
)} {showEditor && (
)} {result && (
{result.ok ? (result.message || `驗證成功，延遲 ${result.latency_ms || "—"} ms。`) : `驗證失敗：${result.error || "請檢查 API Key 或網絡。"}`}
)}
); }; /* 語音功能全局 API 密鑰 —— 與圖片識別卡完全同款設計,內核換成語音(識別+朗讀), 保存時後端按 base_url 自動識別 key 類型並配好識別/合成模型。 */ const VoiceKeySet = () => { const [status, setStatus] = useStateSet({}); const [apiKey, setApiKey] = useStateSet(""); const [busy, setBusy] = useStateSet(""); const [result, setResult] = useStateSet(null); const [editing, setEditing] = useStateSet(false); useEffectSet(() => { settingsJson("/api/integrations/voice").then((d) => { setStatus(d.voice || {}); }).catch(() => {}); }, []); const validate = async () => { setBusy("validate"); setResult(null); try { const payload = await settingsJson("/api/integrations/voice/validate", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(apiKey.trim() ? { api_key: apiKey.trim() } : {}), }); if (payload.voice) setStatus(payload.voice); setResult(payload); } catch (err) { setResult({ ok: false, error: err.message }); } finally { setBusy(""); } }; const save = async () => { const key = apiKey.trim(); if (!key) { setResult({ ok: false, error: "請先輸入 API Key。" }); return; } setBusy("save"); setResult(null); try { const d = await settingsJson("/api/integrations/voice/save", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ api_key: key }), }); if (!d.ok) throw new Error(d.error || "保存失敗"); if (d.voice) setStatus(d.voice); setApiKey(""); setEditing(false); const check = d.validation || {}; setResult(check.ok ? { ...check, message: "全局密鑰已保存並驗證成功，所有用戶後續都會共用此 key 進行語音識別與朗讀。" } : { ...check, ok: false, error: "密鑰未保存：" + (check.error || "請檢查 API Key 或網絡。") }); } catch (err) { setResult({ ok: false, error: err.message }); } finally { setBusy(""); } }; const configured = !!status.configured; const connection = status.connection || {}; const connected = configured && !!(status.connected || connection.ok || status.connection_status === "connected"); const failed = configured && (status.connection_status === "failed" || connection.status === "failed"); const showEditor = !connected || editing; const badgeClass = connected ? "badge-ok" : failed ? "badge-danger" : "badge-warn"; const badgeText = connected ? "可連接" : failed ? "連接失敗" : configured ? "待驗證" : "未配置"; const displayModel = connected ? (status.model || connection.model || "—") : "—"; return ( {badgeText}}>
全局狀態
{badgeText}
共用 Key
{status.masked_key || "—"}
當前模型
{displayModel}
最近驗證
{connection.checked_at || "—"}
{connected && (
語音功能連接正常，所有用戶會共用資料庫中的全局 key（識別＋朗讀）。
)} {failed && (
連接失敗：{connection.error || "請檢查 API Key 或服務器網絡。"}
)} {showEditor && (
)} {result && (
{result.ok ? (result.message || `驗證成功，延遲 ${result.latency_ms || "—"} ms。`) : `驗證失敗：${result.error || "請檢查 API Key 或網絡。"}`}
)}
); }; const postJson = (path, body) => settingsJson(path, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }); const downloadDatabaseCsvZip = async (includeViews = false) => { const qs = includeViews ? "?include_views=1" : ""; const res = await (window.authFetch || fetch)(`${SETTINGS_API_BASE}/api/database/export-csv${qs}`); if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data.error || res.statusText || "導出失敗"); } const blob = await res.blob(); const cd = res.headers.get("Content-Disposition") || ""; let filename = "database-csv-export.zip"; const match = cd.match(/filename\*=UTF-8''([^;]+)/); if (match) { try { filename = decodeURIComponent(match[1].replace(/"/g, "")); } catch (_) {} } const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); return { filename, size: blob.size }; }; // 通用編輯浮窗外殼 const SetModal = ({ title, onClose, onSubmit, busy, error, submitLabel, children }) => (
e.stopPropagation()} onSubmit={(e) => { e.preventDefault(); onSubmit(); }} className="card col gap-14" style={{ width: "min(480px, 100%)", padding: 24, maxHeight: "86vh", overflowY: "auto" }}>
{title}
{children} {error &&
⚠ {error}
}
); // 導航設計:AI 依公司行業自動編排側欄(改名/排序/隱藏),可預覽再採用;也支持手動微調 const buildNavGrouped = (catalog, items) => { const order = []; const byGroup = {}; catalog.forEach((c, idx) => { if (!byGroup[c.group]) { byGroup[c.group] = []; order.push(c.group); } const ov = items[c.id] || {}; byGroup[c.group].push({ ...c, _idx: idx, curLabel: ov.label || c.default_label, hidden: !!ov.hidden, order: ov.order != null ? ov.order : idx }); }); return order.map((g) => ({ group: g, items: byGroup[g].slice().sort((a, b) => a.order - b.order) })); }; const NavDesignSet = () => { const [catalog, setCatalog] = useStateSet([]); const [cfg, setCfg] = useStateSet({ items: {} }); const [desc, setDesc] = useStateSet(""); const [rationale, setRationale] = useStateSet(""); const [busy, setBusy] = useStateSet(""); const [msg, setMsg] = useStateSet(null); const [dirty, setDirty] = useStateSet(false); useEffectSet(() => { settingsJson("/api/nav").then((d) => { setCatalog(d.catalog || []); setCfg(d.config && d.config.items ? d.config : { items: {} }); }).catch((e) => setMsg({ ok: false, error: e.message })); }, []); const grouped = buildNavGrouped(catalog, cfg.items); const move = (groupName, id, dir) => { const g = grouped.find((x) => x.group === groupName); if (!g) return; const arr = g.items.map((i) => i.id); const i = arr.indexOf(id); const j = i + dir; if (j < 0 || j >= arr.length) return; [arr[i], arr[j]] = [arr[j], arr[i]]; const items = { ...cfg.items }; arr.forEach((cid, seq) => { items[cid] = { ...(items[cid] || {}), order: seq }; }); setCfg({ ...cfg, items }); setDirty(true); }; const toggleHide = (id) => { if (id === "settings") return; const ov = { ...(cfg.items[id] || {}) }; if (ov.hidden) delete ov.hidden; else ov.hidden = true; const items = { ...cfg.items, [id]: ov }; if (Object.keys(ov).length === 0) delete items[id]; setCfg({ ...cfg, items }); setDirty(true); }; const setLabel = (id, val, def) => { const ov = { ...(cfg.items[id] || {}) }; const v = (val || "").trim(); if (!v || v === def) delete ov.label; else ov.label = v.slice(0, 40); const items = { ...cfg.items, [id]: ov }; if (Object.keys(ov).length === 0) delete items[id]; setCfg({ ...cfg, items }); setDirty(true); }; const aiDesign = () => { setBusy("ai"); setMsg(null); postJson("/api/nav/ai-design", { description: desc.trim() || undefined }) .then((d) => { setCfg(d.config && d.config.items ? d.config : { items: {} }); setRationale(d.rationale || ""); setDirty(true); setMsg({ ok: !!d.ai, message: d.ai ? "AI 已生成導航設計,核對下方預覽後點「保存導航」生效。" : (d.rationale || "AI 未生成設計"), error: d.ai ? undefined : (d.rationale || "AI 未生成設計") }); }) .catch((e) => setMsg({ ok: false, error: e.message })) .finally(() => setBusy("")); }; const save = () => { setBusy("save"); setMsg(null); postJson("/api/nav/save", { items: cfg.items }) .then(() => { setDirty(false); setMsg({ ok: true, message: "導航已保存。公司成員下次刷新或重新登入即可看到新導航。" }); }) .catch((e) => setMsg({ ok: false, error: e.message })) .finally(() => setBusy("")); }; const resetDefault = () => { setCfg({ items: {} }); setRationale(""); setDirty(true); setMsg(null); }; return ( <> 有未保存改動 : 已是最新}>