refactor(web): normalize global config theme surface
This commit is contained in:
parent
b8864ea276
commit
df00e977d4
@ -98,7 +98,7 @@ Current public bundle:
|
|||||||
- [x] Normalize `web/src/components/TradeProfileManager.tsx`
|
- [x] Normalize `web/src/components/TradeProfileManager.tsx`
|
||||||
- [x] Normalize `web/src/components/StrategyWizard.tsx`
|
- [x] Normalize `web/src/components/StrategyWizard.tsx`
|
||||||
- [x] Normalize `web/src/tabs/ReconciliationAuditPanel.tsx`
|
- [x] Normalize `web/src/tabs/ReconciliationAuditPanel.tsx`
|
||||||
- [ ] Normalize `web/src/components/GlobalConfigManager.tsx`
|
- [x] Normalize `web/src/components/GlobalConfigManager.tsx`
|
||||||
- [ ] Normalize `web/src/components/EntryForm.tsx`
|
- [ ] Normalize `web/src/components/EntryForm.tsx`
|
||||||
- [ ] Normalize remaining old admin/config surfaces
|
- [ ] Normalize remaining old admin/config surfaces
|
||||||
- [ ] Remove remaining dark-only bespoke surface systems
|
- [ ] Remove remaining dark-only bespoke surface systems
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Save, AlertCircle, CheckCircle } from 'lucide-react';
|
import { Save, AlertCircle, CheckCircle, Globe2 } from 'lucide-react';
|
||||||
import { fetchDynamicConfigItems, upsertDynamicConfigItems } from '../lib/dynamicConfigApi';
|
import { fetchDynamicConfigItems, upsertDynamicConfigItems } from '../lib/dynamicConfigApi';
|
||||||
|
import { Button } from './ui/button';
|
||||||
|
import { Card } from './ui/card';
|
||||||
|
import { Input } from './ui/input';
|
||||||
|
|
||||||
interface ConfigItem {
|
interface ConfigItem {
|
||||||
key: string;
|
key: string;
|
||||||
@ -46,16 +49,17 @@ export const GlobalConfigManager = () => {
|
|||||||
setSaving(false);
|
setSaving(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
if (loading) return <div className="p-4 text-gray-500">Loading system configuration...</div>;
|
if (loading) return <div className="p-4 text-[var(--muted-foreground)]">Loading system configuration...</div>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-black/20 border border-white/5 rounded-xl p-6">
|
<Card className="rounded-xl p-6">
|
||||||
<h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
|
<h3 className="mb-4 flex items-center gap-2 text-lg font-semibold text-[var(--foreground)]">
|
||||||
🌍 Global Bot Configuration
|
<Globe2 size={18} className="text-[var(--accent)]" />
|
||||||
|
Global Bot Configuration
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
{message && (
|
{message && (
|
||||||
<div className={`mb-4 p-3 rounded-lg flex items-center gap-2 text-sm ${message.type === 'success' ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'
|
<div className={`mb-4 flex items-center gap-2 rounded-lg border p-3 text-sm ${message.type === 'success' ? 'border-green-500/20 bg-green-500/10 text-green-600 dark:text-green-400' : 'border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400'
|
||||||
}`}>
|
}`}>
|
||||||
{message.type === 'success' ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
|
{message.type === 'success' ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
|
||||||
{message.text}
|
{message.text}
|
||||||
@ -64,40 +68,42 @@ export const GlobalConfigManager = () => {
|
|||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{configs.map((config) => (
|
{configs.map((config) => (
|
||||||
<div key={config.key} className="flex flex-col gap-1 pb-4 border-b border-white/5 last:border-0 last:pb-0">
|
<div key={config.key} className="flex flex-col gap-1 border-b border-[var(--border)] pb-4 last:border-0 last:pb-0">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<label className="text-xs font-bold text-orange-400 uppercase tracking-wider">{config.key}</label>
|
<label className="text-xs font-bold uppercase tracking-wider text-[var(--accent)]">{config.key}</label>
|
||||||
<button
|
<Button
|
||||||
onClick={() => handleSave(config)}
|
onClick={() => handleSave(config)}
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
className="text-xs bg-orange-500/20 hover:bg-orange-500/40 text-orange-300 px-2 py-1 rounded border border-orange-500/30 transition-colors flex items-center gap-1"
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 rounded px-2 text-xs"
|
||||||
>
|
>
|
||||||
<Save size={12} /> Save
|
<Save size={12} /> Save
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
value={config.value}
|
value={config.value}
|
||||||
onChange={(e) => handleChange(config.key, e.target.value)}
|
onChange={(e) => handleChange(config.key, e.target.value)}
|
||||||
className="bg-black/40 border border-white/10 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-orange-500/50"
|
className="h-10 rounded px-3 py-2 text-sm"
|
||||||
/>
|
/>
|
||||||
<p className="text-[10px] text-gray-500 italic">{config.description || 'System setting used by the trading core.'}</p>
|
<p className="text-[10px] italic text-[var(--muted-foreground)]">{config.description || 'System setting used by the trading core.'}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{configs.length === 0 && (
|
{configs.length === 0 && (
|
||||||
<div className="text-center py-8 border border-dashed border-white/10 rounded-lg">
|
<div className="rounded-lg border border-dashed border-[var(--border)] py-8 text-center">
|
||||||
<p className="text-sm text-gray-500 mb-2">No dynamic configuration entries found.</p>
|
<p className="mb-2 text-sm text-[var(--muted-foreground)]">No dynamic configuration entries found.</p>
|
||||||
<p className="text-xs text-gray-600">The bot is currently using .env defaults.</p>
|
<p className="text-xs text-[var(--muted-foreground)]">The bot is currently using .env defaults.</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-6 pt-4 border-t border-white/10">
|
<div className="mt-6 border-t border-[var(--border)] pt-4">
|
||||||
<p className="text-[10px] text-gray-400 leading-relaxed">
|
<p className="text-[10px] leading-relaxed text-[var(--muted-foreground)]">
|
||||||
<strong>Note:</strong> Changes to global variables usually require a bot restart to take full effect (e.g. changing intervals or providers). Symbols may update dynamically depending on strategy implementation.
|
<strong>Note:</strong> Changes to global variables usually require a bot restart to take full effect (e.g. changing intervals or providers). Symbols may update dynamically depending on strategy implementation.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user