240 lines
9.2 KiB
TypeScript
240 lines
9.2 KiB
TypeScript
|
import { Settings2 } from "lucide-react"
|
|||
|
|
|
|||
|
|
import type { RoleView, WorkflowConfig } from "@/App"
|
|||
|
|
import { Badge } from "@/components/ui/badge"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|||
|
|
import { Input } from "@/components/ui/input"
|
|||
|
|
|
|||
|
|
type SystemSettingsProps = {
|
|||
|
|
roleView: RoleView
|
|||
|
|
onRoleViewChange: (role: RoleView) => void
|
|||
|
|
workflowConfig: WorkflowConfig
|
|||
|
|
onWorkflowConfigChange: (next: WorkflowConfig) => void
|
|||
|
|
auditLogs: string[]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function SystemSettings({
|
|||
|
|
roleView,
|
|||
|
|
onRoleViewChange,
|
|||
|
|
workflowConfig,
|
|||
|
|
onWorkflowConfigChange,
|
|||
|
|
auditLogs,
|
|||
|
|
}: SystemSettingsProps) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex flex-col gap-6 p-8">
|
|||
|
|
<div className="flex flex-col gap-1">
|
|||
|
|
<h1 className="text-3xl font-bold tracking-tight">系统设置</h1>
|
|||
|
|
<p className="text-muted-foreground">管理角色视角、审核发布策略与同步规则。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">角色视角切换</CardTitle>
|
|||
|
|
<CardDescription>切换后将影响车型库中的可见操作与可执行动作。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="flex flex-wrap gap-2">
|
|||
|
|
<Button
|
|||
|
|
variant={roleView === "content-ops" ? "default" : "outline"}
|
|||
|
|
onClick={() => onRoleViewChange("content-ops")}
|
|||
|
|
>
|
|||
|
|
内容运营专员
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant={roleView === "biz-market" ? "default" : "outline"}
|
|||
|
|
onClick={() => onRoleViewChange("biz-market")}
|
|||
|
|
>
|
|||
|
|
业务/市场负责人
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant={roleView === "pm-ops" ? "default" : "outline"}
|
|||
|
|
onClick={() => onRoleViewChange("pm-ops")}
|
|||
|
|
>
|
|||
|
|
项目与运维负责人
|
|||
|
|
</Button>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">发布策略</CardTitle>
|
|||
|
|
<CardDescription>覆盖预发布、撤回与发布时间策略。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3 text-sm">
|
|||
|
|
<div className="flex items-center justify-between rounded-lg border p-3">
|
|||
|
|
<span>启用预发布</span>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant={workflowConfig.enablePrePublish ? "default" : "outline"}
|
|||
|
|
onClick={() =>
|
|||
|
|
onWorkflowConfigChange({
|
|||
|
|
...workflowConfig,
|
|||
|
|
enablePrePublish: !workflowConfig.enablePrePublish,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{workflowConfig.enablePrePublish ? "已开启" : "已关闭"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center justify-between rounded-lg border p-3">
|
|||
|
|
<span>允许发布后撤回</span>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant={workflowConfig.allowRecall ? "default" : "outline"}
|
|||
|
|
onClick={() =>
|
|||
|
|
onWorkflowConfigChange({
|
|||
|
|
...workflowConfig,
|
|||
|
|
allowRecall: !workflowConfig.allowRecall,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{workflowConfig.allowRecall ? "已开启" : "已关闭"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center justify-between rounded-lg border p-3">
|
|||
|
|
<span>发布方式</span>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant={workflowConfig.publishStrategy === "manual" ? "default" : "outline"}
|
|||
|
|
onClick={() =>
|
|||
|
|
onWorkflowConfigChange({ ...workflowConfig, publishStrategy: "manual" })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
手动发布
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant={workflowConfig.publishStrategy === "scheduled" ? "default" : "outline"}
|
|||
|
|
onClick={() =>
|
|||
|
|
onWorkflowConfigChange({ ...workflowConfig, publishStrategy: "scheduled" })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
定时发布
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{workflowConfig.publishStrategy === "scheduled" && (
|
|||
|
|
<div className="grid gap-2 rounded-lg border p-3">
|
|||
|
|
<span className="text-muted-foreground">默认发布时间（用于新建内容）</span>
|
|||
|
|
<Input
|
|||
|
|
type="time"
|
|||
|
|
value={workflowConfig.defaultPublishTime}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
onWorkflowConfigChange({
|
|||
|
|
...workflowConfig,
|
|||
|
|
defaultPublishTime: e.target.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">内容与同步规则</CardTitle>
|
|||
|
|
<CardDescription>配置字段模板与同步任务策略。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3 text-sm">
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<span className="text-muted-foreground">同步频率</span>
|
|||
|
|
<div className="flex gap-2">
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant={workflowConfig.syncFrequency === "daily" ? "default" : "outline"}
|
|||
|
|
onClick={() =>
|
|||
|
|
onWorkflowConfigChange({ ...workflowConfig, syncFrequency: "daily" })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
每日
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant={workflowConfig.syncFrequency === "weekly" ? "default" : "outline"}
|
|||
|
|
onClick={() =>
|
|||
|
|
onWorkflowConfigChange({ ...workflowConfig, syncFrequency: "weekly" })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
每周
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<span className="text-muted-foreground">同步执行时间</span>
|
|||
|
|
<Input
|
|||
|
|
type="time"
|
|||
|
|
value={workflowConfig.syncExecutionTime}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
onWorkflowConfigChange({
|
|||
|
|
...workflowConfig,
|
|||
|
|
syncExecutionTime: e.target.value,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid gap-2">
|
|||
|
|
<span className="text-muted-foreground">失败重试次数</span>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
min={0}
|
|||
|
|
max={5}
|
|||
|
|
value={workflowConfig.retryCount}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
onWorkflowConfigChange({
|
|||
|
|
...workflowConfig,
|
|||
|
|
retryCount: Number(e.target.value || 0),
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center justify-between rounded-lg border p-3">
|
|||
|
|
<span>同步后人工确认</span>
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant={workflowConfig.manualConfirmSync ? "default" : "outline"}
|
|||
|
|
onClick={() =>
|
|||
|
|
onWorkflowConfigChange({
|
|||
|
|
...workflowConfig,
|
|||
|
|
manualConfirmSync: !workflowConfig.manualConfirmSync,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{workflowConfig.manualConfirmSync ? "需要确认" : "自动通过"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
需要确认：同步完成后进入待确认队列，由项目与运维负责人核查差异摘要并手动放行。
|
|||
|
|
</p>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="border-none shadow-sm bg-white">
|
|||
|
|
<CardHeader>
|
|||
|
|
<CardTitle className="text-lg font-bold">变更与审计</CardTitle>
|
|||
|
|
<CardDescription>展示最近关键操作，用于审核与回溯演示。</CardDescription>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3">
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<Settings2 className="h-4 w-4 text-audi-red" />
|
|||
|
|
<span className="text-sm font-medium">最近 12 条关键变更</span>
|
|||
|
|
<Badge variant="outline" className="ml-auto">
|
|||
|
|
{auditLogs.length} 条
|
|||
|
|
</Badge>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{auditLogs.map((item, idx) => (
|
|||
|
|
<div key={`${item}-${idx}`} className="rounded-lg border px-3 py-2 text-sm text-muted-foreground">
|
|||
|
|
{item}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|