Initial commit
This commit is contained in:
9
audi-content-portal/.env.example
Normal file
9
audi-content-portal/.env.example
Normal file
@@ -0,0 +1,9 @@
|
||||
# GEMINI_API_KEY: Required for Gemini AI API calls.
|
||||
# AI Studio automatically injects this at runtime from user secrets.
|
||||
# Users configure this via the Secrets panel in the AI Studio UI.
|
||||
GEMINI_API_KEY="MY_GEMINI_API_KEY"
|
||||
|
||||
# APP_URL: The URL where this applet is hosted.
|
||||
# AI Studio automatically injects this at runtime with the Cloud Run service URL.
|
||||
# Used for self-referential links, OAuth callbacks, and API endpoints.
|
||||
APP_URL="MY_APP_URL"
|
||||
8
audi-content-portal/.gitignore
vendored
Normal file
8
audi-content-portal/.gitignore
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
node_modules/
|
||||
build/
|
||||
dist/
|
||||
coverage/
|
||||
.DS_Store
|
||||
*.log
|
||||
.env*
|
||||
!.env.example
|
||||
20
audi-content-portal/README.md
Normal file
20
audi-content-portal/README.md
Normal file
@@ -0,0 +1,20 @@
|
||||
<div align="center">
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
</div>
|
||||
|
||||
# Run and deploy your AI Studio app
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/446d51dc-3773-4299-8003-801daf14fe26
|
||||
|
||||
## Run Locally
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
25
audi-content-portal/components.json
Normal file
25
audi-content-portal/components.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "base-nova",
|
||||
"rsc": false,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/index.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"iconLibrary": "lucide",
|
||||
"rtl": false,
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"menuColor": "default",
|
||||
"menuAccent": "subtle",
|
||||
"registries": {}
|
||||
}
|
||||
19
audi-content-portal/hooks/use-mobile.ts
Normal file
19
audi-content-portal/hooks/use-mobile.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
13
audi-content-portal/index.html
Normal file
13
audi-content-portal/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My Google AI Studio App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
6
audi-content-portal/lib/utils.ts
Normal file
6
audi-content-portal/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
5
audi-content-portal/metadata.json
Normal file
5
audi-content-portal/metadata.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Audi Content & Operation Portal",
|
||||
"description": "A professional, corporate 'Smart Ops' portal for Audi content management and lead operations.",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
8324
audi-content-portal/package-lock.json
generated
Normal file
8324
audi-content-portal/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
audi-content-portal/package.json
Normal file
43
audi-content-portal/package.json
Normal file
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "react-example",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"clean": "rm -rf dist",
|
||||
"lint": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@base-ui/react": "^1.3.0",
|
||||
"@fontsource-variable/geist": "^5.2.8",
|
||||
"@google/genai": "^1.29.0",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^4.21.2",
|
||||
"lucide-react": "^0.546.0",
|
||||
"motion": "^12.23.24",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"recharts": "^3.8.1",
|
||||
"shadcn": "^4.2.0",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"vite": "^6.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.21",
|
||||
"@types/node": "^22.14.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
154
audi-content-portal/src/App.tsx
Normal file
154
audi-content-portal/src/App.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import * as React from "react"
|
||||
import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
|
||||
import { AppSidebar } from "@/components/layout/AppSidebar"
|
||||
import { Dashboard } from "@/components/dashboard/Dashboard"
|
||||
import { CarLibrary } from "@/components/car-library/CarLibrary"
|
||||
import { MiniAppContentLibrary } from "@/components/content-library/MiniAppContentLibrary"
|
||||
import { LeadManagement } from "@/components/leads/LeadManagement"
|
||||
import { UserAccessManagement } from "@/components/users/UserAccessManagement"
|
||||
import { SystemSettings } from "@/components/settings/SystemSettings"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Bell, Search, User } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
type NewContentRequest = {
|
||||
sourceCarId: string
|
||||
sourceCarName: string
|
||||
requestId: string
|
||||
}
|
||||
|
||||
export type RoleView = "biz-market" | "content-ops" | "pm-ops"
|
||||
|
||||
export type WorkflowConfig = {
|
||||
enablePrePublish: boolean
|
||||
allowRecall: boolean
|
||||
publishStrategy: "manual" | "scheduled"
|
||||
defaultPublishTime: string
|
||||
syncFrequency: "daily" | "weekly"
|
||||
syncExecutionTime: string
|
||||
retryCount: number
|
||||
manualConfirmSync: boolean
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [activeTab, setActiveTab] = React.useState("dashboard")
|
||||
const [roleView, setRoleView] = React.useState<RoleView>("content-ops")
|
||||
const [workflowConfig, setWorkflowConfig] = React.useState<WorkflowConfig>({
|
||||
enablePrePublish: true,
|
||||
allowRecall: true,
|
||||
publishStrategy: "manual",
|
||||
defaultPublishTime: "10:00",
|
||||
syncFrequency: "weekly",
|
||||
syncExecutionTime: "02:00",
|
||||
retryCount: 2,
|
||||
manualConfirmSync: true,
|
||||
})
|
||||
const [auditLogs, setAuditLogs] = React.useState<string[]>([
|
||||
"内容运营专员提交 Audi A6L 审核（2026-04-11 09:20）",
|
||||
"业务/市场负责人批准 Audi Q5L 进入预发布（2026-04-10 15:45）",
|
||||
"内容运营专员发布 Audi A3 Sportback（2026-04-09 11:30）",
|
||||
])
|
||||
const [pendingNewContent, setPendingNewContent] = React.useState<NewContentRequest | null>(null)
|
||||
|
||||
const appendLog = (message: string) => {
|
||||
const now = new Date().toLocaleString("zh-CN", { hour12: false })
|
||||
setAuditLogs((prev) => [`${message}（${now}）`, ...prev].slice(0, 12))
|
||||
}
|
||||
|
||||
const handleCreateContentFromCar = (sourceCarId: string, sourceCarName: string) => {
|
||||
setPendingNewContent({
|
||||
sourceCarId,
|
||||
sourceCarName,
|
||||
requestId: String(Date.now()),
|
||||
})
|
||||
appendLog(`内容运营专员基于官网 ${sourceCarName} 新建内容草稿`)
|
||||
setActiveTab("mini-content")
|
||||
}
|
||||
|
||||
const renderContent = () => {
|
||||
switch (activeTab) {
|
||||
case "dashboard":
|
||||
return <Dashboard />
|
||||
case "car-library":
|
||||
return (
|
||||
<CarLibrary
|
||||
roleView={roleView}
|
||||
workflowConfig={workflowConfig}
|
||||
onAddAuditLog={appendLog}
|
||||
onCreateContent={handleCreateContentFromCar}
|
||||
/>
|
||||
)
|
||||
case "mini-content":
|
||||
return (
|
||||
<MiniAppContentLibrary
|
||||
roleView={roleView}
|
||||
workflowConfig={workflowConfig}
|
||||
onAddAuditLog={appendLog}
|
||||
newContentRequest={pendingNewContent}
|
||||
/>
|
||||
)
|
||||
case "leads":
|
||||
return <LeadManagement />
|
||||
case "user-access":
|
||||
return <UserAccessManagement />
|
||||
case "settings":
|
||||
return (
|
||||
<SystemSettings
|
||||
roleView={roleView}
|
||||
onRoleViewChange={setRoleView}
|
||||
workflowConfig={workflowConfig}
|
||||
onWorkflowConfigChange={setWorkflowConfig}
|
||||
auditLogs={auditLogs}
|
||||
/>
|
||||
)
|
||||
default:
|
||||
return <Dashboard />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar activeTab={activeTab} setActiveTab={setActiveTab} />
|
||||
<SidebarInset className="bg-gray-50/50">
|
||||
<header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-white px-4 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
<Separator orientation="vertical" className="mr-2 h-4" />
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
<div className="text-sm font-medium text-muted-foreground">
|
||||
{activeTab === "dashboard" && "仪表盘"}
|
||||
{activeTab === "car-library" && "车型库"}
|
||||
{activeTab === "mini-content" && "小程序内容库"}
|
||||
{activeTab === "leads" && "潜客管理"}
|
||||
{activeTab === "user-access" && "用户与权限"}
|
||||
{activeTab === "settings" && "系统设置"}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground">
|
||||
<Search className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-9 w-9 text-muted-foreground">
|
||||
<Bell className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex items-center gap-2 pl-2 border-l">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-xs font-bold">Admin User</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{roleView === "biz-market" && "业务/市场负责人视角"}
|
||||
{roleView === "content-ops" && "内容运营专员视角"}
|
||||
{roleView === "pm-ops" && "项目与运维负责人视角"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-8 w-8 rounded-full bg-audi-black flex items-center justify-center text-white">
|
||||
<User size={16} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main className="flex-1 overflow-auto">
|
||||
{renderContent()}
|
||||
</main>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
283
audi-content-portal/src/components/car-library/CarLibrary.tsx
Normal file
283
audi-content-portal/src/components/car-library/CarLibrary.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
import * as React from "react"
|
||||
import { AlertCircle, CheckCircle2, Clock, Filter, Plus, RefreshCw, Search } 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"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
|
||||
type SyncStatus = "synced" | "pending" | "error"
|
||||
|
||||
type SourceCar = {
|
||||
id: string
|
||||
name: string
|
||||
officialTagline: string
|
||||
sourceUpdatedAt: string
|
||||
syncStatus: SyncStatus
|
||||
imageCount: number
|
||||
}
|
||||
|
||||
type SyncLog = {
|
||||
id: string
|
||||
time: string
|
||||
status: "success" | "failed"
|
||||
message: string
|
||||
}
|
||||
|
||||
type CarLibraryProps = {
|
||||
roleView: RoleView
|
||||
workflowConfig: WorkflowConfig
|
||||
onAddAuditLog: (message: string) => void
|
||||
onCreateContent?: (sourceCarId: string, sourceCarName: string) => void
|
||||
}
|
||||
|
||||
const SOURCE_CARS: SourceCar[] = [
|
||||
{
|
||||
id: "a3",
|
||||
name: "Audi A3 Sportback",
|
||||
officialTagline: "进取，不负期待",
|
||||
sourceUpdatedAt: "2026-04-11 09:30",
|
||||
syncStatus: "synced",
|
||||
imageCount: 8,
|
||||
},
|
||||
{
|
||||
id: "a4l",
|
||||
name: "Audi A4L",
|
||||
officialTagline: "做更强大的自己",
|
||||
sourceUpdatedAt: "2026-04-11 09:30",
|
||||
syncStatus: "synced",
|
||||
imageCount: 6,
|
||||
},
|
||||
{
|
||||
id: "a6l",
|
||||
name: "Audi A6L",
|
||||
officialTagline: "懂你，更懂未来",
|
||||
sourceUpdatedAt: "2026-04-10 14:20",
|
||||
syncStatus: "pending",
|
||||
imageCount: 5,
|
||||
},
|
||||
{
|
||||
id: "q5l",
|
||||
name: "Audi Q5L",
|
||||
officialTagline: "自由，由我定义",
|
||||
sourceUpdatedAt: "2026-04-10 09:15",
|
||||
syncStatus: "error",
|
||||
imageCount: 0,
|
||||
},
|
||||
]
|
||||
|
||||
const INITIAL_LOGS: SyncLog[] = [
|
||||
{ id: "l1", time: "2026-04-11 09:30", status: "success", message: "同步成功：4 个车型，素材 19 张" },
|
||||
{ id: "l2", time: "2026-04-10 09:15", status: "failed", message: "Audi Q5L 图片拉取失败：CDN 超时" },
|
||||
]
|
||||
|
||||
function syncBadge(status: SyncStatus) {
|
||||
if (status === "synced") {
|
||||
return (
|
||||
<Badge variant="outline" className="bg-emerald-50 text-emerald-700 border-emerald-200 gap-1">
|
||||
<CheckCircle2 className="h-3 w-3" />已同步
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
if (status === "pending") {
|
||||
return (
|
||||
<Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200 gap-1">
|
||||
<Clock className="h-3 w-3" />待同步
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Badge variant="outline" className="bg-rose-50 text-rose-700 border-rose-200 gap-1">
|
||||
<AlertCircle className="h-3 w-3" />同步失败
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
function nowString() {
|
||||
return new Date().toLocaleString("zh-CN", { hour12: false })
|
||||
}
|
||||
|
||||
export function CarLibrary({ onAddAuditLog, onCreateContent }: CarLibraryProps) {
|
||||
const [sourceCars, setSourceCars] = React.useState<SourceCar[]>(SOURCE_CARS)
|
||||
const [query, setQuery] = React.useState("")
|
||||
const [isSyncing, setIsSyncing] = React.useState(false)
|
||||
const [progress, setProgress] = React.useState(0)
|
||||
const [syncLogs, setSyncLogs] = React.useState<SyncLog[]>(INITIAL_LOGS)
|
||||
|
||||
const filtered = sourceCars.filter((car) => car.name.toLowerCase().includes(query.toLowerCase()))
|
||||
|
||||
const handleSync = () => {
|
||||
setIsSyncing(true)
|
||||
setProgress(0)
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setProgress((prev) => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval)
|
||||
const time = nowString()
|
||||
setSourceCars((curr) =>
|
||||
curr.map((car) => ({
|
||||
...car,
|
||||
sourceUpdatedAt: time,
|
||||
syncStatus: "synced",
|
||||
imageCount: car.imageCount || 4,
|
||||
}))
|
||||
)
|
||||
setSyncLogs((curr) => [
|
||||
{ id: String(Date.now()), time, status: "success", message: "手动同步完成：4 个车型已更新" },
|
||||
...curr,
|
||||
])
|
||||
onAddAuditLog("内容运营专员执行官网车型同步")
|
||||
setTimeout(() => setIsSyncing(false), 300)
|
||||
return 100
|
||||
}
|
||||
return prev + 4
|
||||
})
|
||||
}, 45)
|
||||
}
|
||||
|
||||
const retryFailedSync = (logId: string) => {
|
||||
const time = nowString()
|
||||
setSyncLogs((curr) =>
|
||||
curr.map((log) =>
|
||||
log.id === logId ? { ...log, status: "success", time, message: `${log.message} -> 已重试成功` } : log
|
||||
)
|
||||
)
|
||||
setSourceCars((curr) =>
|
||||
curr.map((car) => (car.syncStatus === "error" ? { ...car, syncStatus: "synced", sourceUpdatedAt: time, imageCount: 4 } : car))
|
||||
)
|
||||
onAddAuditLog("项目与运维负责人重试官网同步失败任务")
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight">车型库（官网同步源）</h1>
|
||||
<p className="text-muted-foreground">本页仅管理官网同步原始数据。编辑、审核、发布请前往“小程序内容库”。</p>
|
||||
</div>
|
||||
<Button onClick={handleSync} disabled={isSyncing} className="bg-audi-black hover:bg-audi-dark-gray text-white px-6">
|
||||
{isSyncing ? <RefreshCw className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
|
||||
从官网同步
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isSyncing && (
|
||||
<Card className="border-audi-red/20 bg-audi-red/5">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="font-medium text-audi-red">正在同步官网车型素材...</span>
|
||||
<span className="text-muted-foreground">{Math.round(progress)}%</span>
|
||||
</div>
|
||||
<Progress value={progress} className="h-2 bg-audi-red/10" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="text-lg font-bold">官网车型列表</CardTitle>
|
||||
<Badge variant="outline" className="text-xs">Source Entity: SourceCar</Badge>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full max-w-sm">
|
||||
<Search className="h-4 w-4 text-muted-foreground absolute ml-3" />
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="搜索官网车型名称..."
|
||||
className="pl-9 bg-gray-50/50 border-none"
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent border-b border-gray-100">
|
||||
<TableHead className="font-bold text-audi-black">车型名称</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">官网文案</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">图片数量</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">同步状态</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">最近同步</TableHead>
|
||||
<TableHead className="text-right font-bold text-audi-black">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((car) => (
|
||||
<TableRow key={car.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
|
||||
<TableCell className="font-medium">{car.name}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{car.officialTagline}</TableCell>
|
||||
<TableCell>{car.imageCount} 张</TableCell>
|
||||
<TableCell>{syncBadge(car.syncStatus)}</TableCell>
|
||||
<TableCell className="text-muted-foreground text-xs">{car.sourceUpdatedAt}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{car.syncStatus === "synced" ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
onCreateContent?.(car.id, car.name)
|
||||
onAddAuditLog(`内容运营专员基于官网 ${car.name} 新建内容草稿`)
|
||||
}}
|
||||
>
|
||||
<Plus className="mr-1 h-3.5 w-3.5" />新建内容
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
disabled
|
||||
title={car.syncStatus === "pending" ? "车型待同步，完成同步后可新建内容" : "车型同步失败，请先重试同步"}
|
||||
>
|
||||
<Plus className="mr-1 h-3.5 w-3.5" />新建内容
|
||||
</Button>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</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-2">
|
||||
{syncLogs.map((log) => (
|
||||
<div key={log.id} className="flex items-center gap-3 rounded-lg border p-3 text-sm">
|
||||
{log.status === "success" ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-600" />
|
||||
) : (
|
||||
<AlertCircle className="h-4 w-4 text-rose-600" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">{log.message}</p>
|
||||
<p className="text-xs text-muted-foreground">{log.time}</p>
|
||||
</div>
|
||||
{log.status === "failed" && (
|
||||
<Button size="sm" variant="outline" onClick={() => retryFailedSync(log.id)}>
|
||||
<RefreshCw className="mr-1 h-3.5 w-3.5" />重试
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,621 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
ArrowLeft,
|
||||
Eye,
|
||||
Pencil,
|
||||
Send,
|
||||
ShieldCheck,
|
||||
Undo2,
|
||||
Upload,
|
||||
XCircle,
|
||||
} 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"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
|
||||
type WorkflowStatus = "draft" | "pending" | "prepublished" | "published" | "rejected" | "recalled"
|
||||
|
||||
type MiniAppContent = {
|
||||
id: string
|
||||
sourceCarId: string
|
||||
sourceCarName: string
|
||||
title: string
|
||||
subtitle: string
|
||||
highlights: string
|
||||
description: string
|
||||
ctaText: string
|
||||
scheduledPublishAt: string
|
||||
imageUrls: string[]
|
||||
workflowStatus: WorkflowStatus
|
||||
updatedBy: string
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
type MiniAppContentLibraryProps = {
|
||||
roleView: RoleView
|
||||
workflowConfig: WorkflowConfig
|
||||
onAddAuditLog: (message: string) => void
|
||||
newContentRequest?: {
|
||||
sourceCarId: string
|
||||
sourceCarName: string
|
||||
requestId: string
|
||||
} | null
|
||||
}
|
||||
|
||||
const CONTENTS: MiniAppContent[] = [
|
||||
{
|
||||
id: "c1",
|
||||
sourceCarId: "a3",
|
||||
sourceCarName: "Audi A3 Sportback",
|
||||
title: "Audi A3 Sportback",
|
||||
subtitle: "进取，不负期待",
|
||||
highlights: "数字座舱\n城市通勤\n智能互联",
|
||||
description: "适合城市用户的豪华紧凑车型，兼顾效率与智能体验。",
|
||||
ctaText: "立即预约试驾",
|
||||
scheduledPublishAt: "",
|
||||
imageUrls: [
|
||||
"https://images.unsplash.com/photo-1606152421802-db97b9c7a11b?auto=format&fit=crop&q=80&w=1200",
|
||||
"https://picsum.photos/seed/a3-content-1/900/600",
|
||||
"https://picsum.photos/seed/a3-content-2/900/600",
|
||||
],
|
||||
workflowStatus: "published",
|
||||
updatedBy: "内容运营专员",
|
||||
updatedAt: "2026-04-11 10:02",
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
sourceCarId: "a4l",
|
||||
sourceCarName: "Audi A4L",
|
||||
title: "Audi A4L 四月限时礼遇",
|
||||
subtitle: "豪华与性能平衡",
|
||||
highlights: "quattro\n商务舒适\n限时礼遇",
|
||||
description: "面向商务人群的主推内容版本，突出舒适与操控。",
|
||||
ctaText: "获取活动详情",
|
||||
scheduledPublishAt: "2026-04-14T10:00",
|
||||
imageUrls: [
|
||||
"https://images.unsplash.com/photo-1614162692292-7ac56d7f7f1e?auto=format&fit=crop&q=80&w=1200",
|
||||
"https://picsum.photos/seed/a4-content-1/900/600",
|
||||
],
|
||||
workflowStatus: "prepublished",
|
||||
updatedBy: "业务/市场负责人",
|
||||
updatedAt: "2026-04-11 09:48",
|
||||
},
|
||||
{
|
||||
id: "c3",
|
||||
sourceCarId: "a6l",
|
||||
sourceCarName: "Audi A6L",
|
||||
title: "Audi A6L",
|
||||
subtitle: "懂你，更懂未来",
|
||||
highlights: "行政旗舰\n长轴空间\n智能辅助",
|
||||
description: "正在进行文案优化，待业务审核。",
|
||||
ctaText: "预约顾问回电",
|
||||
scheduledPublishAt: "",
|
||||
imageUrls: [
|
||||
"https://images.unsplash.com/photo-1541348263662-e0c86433610a?auto=format&fit=crop&q=80&w=1200",
|
||||
],
|
||||
workflowStatus: "pending",
|
||||
updatedBy: "内容运营专员",
|
||||
updatedAt: "2026-04-11 09:30",
|
||||
},
|
||||
{
|
||||
id: "c4",
|
||||
sourceCarId: "q3",
|
||||
sourceCarName: "Audi Q3",
|
||||
title: "Audi Q3 城市灵动版",
|
||||
subtitle: "年轻进阶，灵动出行",
|
||||
highlights: "紧凑SUV\n智能互联\n都市通勤",
|
||||
description: "新建草稿，待进一步补充图文和活动权益信息。",
|
||||
ctaText: "预约试驾",
|
||||
scheduledPublishAt: "",
|
||||
imageUrls: [
|
||||
"https://picsum.photos/seed/q3-content-1/900/600",
|
||||
],
|
||||
workflowStatus: "draft",
|
||||
updatedBy: "内容运营专员",
|
||||
updatedAt: "2026-04-11 08:40",
|
||||
},
|
||||
{
|
||||
id: "c5",
|
||||
sourceCarId: "q5l",
|
||||
sourceCarName: "Audi Q5L",
|
||||
title: "Audi Q5L 周末试驾礼遇",
|
||||
subtitle: "自由，由我定义",
|
||||
highlights: "四驱性能\n家庭空间\n周末活动",
|
||||
description: "因权益文案与活动规则不一致，被驳回待修订。",
|
||||
ctaText: "了解礼遇",
|
||||
scheduledPublishAt: "",
|
||||
imageUrls: [
|
||||
"https://picsum.photos/seed/q5-content-1/900/600",
|
||||
],
|
||||
workflowStatus: "rejected",
|
||||
updatedBy: "业务/市场负责人",
|
||||
updatedAt: "2026-04-11 08:10",
|
||||
},
|
||||
{
|
||||
id: "c6",
|
||||
sourceCarId: "a8l",
|
||||
sourceCarName: "Audi A8L",
|
||||
title: "Audi A8L 尊享礼宾版",
|
||||
subtitle: "旗舰格局，沉稳之选",
|
||||
highlights: "旗舰行政\n豪华座舱\n专属服务",
|
||||
description: "已发布后因活动档期调整撤回，待重新排期。",
|
||||
ctaText: "预约专属顾问",
|
||||
scheduledPublishAt: "2026-04-15T09:30",
|
||||
imageUrls: [
|
||||
"https://picsum.photos/seed/a8-content-1/900/600",
|
||||
],
|
||||
workflowStatus: "recalled",
|
||||
updatedBy: "业务/市场负责人",
|
||||
updatedAt: "2026-04-11 07:55",
|
||||
},
|
||||
]
|
||||
|
||||
const WORKFLOW_LABEL: Record<WorkflowStatus, string> = {
|
||||
draft: "草稿",
|
||||
pending: "待审核",
|
||||
prepublished: "预发布",
|
||||
published: "已发布",
|
||||
rejected: "已驳回",
|
||||
recalled: "已撤回",
|
||||
}
|
||||
|
||||
function workflowBadgeClass(status: WorkflowStatus) {
|
||||
switch (status) {
|
||||
case "draft":
|
||||
return "bg-gray-100 text-gray-700 border-gray-200"
|
||||
case "pending":
|
||||
return "bg-amber-50 text-amber-700 border-amber-200"
|
||||
case "prepublished":
|
||||
return "bg-blue-50 text-blue-700 border-blue-200"
|
||||
case "published":
|
||||
return "bg-emerald-50 text-emerald-700 border-emerald-200"
|
||||
case "rejected":
|
||||
return "bg-rose-50 text-rose-700 border-rose-200"
|
||||
case "recalled":
|
||||
return "bg-zinc-100 text-zinc-700 border-zinc-200"
|
||||
}
|
||||
}
|
||||
|
||||
function nowString() {
|
||||
return new Date().toLocaleString("zh-CN", { hour12: false })
|
||||
}
|
||||
|
||||
export function MiniAppContentLibrary({ roleView, workflowConfig, onAddAuditLog, newContentRequest }: MiniAppContentLibraryProps) {
|
||||
const [contents, setContents] = React.useState<MiniAppContent[]>(CONTENTS)
|
||||
const [viewMode, setViewMode] = React.useState<"list" | "editor">("list")
|
||||
const [selectedId, setSelectedId] = React.useState<string>(CONTENTS[0].id)
|
||||
const [newImageUrl, setNewImageUrl] = React.useState("")
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!newContentRequest) return
|
||||
|
||||
const id = `c${newContentRequest.requestId}`
|
||||
const existing = contents.find((item) => item.id === id)
|
||||
if (!existing) {
|
||||
const draft: MiniAppContent = {
|
||||
id,
|
||||
sourceCarId: newContentRequest.sourceCarId,
|
||||
sourceCarName: newContentRequest.sourceCarName,
|
||||
title: newContentRequest.sourceCarName,
|
||||
subtitle: "",
|
||||
highlights: "",
|
||||
description: "",
|
||||
ctaText: "立即预约试驾",
|
||||
scheduledPublishAt: "",
|
||||
imageUrls: [],
|
||||
workflowStatus: "draft",
|
||||
updatedBy: "内容运营专员",
|
||||
updatedAt: nowString(),
|
||||
}
|
||||
setContents((prev) => [draft, ...prev])
|
||||
}
|
||||
|
||||
setSelectedId(id)
|
||||
setViewMode("editor")
|
||||
}, [newContentRequest?.requestId])
|
||||
|
||||
const canEdit = roleView === "content-ops"
|
||||
const canApprove = roleView === "biz-market"
|
||||
const selected = contents.find((item) => item.id === selectedId) ?? null
|
||||
|
||||
const updateContent = (id: string, patch: Partial<MiniAppContent>) => {
|
||||
setContents((prev) =>
|
||||
prev.map((item) => (item.id === id ? { ...item, ...patch, updatedAt: nowString() } : item))
|
||||
)
|
||||
}
|
||||
|
||||
const saveDraft = (item: MiniAppContent) => {
|
||||
updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
|
||||
onAddAuditLog(`内容运营专员保存 ${item.sourceCarName} 内容草稿`)
|
||||
}
|
||||
|
||||
const submitForReview = (item: MiniAppContent) => {
|
||||
updateContent(item.id, { workflowStatus: "pending", updatedBy: "内容运营专员" })
|
||||
onAddAuditLog(`内容运营专员提交 ${item.sourceCarName} 到审核队列`)
|
||||
}
|
||||
|
||||
const withdrawReview = (item: MiniAppContent) => {
|
||||
updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
|
||||
onAddAuditLog(`内容运营专员撤回 ${item.sourceCarName} 的审核申请`)
|
||||
}
|
||||
|
||||
const approve = (item: MiniAppContent) => {
|
||||
const nextStatus: WorkflowStatus = workflowConfig.enablePrePublish ? "prepublished" : "published"
|
||||
updateContent(item.id, { workflowStatus: nextStatus, updatedBy: "业务/市场负责人" })
|
||||
onAddAuditLog(`业务/市场负责人审批通过 ${item.sourceCarName}`)
|
||||
}
|
||||
|
||||
const reject = (item: MiniAppContent) => {
|
||||
updateContent(item.id, { workflowStatus: "rejected", updatedBy: "业务/市场负责人" })
|
||||
onAddAuditLog(`业务/市场负责人驳回 ${item.sourceCarName} 内容版本`)
|
||||
}
|
||||
|
||||
const publish = (item: MiniAppContent) => {
|
||||
const actor = roleView === "biz-market" ? "业务/市场负责人" : "内容运营专员"
|
||||
updateContent(item.id, { workflowStatus: "published", updatedBy: actor })
|
||||
onAddAuditLog(`${actor}发布 ${item.sourceCarName} 到小程序`)
|
||||
}
|
||||
|
||||
const recall = (item: MiniAppContent) => {
|
||||
updateContent(item.id, { workflowStatus: "recalled", updatedBy: "业务/市场负责人" })
|
||||
onAddAuditLog(`业务/市场负责人撤回 ${item.sourceCarName} 已发布内容`)
|
||||
}
|
||||
|
||||
const revive = (item: MiniAppContent) => {
|
||||
const nextStatus: WorkflowStatus = workflowConfig.enablePrePublish ? "prepublished" : "published"
|
||||
updateContent(item.id, { workflowStatus: nextStatus, updatedBy: "业务/市场负责人" })
|
||||
onAddAuditLog(`业务/市场负责人恢复 ${item.sourceCarName} 的发布流程`)
|
||||
}
|
||||
|
||||
const createNewVersion = (item: MiniAppContent) => {
|
||||
updateContent(item.id, { workflowStatus: "draft", updatedBy: "内容运营专员" })
|
||||
onAddAuditLog(`内容运营专员基于 ${item.sourceCarName} 发布版本创建新稿`)
|
||||
}
|
||||
|
||||
const addImage = (item: MiniAppContent) => {
|
||||
const next = newImageUrl.trim()
|
||||
if (!next) return
|
||||
updateContent(item.id, { imageUrls: [...item.imageUrls, next] })
|
||||
setNewImageUrl("")
|
||||
}
|
||||
|
||||
const removeImage = (item: MiniAppContent, idx: number) => {
|
||||
updateContent(item.id, { imageUrls: item.imageUrls.filter((_, i) => i !== idx) })
|
||||
}
|
||||
|
||||
const renderActions = (item: MiniAppContent) => {
|
||||
const actions: React.ReactNode[] = []
|
||||
|
||||
if (canEdit) {
|
||||
if (item.workflowStatus === "draft" || item.workflowStatus === "rejected" || item.workflowStatus === "recalled") {
|
||||
actions.push(
|
||||
<Button key="submit" size="sm" variant="outline" onClick={() => submitForReview(item)}>
|
||||
<Send className="mr-1 h-3.5 w-3.5" />{item.workflowStatus === "draft" ? "提交审核" : "重新提审"}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
if (item.workflowStatus === "pending") {
|
||||
actions.push(
|
||||
<Button key="withdraw" size="sm" variant="outline" onClick={() => withdrawReview(item)}>
|
||||
<Undo2 className="mr-1 h-3.5 w-3.5" />撤回提审
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
if (item.workflowStatus === "prepublished") {
|
||||
actions.push(
|
||||
<Button key="publish" size="sm" variant="outline" onClick={() => publish(item)}>
|
||||
<Upload className="mr-1 h-3.5 w-3.5" />发布
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
if (item.workflowStatus === "published") {
|
||||
actions.push(
|
||||
<Button key="new-version" size="sm" variant="outline" onClick={() => createNewVersion(item)}>
|
||||
<Pencil className="mr-1 h-3.5 w-3.5" />新建版本
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
if (canApprove) {
|
||||
if (item.workflowStatus === "pending") {
|
||||
actions.push(
|
||||
<Button key="approve" size="sm" variant="outline" onClick={() => approve(item)}>
|
||||
<ShieldCheck className="mr-1 h-3.5 w-3.5" />通过
|
||||
</Button>
|
||||
)
|
||||
actions.push(
|
||||
<Button key="reject" size="sm" variant="outline" onClick={() => reject(item)}>
|
||||
<XCircle className="mr-1 h-3.5 w-3.5" />驳回
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
if (workflowConfig.allowRecall && item.workflowStatus === "published") {
|
||||
actions.push(
|
||||
<Button key="recall" size="sm" variant="outline" onClick={() => recall(item)}>
|
||||
<Undo2 className="mr-1 h-3.5 w-3.5" />撤回
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
if (item.workflowStatus === "recalled") {
|
||||
actions.push(
|
||||
<Button key="revive" size="sm" variant="outline" onClick={() => revive(item)}>
|
||||
<Upload className="mr-1 h-3.5 w-3.5" />恢复流程
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
actions.push(
|
||||
<Button key="detail" size="sm" variant="ghost" onClick={() => { setSelectedId(item.id); setViewMode("editor") }}>
|
||||
<Eye className="mr-1 h-3.5 w-3.5" />详情
|
||||
</Button>
|
||||
)
|
||||
|
||||
return actions
|
||||
}
|
||||
|
||||
if (viewMode === "editor" && selected) {
|
||||
const highlights = selected.highlights
|
||||
.split("\n")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="outline" size="sm" onClick={() => setViewMode("list")}>
|
||||
<ArrowLeft className="mr-1 h-3.5 w-3.5" />返回列表
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">小程序内容编辑</h1>
|
||||
<p className="text-muted-foreground">独立编辑页：左侧字段编辑，右侧手机窗口预览。</p>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="outline" className={workflowBadgeClass(selected.workflowStatus)}>
|
||||
当前状态：{WORKFLOW_LABEL[selected.workflowStatus]}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 xl:grid-cols-2">
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-bold">编辑字段</CardTitle>
|
||||
<CardDescription>基于官网源车型生成的内容实体（MiniAppContent）。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">来源车型</label>
|
||||
<Input value={selected.sourceCarName} disabled />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">标题</label>
|
||||
<Input value={selected.title} disabled={!canEdit} onChange={(e) => updateContent(selected.id, { title: e.target.value })} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">副标题</label>
|
||||
<Input value={selected.subtitle} disabled={!canEdit} onChange={(e) => updateContent(selected.id, { subtitle: e.target.value })} />
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">卖点（每行一条）</label>
|
||||
<textarea
|
||||
className="min-h-24 rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:border-ring"
|
||||
value={selected.highlights}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => updateContent(selected.id, { highlights: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">图文描述（轻量编排）</label>
|
||||
<textarea
|
||||
className="min-h-28 rounded-lg border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:border-ring"
|
||||
value={selected.description}
|
||||
disabled={!canEdit}
|
||||
onChange={(e) => updateContent(selected.id, { description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">按钮文案</label>
|
||||
<Input value={selected.ctaText} disabled={!canEdit} onChange={(e) => updateContent(selected.id, { ctaText: e.target.value })} />
|
||||
</div>
|
||||
|
||||
{workflowConfig.publishStrategy === "scheduled" && (
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">预约发布时间</label>
|
||||
<Input
|
||||
type="datetime-local"
|
||||
disabled={!canEdit}
|
||||
value={selected.scheduledPublishAt}
|
||||
onChange={(e) => updateContent(selected.id, { scheduledPublishAt: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">图片素材（多图）</label>
|
||||
<div className="flex gap-2">
|
||||
<Input value={newImageUrl} disabled={!canEdit} onChange={(e) => setNewImageUrl(e.target.value)} placeholder="粘贴图片 URL" />
|
||||
<Button variant="outline" disabled={!canEdit} onClick={() => addImage(selected)}>新增</Button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{selected.imageUrls.map((url, idx) => (
|
||||
<div key={`${url}-${idx}`} className="rounded-lg border p-2">
|
||||
<img src={url} alt={`${selected.sourceCarName}-${idx}`} className="aspect-video w-full rounded object-cover" />
|
||||
<div className="mt-2 flex justify-end">
|
||||
<Button size="sm" variant="ghost" disabled={!canEdit} onClick={() => removeImage(selected, idx)}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Button variant="outline" disabled={!canEdit} onClick={() => saveDraft(selected)}>
|
||||
<Pencil className="mr-1 h-3.5 w-3.5" />保存草稿
|
||||
</Button>
|
||||
<Button disabled={!canEdit} onClick={() => submitForReview(selected)}>
|
||||
<Send className="mr-1 h-3.5 w-3.5" />提交审核
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-bold">小程序预览（手机窗口）</CardTitle>
|
||||
<CardDescription>按钮上方展示预约试驾表单视觉区（仅演示，不提交）。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex justify-center">
|
||||
<div className="w-[360px] rounded-[28px] border border-gray-200 bg-white shadow-2xl overflow-hidden">
|
||||
<div className="h-9 bg-black text-white px-4 flex items-center text-[10px] tracking-[0.18em] uppercase">Audi</div>
|
||||
<div className="relative">
|
||||
<img src={selected.imageUrls[0]} alt={selected.title} className="h-48 w-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" />
|
||||
<div className="absolute left-4 right-4 bottom-3 text-white">
|
||||
<p className="text-lg font-bold tracking-tight">{selected.title}</p>
|
||||
<p className="text-xs opacity-85">{selected.subtitle}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4">
|
||||
<div className="mb-3 grid grid-cols-3 gap-2">
|
||||
{selected.imageUrls.slice(0, 3).map((url, idx) => (
|
||||
<img key={`${url}-${idx}`} src={url} alt={`thumb-${idx}`} className="h-16 w-full rounded object-cover" />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{highlights.map((item) => (
|
||||
<div key={item} className="inline-flex mr-2 mb-1 rounded-full border px-2 py-0.5 text-[10px] text-gray-600">
|
||||
{item}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-3 text-sm leading-6 text-gray-600">{selected.description}</p>
|
||||
|
||||
{workflowConfig.publishStrategy === "scheduled" && selected.scheduledPublishAt && (
|
||||
<div className="mt-3 rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700">
|
||||
预约发布时间：{selected.scheduledPublishAt.replace("T", " ")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
<div className="grid gap-1">
|
||||
<label className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">姓名</label>
|
||||
<Input placeholder="请输入您的姓名" disabled />
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
<label className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">手机号</label>
|
||||
<Input placeholder="请输入手机号" disabled />
|
||||
</div>
|
||||
<div className="grid gap-1">
|
||||
<label className="text-[10px] uppercase tracking-wider text-gray-500 font-semibold">意向城市</label>
|
||||
<div className="flex gap-2">
|
||||
<select className="h-8 flex-1 rounded-lg border border-input bg-white px-2 text-sm text-gray-500" disabled>
|
||||
<option>请选择城市</option>
|
||||
</select>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => alert("获取位置功能为原型占位提示")}
|
||||
>
|
||||
获取位置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="flex items-start gap-2 text-[11px] leading-5 text-gray-600">
|
||||
<input type="checkbox" className="mt-0.5" />
|
||||
<span>
|
||||
我已阅读并同意《个人信息保护政策》，授权奥迪及授权经销商与我联系。
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Button className="mt-4 w-full bg-audi-black hover:bg-audi-dark-gray text-white" disabled>
|
||||
{selected.ctaText || "立即预约试驾"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight">小程序内容库</h1>
|
||||
<p className="text-muted-foreground">集中管理编辑、审核、保存和发布后的内容版本。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-bold">内容版本列表</CardTitle>
|
||||
<CardDescription>与官网车型源数据分离，避免同步数据和发布内容混用。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent border-b border-gray-100">
|
||||
<TableHead className="font-bold text-audi-black">来源车型</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">内容标题</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">状态</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">最近更新</TableHead>
|
||||
<TableHead className="text-right font-bold text-audi-black">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{contents.map((item) => (
|
||||
<TableRow key={item.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
|
||||
<TableCell>
|
||||
<p className="font-medium">{item.sourceCarName}</p>
|
||||
<p className="text-xs text-muted-foreground">{item.sourceCarId}</p>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{item.title}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className={workflowBadgeClass(item.workflowStatus)}>
|
||||
{WORKFLOW_LABEL[item.workflowStatus]}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">
|
||||
<p>{item.updatedAt}</p>
|
||||
<p>{item.updatedBy}</p>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex flex-wrap justify-end gap-2">{renderActions(item)}</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
193
audi-content-portal/src/components/dashboard/Dashboard.tsx
Normal file
193
audi-content-portal/src/components/dashboard/Dashboard.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
AreaChart,
|
||||
Area
|
||||
} from 'recharts';
|
||||
import {
|
||||
Activity,
|
||||
Globe,
|
||||
TrendingUp,
|
||||
Users,
|
||||
ArrowUpRight,
|
||||
ArrowDownRight,
|
||||
CheckCircle2,
|
||||
AlertCircle
|
||||
} from "lucide-react";
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const data = [
|
||||
{ name: '04-03', leads: 45 },
|
||||
{ name: '04-04', leads: 52 },
|
||||
{ name: '04-05', leads: 48 },
|
||||
{ name: '04-06', leads: 61 },
|
||||
{ name: '04-07', leads: 55 },
|
||||
{ name: '04-08', leads: 67 },
|
||||
{ name: '04-09', leads: 72 },
|
||||
];
|
||||
|
||||
export function Dashboard() {
|
||||
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 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Red Note 后端</CardTitle>
|
||||
<Activity className="h-4 w-4 text-emerald-500" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<div className="text-2xl font-bold">已连接</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
延迟: 24ms
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">合资公司官网</CardTitle>
|
||||
<Globe className="h-4 w-4 text-emerald-500" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<div className="text-2xl font-bold">同步中</div>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
上次同步: 10分钟前
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">今日新增潜客</CardTitle>
|
||||
<Users className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">+72</div>
|
||||
<div className="flex items-center gap-1 text-xs text-emerald-500 mt-1">
|
||||
<ArrowUpRight className="h-3 w-3" />
|
||||
<span>较昨日增长 12%</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">系统健康度</CardTitle>
|
||||
<CheckCircle2 className="h-4 w-4 text-audi-red" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">99.9%</div>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
运行时间: 14天 2小时
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-1 lg:grid-cols-7">
|
||||
<Card className="lg:col-span-4 border-none shadow-sm bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-bold">潜客增长趋势</CardTitle>
|
||||
<CardDescription>最近7天的每日新增潜客数量统计。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pl-2">
|
||||
<div className="h-[300px] w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data}>
|
||||
<defs>
|
||||
<linearGradient id="colorLeads" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#BB0A30" stopOpacity={0.1}/>
|
||||
<stop offset="95%" stopColor="#BB0A30" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 12, fill: '#888' }}
|
||||
dy={10}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fontSize: 12, fill: '#888' }}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
backgroundColor: '#fff',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="leads"
|
||||
stroke="#BB0A30"
|
||||
strokeWidth={2}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorLeads)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="lg:col-span-3 border-none shadow-sm bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-bold">系统通知</CardTitle>
|
||||
<CardDescription>最近的系统同步与维护日志。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ title: "车型库自动同步完成", time: "2小时前", type: "success" },
|
||||
{ title: "Red Note API 接口升级", time: "5小时前", type: "info" },
|
||||
{ title: "发现 3 条重复潜客记录", time: "昨日", type: "warning" },
|
||||
{ title: "合资公司官网连接重置", time: "2天前", type: "info" },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-start gap-4">
|
||||
<div className={`mt-1 h-2 w-2 rounded-full ${
|
||||
item.type === 'success' ? 'bg-emerald-500' :
|
||||
item.type === 'warning' ? 'bg-amber-500' : 'bg-blue-500'
|
||||
}`} />
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="text-sm font-medium leading-none">{item.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{item.time}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
118
audi-content-portal/src/components/layout/AppSidebar.tsx
Normal file
118
audi-content-portal/src/components/layout/AppSidebar.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Car,
|
||||
NotebookPen,
|
||||
Users,
|
||||
UserCog,
|
||||
Settings,
|
||||
LogOut,
|
||||
ChevronRight
|
||||
} from "lucide-react"
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarRail,
|
||||
} from "@/components/ui/sidebar"
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
title: "仪表盘",
|
||||
icon: LayoutDashboard,
|
||||
id: "dashboard",
|
||||
},
|
||||
{
|
||||
title: "车型库",
|
||||
icon: Car,
|
||||
id: "car-library",
|
||||
},
|
||||
{
|
||||
title: "小程序内容库",
|
||||
icon: NotebookPen,
|
||||
id: "mini-content",
|
||||
},
|
||||
{
|
||||
title: "潜客管理",
|
||||
icon: Users,
|
||||
id: "leads",
|
||||
},
|
||||
{
|
||||
title: "用户与权限",
|
||||
icon: UserCog,
|
||||
id: "user-access",
|
||||
},
|
||||
{
|
||||
title: "系统设置",
|
||||
icon: Settings,
|
||||
id: "settings",
|
||||
},
|
||||
]
|
||||
|
||||
export function AppSidebar({
|
||||
activeTab,
|
||||
setActiveTab
|
||||
}: {
|
||||
activeTab: string;
|
||||
setActiveTab: (id: string) => void
|
||||
}) {
|
||||
return (
|
||||
<Sidebar collapsible="icon">
|
||||
<SidebarHeader className="border-b border-sidebar-border/50 py-6">
|
||||
<div className="flex items-center gap-3 px-2">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-sm bg-audi-red text-white">
|
||||
<span className="text-xs font-bold tracking-tighter">A</span>
|
||||
</div>
|
||||
<div className="flex flex-col overflow-hidden group-data-[collapsible=icon]:hidden">
|
||||
<span className="text-sm font-bold tracking-[0.15em] uppercase truncate">Audi Portal</span>
|
||||
<span className="text-[10px] text-muted-foreground tracking-widest uppercase truncate">Smart Operations</span>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel className="group-data-[collapsible=icon]:hidden">主要功能</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{navItems.map((item) => (
|
||||
<SidebarMenuItem key={item.id}>
|
||||
<SidebarMenuButton
|
||||
tooltip={item.title}
|
||||
isActive={activeTab === item.id}
|
||||
onClick={() => setActiveTab(item.id)}
|
||||
className="data-active:bg-audi-red/5 data-active:text-audi-red"
|
||||
>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
{activeTab === item.id && (
|
||||
<ChevronRight className="ml-auto size-3 opacity-50 group-data-[collapsible=icon]:hidden" />
|
||||
)}
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
<SidebarFooter className="border-t border-sidebar-border/50 p-4">
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton className="text-muted-foreground hover:text-foreground">
|
||||
<LogOut />
|
||||
<span>退出登录</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
)
|
||||
}
|
||||
206
audi-content-portal/src/components/leads/LeadManagement.tsx
Normal file
206
audi-content-portal/src/components/leads/LeadManagement.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
Download,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Search,
|
||||
Filter,
|
||||
MoreHorizontal,
|
||||
User,
|
||||
Phone,
|
||||
MapPin,
|
||||
Calendar
|
||||
} from "lucide-react";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
|
||||
const LEADS = [
|
||||
{ id: "1", name: "张先生", phone: "13812345678", city: "北京", model: "Audi A6L", date: "2024-04-09 14:20" },
|
||||
{ id: "2", name: "李女士", phone: "15987654321", city: "上海", model: "Audi Q5L", date: "2024-04-09 13:15" },
|
||||
{ id: "3", name: "王先生", phone: "13600001111", city: "广州", model: "Audi e-tron GT", date: "2024-04-09 11:45" },
|
||||
{ id: "4", name: "赵先生", phone: "18855556666", city: "深圳", model: "Audi A4L", date: "2024-04-09 10:30" },
|
||||
{ id: "5", name: "陈女士", phone: "13799998888", city: "杭州", model: "Audi Q3", date: "2024-04-08 17:20" },
|
||||
{ id: "6", name: "孙先生", phone: "13511112222", city: "成都", model: "Audi A3 Sportback", date: "2024-04-08 16:10" },
|
||||
{ id: "7", name: "周女士", phone: "13944445555", city: "南京", model: "Audi Q4 e-tron", date: "2024-04-08 14:50" },
|
||||
{ id: "8", name: "吴先生", phone: "13166667777", city: "武汉", model: "Audi A8L", date: "2024-04-08 12:30" },
|
||||
];
|
||||
|
||||
export function LeadManagement() {
|
||||
const [showPhone, setShowPhone] = React.useState<Record<string, boolean>>({});
|
||||
const [openActionLeadId, setOpenActionLeadId] = React.useState<string | null>(null);
|
||||
|
||||
const togglePhone = (id: string) => {
|
||||
setShowPhone(prev => ({ ...prev, [id]: !prev[id] }));
|
||||
};
|
||||
|
||||
const maskPhone = (phone: string) => {
|
||||
return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
// Simple alert for demo
|
||||
alert("正在导出 8 条潜客数据为 CSV 文件...");
|
||||
};
|
||||
|
||||
const handleLeadAction = (leadName: string, action: string) => {
|
||||
alert(`${leadName} - ${action}`);
|
||||
setOpenActionLeadId(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight">潜客管理</h1>
|
||||
<p className="text-muted-foreground">查看并处理来自各渠道的客户试驾预约与咨询信息。</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleExport}
|
||||
variant="outline"
|
||||
className="border-audi-black text-audi-black hover:bg-audi-black hover:text-white px-6"
|
||||
>
|
||||
<Download className="mr-2 h-4 w-4" />
|
||||
导出为 CSV
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 w-full max-w-sm">
|
||||
<Search className="h-4 w-4 text-muted-foreground absolute ml-3" />
|
||||
<Input placeholder="搜索客户姓名或车型..." className="pl-9 bg-gray-50/50 border-none" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" className="h-9">
|
||||
<Filter className="mr-2 h-4 w-4" />
|
||||
高级筛选
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent border-b border-gray-100">
|
||||
<TableHead className="font-bold text-audi-black">客户姓名</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">联系电话</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">意向车型</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">所在城市</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">提交时间</TableHead>
|
||||
<TableHead className="text-right font-bold text-audi-black">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{LEADS.map((lead) => (
|
||||
<TableRow key={lead.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-600">
|
||||
{lead.name[0]}
|
||||
</div>
|
||||
<span className="font-medium">{lead.name}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-sm">
|
||||
{showPhone[lead.id] ? lead.phone : maskPhone(lead.phone)}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-muted-foreground hover:text-audi-red"
|
||||
onClick={() => togglePhone(lead.id)}
|
||||
>
|
||||
{showPhone[lead.id] ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="secondary" className="bg-gray-100 text-gray-700 hover:bg-gray-200 border-none">
|
||||
{lead.model}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<div className="flex items-center gap-1">
|
||||
<MapPin className="h-3 w-3" />
|
||||
{lead.city}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground text-xs">
|
||||
<div className="flex items-center gap-1">
|
||||
<Calendar className="h-3 w-3" />
|
||||
{lead.date}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right relative">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-8 w-8"
|
||||
onClick={() => setOpenActionLeadId((prev) => (prev === lead.id ? null : lead.id))}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
{openActionLeadId === lead.id && (
|
||||
<div className="absolute right-2 top-9 z-20 w-44 rounded-md border bg-white p-1 shadow-lg whitespace-normal">
|
||||
<button
|
||||
className="block w-full rounded px-3 py-2 text-left text-sm hover:bg-gray-100"
|
||||
onClick={() => handleLeadAction(lead.name, "查看详情")}
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
<button
|
||||
className="block w-full rounded px-3 py-2 text-left text-sm hover:bg-gray-100"
|
||||
onClick={() => handleLeadAction(lead.name, "更新跟进状态")}
|
||||
>
|
||||
更新跟进状态
|
||||
</button>
|
||||
<button
|
||||
className="block w-full rounded px-3 py-2 text-left text-sm hover:bg-gray-100"
|
||||
onClick={() => handleLeadAction(lead.name, "分配销售顾问")}
|
||||
>
|
||||
分配销售顾问
|
||||
</button>
|
||||
<button
|
||||
className="block w-full rounded px-3 py-2 text-left text-sm hover:bg-gray-100"
|
||||
onClick={() => handleLeadAction(lead.name, "添加备注")}
|
||||
>
|
||||
添加备注
|
||||
</button>
|
||||
<button
|
||||
className="block w-full rounded px-3 py-2 text-left text-sm text-rose-600 hover:bg-rose-50"
|
||||
onClick={() => handleLeadAction(lead.name, "标记无效")}
|
||||
>
|
||||
标记无效
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
239
audi-content-portal/src/components/settings/SystemSettings.tsx
Normal file
239
audi-content-portal/src/components/settings/SystemSettings.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
27
audi-content-portal/src/components/ui/badge.tsx
Normal file
27
audi-content-portal/src/components/ui/badge.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
|
||||
outline: "text-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({ className, variant, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
||||
return <span data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
58
audi-content-portal/src/components/ui/button.tsx
Normal file
58
audi-content-portal/src/components/ui/button.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
59
audi-content-portal/src/components/ui/card.tsx
Normal file
59
audi-content-portal/src/components/ui/card.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn("bg-card text-card-foreground rounded-xl border shadow-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
|
||||
return (
|
||||
<h3
|
||||
data-slot="card-title"
|
||||
className={cn("leading-none font-semibold tracking-tight", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
|
||||
return (
|
||||
<p
|
||||
data-slot="card-description"
|
||||
className={cn("text-muted-foreground text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return <div data-slot="card-content" className={cn("p-6 pt-0", className)} {...props} />
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||
20
audi-content-portal/src/components/ui/input.tsx
Normal file
20
audi-content-portal/src/components/ui/input.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
31
audi-content-portal/src/components/ui/progress.tsx
Normal file
31
audi-content-portal/src/components/ui/progress.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type ProgressProps = React.ComponentProps<"div"> & {
|
||||
value?: number
|
||||
}
|
||||
|
||||
function Progress({ className, value = 0, ...props }: ProgressProps) {
|
||||
const clamped = Math.max(0, Math.min(100, value))
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="progress"
|
||||
role="progressbar"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-valuenow={Math.round(clamped)}
|
||||
className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-slot="progress-indicator"
|
||||
className="bg-primary h-full w-full flex-1 transition-transform"
|
||||
style={{ transform: `translateX(-${100 - clamped}%)` }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { Progress }
|
||||
23
audi-content-portal/src/components/ui/separator.tsx
Normal file
23
audi-content-portal/src/components/ui/separator.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
...props
|
||||
}: SeparatorPrimitive.Props) {
|
||||
return (
|
||||
<SeparatorPrimitive
|
||||
data-slot="separator"
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
136
audi-content-portal/src/components/ui/sheet.tsx
Normal file
136
audi-content-portal/src/components/ui/sheet.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import * as React from "react"
|
||||
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Sheet({ ...props }: SheetPrimitive.Root.Props) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Backdrop
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = "right",
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: SheetPrimitive.Popup.Props & {
|
||||
side?: "top" | "right" | "bottom" | "left"
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Popup
|
||||
data-slot="sheet-content"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<SheetPrimitive.Close
|
||||
data-slot="sheet-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-3 right-3"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
)}
|
||||
</SheetPrimitive.Popup>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn("flex flex-col gap-0.5 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn(
|
||||
"font-heading text-base font-medium text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: SheetPrimitive.Description.Props) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
723
audi-content-portal/src/components/ui/sidebar.tsx
Normal file
723
audi-content-portal/src/components/ui/sidebar.tsx
Normal file
@@ -0,0 +1,723 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { useIsMobile } from "@/hooks/use-mobile"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from "@/components/ui/sheet"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip"
|
||||
import { PanelLeftIcon } from "lucide-react"
|
||||
|
||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
||||
const SIDEBAR_WIDTH = "16rem"
|
||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||
const SIDEBAR_KEYBOARD_SHORTCUT = "b"
|
||||
|
||||
type SidebarContextProps = {
|
||||
state: "expanded" | "collapsed"
|
||||
open: boolean
|
||||
setOpen: (open: boolean) => void
|
||||
openMobile: boolean
|
||||
setOpenMobile: (open: boolean) => void
|
||||
isMobile: boolean
|
||||
toggleSidebar: () => void
|
||||
}
|
||||
|
||||
const SidebarContext = React.createContext<SidebarContextProps | null>(null)
|
||||
|
||||
function useSidebar() {
|
||||
const context = React.useContext(SidebarContext)
|
||||
if (!context) {
|
||||
throw new Error("useSidebar must be used within a SidebarProvider.")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function SidebarProvider({
|
||||
defaultOpen = true,
|
||||
open: openProp,
|
||||
onOpenChange: setOpenProp,
|
||||
className,
|
||||
style,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
defaultOpen?: boolean
|
||||
open?: boolean
|
||||
onOpenChange?: (open: boolean) => void
|
||||
}) {
|
||||
const isMobile = useIsMobile()
|
||||
const [openMobile, setOpenMobile] = React.useState(false)
|
||||
|
||||
// This is the internal state of the sidebar.
|
||||
// We use openProp and setOpenProp for control from outside the component.
|
||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
||||
const open = openProp ?? _open
|
||||
const setOpen = React.useCallback(
|
||||
(value: boolean | ((value: boolean) => boolean)) => {
|
||||
const openState = typeof value === "function" ? value(open) : value
|
||||
if (setOpenProp) {
|
||||
setOpenProp(openState)
|
||||
} else {
|
||||
_setOpen(openState)
|
||||
}
|
||||
|
||||
// This sets the cookie to keep the sidebar state.
|
||||
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
|
||||
},
|
||||
[setOpenProp, open]
|
||||
)
|
||||
|
||||
// Helper to toggle the sidebar.
|
||||
const toggleSidebar = React.useCallback(() => {
|
||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
|
||||
}, [isMobile, setOpen, setOpenMobile])
|
||||
|
||||
// Adds a keyboard shortcut to toggle the sidebar.
|
||||
React.useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
|
||||
(event.metaKey || event.ctrlKey)
|
||||
) {
|
||||
event.preventDefault()
|
||||
toggleSidebar()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
return () => window.removeEventListener("keydown", handleKeyDown)
|
||||
}, [toggleSidebar])
|
||||
|
||||
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||
// This makes it easier to style the sidebar with Tailwind classes.
|
||||
const state = open ? "expanded" : "collapsed"
|
||||
|
||||
const contextValue = React.useMemo<SidebarContextProps>(
|
||||
() => ({
|
||||
state,
|
||||
open,
|
||||
setOpen,
|
||||
isMobile,
|
||||
openMobile,
|
||||
setOpenMobile,
|
||||
toggleSidebar,
|
||||
}),
|
||||
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
|
||||
)
|
||||
|
||||
return (
|
||||
<SidebarContext.Provider value={contextValue}>
|
||||
<div
|
||||
data-slot="sidebar-wrapper"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH,
|
||||
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
|
||||
...style,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn(
|
||||
"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</SidebarContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function Sidebar({
|
||||
side = "left",
|
||||
variant = "sidebar",
|
||||
collapsible = "offcanvas",
|
||||
className,
|
||||
children,
|
||||
dir,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
side?: "left" | "right"
|
||||
variant?: "sidebar" | "floating" | "inset"
|
||||
collapsible?: "offcanvas" | "icon" | "none"
|
||||
}) {
|
||||
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
|
||||
|
||||
if (collapsible === "none") {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar"
|
||||
className={cn(
|
||||
"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
|
||||
<SheetContent
|
||||
dir={dir}
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar"
|
||||
data-mobile="true"
|
||||
className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
side={side}
|
||||
>
|
||||
<SheetHeader className="sr-only">
|
||||
<SheetTitle>Sidebar</SheetTitle>
|
||||
<SheetDescription>Displays the mobile sidebar.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="flex h-full w-full flex-col">{children}</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group peer hidden text-sidebar-foreground md:block"
|
||||
data-state={state}
|
||||
data-collapsible={state === "collapsed" ? collapsible : ""}
|
||||
data-variant={variant}
|
||||
data-side={side}
|
||||
data-slot="sidebar"
|
||||
>
|
||||
{/* This is what handles the sidebar gap on desktop */}
|
||||
<div
|
||||
data-slot="sidebar-gap"
|
||||
className={cn(
|
||||
"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
|
||||
"group-data-[collapsible=offcanvas]:w-0",
|
||||
"group-data-[side=right]:rotate-180",
|
||||
variant === "floating" || variant === "inset"
|
||||
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
data-slot="sidebar-container"
|
||||
data-side={side}
|
||||
className={cn(
|
||||
"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
|
||||
// Adjust the padding for floating and inset variants.
|
||||
variant === "floating" || variant === "inset"
|
||||
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
|
||||
: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
data-sidebar="sidebar"
|
||||
data-slot="sidebar-inner"
|
||||
className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarTrigger({
|
||||
className,
|
||||
onClick,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-sidebar="trigger"
|
||||
data-slot="sidebar-trigger"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className={cn(className)}
|
||||
onClick={(event) => {
|
||||
onClick?.(event)
|
||||
toggleSidebar()
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<PanelLeftIcon />
|
||||
<span className="sr-only">Toggle Sidebar</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
|
||||
const { toggleSidebar } = useSidebar()
|
||||
|
||||
return (
|
||||
<button
|
||||
data-sidebar="rail"
|
||||
data-slot="sidebar-rail"
|
||||
aria-label="Toggle Sidebar"
|
||||
tabIndex={-1}
|
||||
onClick={toggleSidebar}
|
||||
title="Toggle Sidebar"
|
||||
className={cn(
|
||||
"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
|
||||
"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
|
||||
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
|
||||
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
|
||||
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
|
||||
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
|
||||
return (
|
||||
<main
|
||||
data-slot="sidebar-inset"
|
||||
className={cn(
|
||||
"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Input>) {
|
||||
return (
|
||||
<Input
|
||||
data-slot="sidebar-input"
|
||||
data-sidebar="input"
|
||||
className={cn("h-8 w-full bg-background shadow-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-header"
|
||||
data-sidebar="header"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-footer"
|
||||
data-sidebar="footer"
|
||||
className={cn("flex flex-col gap-2 p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Separator>) {
|
||||
return (
|
||||
<Separator
|
||||
data-slot="sidebar-separator"
|
||||
data-sidebar="separator"
|
||||
className={cn("mx-2 w-auto bg-sidebar-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-content"
|
||||
data-sidebar="content"
|
||||
className={cn(
|
||||
"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group"
|
||||
data-sidebar="group"
|
||||
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarGroupLabel({
|
||||
className,
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
|
||||
return useRender({
|
||||
defaultTagName: "div",
|
||||
props: mergeProps<"div">(
|
||||
{
|
||||
className: cn(
|
||||
"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
className
|
||||
),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "sidebar-group-label",
|
||||
sidebar: "group-label",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function SidebarGroupAction({
|
||||
className,
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
|
||||
return useRender({
|
||||
defaultTagName: "button",
|
||||
props: mergeProps<"button">(
|
||||
{
|
||||
className: cn(
|
||||
"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
className
|
||||
),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "sidebar-group-action",
|
||||
sidebar: "group-action",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function SidebarGroupContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-group-content"
|
||||
data-sidebar="group-content"
|
||||
className={cn("w-full text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu"
|
||||
data-sidebar="menu"
|
||||
className={cn("flex w-full min-w-0 flex-col gap-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-item"
|
||||
data-sidebar="menu-item"
|
||||
className={cn("group/menu-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const sidebarMenuButtonVariants = cva(
|
||||
"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
|
||||
outline:
|
||||
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
|
||||
},
|
||||
size: {
|
||||
default: "h-8 text-sm",
|
||||
sm: "h-7 text-xs",
|
||||
lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function SidebarMenuButton({
|
||||
render,
|
||||
isActive = false,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
tooltip,
|
||||
className,
|
||||
...props
|
||||
}: useRender.ComponentProps<"button"> &
|
||||
React.ComponentProps<"button"> & {
|
||||
isActive?: boolean
|
||||
tooltip?: string | React.ComponentProps<typeof TooltipContent>
|
||||
} & VariantProps<typeof sidebarMenuButtonVariants>) {
|
||||
const { isMobile, state } = useSidebar()
|
||||
const comp = useRender({
|
||||
defaultTagName: "button",
|
||||
props: mergeProps<"button">(
|
||||
{
|
||||
className: cn(sidebarMenuButtonVariants({ variant, size }), className),
|
||||
},
|
||||
props
|
||||
),
|
||||
render: !tooltip ? render : <TooltipTrigger render={render} />,
|
||||
state: {
|
||||
slot: "sidebar-menu-button",
|
||||
sidebar: "menu-button",
|
||||
size,
|
||||
active: isActive,
|
||||
},
|
||||
})
|
||||
|
||||
if (!tooltip) {
|
||||
return comp
|
||||
}
|
||||
|
||||
if (typeof tooltip === "string") {
|
||||
tooltip = {
|
||||
children: tooltip,
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
{comp}
|
||||
<TooltipContent
|
||||
side="right"
|
||||
align="center"
|
||||
hidden={state !== "collapsed" || isMobile}
|
||||
{...tooltip}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuAction({
|
||||
className,
|
||||
render,
|
||||
showOnHover = false,
|
||||
...props
|
||||
}: useRender.ComponentProps<"button"> &
|
||||
React.ComponentProps<"button"> & {
|
||||
showOnHover?: boolean
|
||||
}) {
|
||||
return useRender({
|
||||
defaultTagName: "button",
|
||||
props: mergeProps<"button">(
|
||||
{
|
||||
className: cn(
|
||||
"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
|
||||
showOnHover &&
|
||||
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
|
||||
className
|
||||
),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "sidebar-menu-action",
|
||||
sidebar: "menu-action",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function SidebarMenuBadge({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-badge"
|
||||
data-sidebar="menu-badge"
|
||||
className={cn(
|
||||
"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSkeleton({
|
||||
className,
|
||||
showIcon = false,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showIcon?: boolean
|
||||
}) {
|
||||
// Random width between 50 to 90%.
|
||||
const [width] = React.useState(() => {
|
||||
return `${Math.floor(Math.random() * 40) + 50}%`
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="sidebar-menu-skeleton"
|
||||
data-sidebar="menu-skeleton"
|
||||
className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
|
||||
{...props}
|
||||
>
|
||||
{showIcon && (
|
||||
<Skeleton
|
||||
className="size-4 rounded-md"
|
||||
data-sidebar="menu-skeleton-icon"
|
||||
/>
|
||||
)}
|
||||
<Skeleton
|
||||
className="h-4 max-w-(--skeleton-width) flex-1"
|
||||
data-sidebar="menu-skeleton-text"
|
||||
style={
|
||||
{
|
||||
"--skeleton-width": width,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="sidebar-menu-sub"
|
||||
data-sidebar="menu-sub"
|
||||
className={cn(
|
||||
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="sidebar-menu-sub-item"
|
||||
data-sidebar="menu-sub-item"
|
||||
className={cn("group/menu-sub-item relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SidebarMenuSubButton({
|
||||
render,
|
||||
size = "md",
|
||||
isActive = false,
|
||||
className,
|
||||
...props
|
||||
}: useRender.ComponentProps<"a"> &
|
||||
React.ComponentProps<"a"> & {
|
||||
size?: "sm" | "md"
|
||||
isActive?: boolean
|
||||
}) {
|
||||
return useRender({
|
||||
defaultTagName: "a",
|
||||
props: mergeProps<"a">(
|
||||
{
|
||||
className: cn(
|
||||
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
|
||||
className
|
||||
),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "sidebar-menu-sub-button",
|
||||
sidebar: "menu-sub-button",
|
||||
size,
|
||||
active: isActive,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupAction,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInput,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuAction,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSkeleton,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
SidebarProvider,
|
||||
SidebarRail,
|
||||
SidebarSeparator,
|
||||
SidebarTrigger,
|
||||
useSidebar,
|
||||
}
|
||||
15
audi-content-portal/src/components/ui/skeleton.tsx
Normal file
15
audi-content-portal/src/components/ui/skeleton.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="skeleton"
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
105
audi-content-portal/src/components/ui/table.tsx
Normal file
105
audi-content-portal/src/components/ui/table.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Table({ className, ...props }: React.ComponentProps<"table">) {
|
||||
return (
|
||||
<div className="relative w-full overflow-x-auto">
|
||||
<table
|
||||
data-slot="table"
|
||||
className={cn("w-full caption-bottom text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
|
||||
return (
|
||||
<thead
|
||||
data-slot="table-header"
|
||||
className={cn("[&_tr]:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
|
||||
return (
|
||||
<tbody
|
||||
data-slot="table-body"
|
||||
className={cn("[&_tr:last-child]:border-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
|
||||
return (
|
||||
<tfoot
|
||||
data-slot="table-footer"
|
||||
className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
|
||||
return (
|
||||
<tr
|
||||
data-slot="table-row"
|
||||
className={cn(
|
||||
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
|
||||
return (
|
||||
<th
|
||||
data-slot="table-head"
|
||||
className={cn(
|
||||
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
|
||||
return (
|
||||
<td
|
||||
data-slot="table-cell"
|
||||
className={cn(
|
||||
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
|
||||
return (
|
||||
<caption
|
||||
data-slot="table-caption"
|
||||
className={cn("text-muted-foreground mt-4 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
}
|
||||
66
audi-content-portal/src/components/ui/tooltip.tsx
Normal file
66
audi-content-portal/src/components/ui/tooltip.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client"
|
||||
|
||||
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function TooltipProvider({
|
||||
delay = 0,
|
||||
...props
|
||||
}: TooltipPrimitive.Provider.Props) {
|
||||
return (
|
||||
<TooltipPrimitive.Provider
|
||||
data-slot="tooltip-provider"
|
||||
delay={delay}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
|
||||
return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
|
||||
}
|
||||
|
||||
function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
|
||||
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
|
||||
}
|
||||
|
||||
function TooltipContent({
|
||||
className,
|
||||
side = "top",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
children,
|
||||
...props
|
||||
}: TooltipPrimitive.Popup.Props &
|
||||
Pick<
|
||||
TooltipPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<TooltipPrimitive.Portal>
|
||||
<TooltipPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<TooltipPrimitive.Popup
|
||||
data-slot="tooltip-content"
|
||||
className={cn(
|
||||
"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
|
||||
</TooltipPrimitive.Popup>
|
||||
</TooltipPrimitive.Positioner>
|
||||
</TooltipPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
@@ -0,0 +1,288 @@
|
||||
import * as React from "react"
|
||||
import { ShieldCheck, UserCog, Users } from "lucide-react"
|
||||
|
||||
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"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
|
||||
type UserStatus = "enabled" | "disabled"
|
||||
|
||||
type UserRecord = {
|
||||
id: string
|
||||
name: string
|
||||
account: string
|
||||
role: "业务/市场负责人" | "内容运营专员" | "项目与运维负责人"
|
||||
status: UserStatus
|
||||
lastLogin: string
|
||||
}
|
||||
|
||||
type PermissionKey =
|
||||
| "dashboard.view"
|
||||
| "source.sync"
|
||||
| "content.edit"
|
||||
| "content.approve"
|
||||
| "content.publish"
|
||||
| "leads.manage"
|
||||
| "settings.manage"
|
||||
| "users.manage"
|
||||
|
||||
type RolePermission = {
|
||||
roleName: "业务/市场负责人" | "内容运营专员" | "项目与运维负责人"
|
||||
permissions: PermissionKey[]
|
||||
}
|
||||
|
||||
const INITIAL_USERS: UserRecord[] = [
|
||||
{
|
||||
id: "u1",
|
||||
name: "陈经理",
|
||||
account: "market.chen",
|
||||
role: "业务/市场负责人",
|
||||
status: "enabled",
|
||||
lastLogin: "2026-04-12 09:18",
|
||||
},
|
||||
{
|
||||
id: "u2",
|
||||
name: "刘运营",
|
||||
account: "content.liu",
|
||||
role: "内容运营专员",
|
||||
status: "enabled",
|
||||
lastLogin: "2026-04-12 08:42",
|
||||
},
|
||||
{
|
||||
id: "u3",
|
||||
name: "王运维",
|
||||
account: "ops.wang",
|
||||
role: "项目与运维负责人",
|
||||
status: "enabled",
|
||||
lastLogin: "2026-04-11 20:05",
|
||||
},
|
||||
{
|
||||
id: "u4",
|
||||
name: "赵测试",
|
||||
account: "qa.zhao",
|
||||
role: "内容运营专员",
|
||||
status: "disabled",
|
||||
lastLogin: "2026-04-01 11:20",
|
||||
},
|
||||
]
|
||||
|
||||
const PERMISSION_LABEL: Record<PermissionKey, string> = {
|
||||
"dashboard.view": "查看仪表盘",
|
||||
"source.sync": "车型同步",
|
||||
"content.edit": "内容编辑",
|
||||
"content.approve": "内容审核",
|
||||
"content.publish": "内容发布",
|
||||
"leads.manage": "潜客管理",
|
||||
"settings.manage": "系统设置",
|
||||
"users.manage": "用户与权限管理",
|
||||
}
|
||||
|
||||
const INITIAL_ROLE_PERMISSIONS: RolePermission[] = [
|
||||
{
|
||||
roleName: "业务/市场负责人",
|
||||
permissions: [
|
||||
"dashboard.view",
|
||||
"content.approve",
|
||||
"content.publish",
|
||||
"leads.manage",
|
||||
],
|
||||
},
|
||||
{
|
||||
roleName: "内容运营专员",
|
||||
permissions: [
|
||||
"dashboard.view",
|
||||
"source.sync",
|
||||
"content.edit",
|
||||
"content.publish",
|
||||
"leads.manage",
|
||||
],
|
||||
},
|
||||
{
|
||||
roleName: "项目与运维负责人",
|
||||
permissions: [
|
||||
"dashboard.view",
|
||||
"source.sync",
|
||||
"settings.manage",
|
||||
"users.manage",
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const PERMISSION_COLUMNS: PermissionKey[] = [
|
||||
"dashboard.view",
|
||||
"source.sync",
|
||||
"content.edit",
|
||||
"content.approve",
|
||||
"content.publish",
|
||||
"leads.manage",
|
||||
"settings.manage",
|
||||
"users.manage",
|
||||
]
|
||||
|
||||
export function UserAccessManagement() {
|
||||
const [query, setQuery] = React.useState("")
|
||||
const [users, setUsers] = React.useState<UserRecord[]>(INITIAL_USERS)
|
||||
const [rolePermissions, setRolePermissions] = React.useState<RolePermission[]>(INITIAL_ROLE_PERMISSIONS)
|
||||
|
||||
const filteredUsers = users.filter((user) => {
|
||||
const key = `${user.name} ${user.account} ${user.role}`.toLowerCase()
|
||||
return key.includes(query.toLowerCase())
|
||||
})
|
||||
|
||||
const toggleUserStatus = (id: string) => {
|
||||
setUsers((prev) =>
|
||||
prev.map((user) =>
|
||||
user.id === id
|
||||
? { ...user, status: user.status === "enabled" ? "disabled" : "enabled" }
|
||||
: user
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const togglePermission = (roleName: RolePermission["roleName"], permission: PermissionKey) => {
|
||||
setRolePermissions((prev) =>
|
||||
prev.map((role) => {
|
||||
if (role.roleName !== roleName) return role
|
||||
const has = role.permissions.includes(permission)
|
||||
return {
|
||||
...role,
|
||||
permissions: has
|
||||
? role.permissions.filter((item) => item !== permission)
|
||||
: [...role.permissions, permission],
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight">用户与权限管理</h1>
|
||||
<p className="text-muted-foreground">集中维护账号状态、角色定义与权限边界。</p>
|
||||
</div>
|
||||
<Button className="bg-audi-black hover:bg-audi-dark-gray text-white px-6">新增用户</Button>
|
||||
</div>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<CardTitle className="text-lg font-bold">用户管理</CardTitle>
|
||||
<CardDescription>管理账号启用状态与角色归属。</CardDescription>
|
||||
</div>
|
||||
<div className="w-full max-w-xs">
|
||||
<Input
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="搜索姓名、账号或角色..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent border-b border-gray-100">
|
||||
<TableHead className="font-bold text-audi-black">姓名</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">账号</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">角色</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">状态</TableHead>
|
||||
<TableHead className="font-bold text-audi-black">最近登录</TableHead>
|
||||
<TableHead className="text-right font-bold text-audi-black">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filteredUsers.map((user) => (
|
||||
<TableRow key={user.id} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{user.account}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline">{user.role}</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={
|
||||
user.status === "enabled"
|
||||
? "bg-emerald-50 text-emerald-700 border-emerald-200"
|
||||
: "bg-zinc-100 text-zinc-700 border-zinc-200"
|
||||
}
|
||||
>
|
||||
{user.status === "enabled" ? "启用" : "停用"}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">{user.lastLogin}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="inline-flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
编辑角色
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => toggleUserStatus(user.id)}>
|
||||
{user.status === "enabled" ? "停用" : "启用"}
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-none shadow-sm bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-bold">角色与权限管理</CardTitle>
|
||||
<CardDescription>按角色授予菜单、操作与审批权限（原型可直接勾选）。</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-3 flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Users className="h-4 w-4" />角色
|
||||
<UserCog className="h-4 w-4 ml-4" />权限
|
||||
<ShieldCheck className="h-4 w-4 ml-4 text-audi-red" />权限边界
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent border-b border-gray-100">
|
||||
<TableHead className="font-bold text-audi-black">角色</TableHead>
|
||||
{PERMISSION_COLUMNS.map((permission) => (
|
||||
<TableHead key={permission} className="font-bold text-audi-black text-xs">
|
||||
{PERMISSION_LABEL[permission]}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rolePermissions.map((role) => (
|
||||
<TableRow key={role.roleName} className="hover:bg-gray-50/50 border-b border-gray-50 transition-colors">
|
||||
<TableCell className="font-medium">{role.roleName}</TableCell>
|
||||
{PERMISSION_COLUMNS.map((permission) => {
|
||||
const checked = role.permissions.includes(permission)
|
||||
return (
|
||||
<TableCell key={`${role.roleName}-${permission}`}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => togglePermission(role.roleName, permission)}
|
||||
/>
|
||||
</TableCell>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
19
audi-content-portal/src/hooks/use-mobile.ts
Normal file
19
audi-content-portal/src/hooks/use-mobile.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
|
||||
const onChange = () => {
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
}
|
||||
mql.addEventListener("change", onChange)
|
||||
setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
|
||||
return () => mql.removeEventListener("change", onChange)
|
||||
}, [])
|
||||
|
||||
return !!isMobile
|
||||
}
|
||||
154
audi-content-portal/src/index.css
Normal file
154
audi-content-portal/src/index.css
Normal file
@@ -0,0 +1,154 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
@import "@fontsource-variable/geist";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--color-audi-red: #BB0A30;
|
||||
--color-audi-black: #000000;
|
||||
--color-audi-silver: #F0F0F0;
|
||||
--color-audi-dark-gray: #333333;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
}
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
|
||||
.audi-button {
|
||||
@apply px-6 py-3 bg-audi-black text-white font-medium uppercase tracking-wider transition-all duration-300 hover:bg-audi-dark-gray active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
|
||||
}
|
||||
|
||||
.audi-button-outline {
|
||||
@apply px-6 py-3 border border-audi-black text-audi-black font-medium uppercase tracking-wider transition-all duration-300 hover:bg-audi-black hover:text-white active:scale-95;
|
||||
}
|
||||
|
||||
.audi-input {
|
||||
@apply w-full px-4 py-3 border-b border-gray-300 focus:border-audi-black outline-none transition-colors duration-300 bg-transparent;
|
||||
}
|
||||
|
||||
.audi-card {
|
||||
@apply bg-white border border-gray-100 overflow-hidden transition-all duration-500 hover:shadow-2xl hover:-translate-y-1;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-heading: var(--font-sans);
|
||||
--font-sans: 'Geist Variable', sans-serif;
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-background: var(--background);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
6
audi-content-portal/src/lib/utils.ts
Normal file
6
audi-content-portal/src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
13
audi-content-portal/src/main.tsx
Normal file
13
audi-content-portal/src/main.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import {StrictMode} from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<TooltipProvider>
|
||||
<App />
|
||||
</TooltipProvider>
|
||||
</StrictMode>,
|
||||
);
|
||||
26
audi-content-portal/tsconfig.json
Normal file
26
audi-content-portal/tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./src/*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
29
audi-content-portal/vite.config.ts
Normal file
29
audi-content-portal/vite.config.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { dirname, resolve } from 'path';
|
||||
|
||||
// 手动定义 __dirname 以确保在 Windows 下的兼容性
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
plugins: [react(), tailwindcss()],
|
||||
define: {
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
// 使用 resolve 确保路径在 Windows/Linux 下都能正确解析
|
||||
'@': resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user