feat: 全站 PageShell 设计系统与专业 UI 统一
- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架 - index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩） - 全站路由页接入 PageShell，云账单三 Tab 为标杆 - 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化 - 登录页/侧栏/顶栏去渐变光球，企业克制风 - 修复 AIAlertAnalyzer JSX 与构建依赖导入问题
This commit is contained in:
Logan committed
1 parent
1acb0c49af
commit
e363ded445
213 files changed
+7148
-6818
No files matched your search
@@ -163,55 +163,55 @@ export function PodFileBrowser({
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70" onClick={() => onOpenChange(false)}>
|
||||
<div
|
||||
className="bg-slate-900 border border-slate-700 rounded-xl w-[90vw] max-w-5xl h-[80vh] flex flex-col shadow-2xl"
|
||||
className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl w-[90vw] max-w-5xl h-[80vh] flex flex-col shadow-2xl"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-3 border-b border-slate-700 shrink-0 gap-3">
|
||||
<div className="flex items-center justify-between p-3 border-b border-[var(--dg-border)] shrink-0 gap-3">
|
||||
<div className="flex items-center gap-2 min-w-0 flex-1">
|
||||
<HardDrive className="h-4 w-4 shrink-0 text-amber-400" />
|
||||
<span className="text-sm font-semibold text-slate-200 truncate" title={podName}>文件: {podName}</span>
|
||||
<Badge variant="outline" className="border-slate-700 text-slate-400 text-[10px] shrink-0">{namespace}</Badge>
|
||||
<HardDrive className="h-4 w-4 shrink-0 dg-text-yellow" />
|
||||
<span className="text-sm font-semibold text-[var(--dg-text-primary)] truncate" title={podName}>文件: {podName}</span>
|
||||
<Badge variant="outline" className="border-[var(--dg-border)] dg-text-secondary text-[10px] shrink-0">{namespace}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{containers.length > 0 && (
|
||||
<select
|
||||
value={container}
|
||||
onChange={(e) => { setContainer(e.target.value); }}
|
||||
className="bg-slate-800 border border-slate-700 rounded text-xs text-slate-300 px-2 py-1"
|
||||
className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-xs text-[var(--dg-text-secondary)] px-2 py-1"
|
||||
>
|
||||
{containers.map((c) => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
)}
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 text-slate-400" onClick={() => onOpenChange(false)}>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7 dg-text-secondary" onClick={() => onOpenChange(false)}>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb + Actions */}
|
||||
<div className="flex items-center justify-between p-2 border-b border-slate-800 shrink-0">
|
||||
<div className="flex items-center gap-1 text-xs text-slate-400">
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 text-slate-500" onClick={handleGoUp} disabled={currentPath === '/'}>
|
||||
<div className="flex items-center justify-between p-2 border-b border-[var(--dg-border)] shrink-0">
|
||||
<div className="flex items-center gap-1 text-xs dg-text-secondary">
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 dg-text-muted" onClick={handleGoUp} disabled={currentPath === '/'}>
|
||||
<ArrowLeft className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<button className="hover:text-slate-200" onClick={() => loadFiles('/')}>root</button>
|
||||
<button className="hover:text-[var(--dg-text-primary)]" onClick={() => loadFiles('/')}>root</button>
|
||||
{pathSegments.map((seg, i) => {
|
||||
const path = `/${pathSegments.slice(0, i + 1).join('/')}`;
|
||||
return (
|
||||
<span key={path} className="flex items-center gap-1">
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
<button className="hover:text-slate-200" onClick={() => loadFiles(path)}>{seg}</button>
|
||||
<button className="hover:text-[var(--dg-text-primary)]" onClick={() => loadFiles(path)}>{seg}</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="file" ref={fileInputRef} className="hidden" onChange={handleUpload} />
|
||||
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
|
||||
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => fileInputRef.current?.click()} disabled={uploading}>
|
||||
{uploading ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : <Upload className="h-3 w-3 mr-1" />}上传
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" className="h-7 border-slate-700 text-slate-300 text-xs" onClick={() => loadFiles(currentPath)} disabled={loading}>
|
||||
<Button size="sm" variant="outline" className="h-7 border-[var(--dg-border)] text-[var(--dg-text-secondary)] text-xs" onClick={() => loadFiles(currentPath)} disabled={loading}>
|
||||
{loading ? <Loader2 className="h-3 w-3 animate-spin" /> : <RefreshCw className="h-3 w-3" />}
|
||||
</Button>
|
||||
</div>
|
||||
@@ -220,34 +220,34 @@ export function PodFileBrowser({
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-hidden flex">
|
||||
{/* File list */}
|
||||
<div className={`${preview ? 'w-1/2' : 'w-full'} overflow-auto p-2 border-r border-slate-800`}>
|
||||
{error && <p className="text-xs text-red-400 p-2">{error}</p>}
|
||||
<div className={`${preview ? 'w-1/2' : 'w-full'} overflow-auto p-2 border-r border-[var(--dg-border)]`}>
|
||||
{error && <p className="text-xs dg-text-red p-2">{error}</p>}
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin text-slate-500" /></div>
|
||||
<div className="flex items-center justify-center h-32"><Loader2 className="h-5 w-5 animate-spin dg-text-muted" /></div>
|
||||
) : entries.length === 0 ? (
|
||||
<p className="text-xs text-slate-500 p-4 text-center">空目录</p>
|
||||
<p className="text-xs dg-text-muted p-4 text-center">空目录</p>
|
||||
) : (
|
||||
<div className="space-y-0.5">
|
||||
{entries.sort((a, b) => (a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1)).map((entry) => (
|
||||
<div
|
||||
key={entry.name}
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-slate-800/50 cursor-pointer group"
|
||||
className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-[var(--dg-bg-hover)] cursor-pointer group"
|
||||
onClick={() => handleClick(entry)}
|
||||
>
|
||||
{entry.isDir ? (
|
||||
<Folder className="h-4 w-4 text-blue-400 shrink-0" />
|
||||
<Folder className="h-4 w-4 dg-text-blue shrink-0" />
|
||||
) : (
|
||||
<File className="h-4 w-4 text-slate-500 shrink-0" />
|
||||
<File className="h-4 w-4 dg-text-muted shrink-0" />
|
||||
)}
|
||||
<span className={`text-xs truncate ${entry.isDir ? 'text-blue-300' : 'text-slate-300'}`}>
|
||||
<span className={`text-xs truncate ${entry.isDir ? 'text-blue-300' : 'text-[var(--dg-text-secondary)]'}`}>
|
||||
{entry.name}
|
||||
</span>
|
||||
{!entry.isDir && (
|
||||
<span className="text-[10px] text-slate-600 ml-auto shrink-0">{formatSize(entry.size)}</span>
|
||||
<span className="text-[10px] dg-text-muted ml-auto shrink-0">{formatSize(entry.size)}</span>
|
||||
)}
|
||||
{!entry.isDir && (
|
||||
<Button
|
||||
variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 text-slate-400 hover:text-emerald-400 shrink-0"
|
||||
variant="ghost" size="icon" className="h-5 w-5 opacity-0 group-hover:opacity-100 dg-text-secondary hover:dg-text-green shrink-0"
|
||||
onClick={(e) => { e.stopPropagation(); handleDownload(entry.name); }}
|
||||
title="下载"
|
||||
>
|
||||
@@ -263,14 +263,14 @@ export function PodFileBrowser({
|
||||
{/* Preview */}
|
||||
{preview && (
|
||||
<div className="w-1/2 flex flex-col overflow-hidden">
|
||||
<div className="flex items-center justify-between p-2 border-b border-slate-800 shrink-0">
|
||||
<span className="text-xs text-slate-300 font-mono">{preview.file}</span>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 text-slate-400" onClick={() => setPreview(null)}>
|
||||
<div className="flex items-center justify-between p-2 border-b border-[var(--dg-border)] shrink-0">
|
||||
<span className="text-xs text-[var(--dg-text-secondary)] font-mono">{preview.file}</span>
|
||||
<Button variant="ghost" size="icon" className="h-6 w-6 dg-text-secondary" onClick={() => setPreview(null)}>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto p-3">
|
||||
<pre className="text-xs text-slate-300 font-mono whitespace-pre-wrap break-all bg-slate-950 rounded p-3">
|
||||
<pre className="text-xs text-[var(--dg-text-secondary)] font-mono whitespace-pre-wrap break-all bg-[var(--dg-bg-primary)] rounded p-3">
|
||||
{preview.content || '(空文件)'}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user