feat: 工具配置增强、站点拨测与日志中心多项改进

- 工具配置：新增卸载 API/UI、Go 工具链、流水线构建自动安装依赖
- 修复 ListTools VerifyTool 递归栈溢出导致获取工具配置失败
- Node.js Alpine 安装改用 unofficial-builds musl 预编译包与 index.json 解析 LTS
- 站点拨测：详情页路由、告警自动恢复、并发拨测与默认可观测频率
- 日志中心：RBAC、查询构建器、ES/Loki 增强与审计 request/response 展示
- 发布配置：构建节点、流水线远程执行、Deploy RBAC 导航拆分

frontend/src/components/dashboard/Dashboard.tsx

@@ -160,7 +160,7 @@ export function Dashboard() {
         />
       </div>
 
-      {/* 运维概览 → K8s 集群 → Top5 资源使用 */}
+      {/* 运维概览 → K8s 集群 → 发布历史 */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in-delay-2">
         <OpsOverviewCard
           automation={automationStats}
@@ -170,13 +170,13 @@ export function Dashboard() {
           firingAlerts={alertStats?.firing}
         />
         <KubernetesClusterCard clusters={clusters} />
-        <TopResourceUsageCard topUsage={stats?.top_resource_usage} />
+        <ReleaseHistoryCard releases={releases} />
       </div>
 
-      {/* 费用概览 & 发布历史 */}
+      {/* 费用概览 & Top5 资源使用 */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
         <CostOverviewCard costStats={costStats} />
-        <ReleaseHistoryCard releases={releases} />
+        <TopResourceUsageCard topUsage={stats?.top_resource_usage} />
       </div>
 
       {/* 告警消息 & 证书到期提醒 — 置底 */}

frontend/src/components/dashboard/DashboardCharts.tsx

@@ -1,7 +1,9 @@
+import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import {
   AreaChart,
   Area,
@@ -16,7 +18,7 @@ import {
   BarChart,
   Bar,
 } from 'recharts';
-import { Cpu, HardDrive, Activity, MemoryStick, Database } from 'lucide-react';
+import { Cpu, HardDrive, Activity, MemoryStick, Database, ArrowRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type { JsonData } from '@/types/common';
 
@@ -207,6 +209,7 @@ export function CostOverviewCard({ costStats }: { costStats: JsonData }) {
 
 export function TopResourceUsageCard({ topUsage }: { topUsage: JsonData}) {
   const { t } = useTranslation();
+  const navigate = useNavigate();
   const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
   const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
   const topDiskServers = (topUsage?.disk ?? []).slice(0, 5);
@@ -260,9 +263,20 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: JsonData}) {
   return (
     <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
-        <div>
-          <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.topUsage.title')}</CardTitle>
-          <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.topUsage.description')}</CardDescription>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.topUsage.title')}</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.topUsage.description')}</CardDescription>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/dashboards')}
+          >
+            {t('dashboard.ops.monitorScreen')}
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
+          </Button>
         </div>
       </CardHeader>
       <CardContent>

frontend/src/components/dashboard/DashboardRecent.tsx

@@ -391,8 +391,8 @@ export function OpsOverviewCard({
             <CardTitle className="text-[var(--dg-text-primary)]">{t('dashboard.ops.title')}</CardTitle>
             <CardDescription className="text-[var(--dg-text-muted)]">{t('dashboard.ops.description')}</CardDescription>
           </div>
-          <Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/dashboards')}>
-            {t('dashboard.ops.monitorScreen')}
+          <Button variant="ghost" size="sm" className="dg-btn-ghost text-xs" onClick={() => navigate('/ai-agent-cli')}>
+            {t('menu.aiAgentCli')}
             <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>

frontend/src/components/deploy/BuildNodesManager.tsx

@@ -0,0 +1,350 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Plus, Pencil, Trash2, RefreshCw, Server, Cpu } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+
+
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { toast } from 'sonner';
+import { useConfirm } from '@/components/ui/confirm-dialog';
+import { buildNodeApi, serverApi, type BuildNode } from '@/api';
+
+interface ServerItem {
+  id: number;
+  hostname: string;
+  ip: string;
+}
+
+// 构建节点管理（Jenkins Agent 风格 SSH 节点） // Logan.Li
+export default function BuildNodesManager({ embedded = false }: { embedded?: boolean }) {
+  const confirm = useConfirm();
+  const [nodes, setNodes] = useState<BuildNode[]>([]);
+  const [master, setMaster] = useState({ name: 'Master', max_executors: 2, running_count: 0 });
+  const [servers, setServers] = useState<ServerItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editNode, setEditNode] = useState<BuildNode | null>(null);
+  const [testingId, setTestingId] = useState<number | null>(null);
+  const [masterMax, setMasterMax] = useState('2');
+  const [savingMaster, setSavingMaster] = useState(false);
+
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [serverId, setServerId] = useState('');
+  const [labels, setLabels] = useState('');
+  const [maxExecutors, setMaxExecutors] = useState('2');
+  const [workspacePath, setWorkspacePath] = useState('/data/aiops-workspace');
+  const [submitting, setSubmitting] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [nodeRes, srvRes] = await Promise.all([
+        buildNodeApi.list(),
+        serverApi.getServers({ page_size: 200 }).catch(() => ({ list: [] })),
+      ]);
+      const data = nodeRes as { list?: BuildNode[]; master?: typeof master };
+      setNodes(Array.isArray(data?.list) ? data.list : []);
+      if (data?.master) {
+        setMaster(data.master);
+        setMasterMax(String(data.master.max_executors || 2));
+      }
+      const srvList = (srvRes as { list?: ServerItem[] })?.list || [];
+      setServers(srvList);
+    } catch {
+      toast.error('加载构建节点失败');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const openCreate = () => {
+    setEditNode(null);
+    setName('');
+    setDescription('');
+    setServerId('');
+    setLabels('');
+    setMaxExecutors('2');
+    setWorkspacePath('/data/aiops-workspace');
+    setDialogOpen(true);
+  };
+
+  const openEdit = (node: BuildNode) => {
+    setEditNode(node);
+    setName(node.name);
+    setDescription(node.description || '');
+    setServerId(String(node.server_id));
+    setLabels(node.labels || '');
+    setMaxExecutors(String(node.max_executors || 2));
+    setWorkspacePath(node.workspace_path || '/data/aiops-workspace');
+    setDialogOpen(true);
+  };
+
+  const handleSubmit = async () => {
+    if (!name.trim() || !serverId) {
+      toast.error('请填写名称并选择服务器');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const payload = {
+        name: name.trim(),
+        description,
+        server_id: Number(serverId),
+        labels,
+        max_executors: Number(maxExecutors) || 2,
+        workspace_path: workspacePath || '/data/aiops-workspace',
+      };
+      if (editNode) {
+        await buildNodeApi.update(editNode.id, payload);
+        toast.success('已更新');
+      } else {
+        await buildNodeApi.create(payload);
+        toast.success('已创建');
+      }
+      setDialogOpen(false);
+      load();
+    } catch {
+      toast.error('操作失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleDelete = async (node: BuildNode) => {
+    const ok = await confirm({ title: '删除节点', description: `确定删除构建节点「${node.name}」？` });
+    if (!ok) return;
+    try {
+      await buildNodeApi.delete(node.id);
+      toast.success('已删除');
+      load();
+    } catch {
+      toast.error('删除失败，请确认无流水线绑定');
+    }
+  };
+
+  const handleTest = async (node: BuildNode) => {
+    setTestingId(node.id);
+    try {
+      const res = await buildNodeApi.test(node.id) as { success?: boolean; message?: string };
+      if (res?.success) {
+        toast.success(`连通成功: ${res.message || ''}`);
+      } else {
+        toast.error(res?.message || '连接失败');
+      }
+    } catch {
+      toast.error('测试失败');
+    } finally {
+      setTestingId(null);
+    }
+  };
+
+  const handleToggle = async (node: BuildNode) => {
+    try {
+      await buildNodeApi.update(node.id, { enabled: !node.enabled });
+      load();
+    } catch {
+      toast.error('更新失败');
+    }
+  };
+
+  const handleSaveMaster = async () => {
+    const n = Number(masterMax);
+    if (!n || n < 1) {
+      toast.error('并发数至少为 1');
+      return;
+    }
+    setSavingMaster(true);
+    try {
+      const res = await buildNodeApi.updateMaster({ max_executors: n });
+      const m = res as { max_executors?: number; running_count?: number };
+      setMaster((prev) => ({
+        ...prev,
+        max_executors: m?.max_executors ?? n,
+        running_count: m?.running_count ?? prev.running_count,
+      }));
+      toast.success('Master 并发已更新');
+    } catch {
+      toast.error('更新失败');
+    } finally {
+      setSavingMaster(false);
+    }
+  };
+
+  const panel = (
+    <div className={embedded ? 'space-y-4' : 'mt-4 space-y-4'}>
+        <ContentPanel
+          toolbar={(
+            <div className="flex items-center justify-between w-full">
+              <span className="text-sm font-medium text-[var(--dg-text-primary)]">构建节点</span>
+              <div className="flex gap-2">
+                <Button variant="ghost" size="sm" onClick={load} disabled={loading}>
+                  <RefreshCw className={`h-3.5 w-3.5 mr-1${loading ? ' animate-spin' : ''}`} />刷新
+                </Button>
+                <Button size="sm" onClick={openCreate}>
+                  <Plus className="h-3.5 w-3.5 mr-1" />添加
+                </Button>
+              </div>
+            </div>
+          )}
+        >
+          <div className="mb-3 p-3 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div className="flex items-center gap-2">
+                <Cpu className="h-4 w-4 text-[var(--dg-text-muted)]" />
+                <span className="text-sm font-medium text-[var(--dg-text-primary)]">Master（内置）</span>
+                <Badge variant="outline" className="text-[10px]">默认调度</Badge>
+                <span className="text-xs text-[var(--dg-text-muted)]">
+                  占用 {master.running_count}/{master.max_executors}
+                </span>
+              </div>
+              <div className="flex items-center gap-2">
+                <Label className="text-xs text-[var(--dg-text-muted)] shrink-0">最大并发</Label>
+                <Input
+                  type="number"
+                  min={1}
+                  max={32}
+                  value={masterMax}
+                  onChange={(e) => setMasterMax(e.target.value)}
+                  className="h-7 w-16 text-xs dg-input"
+                />
+                <Button size="sm" className="h-7 text-xs" onClick={handleSaveMaster} disabled={savingMaster}>
+                  {savingMaster ? '保存中' : '保存'}
+                </Button>
+              </div>
+            </div>
+            <p className="text-[11px] text-[var(--dg-text-muted)] mt-2">
+              未指定节点时优先在 Master 执行；并发设为 1 时按触发顺序串行排队；满载后自动调度到空闲远程节点
+            </p>
+          </div>
+
+          {nodes.length === 0 ? (
+            <PageEmpty
+              title="暂无远程构建节点"
+              description="关联服务器资产添加 SSH 节点，将重型构建任务调度到高性能机器"
+              action={<Button size="sm" onClick={openCreate}><Plus className="h-3.5 w-3.5 mr-1" />添加节点</Button>}
+            />
+          ) : (
+            <div className="space-y-2">
+              {nodes.map((node) => (
+                <div
+                  key={node.id}
+                  className="flex items-center justify-between gap-3 p-3 rounded-lg border border-[var(--dg-border)] hover:bg-[var(--dg-bg-secondary)]/50"
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="font-medium text-sm text-[var(--dg-text-primary)]">{node.name}</span>
+                      <Badge variant={node.enabled ? 'default' : 'secondary'} className="text-[10px]">
+                        {node.enabled ? '启用' : '禁用'}
+                      </Badge>
+                      <span className="text-[10px] text-[var(--dg-text-muted)] font-mono">
+                        {node.hostname || node.ip || `server#${node.server_id}`}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-3 mt-1 text-[11px] text-[var(--dg-text-muted)]">
+                      <span>执行器 {node.running_count || 0}/{node.max_executors}</span>
+                      {node.labels && <span>标签 {node.labels}</span>}
+                      <span className="truncate">{node.workspace_path}</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-1 shrink-0">
+                    <Button variant="ghost" size="sm" className="h-7 text-xs" disabled={testingId === node.id} onClick={() => handleTest(node)}>
+                      {testingId === node.id ? '测试中' : '测试'}
+                    </Button>
+                    <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggle(node)}>
+                      {node.enabled ? '禁用' : '启用'}
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(node)}>
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleDelete(node)}>
+                      <Trash2 className="h-3.5 w-3.5 text-[var(--dg-red)]" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </ContentPanel>
+    </div>
+  );
+
+  const dialog = (
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-md bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
+          <DialogHeader>
+            <DialogTitle>{editNode ? '编辑节点' : '添加节点'}</DialogTitle>
+            <DialogDescription className="text-[var(--dg-text-muted)]">
+              基于服务器 SSH 凭据注册构建 Agent，流水线可绑定或自动调度
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Label className="text-xs">节点名称</Label>
+              <Input value={name} onChange={(e) => setName(e.target.value)} className="h-8 text-xs dg-input" placeholder="build-node-01" />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">关联服务器</Label>
+              <Select value={serverId || '__none'} onValueChange={(v) => setServerId(v === '__none' ? '' : v)}>
+                <SelectTrigger className="h-8 text-xs dg-input"><SelectValue placeholder="选择服务器" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none">请选择</SelectItem>
+                  {servers.map((s) => (
+                    <SelectItem key={s.id} value={String(s.id)}>
+                      {s.hostname} ({s.ip})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1">
+                <Label className="text-xs">最大并发</Label>
+                <Input value={maxExecutors} onChange={(e) => setMaxExecutors(e.target.value)} type="number" min={1} className="h-8 text-xs dg-input" />
+              </div>
+              <div className="space-y-1">
+                <Label className="text-xs">工作区路径</Label>
+                <Input value={workspacePath} onChange={(e) => setWorkspacePath(e.target.value)} className="h-8 text-xs font-mono dg-input" />
+              </div>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">标签 <span className="text-[var(--dg-text-muted)]">(可选)</span></Label>
+              <Input value={labels} onChange={(e) => setLabels(e.target.value)} className="h-8 text-xs dg-input" placeholder="linux,docker,high-mem" />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">描述</Label>
+              <Input value={description} onChange={(e) => setDescription(e.target.value)} className="h-8 text-xs dg-input" />
+            </div>
+            <div className="flex justify-end gap-2 pt-2">
+              <Button variant="outline" onClick={() => setDialogOpen(false)}>取消</Button>
+              <Button onClick={handleSubmit} disabled={submitting}>{submitting ? '保存中' : '保存'}</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+  );
+
+  if (embedded) {
+    return (
+      <>
+        {panel}
+        {dialog}
+      </>
+    );
+  }
+
+  return (
+    <PageShell title="构建节点" subtitle="Master 与远程 SSH 构建节点">
+      {panel}
+      {dialog}
+    </PageShell>
+  );
+}

frontend/src/components/deploy/DeployCredentials.tsx

@@ -6,7 +6,9 @@ import { Badge } from '@/components/ui/badge';
 import { PageShell } from '@/components/layout/PageShell';
 import { ContentPanel } from '@/components/layout/ContentPanel';
 import { PageEmpty } from '@/components/layout/PageEmpty';
-import { StatStrip } from '@/components/ui/stat-strip';
+
+import { useSearchParams } from 'react-router-dom';
+import BuildNodesManager from './BuildNodesManager';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -98,8 +100,12 @@ function EnvFormDialog({ open, onClose, onSaved, editData }: { open: boolean; on
   );
 }
 
+const CONFIG_TABS = ['repos', 'registries', 'environments', 'tools', 'build-nodes'] as const;
+
 export default function DeployCredentials() {
   const _confirm = useConfirm();
+  const [searchParams] = useSearchParams();
+  const tabFromUrl = searchParams.get('tab');
   const [repos, setRepos] = useState<Repo[]>([]);
   const [registries, setRegistries] = useState<Registry[]>([]);
   const [environments, setEnvironments] = useState<Environment[]>([]);
@@ -109,7 +115,9 @@ export default function DeployCredentials() {
   const [editingId, setEditingId] = useState<number | null>(null);
   const [envDialogOpen, setEnvDialogOpen] = useState(false);
   const [editEnv, setEditEnv] = useState<Environment | null>(null);
-  const [activeTab, setActiveTab] = useState('repos');
+  const [activeTab, setActiveTab] = useState(
+    tabFromUrl && (CONFIG_TABS as readonly string[]).includes(tabFromUrl) ? tabFromUrl : 'repos',
+  );
 
   const fetchAll = async () => {
     setLoading(true);
@@ -142,29 +150,21 @@ export default function DeployCredentials() {
     { id: 'repos', label: 'Git 仓库', badge: repos.length || undefined },
     { id: 'registries', label: '镜像仓库', badge: registries.length || undefined },
     { id: 'environments', label: '环境管理', badge: environments.length || undefined },
+    { id: 'build-nodes', label: '构建节点' },
     { id: 'tools', label: '工具配置' },
   ];
 
   return (
     <PageShell
       variant="list"
-      title="发布配置管理"
-      subtitle="Git 仓库、镜像仓库、环境与工具配置"
+      title="发布配置"
+      subtitle="Git 仓库、镜像仓库、环境与工具"
       icon={<Settings2 className="h-5 w-5" />}
       loading={loading}
       tabs={pageTabs}
       activeTab={activeTab}
       onTabChange={setActiveTab}
-      metrics={(
-        <StatStrip
-          items={[
-            { label: 'Git 仓库', value: repos.length, color: 'blue' },
-            { label: '镜像仓库', value: registries.length, color: 'cyan' },
-            { label: '环境', value: environments.length, color: 'purple' },
-          ]}
-        />
-      )}
-      actions={(
+      actions={activeTab === 'build-nodes' ? undefined : (
         <>
           <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={fetchAll}>
             <RefreshCw className="w-4 h-4 mr-1" />刷新
@@ -177,6 +177,7 @@ export default function DeployCredentials() {
           </Button>
         </>
       )}
+      contentClassName="space-y-4"
     >
       {activeTab === 'repos' && (
         repos.length === 0 ? (
@@ -325,6 +326,8 @@ export default function DeployCredentials() {
         </>
       )}
 
+      {activeTab === 'build-nodes' && <BuildNodesManager embedded />}
+
       {activeTab === 'tools' && <ToolConfigTab />}
 
       <CredentialFormDialog

frontend/src/components/deploy/DeployNav.tsx

@@ -0,0 +1,37 @@
+import { NavLink } from 'react-router-dom';
+import { GitBranch, Settings2, Shield, Users, Server } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const NAV_ITEMS = [
+  { path: '/pipelines', label: '流水线', icon: GitBranch },
+  { path: '/deploy/build-nodes', label: '构建节点', icon: Server },
+  { path: '/deploy/configureTools', label: '发布配置', icon: Settings2 },
+  { path: '/deploy/rbac', label: 'Job 权限', icon: Shield },
+  { path: '/deploy/groups', label: '用户组', icon: Users },
+];
+
+// 应用发布模块二级导航 // Logan.Li
+export function DeployNav() {
+  return (
+    <nav className="flex items-center gap-1 p-1 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] w-fit flex-wrap">
+      {NAV_ITEMS.map((item) => {
+        const Icon = item.icon;
+        return (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            className={({ isActive }) => cn(
+              'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors',
+              isActive
+                ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] shadow-sm'
+                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]',
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+            {item.label}
+          </NavLink>
+        );
+      })}
+    </nav>
+  );
+}

frontend/src/components/deploy/DeployRBAC.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react';
-import { Shield, Plus, Trash2, Save, Loader2, Users, Regex, Check, X, GitBranch, UserPlus} from 'lucide-react';
+import { Shield, Plus, Trash2, Save, Loader2, Users, GitBranch, UserPlus, Check, X } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -11,45 +11,62 @@ import { deployApi, userApi, pipelineApi } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { PageShell } from '@/components/layout/PageShell';
 import { PageEmpty } from '@/components/layout/PageEmpty';
-import { StatStrip } from '@/components/ui/stat-strip';
+
+import { useSearchParams } from 'react-router-dom';
+import UserGroupsManager from './UserGroupsManager';
+import { JobRoleCreateDialog } from './deploy-rbac/JobRoleCreateDialog';
+import { matchPipelines, pipelineDisplayLabel, type PipelineMatchItem } from './deploy-rbac/matchPipeline';
 import type { JsonData } from '@/types/common';
 
 interface ItemRole {
-  id: number; name: string; code: string; pattern: string; role: string;
-  description: string; status: number; created_at: string;
+  id: number;
+  name: string;
+  code: string;
+  pattern: string;
+  role: string;
+  description: string;
+  status: number;
+  created_at: string;
 }
 
 interface AssignedUser {
-  id: number; user_id: number; item_role_id: number;
-  user?: { id: number; username: string; real_name: string };
+  id: number;
+  user_id: number;
+  item_role_id: number;
   item_role?: ItemRole;
 }
 
+const ROLE_LABEL: Record<string, string> = {
+  owner: '拥有者',
+  editor: '编辑者',
+  viewer: '查看者',
+};
+
+const RBAC_TABS = ['roles', 'users', 'preview', 'groups'] as const;
+
+// 发布 Job 权限 — 正则匹配 code / job_name，Jenkins Role Strategy 风格 // Logan.Li
 export default function DeployRBAC() {
+  const [searchParams] = useSearchParams();
+  const tabFromUrl = searchParams.get('tab');
   const [roles, setRoles] = useState<ItemRole[]>([]);
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
-
-  // Pipeline list for live preview
-  const [pipelines, setPipelines] = useState<JsonData[]>([]);
+  const [activeTab, setActiveTab] = useState(
+    tabFromUrl && (RBAC_TABS as readonly string[]).includes(tabFromUrl) ? tabFromUrl : 'roles',
+  );
+  const [pipelines, setPipelines] = useState<PipelineMatchItem[]>([]);
   const [previewRoleId, setPreviewRoleId] = useState<number | null>(null);
-
-  // User assignment
   const [users, setUsers] = useState<JsonData[]>([]);
   const [assignments, setAssignments] = useState<AssignedUser[]>([]);
-  const [selectedUserId, setSelectedUserId] = useState<string>('');
-  const [assignRoleId, setAssignRoleId] = useState<string>('');
+  const [selectedUserId, setSelectedUserId] = useState('');
+  const [assignRoleId, setAssignRoleId] = useState('');
   const [assignLoading, setAssignLoading] = useState(false);
-
-  // Create
-  const [showCreate, setShowCreate] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
   const [newName, setNewName] = useState('');
   const [newCode, setNewCode] = useState('');
   const [newPattern, setNewPattern] = useState('');
   const [newRole, setNewRole] = useState('editor');
   const [newDesc, setNewDesc] = useState('');
-
-  // Edit
   const [editing, setEditing] = useState<number | null>(null);
   const [editPattern, setEditPattern] = useState('');
   const [editRole, setEditRole] = useState('');
@@ -64,11 +81,10 @@ export default function DeployRBAC() {
         pipelineApi.getPipelines({ page_size: 200 }),
         userApi.getUsers({ page_size: 500 }),
       ]);
-      setRoles(Array.isArray(rolesRes) ? rolesRes : (rolesRes as JsonData)?.list || (rolesRes as JsonData)?.data || []);
-      setPipelines(Array.isArray(pipesRes) ? pipesRes : (pipesRes as JsonData)?.list || (pipesRes as JsonData)?.data || []);
-      const uList = Array.isArray(usersRes) ? usersRes : (usersRes as JsonData)?.list || (usersRes as JsonData)?.data || [];
-      setUsers(uList);
-    } catch { /* */ }
+      setRoles(Array.isArray(rolesRes) ? rolesRes : (rolesRes as JsonData)?.list || []);
+      setPipelines(Array.isArray(pipesRes) ? pipesRes : (pipesRes as JsonData)?.list || []);
+      setUsers(Array.isArray(usersRes) ? usersRes : (usersRes as JsonData)?.list || []);
+    } catch { /* silent */ }
     finally { setLoading(false); }
   };
 
@@ -78,40 +94,40 @@ export default function DeployRBAC() {
     if (!selectedUserId) { setAssignments([]); return; }
     try {
       const res: JsonData = await deployApi.getUserItemRoles(Number(selectedUserId));
-      setAssignments(Array.isArray(res) ? res : res?.data || res?.list || []);
+      setAssignments(Array.isArray(res) ? res : res?.list || []);
     } catch { setAssignments([]); }
   };
 
   useEffect(() => { loadAssignments(); }, [selectedUserId]);
 
-  // Compute matched pipeline codes for each role
   const matchCount = useMemo(() => {
-    const map: Record<number, string[]> = {};
-    roles.forEach(r => {
-      try {
-        const re = new RegExp(r.pattern);
-        map[r.id] = pipelines.filter(p => re.test(p.code)).map(p => p.code);
-      } catch { map[r.id] = []; }
-    });
+    const map: Record<number, PipelineMatchItem[]> = {};
+    roles.forEach((r) => { map[r.id] = matchPipelines(r.pattern, pipelines); });
     return map;
   }, [roles, pipelines]);
 
-  const previewRole = previewRoleId ? roles.find(r => r.id === previewRoleId) : null;
-  const previewMatches = previewRole ? (matchCount[previewRoleId!] || []) : [];
+  const previewMatches = previewRoleId ? (matchCount[previewRoleId] || []) : pipelines;
 
   const handleCreate = async () => {
     if (!newName.trim() || !newCode.trim() || !newPattern.trim()) {
-      toast.error('名称、代码、正则表达式不能为空'); return;
+      toast.error('请填写名称、标识与正则'); return;
     }
     setSaving(true);
     try {
-      await deployApi.createItemRole({ name: newName.trim(), code: newCode.trim(), pattern: newPattern.trim(), role: newRole, description: newDesc });
+      await deployApi.createItemRole({
+        name: newName.trim(),
+        code: newCode.trim(),
+        pattern: newPattern.trim(),
+        role: newRole,
+        description: newDesc,
+      });
       toast.success('已创建');
-      setShowCreate(false);
+      setCreateOpen(false);
       setNewName(''); setNewCode(''); setNewPattern(''); setNewRole('editor'); setNewDesc('');
       loadData();
-    } catch (e) { toast.error(e?.message || '创建失败'); }
-    finally { setSaving(false); }
+    } catch (e: unknown) {
+      toast.error((e as Error)?.message || '创建失败');
+    } finally { setSaving(false); }
   };
 
   const handleUpdate = async (id: number) => {
@@ -122,12 +138,17 @@ export default function DeployRBAC() {
       toast.success('已更新');
       setEditing(null);
       loadData();
-    } catch (e) { toast.error(e?.message || '更新失败'); }
-    finally { setSaving(false); }
+    } catch (e: unknown) {
+      toast.error((e as Error)?.message || '更新失败');
+    } finally { setSaving(false); }
   };
 
   const handleDelete = async (role: ItemRole) => {
-    const ok = await _confirm({ title: '删除角色', description: `确定删除「${role.name}」？匹配 ${matchCount[role.id]?.length || 0} 条流水线`, variant: 'destructive' });
+    const ok = await _confirm({
+      title: '删除权限',
+      description: `确定删除「${role.name}」？将影响 ${matchCount[role.id]?.length || 0} 个发布任务`,
+      variant: 'destructive',
+    });
     if (!ok) return;
     try { await deployApi.deleteItemRole(role.id); toast.success('已删除'); loadData(); }
     catch { toast.error('删除失败'); }
@@ -142,15 +163,19 @@ export default function DeployRBAC() {
   };
 
   const handleAssign = async () => {
-    if (!selectedUserId || !assignRoleId) { toast.error('请选择用户和角色'); return; }
+    if (!selectedUserId || !assignRoleId) { toast.error('请选择用户和权限'); return; }
     setAssignLoading(true);
     try {
-      await deployApi.assignItemRole(Number(selectedUserId), { user_id: Number(selectedUserId), item_role_id: Number(assignRoleId) });
+      await deployApi.assignItemRole(Number(selectedUserId), {
+        user_id: Number(selectedUserId),
+        item_role_id: Number(assignRoleId),
+      });
       toast.success('已分配');
       setAssignRoleId('');
       loadAssignments();
-    } catch (e) { toast.error(e?.message || '分配失败'); }
-    finally { setAssignLoading(false); }
+    } catch (e: unknown) {
+      toast.error((e as Error)?.message || '分配失败');
+    } finally { setAssignLoading(false); }
   };
 
   const handleRevoke = async (id: number) => {
@@ -161,257 +186,211 @@ export default function DeployRBAC() {
     } catch { toast.error('撤销失败'); }
   };
 
-  const roleBadgeClass = (role: string) =>
-    role === 'owner' ? 'bg-amber-500/20 dg-text-yellow border-amber-500/30' :
-    role === 'editor' ? 'bg-blue-500/20 dg-text-blue border-blue-500/30' :
-    'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]';
-
-  const selectedUser = users.find(u => String(u.id) === selectedUserId);
-
-  const activeRoles = roles.filter(r => r.status === 1).length;
+  const selectedUser = users.find((u) => String(u.id) === selectedUserId);
+  const pageTabs = [
+    { id: 'roles', label: '权限策略', badge: roles.length || undefined },
+    { id: 'users', label: '用户授权' },
+    { id: 'groups', label: '用户组' },
+    { id: 'preview', label: '命中预览' },
+  ];
 
   return (
     <PageShell
       variant="list"
-      title="发布权限"
-      subtitle="Jenkins-style Role Strategy — 按流水线 code 正则匹配分配角色"
+      title="Job 权限"
+      subtitle="按流水线 code / Job 名称正则分配发布权限"
       icon={<Shield className="h-5 w-5" />}
       loading={loading}
-      metrics={(
-        <StatStrip
-          items={[
-            { label: 'Item Role', value: roles.length, color: 'purple' },
-            { label: '已启用', value: activeRoles, color: 'emerald' },
-            { label: '流水线', value: pipelines.length, color: 'blue' },
-          ]}
-        />
-      )}
-      actions={(
-        <Button className="dg-btn-primary" onClick={() => setShowCreate(true)} disabled={showCreate}>
-          <Plus className="w-4 h-4 mr-1" />新建角色
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      actions={activeTab === 'groups' ? undefined : (
+        <Button className="dg-btn-primary" onClick={() => setCreateOpen(true)}>
+          <Plus className="w-4 h-4 mr-1" />新建权限
         </Button>
       )}
+      contentClassName="space-y-4"
     >
-      {/* ====== Pipeline Preview ====== */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-4">
-          <div className="flex items-center gap-2 mb-3">
-            <GitBranch className="w-4 h-4 dg-text-blue" />
-            <span className="text-sm font-medium text-[var(--dg-text-primary)]">流水线命中预览</span>
-            <span className="text-xs text-[var(--dg-text-muted)]">— 选择一个角色查看哪些流水线会被匹配</span>
-          </div>
-          <div className="flex gap-2 mb-3 flex-wrap">
-            <Button variant={previewRoleId === null ? 'secondary' : 'ghost'} size="sm" onClick={() => setPreviewRoleId(null)}>全部 ({pipelines.length})</Button>
-            {roles.map(r => (
-              <Button key={r.id} variant={previewRoleId === r.id ? 'secondary' : 'ghost'} size="sm" onClick={() => setPreviewRoleId(r.id)}
-                className={r.status === 0 ? 'opacity-40' : ''}>
-                {r.name} ({matchCount[r.id]?.length || 0})
-              </Button>
+      {activeTab === 'roles' && (
+        roles.length === 0 ? (
+          <PageEmpty
+            icon={<Shield className="h-10 w-10" />}
+            title="暂无 Job 权限策略"
+            description="创建策略后，用户将按正则自动获得匹配流水线的访问权限"
+            action={<Button onClick={() => setCreateOpen(true)}><Plus className="h-4 w-4 mr-1" />新建权限</Button>}
+          />
+        ) : (
+          <div className="space-y-2">
+            {roles.map((role) => (
+              <Card key={role.id} className={`dg-card ${role.status === 0 ? 'opacity-50' : ''}`}>
+                <CardContent className="p-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="text-sm font-medium text-[var(--dg-text-primary)]">{role.name}</span>
+                        <Badge variant="outline" className="text-[10px] border-[var(--dg-border)]">
+                          {ROLE_LABEL[role.role] || role.role}
+                        </Badge>
+                        {role.status === 0 && <Badge variant="outline" className="text-[10px]">已禁用</Badge>}
+                        <Badge
+                          variant="outline"
+                          className="text-[10px] cursor-pointer border-[var(--dg-border)]"
+                          onClick={() => { setActiveTab('preview'); setPreviewRoleId(role.id); }}
+                        >
+                          {matchCount[role.id]?.length || 0} 个 Job
+                        </Badge>
+                      </div>
+                      <p className="text-xs text-[var(--dg-text-muted)] mt-1 font-mono truncate">
+                        {role.pattern}
+                        {role.description ? ` · ${role.description}` : ''}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                      {editing === role.id ? (
+                        <>
+                          <Input value={editPattern} onChange={(e) => setEditPattern(e.target.value)} className="h-7 w-32 text-xs font-mono dg-input" />
+                          <Select value={editRole} onValueChange={setEditRole}>
+                            <SelectTrigger className="h-7 w-20 text-xs"><SelectValue /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="owner">拥有者</SelectItem>
+                              <SelectItem value="editor">编辑者</SelectItem>
+                              <SelectItem value="viewer">查看者</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
+                          <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => setEditing(null)}><X className="w-3.5 h-3.5" /></Button>
+                        </>
+                      ) : (
+                        <>
+                          <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => { setEditing(role.id); setEditPattern(role.pattern); setEditRole(role.role); }}>编辑</Button>
+                          <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggleStatus(role)}>{role.status ? '禁用' : '启用'}</Button>
+                          <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-red)]" onClick={() => handleDelete(role)}><Trash2 className="w-3.5 h-3.5" /></Button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
             ))}
           </div>
-          <div className="flex flex-wrap gap-1.5 max-h-32 overflow-y-auto">
-            {previewRoleId === null
-              ? pipelines.map(p => <Badge key={p.id} variant="secondary" className="text-xs"><GitBranch className="w-3 h-3 mr-0.5" />{p.code}</Badge>)
-              : pipelines.map(p => {
-                  const matched = previewMatches.includes(p.code);
-                  return (
-                    <Badge key={p.id} variant={matched ? 'default' : 'secondary'}
-                      className={`text-xs ${matched ? 'bg-purple-500/20 text-purple-300 border-purple-500/30' : 'opacity-30'}`}>
-                      <GitBranch className="w-3 h-3 mr-0.5" />{p.code}
-                    </Badge>
-                  );
-                })
-            }
-            {previewRoleId !== null && previewMatches.length === 0 && (
-              <span className="text-xs dg-text-red">无匹配 — 请调整正则表达式</span>
-            )}
-          </div>
-        </CardContent>
-      </Card>
+        )
+      )}
 
-      {/* Create form */}
-      {showCreate && (
-        <Card className="bg-[var(--dg-bg-secondary)] border-purple-500/20">
-          <CardContent className="p-4 space-y-3">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-[var(--dg-text-primary)] flex items-center gap-2"><Plus className="w-4 h-4" />新建 Item Role</span>
-              <Button variant="ghost" size="sm" onClick={() => setShowCreate(false)}>取消</Button>
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1"><Label className="text-xs">名称</Label><Input value={newName} onChange={e => setNewName(e.target.value)} placeholder="如: backend" className="h-8 text-sm" /></div>
-              <div className="space-y-1"><Label className="text-xs">代码 (唯一标识)</Label><Input value={newCode} onChange={e => setNewCode(e.target.value)} placeholder="如: backend" className="h-8 text-sm font-mono" /></div>
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div className="space-y-1">
-                <Label className="text-xs flex items-center gap-1"><Regex className="w-3 h-3" />正则匹配 Pattern</Label>
-                <Input value={newPattern} onChange={e => { setNewPattern(e.target.value); }} placeholder='如: ^cex-.*' className="h-8 text-sm font-mono" />
-                {newPattern && (
-                  <p className="text-xs text-[var(--dg-text-muted)]">
-                    实时匹配: {(() => { try { const n = pipelines.filter(p => new RegExp(newPattern).test(p.code)).length; return n > 0 ? `✅ 命中 ${n} 条流水线` : '⚠️ 无匹配'; } catch { return '❌ 正则语法错误'; } })()}
-                  </p>
-                )}
-              </div>
-              <div className="space-y-1">
-                <Label className="text-xs">角色</Label>
-                <Select value={newRole} onValueChange={setNewRole}>
-                  <SelectTrigger className="h-8 text-sm"><SelectValue /></SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="owner">拥有者 (owner)</SelectItem>
-                    <SelectItem value="editor">编辑者 (editor)</SelectItem>
-                    <SelectItem value="viewer">查看者 (viewer)</SelectItem>
+      {activeTab === 'users' && (
+        <Card className="dg-card">
+          <CardContent className="p-4 space-y-4">
+            <div className="flex flex-wrap gap-3 items-end">
+              <div className="space-y-1 flex-1 min-w-[200px]">
+                <Label className="text-xs">用户</Label>
+                <Select value={selectedUserId} onValueChange={setSelectedUserId}>
+                  <SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder="选择用户" /></SelectTrigger>
+                  <SelectContent className="max-h-60">
+                    {users.map((u) => (
+                      <SelectItem key={u.id as number} value={String(u.id)}>
+                        {(u.real_name as string) || (u.username as string)} ({u.username as string})
+                      </SelectItem>
+                    ))}
                   </SelectContent>
                 </Select>
               </div>
-            </div>
-            <div className="space-y-1"><Label className="text-xs">描述 (可选)</Label><Input value={newDesc} onChange={e => setNewDesc(e.target.value)} placeholder="简要说明此角色的用途" className="h-8 text-sm" /></div>
-            <Button onClick={handleCreate} disabled={saving} className="w-full">
-              {saving ? <Loader2 className="w-4 h-4 mr-1 animate-spin" /> : <Save className="w-4 h-4 mr-1" />}
-              {saving ? '创建中...' : '创建'}
-            </Button>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Role list */}
-      {roles.length === 0 ? (
-        <PageEmpty icon={<Shield className="h-10 w-10" />} title="暂无 Item Role" description="创建角色后按正则匹配流水线并分配给用户" />
-      ) : (
-        <div className="space-y-2">
-          {roles.map(role => (
-            <Card key={role.id} className={`bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] ${role.status === 0 ? 'opacity-50' : ''}`}>
-              <CardContent className="p-3">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-3 flex-1 min-w-0">
-                    <div className="w-9 h-9 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
-                      <Regex className="w-4 h-4 dg-text-purple" />
-                    </div>
-                    <div className="min-w-0">
-                      <div className="flex items-center gap-1.5 flex-wrap">
-                        <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{role.name}</span>
-                        <Badge className={`text-xs border ${roleBadgeClass(role.role)}`}>{role.role === 'owner' ? '拥有者' : role.role === 'editor' ? '编辑者' : '查看者'}</Badge>
-                        {role.status === 0 && <Badge variant="secondary" className="text-xs dg-text-red">已禁用</Badge>}
-                        <Badge variant="secondary" className="text-xs cursor-pointer" onClick={() => setPreviewRoleId(previewRoleId === role.id ? null : role.id)}>
-                          <GitBranch className="w-3 h-3 mr-0.5" />{matchCount[role.id]?.length || 0} 条
-                        </Badge>
-                      </div>
-                      <div className="text-xs text-[var(--dg-text-secondary)] mt-0.5 truncate">
-                        <code className="font-mono dg-text-purple bg-purple-500/10 px-1 rounded">{role.code}</code>
-                        <span className="mx-1">→</span>
-                        <code className="font-mono dg-text-blue bg-blue-500/10 px-1 rounded">{role.pattern}</code>
-                        {role.description && <span className="ml-2 opacity-60">{role.description}</span>}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-1 shrink-0">
-                    {editing === role.id ? (
-                      <>
-                        <Input value={editPattern} onChange={e => setEditPattern(e.target.value)} className="h-7 w-36 text-xs font-mono" placeholder="正则表达式" />
-                        <Select value={editRole} onValueChange={setEditRole}>
-                          <SelectTrigger className="h-7 w-20 text-xs"><SelectValue /></SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="owner">拥有者</SelectItem>
-                            <SelectItem value="editor">编辑者</SelectItem>
-                            <SelectItem value="viewer">查看者</SelectItem>
-                          </SelectContent>
-                        </Select>
-                        <Button size="icon" variant="ghost" className="h-7 w-7 dg-text-green" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
-                        <Button size="icon" variant="ghost" className="h-7 w-7 dg-text-red" onClick={() => setEditing(null)}><X className="w-3.5 h-3.5" /></Button>
-                      </>
-                    ) : (
-                      <>
-                        <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => { setEditing(role.id); setEditPattern(role.pattern); setEditRole(role.role); }}><Save className="w-3 h-3 mr-1" />编辑</Button>
-                        <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggleStatus(role)}>{role.status ? '禁用' : '启用'}</Button>
-                        <Button variant="ghost" size="icon" className="h-7 w-7 text-red-500" onClick={() => handleDelete(role)}><Trash2 className="w-3.5 h-3.5" /></Button>
-                      </>
-                    )}
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      )}
-
-      {/* ====== User Assignment ====== */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-4">
-          <div className="flex items-center gap-2 mb-3">
-            <UserPlus className="w-4 h-4 dg-text-yellow" />
-            <span className="text-sm font-medium text-[var(--dg-text-primary)]">分配角色给用户</span>
-          </div>
-          <div className="flex gap-3 items-end mb-4">
-            <div className="space-y-1 flex-1">
-              <Label className="text-xs">选择用户</Label>
-              <Select value={selectedUserId} onValueChange={setSelectedUserId}>
-                <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="选择用户..." /></SelectTrigger>
-                <SelectContent className="max-h-60">
-                  <div className="px-2 py-1.5 sticky top-0 bg-popover z-10"><Input placeholder="搜索用户..." className="h-7 text-xs" /></div>
-                  {users.map(u => (
-                    <SelectItem key={u.id} value={String(u.id)}>
-                      {u.real_name || u.username} ({u.username})
-                      {assignments.some(a => a.user_id === u.id) && <span className="ml-2 text-xs dg-text-purple">已分配</span>}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1 w-48">
-              <Label className="text-xs">Item Role</Label>
-              <Select value={assignRoleId} onValueChange={setAssignRoleId}>
-                <SelectTrigger className="h-8 text-sm"><SelectValue placeholder="选择角色" /></SelectTrigger>
-                <SelectContent>
-                  {roles.filter(r => r.status === 1).map(r => (
-                    <SelectItem key={r.id} value={String(r.id)}>{r.name} ({r.role})</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <Button className="h-8" onClick={handleAssign} disabled={assignLoading || !selectedUserId || !assignRoleId}>
-              {assignLoading ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <UserPlus className="w-3.5 h-3.5 mr-1" />}
-              分配
-            </Button>
-          </div>
-
-          {/* Assigned roles for selected user */}
-          {selectedUser && (
-            <div>
-              <div className="flex items-center gap-2 mb-2">
-                <Badge variant="secondary" className="text-xs">
-                  <Users className="w-3 h-3 mr-1" />{selectedUser.real_name || selectedUser.username}
-                </Badge>
-                <span className="text-xs text-[var(--dg-text-muted)]">已分配角色:</span>
+              <div className="space-y-1 w-48">
+                <Label className="text-xs">权限策略</Label>
+                <Select value={assignRoleId} onValueChange={setAssignRoleId}>
+                  <SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder="选择策略" /></SelectTrigger>
+                  <SelectContent>
+                    {roles.filter((r) => r.status === 1).map((r) => (
+                      <SelectItem key={r.id} value={String(r.id)}>{r.name} ({ROLE_LABEL[r.role]})</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
-              {assignments.length === 0 ? (
-                <p className="text-xs text-[var(--dg-text-muted)] py-2">该用户尚未分配任何 Item Role</p>
+              <Button className="h-8" onClick={handleAssign} disabled={assignLoading || !selectedUserId || !assignRoleId}>
+                {assignLoading ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <UserPlus className="w-3.5 h-3.5 mr-1" />}
+                分配
+              </Button>
+            </div>
+            {selectedUser ? (
+              assignments.length === 0 ? (
+                <p className="text-xs text-[var(--dg-text-muted)]">该用户尚未分配 Job 权限</p>
               ) : (
-                <div className="space-y-1">
-                  {assignments.map(a => {
-                    const roleInfo = a.item_role || roles.find(r => r.id === a.item_role_id);
+                <div className="space-y-1.5">
+                  {assignments.map((a) => {
+                    const roleInfo = a.item_role || roles.find((r) => r.id === a.item_role_id);
                     return (
-                      <div key={a.id} className="flex items-center justify-between py-1.5 px-2 rounded bg-[var(--dg-bg-tertiary)] text-xs">
-                        <div className="flex items-center gap-2">
-                          <Badge className={`text-xs border ${roleBadgeClass(roleInfo?.role || 'viewer')}`}>
-                            {roleInfo?.role === 'owner' ? '拥有者' : roleInfo?.role === 'editor' ? '编辑者' : '查看者'}
-                          </Badge>
-                          <span className="text-[var(--dg-text-primary)]">{roleInfo?.name || `#${a.item_role_id}`}</span>
-                          {roleInfo && (
-                            <code className="font-mono text-[var(--dg-text-muted)] bg-[var(--dg-bg-primary)] px-1 rounded text-xs">
-                              {roleInfo.pattern}
-                            </code>
-                          )}
+                      <div key={a.id} className="flex items-center justify-between py-2 px-2.5 rounded-md bg-[var(--dg-bg-tertiary)] text-xs">
+                        <div className="flex items-center gap-2 min-w-0">
+                          <Badge variant="outline" className="text-[10px] shrink-0">{ROLE_LABEL[roleInfo?.role || ''] || roleInfo?.role}</Badge>
+                          <span className="text-[var(--dg-text-primary)]">{roleInfo?.name}</span>
+                          <code className="text-[var(--dg-text-muted)] truncate">{roleInfo?.pattern}</code>
                         </div>
-                        <Button variant="ghost" size="icon" className="h-6 w-6 dg-text-red" onClick={() => handleRevoke(a.id)}>
+                        <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => handleRevoke(a.id)}>
                           <X className="w-3 h-3" />
                         </Button>
                       </div>
                     );
                   })}
                 </div>
+              )
+            ) : (
+              <p className="text-xs text-[var(--dg-text-muted)] flex items-center gap-1"><Users className="w-3.5 h-3.5" />选择用户后查看已分配权限</p>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {activeTab === 'groups' && <UserGroupsManager embedded />}
+
+      {activeTab === 'preview' && (
+        <Card className="dg-card">
+          <CardContent className="p-4 space-y-3">
+            <div className="flex flex-wrap gap-1.5">
+              <Button variant={previewRoleId === null ? 'secondary' : 'ghost'} size="sm" onClick={() => setPreviewRoleId(null)}>
+                全部 ({pipelines.length})
+              </Button>
+              {roles.map((r) => (
+                <Button
+                  key={r.id}
+                  variant={previewRoleId === r.id ? 'secondary' : 'ghost'}
+                  size="sm"
+                  className={r.status === 0 ? 'opacity-40' : ''}
+                  onClick={() => setPreviewRoleId(r.id)}
+                >
+                  {r.name} ({matchCount[r.id]?.length || 0})
+                </Button>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-1.5 max-h-48 overflow-y-auto">
+              {previewMatches.map((p) => (
+                <Badge key={p.id as number} variant="outline" className="text-xs font-mono border-[var(--dg-border)]">
+                  <GitBranch className="w-3 h-3 mr-0.5" />
+                  {pipelineDisplayLabel(p)}
+                </Badge>
+              ))}
+              {previewRoleId !== null && previewMatches.length === 0 && (
+                <span className="text-xs text-[var(--dg-text-muted)]">无匹配 — 请调整正则</span>
               )}
             </div>
-          )}
-        </CardContent>
-      </Card>
+          </CardContent>
+        </Card>
+      )}
+
+      <JobRoleCreateDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        pipelines={pipelines}
+        saving={saving}
+        name={newName}
+        code={newCode}
+        pattern={newPattern}
+        role={newRole}
+        description={newDesc}
+        onNameChange={setNewName}
+        onCodeChange={setNewCode}
+        onPatternChange={setNewPattern}
+        onRoleChange={setNewRole}
+        onDescriptionChange={setNewDesc}
+        onSubmit={handleCreate}
+      />
     </PageShell>
   );
-}
+}

frontend/src/components/deploy/PipelineEditor.tsx

@@ -42,7 +42,7 @@ import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { toast } from 'sonner';
-import { pipelineApi, deployApi } from '@/api';
+import { pipelineApi, deployApi, buildNodeApi, type BuildNode } from '@/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { PageShell } from '@/components/layout/PageShell';
 import { PageEmpty } from '@/components/layout/PageEmpty';
@@ -182,6 +182,8 @@ export default function PipelineEditor() {
   const [webhookToken, setWebhookToken] = useState('');
   const [variables, setVariables] = useState<[string, string][]>([]);
   const [environmentId, setEnvironmentId] = useState<number | string>('');
+  const [buildNodes, setBuildNodes] = useState<BuildNode[]>([]);
+  const [buildNodeId, setBuildNodeId] = useState('');
 
   // member add dialog
   const [newMemberUser, setNewMemberUser] = useState('');
@@ -230,6 +232,7 @@ export default function PipelineEditor() {
         setCronExpr(p.cron_expr || '');
         setWebhookToken(p.webhook_token || '');
         setEnvironmentId(p.environment_id || '');
+        setBuildNodeId(p.build_node_id ? String(p.build_node_id) : '');
         try {
           const parsed = p.variables ? JSON.parse(p.variables) : {};
           setVariables(Object.entries(parsed).map(([k, v]) => [k, String(v)]));
@@ -249,6 +252,10 @@ export default function PipelineEditor() {
     loadEnvironments();
     loadMembers();
     loadRuns();
+    buildNodeApi.list().then((res) => {
+      const data = res as { list?: BuildNode[] };
+      setBuildNodes(Array.isArray(data?.list) ? data.list.filter((n) => n.enabled) : []);
+    }).catch(() => { /* silent */ });
   }, [pipelineCode, loadEnvironments, loadMembers, loadRuns]);
 
   const selectedTask = stages.flatMap(s => s.tasks).find(t => t.id === selectedTaskId) || null;
@@ -273,6 +280,7 @@ export default function PipelineEditor() {
         webhook_token: webhookToken,
         environment_id: environmentId ? Number(environmentId) : null,
         variables: JSON.stringify(Object.fromEntries(variables.filter(([k]) => k.trim()))),
+        build_node_id: buildNodeId ? Number(buildNodeId) : null,
       });
       toast.success('已保存');
     } catch { toast.error('保存失败'); }
@@ -386,7 +394,20 @@ export default function PipelineEditor() {
               ))}
             </SelectContent>
           </Select>
-          <span className="text-xs text-[var(--dg-text-secondary)] opacity-70">选择后流水线执行记录会关联到对应环境</span>
+          <Server className="w-4 h-4 text-[var(--dg-text-secondary)] ml-2" />
+          <span className="text-sm text-[var(--dg-text-secondary)]">构建节点:</span>
+          <Select value={buildNodeId || '__auto'} onValueChange={v => setBuildNodeId(v === '__auto' ? '' : v)}>
+            <SelectTrigger className="w-48 h-8 text-sm"><SelectValue placeholder="自动调度" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__auto">自动调度（Master 优先）</SelectItem>
+              {buildNodes.map(n => (
+                <SelectItem key={n.id} value={String(n.id)}>
+                  {n.name} ({n.running_count || 0}/{n.max_executors})
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <span className="text-xs text-[var(--dg-text-secondary)] opacity-70">Master 满载时自动调度到空闲远程节点</span>
         </CardContent>
       </Card>
 
@@ -491,6 +512,7 @@ export default function PipelineEditor() {
                     <th className="px-3 py-2 text-left text-[var(--dg-text-secondary)]">状态</th>
                     <th className="px-3 py-2 text-left text-[var(--dg-text-secondary)]">触发方式</th>
                     <th className="px-3 py-2 text-left text-[var(--dg-text-secondary)]">触发人</th>
+                    <th className="px-3 py-2 text-left text-[var(--dg-text-secondary)]">节点</th>
                     <th className="px-3 py-2 text-left text-[var(--dg-text-secondary)]">分支</th>
                     <th className="px-3 py-2 text-left text-[var(--dg-text-secondary)]">耗时</th>
                     <th className="px-3 py-2 text-left text-[var(--dg-text-secondary)]">时间</th>
@@ -516,6 +538,7 @@ export default function PipelineEditor() {
                         {!r.trigger_mode && (r.triggered_by || '手动')}
                       </td>
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)] text-xs">{r.triggered_by || 'admin'}</td>
+                      <td className="px-3 py-2 text-[var(--dg-text-secondary)] text-xs">{r.build_node_name || 'Master'}</td>
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)] font-mono text-xs">{r.branch || '-'}</td>
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)]">{fmtDuration(r.duration)}</td>
                       <td className="px-3 py-2 text-[var(--dg-text-secondary)] text-xs">{r.created_at ? new Date(r.created_at).toLocaleString('zh-CN') : '-'}</td>

frontend/src/components/deploy/PipelineManager.tsx

@@ -5,21 +5,13 @@ import { Input } from '@/components/ui/input';
 import {
   Plus,
   Search,
-  GitBranch,
   Clock,
-  CheckCircle,
-  Rocket,
-  Container,
-  ArrowRight,
   Layers,
-  ShieldCheck,
-  Globe,
-  Code,
   Workflow,
   Server,
   Network,
 } from 'lucide-react';
-import { pipelineApi } from '@/api';
+import { pipelineApi, deployApi } from '@/api';
 import { usePipelines, usePipelineMutations } from '@/hooks/api';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
@@ -27,7 +19,16 @@ import { PipelineCard } from './pipeline-manager/PipelineCard';
 import { PipelineCreateDialog } from './pipeline-manager/PipelineCreateDialog';
 import { PageShell } from '@/components/layout/PageShell';
 import { PageEmpty } from '@/components/layout/PageEmpty';
-import { StatStrip } from '@/components/ui/stat-strip';
+import type { JsonData } from '@/types/common';
+
+interface DeployEnvironment {
+  id: number;
+  name: string;
+  display_name: string;
+  type: string;
+  color: string;
+  enabled: boolean;
+}
 
 // 流水线列表页编排器 // Logan.Li
 export function PipelineManager() {
@@ -39,18 +40,20 @@ export function PipelineManager() {
   const [runs, setRuns] = useState<Record<number, Record<string, unknown>[]>>({});
   const [loadingRuns, setLoadingRuns] = useState<Record<number, boolean>>({});
   const [envFilter, setEnvFilter] = useState<string>('all');
+  const [environments, setEnvironments] = useState<DeployEnvironment[]>([]);
   const [runningRunMap, setRunningRunMap] = useState<Record<number, Record<string, unknown>>>({});
   const [newOpen, setNewOpen] = useState(false);
 
   const confirm = useConfirm();
 
-  const ENV_TYPES = [
-    { key: 'all', label: t('deploy.env.all'), icon: Layers, color: '#6B7280' },
-    { key: 'production', label: t('deploy.env.production'), icon: ShieldCheck, color: '#EF4444' },
-    { key: 'testing', label: t('deploy.env.testing'), icon: CheckCircle, color: '#F59E0B' },
-    { key: 'staging', label: t('deploy.env.staging'), icon: Globe, color: '#8B5CF6' },
-    { key: 'development', label: t('deploy.env.development'), icon: Code, color: '#3B82F6' },
-  ];
+  useEffect(() => {
+    deployApi.getEnvironments()
+      .then((res) => {
+        const list = ((res as JsonData)?.list || []) as DeployEnvironment[];
+        setEnvironments(list.filter((e) => e.enabled !== false));
+      })
+      .catch(() => { /* 环境列表加载失败时仅显示「全部」 */ });
+  }, []);
 
   // 同步运行中的任务 ID // Logan.Li
   useEffect(() => {
@@ -152,12 +155,19 @@ export function PipelineManager() {
   const filtered = pipelines.filter((p) => {
     const matchSearch = String(p.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||
       String(p.description || '').toLowerCase().includes(searchQuery.toLowerCase());
-    const env = p.environment as Record<string, unknown> | undefined;
-    const matchEnv = envFilter === 'all' || (env?.type || '') === envFilter;
+    const envId = p.environment_id as number | undefined;
+    const matchEnv = envFilter === 'all' || String(envId || '') === envFilter;
     return matchSearch && matchEnv;
   });
 
-  const runningCount = pipelines.filter(p => p.last_status === 'running').length;
+  const envTabs = [
+    { key: 'all', label: t('deploy.env.all'), color: undefined as string | undefined },
+    ...environments.map((e) => ({
+      key: String(e.id),
+      label: e.display_name || e.name,
+      color: e.color,
+    })),
+  ];
 
   const toolbar = (
     <div className="flex items-center gap-4 flex-wrap">
@@ -170,92 +180,67 @@ export function PipelineManager() {
           className="pl-10 dg-input"
         />
       </div>
-      <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
-        {ENV_TYPES.map((et) => {
-          const active = envFilter === et.key;
-          const Icon = et.icon;
-          return (
-            <button
-              key={et.key}
-              onClick={() => setEnvFilter(et.key)}
-              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                active ? 'text-white shadow-sm' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
-              }`}
-              style={active ? { backgroundColor: et.color } : {}}
-            >
-              <Icon className="h-3.5 w-3.5" />{et.label}
-            </button>
-          );
-        })}
-      </div>
+      {envTabs.length > 1 && (
+        <div className="flex items-center gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)] flex-wrap">
+          {envTabs.map((et) => {
+            const active = envFilter === et.key;
+            return (
+              <button
+                key={et.key}
+                onClick={() => setEnvFilter(et.key)}
+                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                  active
+                    ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] shadow-sm'
+                    : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]'
+                }`}
+              >
+                {et.key === 'all' ? (
+                  <Layers className="h-3.5 w-3.5" />
+                ) : (
+                  <span
+                    className="w-2 h-2 rounded-full shrink-0"
+                    style={{ backgroundColor: et.color || 'var(--dg-text-muted)' }}
+                  />
+                )}
+                {et.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 
   return (
     <PageShell
       variant="list"
-      title={t('deploy.pipeline.title')}
-      subtitle={t('deploy.pipeline.subtitle')}
+      title="流水线"
+      subtitle="CI/CD 构建、镜像打包与双通道部署"
       icon={<Workflow className="h-5 w-5" />}
       loading={loading}
-      metrics={(
-        <StatStrip
-          items={[
-            { label: t('deploy.pipeline.title'), value: pipelines.length, color: 'blue' },
-            { label: t('common.running'), value: runningCount, color: 'amber' },
-            { label: t('deploy.env.all'), value: filtered.length, color: 'muted' },
-          ]}
-        />
-      )}
       toolbar={toolbar}
       actions={(
         <>
           <Button variant="outline" className="dg-btn-secondary" onClick={() => refetchPipelines()} disabled={isFetching}>
-            <Clock className={`h-4 w-4 mr-2 ${isFetching ? 'animate-spin' : ''}`} />{t('common.refresh')}
+            <Clock className="h-4 w-4 mr-2" />{t('common.refresh')}
           </Button>
           <Button className="dg-btn-primary" onClick={() => setNewOpen(true)}>
             <Plus className="h-4 w-4 mr-2" />{t('deploy.pipeline.newPipeline')}
           </Button>
         </>
       )}
+      contentClassName="space-y-4"
     >
-      {/* 全流程可视化横幅 — 双路径 // Logan.Li */}
-      <div className="flex items-stretch gap-3 px-4 py-3 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
-        <div className="flex-1 space-y-1.5">
-          <div className="flex items-center gap-1.5">
-            <GitBranch className="h-3 w-3 text-indigo-400" />
-            <span className="text-[10px] font-semibold text-indigo-400">{t('deploy.banner.build')}</span>
-            <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <Rocket className="h-3 w-3 dg-text-red" />
-            <span className="text-[10px] font-semibold dg-text-red">{t('deploy.banner.deploy')}</span>
-            <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <div className="flex items-center gap-1 px-2 py-0.5 rounded bg-blue-400/10 border border-blue-400/20">
-              <Server className="h-3 w-3 dg-text-blue" />
-              <span className="text-[10px] font-medium dg-text-blue">{t('deploy.banner.sshHost')}</span>
-            </div>
-          </div>
-          <p className="text-[9px] text-[var(--dg-text-secondary)] opacity-40 pl-1">{t('deploy.banner.sshDesc')}</p>
-        </div>
-        <div className="w-px bg-[var(--dg-border)]" />
-        <div className="flex-1 space-y-1.5">
-          <div className="flex items-center gap-1.5">
-            <GitBranch className="h-3 w-3 text-indigo-400" />
-            <span className="text-[10px] font-semibold text-indigo-400">{t('deploy.banner.build')}</span>
-            <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <Container className="h-3 w-3 dg-text-cyan" />
-            <span className="text-[10px] font-semibold dg-text-cyan">{t('deploy.banner.imageRegistry')}</span>
-            <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <Rocket className="h-3 w-3 dg-text-red" />
-            <span className="text-[10px] font-semibold dg-text-red">{t('deploy.banner.deploy')}</span>
-            <ArrowRight className="h-2.5 w-2.5 text-[var(--dg-text-secondary)] opacity-30" />
-            <div className="flex items-center gap-1 px-2 py-0.5 rounded bg-emerald-400/10 border border-emerald-400/20">
-              <Network className="h-3 w-3 dg-text-green" />
-              <span className="text-[10px] font-medium dg-text-green">{t('deploy.banner.kubernetes')}</span>
-            </div>
-          </div>
-          <p className="text-[9px] text-[var(--dg-text-secondary)] opacity-40 pl-1">{t('deploy.banner.k8sDesc')}</p>
-        </div>
-        <span className="self-center ml-2 text-[10px] text-[var(--dg-text-secondary)] opacity-30 tracking-wide whitespace-nowrap">{t('deploy.banner.fullFlow')}</span>
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2.5 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] text-xs text-[var(--dg-text-muted)]">
+        <span className="flex items-center gap-1.5">
+          <Server className="h-3.5 w-3.5" />
+          主机发布：构建 → SSH 关联主机
+        </span>
+        <span className="hidden sm:inline text-[var(--dg-border)]">|</span>
+        <span className="flex items-center gap-1.5">
+          <Network className="h-3.5 w-3.5" />
+          Kubernetes 发布：构建 → 镜像 → 关联 Deployment 滚动更新
+        </span>
       </div>
 
       {!loading && filtered.length === 0 ? (
@@ -294,4 +279,4 @@ export function PipelineManager() {
       <PipelineCreateDialog open={newOpen} onOpenChange={setNewOpen} onCreated={refetchPipelines} />
     </PageShell>
   );
-}
+}

frontend/src/components/deploy/ToolConfigTab.tsx

@@ -1,9 +1,10 @@
 import { useState, useEffect } from 'react';
-import { RefreshCw, Loader2, Download, CheckCircle, XCircle, Clock, Settings2, ChevronDown} from 'lucide-react';
+import { RefreshCw, Loader2, Download, CheckCircle, XCircle, Clock, Settings2, ChevronDown, Trash2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { useConfirm } from '@/components/ui/confirm-dialog';
 import { toast } from 'sonner';
 import { deployApi } from '@/api';
 import type { JsonData } from '@/types/common';
@@ -29,22 +30,15 @@ const categoryColor: Record<string, string> = {
   automation: 'bg-purple-500/20 dg-text-purple border-purple-500/30',
   other: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
 };
-const _methodLabel: Record<string, string> = {
-  preinstall: '预装', lazy: '懒加载', disabled: '禁用',
-};
-const _methodColor: Record<string, string> = {
-  preinstall: 'bg-emerald-500/20 dg-text-green border-emerald-500/30',
-  lazy: 'bg-violet-500/20 dg-text-purple border-violet-500/30',
-  disabled: 'bg-[var(--dg-bg-active)]/20 dg-text-secondary border-[var(--dg-border)]',
-};
-
-// Tools that support version selection
-const VERSIONED_TOOLS = ['jdk', 'nodejs', 'maven'];
+// 支持版本选择的工具 // Logan.Li
+const VERSIONED_TOOLS = ['jdk', 'golang', 'nodejs', 'maven', 'nvm'];
 
 export default function ToolConfigTab() {
+  const confirm = useConfirm();
   const [tools, setTools] = useState<ToolConfig[]>([]);
   const [loading, setLoading] = useState(false);
   const [installing, setInstalling] = useState<number | null>(null);
+  const [uninstalling, setUninstalling] = useState<number | null>(null);
 
   // Version dialog state
   const [versionDialog, setVersionDialog] = useState<{ tool: ToolConfig; versions: VersionOption[] } | null>(null);
@@ -64,6 +58,14 @@ export default function ToolConfigTab() {
 
   useEffect(() => { fetchTools(); }, []);
 
+  // 安装中/失败状态轮询，与磁盘实际状态同步 // Logan.Li
+  useEffect(() => {
+    const pending = tools.filter((t) => t.status === 'installing' || t.status === 'failed');
+    if (pending.length === 0) return undefined;
+    const timer = setInterval(() => { void fetchTools(); }, 4000);
+    return () => clearInterval(timer);
+  }, [tools]);
+
   const openVersionDialog = async (tool: ToolConfig) => {
     try {
       const res: JsonData = await deployApi.getToolVersions(tool.id);
@@ -74,7 +76,12 @@ export default function ToolConfigTab() {
         return;
       }
       setVersionDialog({ tool, versions });
-      setSelectedVersion(tool.default_version || versions[0]?.version || '');
+      const preferred = versions.find((v) => v.version === 'lts')?.version
+        || versions.find((v) => v.label.includes('推荐'))?.version
+        || tool.default_version
+        || versions[0]?.version
+        || '';
+      setSelectedVersion(preferred);
     } catch {
       // Fallback: install with default version
       handleInstall(tool);
@@ -86,18 +93,37 @@ export default function ToolConfigTab() {
     try {
       const v = version || tool.default_version;
       await deployApi.installTool(tool.id, v);
-      toast.success(`${tool.display_name}${v ? ` (${v})` : ''} 安装已触发`);
+      toast.success(`${tool.display_name}${v ? ` (${v})` : ''} 安装已触发，可在审计日志查看结果`);
       setVersionDialog(null);
-      setTimeout(async () => {
-        try { await deployApi.checkTool(tool.id); fetchTools(); } catch { /* ignore */ }
-        setInstalling(null);
-      }, 3000);
+      setInstalling(null);
+      void fetchTools();
     } catch {
       toast.error('触发安装失败');
       setInstalling(null);
     }
   };
 
+  const handleUninstall = async (tool: ToolConfig) => {
+    const ok = await confirm({
+      title: '卸载工具',
+      description: `确定卸载 ${tool.display_name}？卸载后可重新选择版本安装。`,
+      confirmText: '卸载',
+      variant: 'destructive',
+    });
+    if (!ok) return;
+
+    setUninstalling(tool.id);
+    try {
+      await deployApi.uninstallTool(tool.id);
+      toast.success(`${tool.display_name} 已卸载，可重新安装`);
+      void fetchTools();
+    } catch {
+      toast.error('卸载失败');
+    } finally {
+      setUninstalling(null);
+    }
+  };
+
   const handleCheckStatus = async (tool: ToolConfig) => {
     try {
       const res: JsonData = await deployApi.checkTool(tool.id);
@@ -106,30 +132,22 @@ export default function ToolConfigTab() {
     } catch { toast.error('检测失败'); }
   };
 
-  const handleMethodChange = async (tool: ToolConfig, method: 'preinstall' | 'lazy' | 'disabled') => {
-    try {
-      await deployApi.updateTool(tool.id, { install_method: method });
-      toast.success('已更新');
-      fetchTools();
-    } catch { toast.error('更新失败'); }
-  };
-
-  // Download speed test
+  // 检测工具安装状态（磁盘验证）// Logan.Li
   const handleTestDownload = async (tool: ToolConfig) => {
     setTesting(tool.id);
     const start = Date.now();
     try {
-      // Simulate a quick reachability test by fetching the version URL
-      const res: JsonData = await deployApi.getToolVersions(tool.id);
+      const res: JsonData = await deployApi.checkTool(tool.id);
       const elapsed = ((Date.now() - start) / 1000).toFixed(1);
-      const available = (res as JsonData)?.versions?.length > 0;
-      if (available) {
-        toast.success(`${tool.display_name} 镜像可访问 (${elapsed}s)`);
+      if (res?.available) {
+        toast.success(`${tool.display_name} 已就绪${res.version ? ` (${res.version})` : ''} (${elapsed}s)`);
       } else {
-        toast(`${tool.display_name} 无法获取版本列表`, { description: '请检查网络连接' });
+        const errMsg = (res?.tool as ToolConfig | undefined)?.error_msg;
+        toast(`${tool.display_name} 未安装或不可用`, { description: errMsg || '可点击「安装」触发懒加载' });
       }
+      fetchTools();
     } catch {
-      toast.error(`${tool.display_name} 网络不可达`);
+      toast.error(`${tool.display_name} 检测失败`);
     }
     setTesting(null);
   };
@@ -160,7 +178,6 @@ export default function ToolConfigTab() {
               <tr>
                 <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">工具</th>
                 <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)] hidden sm:table-cell">分类</th>
-                <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">安装方式</th>
                 <th className="px-3 py-2 text-left font-medium text-[var(--dg-text-secondary)]">状态</th>
                 <th className="px-3 py-2 text-right font-medium text-[var(--dg-text-secondary)]">操作</th>
               </tr>
@@ -188,21 +205,6 @@ export default function ToolConfigTab() {
                         {categoryLabel[tool.category] || tool.category}
                       </Badge>
                     </td>
-                    <td className="px-3 py-2">
-                      <Select
-                        value={tool.install_method}
-                        onValueChange={(v) => handleMethodChange(tool, v as 'preinstall' | 'lazy' | 'disabled')}
-                      >
-                        <SelectTrigger className="h-7 w-[90px] text-xs">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="preinstall">预装</SelectItem>
-                          <SelectItem value="lazy">懒加载</SelectItem>
-                          <SelectItem value="disabled">禁用</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </td>
                     <td className="px-3 py-2">
                       {tool.status === 'installed' ? (
                         <Badge className="bg-emerald-500/20 dg-text-green border-emerald-500/30 text-xs gap-1">
@@ -224,7 +226,21 @@ export default function ToolConfigTab() {
                     </td>
                     <td className="px-3 py-2 text-right">
                       <div className="flex justify-end gap-1">
-                        {tool.install_method === 'lazy' && tool.status !== 'installed' && (
+                        {tool.install_method === 'lazy' && (tool.status === 'installed' || tool.status === 'failed') && (
+                          <Button
+                            variant="outline" size="sm" className="h-7 text-xs text-red-400 border-red-500/30 hover:bg-red-500/10"
+                            onClick={() => handleUninstall(tool)}
+                            disabled={uninstalling === tool.id}
+                          >
+                            {uninstalling === tool.id ? (
+                              <Loader2 className="w-3 h-3 animate-spin mr-1" />
+                            ) : (
+                              <Trash2 className="w-3 h-3 mr-1" />
+                            )}
+                            卸载
+                          </Button>
+                        )}
+                        {tool.install_method === 'lazy' && tool.status !== 'installed' && tool.status !== 'installing' && (
                           hasVersions ? (
                             <Button
                               variant="outline" size="sm" className="h-7 text-xs"
@@ -287,6 +303,7 @@ export default function ToolConfigTab() {
             <DialogTitle>选择安装版本</DialogTitle>
             <DialogDescription>
               {versionDialog?.tool.display_name} — 请选择要安装的版本
+              {versionDialog?.tool.name === 'nodejs' && '（推荐「最新 LTS」由 nvm 自动解析当前 LTS 线）'}
             </DialogDescription>
           </DialogHeader>
           <div className="space-y-4 py-2">

frontend/src/components/deploy/UserGroupsManager.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { PageShell } from '@/components/layout/PageShell';
 import { PageEmpty } from '@/components/layout/PageEmpty';
 import { StatStrip } from '@/components/ui/stat-strip';
+
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
@@ -21,7 +22,7 @@ interface GroupMember {
   id: number; group_id: number; username: string; created_at: string;
 }
 
-export default function UserGroupsManager() {
+export default function UserGroupsManager({ embedded = false }: { embedded?: boolean }) {
   const _confirm = useConfirm();
   const [groups, setGroups] = useState<Group[]>([]);
   const [loading, setLoading] = useState(true);
@@ -83,33 +84,18 @@ export default function UserGroupsManager() {
 
   const memberCount = groups.reduce((sum, g) => sum + (g.members || []).length, 0);
 
-  return (
-    <PageShell
-      variant="list"
-      title="用户组管理"
-      subtitle="创建用户组，将组授权给流水线，组内成员自动获得流水线权限"
-      icon={<Users className="h-5 w-5" />}
-      loading={loading}
-      metrics={(
-        <StatStrip
-          items={[
-            { label: '用户组', value: groups.length, color: 'blue' },
-            { label: '成员总数', value: memberCount, color: 'purple' },
-          ]}
-        />
-      )}
-      actions={(
-        <>
-          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadGroups}>
-            <RefreshCw className="w-4 h-4 mr-1" />刷新
-          </Button>
-          <Button size="sm" className="dg-btn-primary" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
-            <Plus className="w-4 h-4 mr-1" />新建用户组
-          </Button>
-        </>
-      )}
-    >
-      {!loading && groups.length === 0 ? (
+  const toolbar = embedded ? (
+    <div className="flex items-center justify-end gap-2 mb-3">
+      <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadGroups}>
+        <RefreshCw className="w-4 h-4 mr-1" />刷新
+      </Button>
+      <Button size="sm" className="dg-btn-primary" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
+        <Plus className="w-4 h-4 mr-1" />新建用户组
+      </Button>
+    </div>
+  ) : null;
+
+  const listBody = !loading && groups.length === 0 ? (
         <PageEmpty
           icon={<Users className="h-10 w-10" />}
           title="暂无用户组"
@@ -171,9 +157,9 @@ export default function UserGroupsManager() {
             </div>
           ))}
         </div>
-      )}
+      );
 
-      {/* Form Dialog */}
+  const formDialog = (
       <Dialog open={formOpen} onOpenChange={setFormOpen}>
         <DialogContent>
           <DialogHeader><DialogTitle>{editId ? '编辑用户组' : '新建用户组'}</DialogTitle></DialogHeader>
@@ -187,6 +173,47 @@ export default function UserGroupsManager() {
           </div>
         </DialogContent>
       </Dialog>
+  );
+
+  if (embedded) {
+    return (
+      <>
+        {toolbar}
+        {listBody}
+        {formDialog}
+      </>
+    );
+  }
+
+  return (
+    <PageShell
+      variant="list"
+      title="应用发布"
+      subtitle="用户组 — 批量授权流水线访问权限"
+      icon={<Users className="h-5 w-5" />}
+      loading={loading}
+      metrics={(
+        <StatStrip
+          items={[
+            { label: '用户组', value: groups.length, color: 'blue' },
+            { label: '成员总数', value: memberCount, color: 'purple' },
+          ]}
+        />
+      )}
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadGroups}>
+            <RefreshCw className="w-4 h-4 mr-1" />刷新
+          </Button>
+          <Button size="sm" className="dg-btn-primary" onClick={() => { setEditId(null); setFormName(''); setFormDesc(''); setFormOpen(true); }}>
+            <Plus className="w-4 h-4 mr-1" />新建用户组
+          </Button>
+        </>
+      )}
+      contentClassName="space-y-4"
+    >
+      {listBody}
+      {formDialog}
     </PageShell>
   );
 }

frontend/src/components/deploy/deploy-rbac/JobRoleCreateDialog.tsx

@@ -0,0 +1,121 @@
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Loader2, Save } from 'lucide-react';
+import { matchPipelines, type PipelineMatchItem } from './matchPipeline';
+
+interface JobRoleCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  pipelines: PipelineMatchItem[];
+  saving: boolean;
+  name: string;
+  code: string;
+  pattern: string;
+  role: string;
+  description: string;
+  onNameChange: (v: string) => void;
+  onCodeChange: (v: string) => void;
+  onPatternChange: (v: string) => void;
+  onRoleChange: (v: string) => void;
+  onDescriptionChange: (v: string) => void;
+  onSubmit: () => void;
+}
+
+// 新建 Job 权限角色弹窗 // Logan.Li
+export function JobRoleCreateDialog({
+  open,
+  onOpenChange,
+  pipelines,
+  saving,
+  name,
+  code,
+  pattern,
+  role,
+  description,
+  onNameChange,
+  onCodeChange,
+  onPatternChange,
+  onRoleChange,
+  onDescriptionChange,
+  onSubmit,
+}: JobRoleCreateDialogProps) {
+  const preview = useMemo(() => matchPipelines(pattern, pipelines), [pattern, pipelines]);
+  const patternHint = useMemo(() => {
+    if (!pattern.trim()) return '输入正则，匹配流水线 code 或 Job 名称';
+    try {
+      // eslint-disable-next-line no-new
+      new RegExp(pattern);
+      return preview.length > 0 ? `命中 ${preview.length} 个发布任务` : '无匹配任务';
+    } catch {
+      return '正则语法错误';
+    }
+  }, [pattern, preview.length]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
+        <DialogHeader>
+          <DialogTitle>新建 Job 权限</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-muted)]">
+            按正则匹配流水线 code 或 Job 名称，分配 owner / editor / viewer 权限
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label className="text-xs">名称</Label>
+              <Input value={name} onChange={(e) => onNameChange(e.target.value)} placeholder="后端发布" className="h-8 text-sm dg-input" />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">标识</Label>
+              <Input value={code} onChange={(e) => onCodeChange(e.target.value)} placeholder="backend-jobs" className="h-8 text-sm font-mono dg-input" />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">匹配正则</Label>
+            <Input
+              value={pattern}
+              onChange={(e) => onPatternChange(e.target.value)}
+              placeholder="^cex-.* 或 ^api-server$"
+              className="h-8 text-sm font-mono dg-input"
+            />
+            <p className="text-[10px] text-[var(--dg-text-muted)]">{patternHint}</p>
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">权限级别</Label>
+            <Select value={role} onValueChange={onRoleChange}>
+              <SelectTrigger className="h-8 text-sm dg-input"><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="owner">拥有者 — 配置 + 执行 + 授权</SelectItem>
+                <SelectItem value="editor">编辑者 — 配置 + 执行</SelectItem>
+                <SelectItem value="viewer">查看者 — 只读</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">说明</Label>
+            <Input value={description} onChange={(e) => onDescriptionChange(e.target.value)} placeholder="可选" className="h-8 text-sm dg-input" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+          <Button onClick={onSubmit} disabled={saving}>
+            {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
+            创建
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/deploy/deploy-rbac/matchPipeline.ts

@@ -0,0 +1,29 @@
+// 流水线 / Job 正则命中工具（code + job_name） // Logan.Li
+
+export interface PipelineMatchItem {
+  id: number | string;
+  code?: string;
+  job_name?: string;
+  name?: string;
+}
+
+export function pipelineMatchesPattern(pattern: string, pipeline: PipelineMatchItem): boolean {
+  try {
+    const re = new RegExp(pattern);
+    if (pipeline.code && re.test(String(pipeline.code))) return true;
+    if (pipeline.job_name && re.test(String(pipeline.job_name))) return true;
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+export function matchPipelines(pattern: string, pipelines: PipelineMatchItem[]): PipelineMatchItem[] {
+  if (!pattern.trim()) return [];
+  return pipelines.filter((p) => pipelineMatchesPattern(pattern, p));
+}
+
+export function pipelineDisplayLabel(p: PipelineMatchItem): string {
+  if (p.job_name) return `${p.code} · ${p.job_name}`;
+  return String(p.code || p.name || p.id);
+}

frontend/src/components/deploy/pipeline-manager/DeployTargetFields.tsx

@@ -0,0 +1,373 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search, Server, Network, Loader2, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { serverApi, kubernetesApi } from '@/api';
+import { getPublicApiBase } from '@/utils/request';
+
+export interface DeployTargetValue {
+  deployTarget: 'ssh' | 'k8s';
+  serverIds: number[];
+  deployRemotePath: string;
+  deployScript: string;
+  k8sClusterId: number | '';
+  k8sNamespace: string;
+  k8sDeployment: string;
+  k8sContainerName: string;
+}
+
+interface DeployTargetFieldsProps {
+  value: DeployTargetValue;
+  onChange: (patch: Partial<DeployTargetValue>) => void;
+  requireTarget?: boolean;
+}
+
+interface ServerItem {
+  id: number;
+  hostname: string;
+  ip?: string;
+  status?: string;
+}
+
+interface ClusterItem {
+  id: number;
+  name: string;
+  code: string;
+}
+
+interface DeploymentItem {
+  namespace: string;
+  name: string;
+  image?: string;
+  ready_replicas?: number;
+  replicas?: number;
+}
+
+// 发布目标选择：SSH 关联主机 / K8s 关联 Deployment // Logan.Li
+export function DeployTargetFields({ value, onChange, requireTarget = true }: DeployTargetFieldsProps) {
+  const [servers, setServers] = useState<ServerItem[]>([]);
+  const [clusters, setClusters] = useState<ClusterItem[]>([]);
+  const [deployments, setDeployments] = useState<DeploymentItem[]>([]);
+  const [serverSearch, setServerSearch] = useState('');
+  const [depSearch, setDepSearch] = useState('');
+  const [loadingServers, setLoadingServers] = useState(false);
+  const [loadingDeps, setLoadingDeps] = useState(false);
+
+  const loadServers = useCallback(async () => {
+    setLoadingServers(true);
+    try {
+      const res = await serverApi.getServers({ page_size: 200 });
+      const list = (res?.list ?? []) as ServerItem[];
+      setServers(list);
+    } catch {
+      setServers([]);
+    } finally {
+      setLoadingServers(false);
+    }
+  }, []);
+
+  const loadClusters = useCallback(async () => {
+    try {
+      const res = await kubernetesApi.getClusters();
+      setClusters((res?.list ?? []) as ClusterItem[]);
+    } catch {
+      setClusters([]);
+    }
+  }, []);
+
+  const loadDeployments = useCallback(async (clusterId: number | '') => {
+    if (!clusterId) {
+      setDeployments([]);
+      return;
+    }
+    const cluster = clusters.find((c) => c.id === clusterId);
+    if (!cluster?.code) {
+      setDeployments([]);
+      return;
+    }
+    setLoadingDeps(true);
+    try {
+      const res = await kubernetesApi.getAllDeployments(cluster.code);
+      const list = Array.isArray(res) ? res : [];
+      setDeployments(list as DeploymentItem[]);
+    } catch {
+      setDeployments([]);
+    } finally {
+      setLoadingDeps(false);
+    }
+  }, [clusters]);
+
+  useEffect(() => {
+    loadServers();
+    loadClusters();
+  }, [loadServers, loadClusters]);
+
+  useEffect(() => {
+    if (value.deployTarget === 'k8s' && value.k8sClusterId) {
+      loadDeployments(value.k8sClusterId);
+    }
+  }, [value.deployTarget, value.k8sClusterId, loadDeployments]);
+
+  const filteredServers = useMemo(() => {
+    const q = serverSearch.trim().toLowerCase();
+    if (!q) return servers;
+    return servers.filter(
+      (s) => s.hostname?.toLowerCase().includes(q) || s.ip?.toLowerCase().includes(q),
+    );
+  }, [servers, serverSearch]);
+
+  const filteredDeployments = useMemo(() => {
+    const q = depSearch.trim().toLowerCase();
+    if (!q) return deployments;
+    return deployments.filter(
+      (d) => d.name.toLowerCase().includes(q) || d.namespace.toLowerCase().includes(q),
+    );
+  }, [deployments, depSearch]);
+
+  const toggleServer = (id: number) => {
+    const next = value.serverIds.includes(id)
+      ? value.serverIds.filter((x) => x !== id)
+      : [...value.serverIds, id];
+    onChange({ serverIds: next });
+  };
+
+  const selectDeployment = (dep: DeploymentItem) => {
+    onChange({
+      k8sNamespace: dep.namespace,
+      k8sDeployment: dep.name,
+    });
+  };
+
+  const selectedCluster = clusters.find((c) => c.id === value.k8sClusterId);
+
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-1 p-1 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
+        {([
+          { key: 'ssh' as const, label: '主机发布', icon: Server },
+          { key: 'k8s' as const, label: 'Kubernetes 发布', icon: Network },
+        ]).map((item) => {
+          const active = value.deployTarget === item.key;
+          const Icon = item.icon;
+          return (
+            <button
+              key={item.key}
+              type="button"
+              onClick={() => onChange({
+                deployTarget: item.key,
+                serverIds: item.key === 'ssh' ? value.serverIds : [],
+                deployRemotePath: item.key === 'ssh' ? value.deployRemotePath : '',
+                deployScript: item.key === 'ssh' ? value.deployScript : '',
+                k8sClusterId: item.key === 'k8s' ? value.k8sClusterId : '',
+                k8sNamespace: item.key === 'k8s' ? value.k8sNamespace : '',
+                k8sDeployment: item.key === 'k8s' ? value.k8sDeployment : '',
+                k8sContainerName: item.key === 'k8s' ? value.k8sContainerName : '',
+              })}
+              className={cn(
+                'flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-md text-xs font-medium transition-colors',
+                active
+                  ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] shadow-sm'
+                  : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]',
+              )}
+            >
+              <Icon className="h-3.5 w-3.5" />
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {value.deployTarget === 'ssh' ? (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label className="text-xs">
+              关联主机
+              {requireTarget && <span className="text-[var(--dg-red)] ml-0.5">*</span>}
+            </Label>
+            {value.serverIds.length > 0 && (
+              <Badge variant="outline" className="text-[10px] border-[var(--dg-border)]">
+                已选 {value.serverIds.length} 台
+              </Badge>
+            )}
+          </div>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--dg-text-muted)]" />
+            <Input
+              value={serverSearch}
+              onChange={(e) => setServerSearch(e.target.value)}
+              placeholder="搜索主机名或 IP"
+              className="pl-8 h-8 text-xs dg-input"
+            />
+          </div>
+          <ScrollArea className="h-[140px] rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]">
+            {loadingServers ? (
+              <div className="flex items-center justify-center py-8 text-xs text-[var(--dg-text-muted)]">
+                <Loader2 className="h-4 w-4 animate-spin mr-1.5" />加载中
+              </div>
+            ) : filteredServers.length === 0 ? (
+              <p className="text-xs text-[var(--dg-text-muted)] text-center py-8">暂无可用主机</p>
+            ) : (
+              <div className="p-1.5 space-y-1">
+                {filteredServers.map((srv) => {
+                  const selected = value.serverIds.includes(srv.id);
+                  return (
+                    <button
+                      key={srv.id}
+                      type="button"
+                      onClick={() => toggleServer(srv.id)}
+                      className={cn(
+                        'w-full flex items-center gap-2 px-2.5 py-2 rounded-md text-left text-xs transition-colors',
+                        selected
+                          ? 'bg-[var(--dg-bg-hover)] border border-[var(--dg-border)]'
+                          : 'hover:bg-[var(--dg-bg-hover)]/60',
+                      )}
+                    >
+                      <span className={cn(
+                        'w-4 h-4 rounded border flex items-center justify-center shrink-0',
+                        selected ? 'bg-[var(--dg-blue)] border-[var(--dg-blue)]' : 'border-[var(--dg-border)]',
+                      )}>
+                        {selected && <Check className="h-2.5 w-2.5 text-white" />}
+                      </span>
+                      <Server className="h-3.5 w-3.5 text-[var(--dg-text-muted)] shrink-0" />
+                      <span className="font-medium text-[var(--dg-text-primary)] truncate">{srv.hostname}</span>
+                      {srv.ip && <span className="text-[var(--dg-text-muted)] ml-auto shrink-0">{srv.ip}</span>}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </ScrollArea>
+          <p className="text-[10px] text-[var(--dg-text-muted)]">构建完成后 SCP 上传 jar/tar.gz 到远程目录并执行部署命令</p>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label className="text-xs">远程目录</Label>
+              <Input
+                value={value.deployRemotePath}
+                onChange={(e) => onChange({ deployRemotePath: e.target.value })}
+                placeholder="/opt/apps/my-app"
+                className="h-8 text-xs font-mono dg-input"
+              />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">部署命令</Label>
+              <Input
+                value={value.deployScript}
+                onChange={(e) => onChange({ deployScript: e.target.value })}
+                placeholder="./restart.sh"
+                className="h-8 text-xs font-mono dg-input"
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label className="text-xs">
+                Kubernetes 集群
+                {requireTarget && <span className="text-[var(--dg-red)] ml-0.5">*</span>}
+              </Label>
+              <Select
+                value={value.k8sClusterId ? String(value.k8sClusterId) : '__none'}
+                onValueChange={(v) => onChange({
+                  k8sClusterId: v === '__none' ? '' : Number(v),
+                  k8sNamespace: '',
+                  k8sDeployment: '',
+                })}
+              >
+                <SelectTrigger className="h-8 text-xs dg-input">
+                  <SelectValue placeholder="选择集群" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__none">请选择</SelectItem>
+                  {clusters.map((c) => (
+                    <SelectItem key={c.id} value={String(c.id)}>{c.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">已选 Deployment</Label>
+              <Input
+                readOnly
+                value={value.k8sDeployment ? `${value.k8sNamespace}/${value.k8sDeployment}` : ''}
+                placeholder="从下方列表选择"
+                className="h-8 text-xs dg-input font-mono"
+              />
+            </div>
+          </div>
+          {selectedCluster && (
+            <>
+              <div className="relative">
+                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--dg-text-muted)]" />
+                <Input
+                  value={depSearch}
+                  onChange={(e) => setDepSearch(e.target.value)}
+                  placeholder="搜索 Deployment 或命名空间"
+                  className="pl-8 h-8 text-xs dg-input"
+                />
+              </div>
+              <ScrollArea className="h-[140px] rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-secondary)]">
+                {loadingDeps ? (
+                  <div className="flex items-center justify-center py-8 text-xs text-[var(--dg-text-muted)]">
+                    <Loader2 className="h-4 w-4 animate-spin mr-1.5" />加载 Deployment
+                  </div>
+                ) : filteredDeployments.length === 0 ? (
+                  <p className="text-xs text-[var(--dg-text-muted)] text-center py-8">暂无 Deployment</p>
+                ) : (
+                  <div className="p-1.5 space-y-1">
+                    {filteredDeployments.map((dep) => {
+                      const selected = value.k8sDeployment === dep.name && value.k8sNamespace === dep.namespace;
+                      return (
+                        <button
+                          key={`${dep.namespace}/${dep.name}`}
+                          type="button"
+                          onClick={() => selectDeployment(dep)}
+                          className={cn(
+                            'w-full flex items-center gap-2 px-2.5 py-2 rounded-md text-left text-xs transition-colors',
+                            selected
+                              ? 'bg-[var(--dg-bg-hover)] border border-[var(--dg-border)]'
+                              : 'hover:bg-[var(--dg-bg-hover)]/60',
+                          )}
+                        >
+                          <Network className="h-3.5 w-3.5 text-[var(--dg-text-muted)] shrink-0" />
+                          <span className="font-mono text-[var(--dg-text-primary)] truncate">
+                            {dep.namespace}/{dep.name}
+                          </span>
+                          <span className="text-[var(--dg-text-muted)] ml-auto shrink-0">
+                            {dep.ready_replicas ?? 0}/{dep.replicas ?? 0}
+                          </span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+              </ScrollArea>
+              <div className="space-y-1">
+                <Label className="text-xs">容器名 <span className="text-[var(--dg-text-muted)]">(多容器时填写)</span></Label>
+                <Input
+                  value={value.k8sContainerName}
+                  onChange={(e) => onChange({ k8sContainerName: e.target.value })}
+                  placeholder="默认首个容器"
+                  className="h-8 text-xs font-mono dg-input"
+                />
+              </div>
+              {value.k8sDeployment && selectedCluster && (
+                <p className="text-[10px] text-[var(--dg-text-muted)] leading-relaxed">
+                  流水线部署将调用 CI 接口：
+                  <code className="text-[var(--dg-text-secondary)] break-all">
+                    POST {getPublicApiBase()}/kubernetes/{selectedCluster.code}/namespace/{value.k8sNamespace}/deployments/{value.k8sDeployment}/update-image
+                  </code>
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/deploy/pipeline-manager/PipelineCard.tsx

@@ -56,6 +56,14 @@ export function PipelineCard({
   const registry = pipeline.registry as Record<string, unknown> | undefined;
   const environment = pipeline.environment as Record<string, unknown> | undefined;
   const code = (pipeline.code || pipeline.id) as string;
+  const deployTarget = String(pipeline.deploy_target || 'ssh');
+  let serverCount = 0;
+  try {
+    const ids = pipeline.server_ids ? JSON.parse(String(pipeline.server_ids)) : [];
+    serverCount = Array.isArray(ids) ? ids.length : 0;
+  } catch { /* ignore */ }
+  const k8sDep = pipeline.k8s_deployment ? String(pipeline.k8s_deployment) : '';
+  const k8sNs = pipeline.k8s_namespace ? String(pipeline.k8s_namespace) : '';
 
   return (
     <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] overflow-hidden">
@@ -82,6 +90,11 @@ export function PipelineCard({
                 {pipeline.job_name && (
                   <Badge variant="secondary" className="text-xs font-mono opacity-60">{String(pipeline.job_name)}</Badge>
                 )}
+                {pipeline.build_node_id && (
+                  <Badge variant="outline" className="text-[10px] gap-1">
+                    <Server className="h-3 w-3" />指定节点
+                  </Badge>
+                )}
               </div>
               <p className="text-xs text-[var(--dg-text-secondary)] mt-1 line-clamp-1">
                 {String(pipeline.description || '暂无描述')}
@@ -124,10 +137,16 @@ export function PipelineCard({
                   {pipeline.deploy_mode === 'tag' ? 'Tag发版' : String(pipeline.branch || 'main')}
                 </span>
                 <span className="flex items-center gap-1">
-                  {(pipeline.deploy_target || 'ssh') === 'k8s' ? (
-                    <><Network className="h-3 w-3" />Kubernetes</>
+                  {deployTarget === 'k8s' ? (
+                    <>
+                      <Network className="h-3 w-3" />
+                      {k8sDep ? `${k8sNs}/${k8sDep}` : 'Kubernetes Deployment'}
+                    </>
                   ) : (
-                    <><Server className="h-3 w-3" />SSH 主机</>
+                    <>
+                      <Server className="h-3 w-3" />
+                      {serverCount > 0 ? `${serverCount} 台主机` : 'SSH 主机'}
+                    </>
                   )}
                 </span>
                 {repo && <span className="flex items-center gap-1"><Globe className="h-3 w-3" />{String(repo.name)}</span>}
@@ -180,8 +199,20 @@ export function PipelineCard({
                 const isSuccess = runStatus === 'success' || runStatus === 'completed';
                 const isRunning = runStatus === 'running' || runStatus === 'in_progress';
                 const isFailed = runStatus === 'failed' || runStatus === 'error';
-                const color = isFailed ? '#EF4444' : isRunning ? '#3B82F6' : isSuccess ? '#10B981' : '#6B7280';
-                const bgColor = isFailed ? '#EF444428' : isRunning ? '#3B82F628' : isSuccess ? '#10B98128' : '#6B728018';
+                const color = isFailed
+                  ? 'var(--dg-red)'
+                  : isRunning
+                    ? 'var(--dg-blue)'
+                    : isSuccess
+                      ? 'var(--dg-green)'
+                      : 'var(--dg-text-muted)';
+                const bgColor = isFailed
+                  ? 'color-mix(in srgb, var(--dg-red) 12%, transparent)'
+                  : isRunning
+                    ? 'color-mix(in srgb, var(--dg-blue) 12%, transparent)'
+                    : isSuccess
+                      ? 'color-mix(in srgb, var(--dg-green) 12%, transparent)'
+                      : 'var(--dg-bg-tertiary)';
                 const icon = isFailed ? (
                   <XCircle className="h-3 w-3" />
                 ) : isRunning ? (
@@ -197,7 +228,7 @@ export function PipelineCard({
                       className="flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] font-semibold border shadow-sm"
                       style={{
                         backgroundColor: bgColor,
-                        borderColor: `${color}70`,
+                        borderColor: 'var(--dg-border)',
                         color,
                         borderRadius: i === 0 ? '8px 0 0 8px' : i === stages.length - 1 ? '0 8px 8px 0' : '0',
                       }}

frontend/src/components/deploy/pipeline-manager/PipelineCreateDialog.tsx

@@ -1,28 +1,36 @@
 import { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { Textarea } from '@/components/ui/textarea';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import {
   Rocket,
   Plus,
   GitBranch,
-  Tag,
-  Server,
-  Network,
   Globe,
   Container,
   Loader2,
   Trash2,
-  ChevronRight as ChevronRightSmall,
+  ChevronDown,
+  Settings2,
 } from 'lucide-react';
-import { credentialApi, deployApi, pipelineApi } from '@/api';
+import { buildNodeApi, credentialApi, deployApi, pipelineApi, type BuildNode } from '@/api';
 import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
 import { nameToCode } from '../pipeline-helpers';
 import { STAGE_DEFS } from './constants';
+import { DeployTargetFields, type DeployTargetValue } from './DeployTargetFields';
 
 interface PipelineCreateDialogProps {
   open: boolean;
@@ -30,45 +38,79 @@ interface PipelineCreateDialogProps {
   onCreated: () => void;
 }
 
-// 新建流水线对话框（含表单状态） // Logan.Li
+const PRESETS = [
+  {
+    key: 'ssh',
+    label: '主机发布',
+    desc: 'SCP 上传构建产物到关联主机',
+    stages: ['checkout', 'build', 'deploy'],
+    deployTarget: 'ssh' as const,
+  },
+  {
+    key: 'k8s',
+    label: 'Kubernetes 发布',
+    desc: '镜像打包后 CI 更新 Deployment',
+    stages: ['checkout', 'build', 'image', 'deploy'],
+    deployTarget: 'k8s' as const,
+  },
+];
+
+const DEFAULT_TARGET: DeployTargetValue = {
+  deployTarget: 'ssh',
+  serverIds: [],
+  deployRemotePath: '',
+  deployScript: '',
+  k8sClusterId: '',
+  k8sNamespace: '',
+  k8sDeployment: '',
+  k8sContainerName: '',
+};
+
+// 新建流水线对话框 — 精简分步 + 双发布目标 // Logan.Li
 export function PipelineCreateDialog({ open, onOpenChange, onCreated }: PipelineCreateDialogProps) {
+  const { t } = useTranslation();
+  const [step, setStep] = useState<1 | 2>(1);
+  const [preset, setPreset] = useState('ssh');
   const [newName, setNewName] = useState('');
-  const [newJobName, setNewJobName] = useState('');
   const [newDesc, setNewDesc] = useState('');
   const [newSource, setNewSource] = useState('');
   const [newBranch, setNewBranch] = useState('main');
   const [newDockerfile, setNewDockerfile] = useState('');
-  const [selectedStages, setSelectedStages] = useState<string[]>(['checkout', 'build', 'image', 'deploy']);
-  const [newDeployMode, setNewDeployMode] = useState('branch');
-  const [newDeployTarget, setNewDeployTarget] = useState('ssh');
+  const [selectedStages, setSelectedStages] = useState<string[]>(['checkout', 'build', 'deploy']);
+  const [deployTarget, setDeployTarget] = useState<DeployTargetValue>(DEFAULT_TARGET);
   const [newEnvironmentId, setNewEnvironmentId] = useState<number | string>('');
   const [saving, setSaving] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
 
   const [gitCredentials, setGitCredentials] = useState<Record<string, unknown>[]>([]);
   const [dockerCredentials, setDockerCredentials] = useState<Record<string, unknown>[]>([]);
   const [newGitCredentialId, setNewGitCredentialId] = useState<number | string>('');
   const [newRegistryCredentialId, setNewRegistryCredentialId] = useState<number | string>('');
 
+  const [newJobName, setNewJobName] = useState('');
   const [newTriggerMode, setNewTriggerMode] = useState('manual');
   const [newWatchBranches, setNewWatchBranches] = useState('');
-  const [newExcludeBranch, setNewExcludeBranch] = useState('');
   const [newCronExpr, setNewCronExpr] = useState('');
-  const [newWebhookToken, setNewWebhookToken] = useState('');
-  const [newEnvVars, setNewEnvVars] = useState<{ key: string; value: string; desc: string }[]>([]);
-  const [newCachePaths, setNewCachePaths] = useState('');
-  const [newMaxExecutors, setNewMaxExecutors] = useState(2);
+  const [newEnvVars, setNewEnvVars] = useState<{ key: string; value: string }[]>([]);
   const [environments, setEnvironments] = useState<Record<string, unknown>[]>([]);
+  const [buildNodes, setBuildNodes] = useState<BuildNode[]>([]);
+  const [buildNodeId, setBuildNodeId] = useState('');
 
   const loadRefs = useCallback(async () => {
     try {
-      const [rEnv, rCred] = await Promise.all([
+      const [rEnv, rCred, rNodes] = await Promise.all([
         deployApi.getEnvironments().catch(() => ({ list: [] })),
         credentialApi.list({ page_size: 100 }).catch(() => ({ list: [] })),
+        buildNodeApi.list().catch(() => ({ list: [] })),
       ] as const);
-      setEnvironments(Array.isArray((rEnv as Record<string, unknown>)?.list) ? (rEnv as Record<string, unknown>).list as Record<string, unknown>[] : []);
+      setEnvironments(Array.isArray((rEnv as Record<string, unknown>)?.list)
+        ? (rEnv as Record<string, unknown>).list as Record<string, unknown>[]
+        : []);
       const allCreds: Record<string, unknown>[] = (rCred as Record<string, unknown>)?.list as Record<string, unknown>[] || [];
       setGitCredentials(allCreds.filter((c) => c.secret_type === 'api'));
       setDockerCredentials(allCreds.filter((c) => c.secret_type === 'docker'));
+      const nodeData = rNodes as { list?: BuildNode[] };
+      setBuildNodes(Array.isArray(nodeData?.list) ? nodeData.list.filter((n) => n.enabled) : []);
     } catch { /* silent */ }
   }, []);
 
@@ -76,33 +118,71 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
     if (open) loadRefs();
   }, [open, loadRefs]);
 
+  const applyPreset = (key: string) => {
+    const p = PRESETS.find((x) => x.key === key);
+    if (!p) return;
+    setPreset(key);
+    setSelectedStages(p.stages);
+    setDeployTarget({
+      ...DEFAULT_TARGET,
+      deployTarget: p.deployTarget,
+    });
+  };
+
   const resetForm = () => {
+    setStep(1);
+    setPreset('ssh');
     setNewName('');
-    setNewJobName('');
     setNewDesc('');
     setNewSource('');
     setNewBranch('main');
     setNewDockerfile('');
-    setSelectedStages(['checkout', 'build', 'image', 'deploy']);
-    setNewDeployMode('branch');
-    setNewDeployTarget('ssh');
+    setSelectedStages(['checkout', 'build', 'deploy']);
+    setDeployTarget(DEFAULT_TARGET);
     setNewEnvironmentId('');
     setNewGitCredentialId('');
     setNewRegistryCredentialId('');
+    setNewJobName('');
     setNewTriggerMode('manual');
     setNewWatchBranches('');
-    setNewExcludeBranch('');
     setNewCronExpr('');
-    setNewWebhookToken('');
     setNewEnvVars([]);
-    setNewCachePaths('');
-    setNewMaxExecutors(2);
+    setAdvancedOpen(false);
+    setBuildNodeId('');
+  };
+
+  const validateStep1 = () => {
+    if (!newName.trim()) {
+      toast.error('请输入流水线名称');
+      return false;
+    }
+    return true;
+  };
+
+  const validateStep2 = () => {
+    if (selectedStages.includes('checkout') && !newSource.trim()) {
+      toast.error(t('deploy.stage.checkoutNeedGit'));
+      return false;
+    }
+    if (selectedStages.includes('image') && !newRegistryCredentialId) {
+      toast.error(t('deploy.stage.imageNeedDocker'));
+      return false;
+    }
+    if (selectedStages.includes('deploy')) {
+      if (deployTarget.deployTarget === 'ssh' && deployTarget.serverIds.length === 0) {
+        toast.error('主机发布需至少关联一台主机');
+        return false;
+      }
+      if (deployTarget.deployTarget === 'k8s' && (!deployTarget.k8sClusterId || !deployTarget.k8sDeployment)) {
+        toast.error('Kubernetes 发布需选择集群与 Deployment');
+        return false;
+      }
+    }
+    return true;
   };
 
   const handleCreate = async () => {
-    if (!newName.trim()) { toast.error('请输入流水线名称'); return; }
-    if (selectedStages.includes('checkout') && !newSource.trim()) { toast.error('代码检出阶段需要填写 Git URL'); return; }
-    if (selectedStages.includes('image') && !newRegistryCredentialId) { toast.error('镜像打包阶段需要关联 Docker 凭证'); return; }
+    if (!validateStep1() || !validateStep2()) return;
     setSaving(true);
     try {
       const stageNames = selectedStages.map((k) => STAGE_DEFS.find((s) => s.key === k)?.label || k);
@@ -122,381 +202,358 @@ export function PipelineCreateDialog({ open, onOpenChange, onCreated }: Pipeline
         dockerfile: newDockerfile,
         type: 'deploy',
         stages,
-        deploy_mode: newDeployMode,
-        deploy_target: newDeployTarget,
+        deploy_mode: 'branch',
+        deploy_target: deployTarget.deployTarget,
+        server_ids: deployTarget.serverIds.length > 0 ? JSON.stringify(deployTarget.serverIds) : undefined,
+        deploy_remote_path: deployTarget.deployRemotePath || undefined,
+        deploy_script: deployTarget.deployScript || undefined,
+        k8s_cluster_id: deployTarget.k8sClusterId ? Number(deployTarget.k8sClusterId) : null,
+        k8s_namespace: deployTarget.k8sNamespace || undefined,
+        k8s_deployment: deployTarget.k8sDeployment || undefined,
+        k8s_container_name: deployTarget.k8sContainerName || undefined,
         environment_id: newEnvironmentId ? Number(newEnvironmentId) : null,
-        repo_id: null,
-        registry_id: null,
         git_credential_id: newGitCredentialId ? Number(newGitCredentialId) : null,
         registry_credential_id: newRegistryCredentialId ? Number(newRegistryCredentialId) : null,
         trigger_mode: newTriggerMode,
         watch_branches: newWatchBranches || undefined,
-        exclude_branch: newExcludeBranch || undefined,
         cron_expr: newCronExpr || undefined,
-        webhook_token: newWebhookToken || undefined,
         variables: newEnvVars.length > 0 ? JSON.stringify(newEnvVars) : undefined,
-        cache_paths: newCachePaths || undefined,
-        max_executors: newMaxExecutors,
+        build_node_id: buildNodeId ? Number(buildNodeId) : null,
       });
-      toast.success('流水线已创建');
+      toast.success(t('deploy.pipeline.created'));
       onOpenChange(false);
       resetForm();
       onCreated();
     } catch {
-      toast.error('创建失败');
+      toast.error(t('deploy.pipeline.createFailed'));
     } finally {
       setSaving(false);
     }
   };
 
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2"><Rocket className="h-5 w-5" />新建流水线</DialogTitle>
-        </DialogHeader>
-        <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1">
-              <Label>名称 <span className="dg-text-red">*</span></Label>
-              <Input value={newName} onChange={(e) => setNewName(e.target.value)} placeholder="例如: demo-jar 后端部署" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9" />
-            </div>
-            <div className="space-y-1">
-              <Label>Job 名称 <span className="text-xs text-[var(--dg-text-secondary)]">(Webhook URL)</span></Label>
-              <Input value={newJobName} onChange={(e) => setNewJobName(e.target.value)} placeholder="cex-admin-server" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-sm" />
-              {newJobName && <p className="text-[10px] text-[var(--dg-text-secondary)] opacity-60">Webhook: POST .../webhook/job/<b>{newJobName}</b></p>}
-            </div>
-          </div>
-          <div className="space-y-1">
-            <Label>描述</Label>
-            <Textarea value={newDesc} onChange={(e) => setNewDesc(e.target.value)} placeholder="流水线描述..." rows={2} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]" />
-          </div>
+  const toggleStage = (key: string) => {
+    setSelectedStages((prev) => (
+      prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
+    ));
+  };
 
-          <div className="grid grid-cols-3 gap-3">
-            <div className="space-y-1">
-              <Label>部署模式</Label>
-              <div className="flex gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
-                {[
-                  { key: 'branch', label: '分支', icon: GitBranch },
-                  { key: 'tag', label: 'Tag 发版', icon: Tag },
-                ].map((m) => {
-                  const active = newDeployMode === m.key;
-                  return (
-                    <button
-                      key={m.key}
-                      onClick={() => setNewDeployMode(m.key)}
-                      className={`flex-1 flex items-center justify-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium transition-all ${
-                        active ? 'bg-blue-500 text-white' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
-                      }`}
-                    >
-                      <m.icon className="h-3.5 w-3.5" />{m.label}
-                    </button>
-                  );
-                })}
-              </div>
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) resetForm(); onOpenChange(v); }}>
+      <DialogContent className="max-w-lg max-h-[88vh] overflow-y-auto bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
+        <DialogHeader>
+          <DialogTitle className="text-[var(--dg-text-primary)]">新建流水线</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-muted)]">
+            选择发布方式，关联主机或 Kubernetes Deployment，创建后可继续编辑阶段脚本
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* 步骤指示 */}
+        <div className="flex items-center gap-2 text-xs">
+          <button
+            type="button"
+            onClick={() => setStep(1)}
+            className={cn(
+              'px-2.5 py-1 rounded-md transition-colors',
+              step === 1 ? 'bg-[var(--dg-bg-hover)] text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-muted)]',
+            )}
+          >
+            1. 基础
+          </button>
+          <span className="text-[var(--dg-border)]">/</span>
+          <button
+            type="button"
+            onClick={() => { if (validateStep1()) setStep(2); }}
+            className={cn(
+              'px-2.5 py-1 rounded-md transition-colors',
+              step === 2 ? 'bg-[var(--dg-bg-hover)] text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-muted)]',
+            )}
+          >
+            2. 代码与发布
+          </button>
+        </div>
+
+        {step === 1 ? (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-2">
+              {PRESETS.map((p) => (
+                <button
+                  key={p.key}
+                  type="button"
+                  onClick={() => applyPreset(p.key)}
+                  className={cn(
+                    'p-3 rounded-lg border text-left transition-colors',
+                    preset === p.key
+                      ? 'border-[var(--dg-blue)] bg-[color-mix(in_srgb,var(--dg-blue)_8%,transparent)]'
+                      : 'border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)]',
+                  )}
+                >
+                  <div className="text-sm font-medium text-[var(--dg-text-primary)]">{p.label}</div>
+                  <div className="text-[11px] text-[var(--dg-text-muted)] mt-0.5">{p.desc}</div>
+                </button>
+              ))}
             </div>
-            <div className="space-y-1">
-              <Label>部署目标</Label>
-              <div className="flex gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
-                {[
-                  { key: 'ssh', label: 'SSH 主机', icon: Server },
-                  { key: 'k8s', label: 'Kubernetes 集群', icon: Network },
-                ].map((t) => {
-                  const active = newDeployTarget === t.key;
-                  return (
-                    <button
-                      key={t.key}
-                      onClick={() => setNewDeployTarget(t.key)}
-                      className={`flex-1 flex items-center justify-center gap-1 px-2 py-1.5 rounded-md text-xs font-medium transition-all ${
-                        active ? 'bg-green-500 text-white' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
-                      }`}
-                    >
-                      <t.icon className="h-3.5 w-3.5" />{t.label}
-                    </button>
-                  );
-                })}
-              </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs">名称 <span className="text-[var(--dg-red)]">*</span></Label>
+              <Input
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                placeholder="例如 demo-api"
+                className="h-9 dg-input"
+              />
             </div>
-            <div className="space-y-1">
-              <Label>环境分组</Label>
-              <Select value={String(newEnvironmentId)} onValueChange={(v) => setNewEnvironmentId(v === '__none' ? '' : v)}>
-                <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择环境" /></SelectTrigger>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs">描述</Label>
+              <Textarea
+                value={newDesc}
+                onChange={(e) => setNewDesc(e.target.value)}
+                placeholder="可选"
+                rows={2}
+                className="dg-input text-sm"
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-xs">环境分组</Label>
+              <Select
+                value={String(newEnvironmentId)}
+                onValueChange={(v) => setNewEnvironmentId(v === '__none' ? '' : v)}
+              >
+                <SelectTrigger className="h-9 dg-input"><SelectValue placeholder="选择环境" /></SelectTrigger>
                 <SelectContent>
                   <SelectItem value="__none">不指定</SelectItem>
                   {environments.map((env) => (
                     <SelectItem key={env.id as number} value={String(env.id)}>
-                      <span className="flex items-center gap-1.5">
-                        <span className="w-2 h-2 rounded-full inline-block" style={{ backgroundColor: env.color as string }} />
-                        {String(env.display_name)}
-                      </span>
+                      {String(env.display_name)}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-          </div>
 
-          <div className="grid grid-cols-2 gap-3">
-            <div className="space-y-1">
-              <Label>Git URL {selectedStages.includes('checkout') && <span className="dg-text-red">*</span>}</Label>
-              <Input value={newSource} onChange={(e) => setNewSource(e.target.value)} placeholder="https://gitee.com/user/repo.git" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-xs" />
-            </div>
-            <div className="space-y-1">
-              <Label>分支 / Tag</Label>
-              <Input value={newBranch} onChange={(e) => setNewBranch(e.target.value)} placeholder={newDeployMode === 'tag' ? 'v1.0.0' : 'main'} className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9" />
-            </div>
-            <div className="space-y-1">
-              <Label>Git 凭证 <span className="text-xs text-[var(--dg-text-secondary)] opacity-60">(API Token)</span></Label>
-              <Select value={String(newGitCredentialId)} onValueChange={(v) => setNewGitCredentialId(v === '__none' ? '' : v)}>
-                <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择凭证" /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none">不关联</SelectItem>
-                  {gitCredentials.map((c) => (
-                    <SelectItem key={c.id as number} value={String(c.id)}>
-                      <span className="flex items-center gap-1.5">
-                        <Globe className="h-3 w-3 opacity-60" />{String(c.name)} {c.summary && <span className="text-[10px] opacity-50">({String(c.summary)})</span>}
-                      </span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {!newGitCredentialId && selectedStages.includes('checkout') && <p className="text-xs dg-text-yellow">建议关联凭证</p>}
-            </div>
-            <div className="space-y-1">
-              <Label>镜像仓库凭证 {selectedStages.includes('image') && <span className="dg-text-red">*</span>}</Label>
-              <Select value={String(newRegistryCredentialId)} onValueChange={(v) => setNewRegistryCredentialId(v === '__none' ? '' : v)}>
-                <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9"><SelectValue placeholder="选择 Docker 凭证" /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none">不关联</SelectItem>
-                  {dockerCredentials.map((c) => (
-                    <SelectItem key={c.id as number} value={String(c.id)}>
-                      <span className="flex items-center gap-1.5">
-                        <Container className="h-3 w-3 opacity-60" />{String(c.name)} {c.summary && <span className="text-[10px] opacity-50">({String(c.summary)})</span>}
-                      </span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              {!newRegistryCredentialId && selectedStages.includes('image') && <p className="text-xs dg-text-yellow">需要关联 Docker 凭证</p>}
+            <div className="flex justify-end gap-2 pt-2">
+              <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+              <Button onClick={() => { if (validateStep1()) setStep(2); }}>下一步</Button>
             </div>
           </div>
+        ) : (
+          <div className="space-y-4">
+            <DeployTargetFields
+              value={deployTarget}
+              onChange={(patch) => setDeployTarget((prev) => ({ ...prev, ...patch }))}
+              requireTarget={selectedStages.includes('deploy')}
+            />
 
-          {newRegistryCredentialId && newJobName && (
-            <div className="p-2.5 rounded-md bg-blue-500/5 border border-blue-500/20 text-xs text-[var(--dg-text-secondary)]">
-              <span className="dg-text-blue">镜像命名：</span>
-              <code className="text-[var(--dg-text-primary)]">{'{registry}'}/{'{namespace}'}/{'{'}{'{JOB_BASE_NAME}'}{'}'}:{'{'}{'{tag}'}{'}'}</code>
-              <span className="ml-2 opacity-60">例：</span>
-              <code className="opacity-60">harbor.ast1001.com/test/{newJobName}:latest</code>
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs">
+                  Git 仓库 {selectedStages.includes('checkout') && <span className="text-[var(--dg-red)]">*</span>}
+                </Label>
+                <Input
+                  value={newSource}
+                  onChange={(e) => setNewSource(e.target.value)}
+                  placeholder="https://gitee.com/user/repo.git"
+                  className="h-8 text-xs font-mono dg-input"
+                />
+              </div>
+              <div className="space-y-1.5">
+                <Label className="text-xs">分支</Label>
+                <Input value={newBranch} onChange={(e) => setNewBranch(e.target.value)} className="h-8 text-xs dg-input" />
+              </div>
             </div>
-          )}
-          <div className="space-y-1">
-            <Label>Dockerfile 路径</Label>
-            <Input value={newDockerfile} onChange={(e) => setNewDockerfile(e.target.value)} placeholder="jar/Dockerfile" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-9 font-mono text-xs" />
-          </div>
 
-          <div className="space-y-2">
-            <Label>发布流程 <span className="text-xs text-[var(--dg-text-secondary)] opacity-70 ml-1">按顺序选择阶段</span></Label>
-            <div className="flex flex-wrap gap-2">
-              {STAGE_DEFS.map((def) => {
-                const active = selectedStages.includes(def.key);
-                return (
-                  <Badge
-                    key={def.key}
-                    className={`cursor-pointer transition-all text-xs px-3 py-1.5 ${active ? 'border-current' : 'border-[var(--dg-border)] opacity-50 hover:opacity-80'}`}
-                    style={active ? { backgroundColor: `${def.color}20`, color: def.color, borderColor: def.color } : {}}
-                    onClick={() => setSelectedStages(active ? selectedStages.filter((t) => t !== def.key) : [...selectedStages, def.key])}
-                    title={def.desc}
-                  >
-                    <def.icon className="h-3 w-3 mr-1" />{def.label} {def.needs.includes('repo') ? '🔗' : ''}{def.needs.includes('registry') ? '📦' : ''}
-                  </Badge>
-                );
-              })}
+            <div className="grid grid-cols-2 gap-2">
+              <div className="space-y-1.5">
+                <Label className="text-xs">Git 凭证</Label>
+                <Select value={String(newGitCredentialId)} onValueChange={(v) => setNewGitCredentialId(v === '__none' ? '' : v)}>
+                  <SelectTrigger className="h-8 text-xs dg-input"><SelectValue placeholder="选择凭证" /></SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__none">不关联</SelectItem>
+                    {gitCredentials.map((c) => (
+                      <SelectItem key={c.id as number} value={String(c.id)}>
+                        <span className="flex items-center gap-1"><Globe className="h-3 w-3" />{String(c.name)}</span>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              {selectedStages.includes('image') && (
+                <div className="space-y-1.5">
+                  <Label className="text-xs">镜像凭证 <span className="text-[var(--dg-red)]">*</span></Label>
+                  <Select value={String(newRegistryCredentialId)} onValueChange={(v) => setNewRegistryCredentialId(v === '__none' ? '' : v)}>
+                    <SelectTrigger className="h-8 text-xs dg-input"><SelectValue placeholder="Docker 凭证" /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__none">不关联</SelectItem>
+                      {dockerCredentials.map((c) => (
+                        <SelectItem key={c.id as number} value={String(c.id)}>
+                          <span className="flex items-center gap-1"><Container className="h-3 w-3" />{String(c.name)}</span>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              )}
             </div>
-            {selectedStages.length > 0 && (
-              <div className="flex items-center mt-2">
-                {selectedStages.map((key, i) => {
-                  const def = STAGE_DEFS.find((t) => t.key === key)!;
+
+            {deployTarget.deployTarget === 'k8s' && (
+              <div className="space-y-1.5">
+                <Label className="text-xs">Dockerfile 路径</Label>
+                <Input
+                  value={newDockerfile}
+                  onChange={(e) => setNewDockerfile(e.target.value)}
+                  placeholder="Dockerfile"
+                  className="h-8 text-xs font-mono dg-input"
+                />
+              </div>
+            )}
+
+            <div className="space-y-1.5">
+              <Label className="text-xs">CI 阶段</Label>
+              <div className="flex flex-wrap gap-1.5">
+                {STAGE_DEFS.map((def) => {
+                  const active = selectedStages.includes(def.key);
                   return (
-                    <div key={i} className="flex items-center">
-                      <div
-                        className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium border"
-                        style={{
-                          backgroundColor: `${def.color}20`,
-                          borderColor: `${def.color}40`,
-                          color: def.color,
-                          borderRadius: i === 0 ? '6px 0 0 6px' : i === selectedStages.length - 1 ? '0 6px 6px 0' : '0',
-                        }}
-                      >
-                        <def.icon className="h-3 w-3" />{def.label}
-                      </div>
-                      {i < selectedStages.length - 1 && (
-                        <div className="flex items-center justify-center w-4 h-5 -mx-px z-10">
-                          <ChevronRightSmall className="h-3 w-3" style={{ color: def.color }} />
-                        </div>
-                      )}
-                    </div>
+                    <Badge
+                      key={def.key}
+                      variant={active ? 'default' : 'outline'}
+                      className={cn('cursor-pointer text-xs', !active && 'opacity-50')}
+                      onClick={() => toggleStage(def.key)}
+                    >
+                      <def.icon className="h-3 w-3 mr-1" />
+                      {def.label}
+                    </Badge>
                   );
                 })}
               </div>
-            )}
-          </div>
-
-          <div className="border-t border-[var(--dg-border)] pt-4">
-            <Label className="mb-2 block">触发方式</Label>
-            <div className="flex gap-1 bg-[var(--dg-bg-secondary)] rounded-lg p-1 border border-[var(--dg-border)]">
-              {[
-                { key: 'manual', label: '手动', desc: '手动触发执行' },
-                { key: 'git_push', label: '代码推送', desc: 'Git Push 自动触发' },
-                { key: 'cron', label: '定时', desc: 'Cron 定时执行' },
-                { key: 'webhook', label: 'Webhook', desc: '外部 Webhook 调用' },
-              ].map((t) => {
-                const active = newTriggerMode === t.key;
-                return (
-                  <button
-                    key={t.key}
-                    onClick={() => setNewTriggerMode(t.key)}
-                    className={`flex-1 flex flex-col items-center gap-0.5 px-2 py-2 rounded-md text-xs font-medium transition-all ${
-                      active ? 'bg-blue-500 text-white' : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]'
-                    }`}
-                    title={t.desc}
-                  >
-                    {t.label}
-                  </button>
-                );
-              })}
-            </div>
-
-            {newTriggerMode === 'git_push' && (
-              <div className="mt-3 space-y-2 p-3 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
-                <div className="space-y-1">
-                  <Label className="text-xs">监听分支 <span className="text-[var(--dg-text-secondary)] opacity-60">(逗号分隔，支持 * 通配)</span></Label>
-                  <Input value={newWatchBranches} onChange={(e) => setNewWatchBranches(e.target.value)} placeholder="release/*, main" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
-                </div>
-                <div className="space-y-1">
-                  <Label className="text-xs">排除分支 <span className="text-[var(--dg-text-secondary)] opacity-60">(不触发构建)</span></Label>
-                  <Input value={newExcludeBranch} onChange={(e) => setNewExcludeBranch(e.target.value)} placeholder="wip/*, draft/*" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
-                </div>
-              </div>
-            )}
-
-            {newTriggerMode === 'cron' && (
-              <div className="mt-3 space-y-2 p-3 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
-                <div className="space-y-1">
-                  <Label className="text-xs">Cron 表达式 <span className="text-[var(--dg-text-secondary)] opacity-60">(标准 5 位)</span></Label>
-                  <Input value={newCronExpr} onChange={(e) => setNewCronExpr(e.target.value)} placeholder="0 2 * * *" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
-                </div>
-                <div className="flex flex-wrap gap-1.5">
-                  {[
-                    { expr: '*/5 * * * *', label: '每5分钟' },
-                    { expr: '0 * * * *', label: '每小时' },
-                    { expr: '0 2 * * *', label: '每天2点' },
-                    { expr: '0 0 * * 0', label: '每周日' },
-                  ].map((c) => (
-                    <Badge key={c.expr} variant="outline" className="cursor-pointer text-[10px] hover:bg-blue-500/10" onClick={() => setNewCronExpr(c.expr)}>
-                      {c.label}
-                    </Badge>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {newTriggerMode === 'webhook' && (
-              <div className="mt-3 space-y-2 p-3 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
-                <div className="space-y-1">
-                  <Label className="text-xs">Webhook Token <span className="text-[var(--dg-text-secondary)] opacity-60">(签名验证，可选)</span></Label>
-                  <Input value={newWebhookToken} onChange={(e) => setNewWebhookToken(e.target.value)} placeholder="随机字符串" className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)] h-8 font-mono text-xs" />
-                </div>
-                <p className="text-[10px] text-[var(--dg-text-secondary)] opacity-60">
-                  Webhook URL: <code className="text-[var(--dg-blue)]">POST /api/v1/webhook/pipeline/{'{code}'}</code>
+              {selectedStages.length > 0 && (
+                <p className="text-[10px] text-[var(--dg-text-muted)] flex items-center gap-1 flex-wrap">
+                  <GitBranch className="h-3 w-3" />
+                  {selectedStages.map((k) => STAGE_DEFS.find((d) => d.key === k)?.label || k).join(' → ')}
                 </p>
-              </div>
-            )}
-          </div>
-
-          <div className="border-t border-[var(--dg-border)] pt-4">
-            <div className="flex items-center justify-between mb-2">
-              <Label>环境变量 <span className="text-xs text-[var(--dg-text-secondary)] opacity-60">(${'{VAR_NAME}'} 引用)</span></Label>
-              <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => setNewEnvVars([...newEnvVars, { key: '', value: '', desc: '' }])}>
-                <Plus className="h-3 w-3 mr-1" />添加变量
-              </Button>
+              )}
             </div>
-            {newEnvVars.length === 0 ? (
-              <p className="text-xs text-[var(--dg-text-muted)] py-2">暂无变量，点击&quot;添加变量&quot;新增</p>
-            ) : (
-              <div className="space-y-2">
-                {newEnvVars.map((v, i) => (
-                  <div key={i} className="grid grid-cols-12 gap-2 items-start p-2 rounded-md bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]">
-                    <Input
-                      value={v.key}
-                      onChange={(e) => {
-                        const nv = [...newEnvVars];
-                        nv[i] = { ...nv[i], key: e.target.value };
-                        setNewEnvVars(nv);
-                      }}
-                      placeholder="变量名"
-                      className="col-span-3 h-8 text-xs font-mono bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
-                    />
-                    <Input
-                      value={v.value}
-                      onChange={(e) => {
-                        const nv = [...newEnvVars];
-                        nv[i] = { ...nv[i], value: e.target.value };
-                        setNewEnvVars(nv);
-                      }}
-                      placeholder="变量值"
-                      className="col-span-4 h-8 text-xs font-mono bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
-                    />
-                    <Input
-                      value={v.desc}
-                      onChange={(e) => {
-                        const nv = [...newEnvVars];
-                        nv[i] = { ...nv[i], desc: e.target.value };
-                        setNewEnvVars(nv);
-                      }}
-                      placeholder="说明"
-                      className="col-span-4 h-8 text-xs bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]"
-                    />
-                    <Button variant="ghost" size="icon" className="col-span-1 h-8 w-8 dg-text-red" onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}>
-                      <Trash2 className="h-3.5 w-3.5" />
+
+            <Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
+              <CollapsibleTrigger asChild>
+                <button
+                  type="button"
+                  className="flex items-center gap-1.5 text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]"
+                >
+                  <Settings2 className="h-3.5 w-3.5" />
+                  高级设置
+                  <ChevronDown className={cn('h-3.5 w-3.5 transition-transform', advancedOpen && 'rotate-180')} />
+                </button>
+              </CollapsibleTrigger>
+              <CollapsibleContent className="mt-3 space-y-3 pt-3 border-t border-[var(--dg-border)]">
+                <div className="space-y-1.5">
+                  <Label className="text-xs">构建节点</Label>
+                  <Select value={buildNodeId || '__auto'} onValueChange={(v) => setBuildNodeId(v === '__auto' ? '' : v)}>
+                    <SelectTrigger className="h-8 text-xs dg-input"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="__auto">自动调度（Master 优先）</SelectItem>
+                      {buildNodes.map((n) => (
+                        <SelectItem key={n.id} value={String(n.id)}>
+                          {n.name} ({n.running_count || 0}/{n.max_executors})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs">Job 名称 <span className="text-[var(--dg-text-muted)]">(Webhook)</span></Label>
+                  <Input value={newJobName} onChange={(e) => setNewJobName(e.target.value)} className="h-8 text-xs font-mono dg-input" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label className="text-xs">触发方式</Label>
+                  <Select value={newTriggerMode} onValueChange={setNewTriggerMode}>
+                    <SelectTrigger className="h-8 text-xs dg-input"><SelectValue /></SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="manual">手动</SelectItem>
+                      <SelectItem value="git_push">代码推送</SelectItem>
+                      <SelectItem value="cron">定时</SelectItem>
+                      <SelectItem value="webhook">Webhook</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                {newTriggerMode === 'git_push' && (
+                  <Input
+                    value={newWatchBranches}
+                    onChange={(e) => setNewWatchBranches(e.target.value)}
+                    placeholder="监听分支，如 main, release/*"
+                    className="h-8 text-xs font-mono dg-input"
+                  />
+                )}
+                {newTriggerMode === 'cron' && (
+                  <Input
+                    value={newCronExpr}
+                    onChange={(e) => setNewCronExpr(e.target.value)}
+                    placeholder="0 2 * * *"
+                    className="h-8 text-xs font-mono dg-input"
+                  />
+                )}
+                <div className="space-y-1.5">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-xs">环境变量</Label>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 text-[10px]"
+                      onClick={() => setNewEnvVars([...newEnvVars, { key: '', value: '' }])}
+                    >
+                      <Plus className="h-3 w-3 mr-0.5" />添加
                     </Button>
                   </div>
-                ))}
+                  {newEnvVars.map((v, i) => (
+                    <div key={i} className="flex gap-1.5">
+                      <Input
+                        value={v.key}
+                        onChange={(e) => {
+                          const nv = [...newEnvVars];
+                          nv[i] = { ...nv[i], key: e.target.value };
+                          setNewEnvVars(nv);
+                        }}
+                        placeholder="KEY"
+                        className="h-7 text-xs font-mono dg-input flex-1"
+                      />
+                      <Input
+                        value={v.value}
+                        onChange={(e) => {
+                          const nv = [...newEnvVars];
+                          nv[i] = { ...nv[i], value: e.target.value };
+                          setNewEnvVars(nv);
+                        }}
+                        placeholder="value"
+                        className="h-7 text-xs font-mono dg-input flex-[2]"
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 shrink-0"
+                        onClick={() => setNewEnvVars(newEnvVars.filter((_, idx) => idx !== i))}
+                      >
+                        <Trash2 className="h-3.5 w-3.5 text-[var(--dg-red)]" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <div className="flex justify-between gap-2 pt-2 border-t border-[var(--dg-border)]">
+              <Button variant="ghost" onClick={() => setStep(1)}>上一步</Button>
+              <div className="flex gap-2">
+                <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+                <Button onClick={handleCreate} disabled={saving}>
+                  {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Rocket className="h-4 w-4 mr-1" />}
+                  {saving ? '创建中' : '创建'}
+                </Button>
               </div>
-            )}
-          </div>
-
-          <div className="border-t border-[var(--dg-border)] pt-4">
-            <Label className="mb-2 block">构建缓存 <span className="text-xs text-[var(--dg-text-secondary)] opacity-60">(加速后续构建)</span></Label>
-            <Input value={newCachePaths} onChange={(e) => setNewCachePaths(e.target.value)} placeholder="node_modules, .m2, target" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] h-8 text-xs font-mono" />
-            <p className="text-[10px] text-[var(--dg-text-secondary)] opacity-50 mt-1">多个路径用逗号分隔，相同的 Key 会命中已有缓存</p>
-          </div>
-
-          <div className="border-t border-[var(--dg-border)] pt-4">
-            <Label className="mb-2 block">并发执行数 <span className="text-xs text-[var(--dg-text-secondary)] opacity-60">(Number of executors)</span></Label>
-            <div className="flex items-center gap-2">
-              <Select value={String(newMaxExecutors)} onValueChange={(v) => setNewMaxExecutors(Number(v))}>
-                <SelectTrigger className="w-32 h-8 text-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="1">1 — 串行</SelectItem>
-                  <SelectItem value="2">2</SelectItem>
-                  <SelectItem value="3">3</SelectItem>
-                  <SelectItem value="4">4</SelectItem>
-                  <SelectItem value="5">5</SelectItem>
-                </SelectContent>
-              </Select>
             </div>
-            <p className="text-[10px] text-[var(--dg-text-secondary)] opacity-50 mt-1">设为 1 则按顺序串行执行，默认 2 可并发构建</p>
           </div>
-        </div>
-        <div className="flex justify-end gap-2 mt-4 pt-4 border-t border-[var(--dg-border)]">
-          <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
-          <Button onClick={handleCreate} disabled={saving}>
-            {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Rocket className="h-4 w-4 mr-1" />}
-            {saving ? '创建中...' : '创建流水线'}
-          </Button>
-        </div>
+        )}
       </DialogContent>
     </Dialog>
   );

frontend/src/components/layout/Sidebar.tsx

@@ -111,7 +111,7 @@ const menuItems: MenuItem[] = [
     children: [
       { id: 'pipelines', name: '流水线', labelKey: 'menu.pipelines', icon: GitBranch, path: '/pipelines', permission: 'deploy:pipeline' },
       { id: 'deploy-credentials', name: '发布配置', labelKey: 'menu.deployConfig', icon: Key, path: '/deploy/configureTools', permission: 'deploy:release' },
-      { id: 'deploy-rbac', name: '发布权限', labelKey: 'menu.deployRbac', icon: Shield, path: '/deploy/rbac', permission: 'deploy:release' },
+      { id: 'deploy-rbac', name: 'Job 权限', labelKey: 'menu.deployRbac', icon: Shield, path: '/deploy/rbac', permission: 'deploy:release' },
     ],
   },
   {
@@ -132,6 +132,7 @@ const menuItems: MenuItem[] = [
       { id: 'log-es', name: 'ES查询', labelKey: 'menu.esQuery', icon: Database, path: '/log-center/es', permission: 'monitor:alert' },
       { id: 'log-datasources', name: '日志库', labelKey: 'menu.logLibrary', icon: HardDrive, path: '/log-center/datasources', permission: 'monitor:alert' },
       { id: 'log-alerts', name: '日志告警', labelKey: 'menu.logAlerts', icon: AlertTriangle, path: '/log-center/alerts', permission: 'monitor:alert' },
+      { id: 'log-rbac', name: '日志权限', labelKey: 'menu.logRbac', icon: Shield, path: '/log-center/rbac', permission: 'monitor:alert' },
     ],
   },
   {

frontend/src/components/monitor/log-center/EnhancedLogResults.tsx

@@ -1,6 +1,9 @@
 // EnhancedLogResults.tsx — Grafana 风格日志结果展示 // Logan.Li
 import { useState, useMemo } from 'react';
 import { ChevronDown, ChevronRight, BarChart3, Plus, Search, Copy, Check } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { copyToClipboard } from '@/utils/clipboard';
+import { buildLogCopyText, detectLogFields, formatLogPreview, formatLogTimestamp } from './log-format';
 import type { LogEntry, ViewMode } from './types-v3';
 type ViewDensity = 'compact' | 'comfortable' | 'loose';
 
@@ -81,25 +84,11 @@ export function extractCommonLabels(entries: LogEntry[]): Record<string, string>
   return Object.keys(common).length > 0 ? common : null;
 }
 
-// ===== 检测结构化字段（从消息中解析）=====
-function detectFields(raw: string): { name: string; value: string }[] {
-  const fields: { name: string; value: string }[] = [];
-  try {
-    const parsed = JSON.parse(raw);
-    if (typeof parsed === 'object' && parsed !== null) {
-      for (const [k, v] of Object.entries(parsed)) {
-        fields.push({ name: k, value: String(v) });
-      }
-    }
-  } catch {
-    // 非 JSON，尝试 key=value 模式
-    const regex = /(\w+)=([^,\s]+)/g;
-    let m;
-    while ((m = regex.exec(raw)) !== null) {
-      fields.push({ name: m[1], value: m[2] });
-    }
-  }
-  return fields;
+// 日志行 CSS：截断关闭时用横向滚动而非省略号，避免看不到后半段 // Logan.Li
+function messageLineClass(wrap: boolean, trunc: boolean): string {
+  if (wrap) return 'whitespace-pre-wrap break-all';
+  if (trunc) return 'truncate';
+  return 'whitespace-nowrap overflow-x-auto';
 }
 
 // ===== 原始日志视图（Grafana 风格）=====
@@ -109,15 +98,25 @@ function RawLogView({
   entry: LogEntry; wrap: boolean; trunc: boolean;
   showTime: boolean; onLabelFilter?: (k: string, v: string, op: 'include' | 'exclude') => void;
 }) {
+  const { toast } = useToast();
   const [expanded, setExpanded] = useState(false);
   const [copied, setCopied] = useState(false);
   const labels = entry.labels || {};
-  const detected = useMemo(() => detectFields(entry.raw || entry.message), [entry]);
+  const fullText = entry.raw || entry.message || '';
+  const detected = useMemo(() => detectLogFields(fullText), [fullText]);
+  const displayTs = formatLogTimestamp(entry.timestamp);
+  const preview = expanded ? fullText : formatLogPreview(fullText, trunc);
 
-  const copyRaw = () => {
-    navigator.clipboard.writeText(entry.raw || entry.message).then(() => {
-      setCopied(true); setTimeout(() => setCopied(false), 1500);
-    });
+  const copyRaw = async () => {
+    const text = buildLogCopyText(entry);
+    const ok = await copyToClipboard(text);
+    if (ok) {
+      setCopied(true);
+      toast({ title: '已复制完整日志' });
+      setTimeout(() => setCopied(false), 1500);
+    } else {
+      toast({ title: '复制失败', description: '请展开后手动选中复制', variant: 'destructive' });
+    }
   };
 
   return (
@@ -135,8 +134,8 @@ function RawLogView({
 
         {/* 时间戳 */}
         {showTime && (
-          <span className="text-[11px] font-mono flex-shrink-0 w-[140px] mt-0.5" style={{ color: 'var(--dg-text-muted)' }}>
-            {entry.timestamp}
+          <span className="text-[11px] font-mono flex-shrink-0 w-[180px] mt-0.5" style={{ color: 'var(--dg-text-muted)' }} title={entry.timestamp}>
+            {displayTs}
           </span>
         )}
 
@@ -147,24 +146,50 @@ function RawLogView({
           </span>
         )}
 
-        {/* 日志内容 */}
-        <span className={`text-xs flex-1 min-w-0 ${wrap ? 'whitespace-pre-wrap break-all' : 'truncate'}`} style={{ color: 'var(--dg-text-secondary)' }}>
-          {trunc && entry.message.length > 300 && !expanded ? entry.message.slice(0, 300) + '...' : entry.message}
+        {/* 日志内容（折叠预览） */}
+        <span
+          className={`text-xs font-mono flex-1 min-w-0 ${messageLineClass(wrap, trunc && !expanded)}`}
+          style={{ color: 'var(--dg-text-secondary)' }}
+          title={!expanded && fullText.length > 120 ? fullText : undefined}
+        >
+          {preview}
         </span>
 
-        {/* 复制按钮（hover 显示）*/}
+        {/* 复制按钮（hover 显示，复制完整原文） */}
         <button
-          onClick={e => { e.stopPropagation(); copyRaw(); }}
+          onClick={e => { e.stopPropagation(); void copyRaw(); }}
           className="flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity mt-0.5"
           style={{ color: 'var(--dg-text-muted)' }}
+          title="复制完整日志"
         >
           {copied ? <Check className="h-3 w-3 dg-text-green" /> : <Copy className="h-3 w-3" />}
         </button>
       </div>
 
-      {/* 展开详情：Log labels + Detected fields */}
+      {/* 展开详情：完整日志 + labels + fields */}
       {expanded && (
         <div className="animate-fade-in" style={{ background: 'var(--dg-bg-secondary)', padding: '8px 12px 12px 36px' }}>
+          {/* 完整日志正文 */}
+          <div className="mb-3">
+            <div className="flex items-center justify-between mb-1.5">
+              <p className="text-[10px] font-medium" style={{ color: 'var(--dg-text-muted)' }}>完整日志</p>
+              <button
+                type="button"
+                onClick={e => { e.stopPropagation(); void copyRaw(); }}
+                className="text-[10px] px-2 py-0.5 rounded border"
+                style={{ borderColor: 'var(--dg-border)', color: 'var(--dg-text-secondary)' }}
+              >
+                {copied ? '已复制' : '复制全文'}
+              </button>
+            </div>
+            <pre
+              className="text-[11px] font-mono whitespace-pre-wrap break-all p-2 rounded max-h-[320px] overflow-y-auto"
+              style={{ background: 'var(--dg-bg-tertiary)', color: 'var(--dg-text-primary)', border: '1px solid var(--dg-border)' }}
+            >
+              {fullText}
+            </pre>
+          </div>
+
           {/* Log labels */}
           {Object.keys(labels).length > 0 && (
             <div className="mb-3">
@@ -181,8 +206,8 @@ function RawLogView({
                     >
                       <Plus className="h-3 w-3" />
                     </button>
-                    <span className="text-[11px] font-mono w-[160px] truncate flex-shrink-0" style={{ color: 'var(--dg-text-primary)' }}>{k}</span>
-                    <span className="text-[11px] font-mono flex-1 truncate" style={{ color: 'var(--dg-text-secondary)' }}>{v}</span>
+                    <span className="text-[11px] font-mono w-[160px] flex-shrink-0" style={{ color: 'var(--dg-text-primary)' }}>{k}</span>
+                    <span className="text-[11px] font-mono flex-1 break-all" style={{ color: 'var(--dg-text-secondary)' }}>{v}</span>
                   </div>
                 ))}
               </div>
@@ -249,12 +274,12 @@ function FieldView({ entries, wrap, trunc, search }: { entries: LogEntry[]; wrap
             <tr key={i} className="hover:opacity-80 transition-colors" style={{ borderBottom: '1px solid var(--dg-border)' }}>
               {columns.map(col => {
                 let val: string;
-                if (col === 'timestamp') val = e.timestamp;
-                else if (col === 'message') val = e.message;
+                if (col === 'timestamp') val = formatLogTimestamp(e.timestamp);
+                else if (col === 'message') val = e.raw || e.message;
                 else val = e.labels?.[col] || '—';
                 return (
-                  <td key={col} className={`px-2 py-1.5 max-w-[300px] ${!wrap ? 'truncate' : 'break-all'}`} style={{ color: 'var(--dg-text-secondary)' }}>
-                    {trunc && val.length > 100 ? val.slice(0, 100) + '...' : val}
+                  <td key={col} className={`px-2 py-1.5 max-w-[400px] ${wrap ? 'break-all whitespace-pre-wrap' : trunc ? 'truncate' : 'break-all'}`} style={{ color: 'var(--dg-text-secondary)' }} title={val}>
+                    {trunc ? formatLogPreview(val, true, 200) : val}
                   </td>
                 );
               })}
@@ -281,12 +306,12 @@ function TableView({ entries, wrap, trunc }: { entries: LogEntry[]; wrap: boolea
         <tbody>
           {entries.map((e, i) => (
             <tr key={i} className="hover:opacity-80 transition-colors" style={{ borderBottom: '1px solid var(--dg-border)' }}>
-              <td className="px-3 py-2 font-mono text-[11px] whitespace-nowrap" style={{ color: 'var(--dg-text-muted)' }}>{e.timestamp}</td>
+              <td className="px-3 py-2 font-mono text-[11px] whitespace-nowrap" style={{ color: 'var(--dg-text-muted)' }}>{formatLogTimestamp(e.timestamp)}</td>
               <td className="px-3 py-2">
                 {e.level ? <span className={`text-[10px] px-1.5 py-0.5 rounded border ${levelBadge(e.level)}`}>{e.level}</span> : '—'}
               </td>
-              <td className={`px-3 py-2 ${wrap ? 'whitespace-pre-wrap break-all' : 'truncate'} max-w-[600px]`} style={{ color: 'var(--dg-text-secondary)' }}>
-                {trunc && e.message.length > 200 ? e.message.slice(0, 200) + '...' : e.message}
+              <td className={`px-3 py-2 ${messageLineClass(wrap, trunc)} max-w-[800px]`} style={{ color: 'var(--dg-text-secondary)' }} title={e.raw || e.message}>
+                {trunc ? formatLogPreview(e.raw || e.message, true, 300) : (e.raw || e.message)}
               </td>
             </tr>
           ))}

frontend/src/components/monitor/log-center/EsIndexPicker.tsx

@@ -0,0 +1,99 @@
+import { useState, useEffect, useMemo } from 'react';
+import { ChevronDown, Loader2, Search } from 'lucide-react';
+import { logCenterApi } from '@/api/log/log-center';
+
+interface Props {
+  datasourceId?: number;
+  value: string;
+  onChange: (index: string) => void;
+}
+
+// ES 索引选择器 — 可搜索下拉，对接数据源索引列表 // Logan.Li
+export function EsIndexPicker({ datasourceId, value, onChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [indices, setIndices] = useState<string[]>([]);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    if (!datasourceId) {
+      setIndices([]);
+      return;
+    }
+    setLoading(true);
+    logCenterApi.listIndicesByDatasource(datasourceId)
+      .then((res) => setIndices(Array.isArray(res) ? res : []))
+      .catch(() => setIndices([]))
+      .finally(() => setLoading(false));
+  }, [datasourceId]);
+
+  const filtered = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return indices.slice(0, 80);
+    return indices.filter((i) => i.toLowerCase().includes(q)).slice(0, 80);
+  }, [indices, search]);
+
+  return (
+    <div className="relative flex-shrink-0">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="h-10 px-2 text-xs rounded flex items-center gap-1 font-mono min-w-[150px] max-w-[220px]"
+        style={{ background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'var(--dg-text-primary)' }}
+        title="选择或搜索 ES 索引"
+      >
+        <span className="truncate flex-1 text-left">{value || '选择索引'}</span>
+        {loading ? <Loader2 className="h-3 w-3 animate-spin shrink-0" /> : <ChevronDown className="h-3 w-3 shrink-0" />}
+      </button>
+      {open && (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div
+            className="absolute left-0 top-full mt-1 z-50 w-72 rounded-lg border shadow-xl overflow-hidden"
+            style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}
+          >
+            <div className="p-2 border-b" style={{ borderColor: 'var(--dg-border)' }}>
+              <div className="flex items-center gap-1.5 px-2 h-8 rounded" style={{ background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)' }}>
+                <Search className="h-3.5 w-3.5 text-[var(--dg-text-muted)]" />
+                <input
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="搜索索引..."
+                  className="flex-1 bg-transparent text-xs outline-none font-mono"
+                  style={{ color: 'var(--dg-text-primary)' }}
+                />
+              </div>
+            </div>
+            <div className="max-h-56 overflow-y-auto p-1">
+              <button
+                type="button"
+                onClick={() => { onChange(''); setOpen(false); }}
+                className="w-full text-left px-2 py-1.5 text-xs rounded hover:opacity-80 font-mono"
+                style={{ color: 'var(--dg-text-muted)' }}
+              >
+                使用数据源默认
+              </button>
+              {filtered.map((idx) => (
+                <button
+                  key={idx}
+                  type="button"
+                  onClick={() => { onChange(idx); setOpen(false); }}
+                  className="w-full text-left px-2 py-1.5 text-xs rounded hover:opacity-80 font-mono truncate"
+                  style={{
+                    color: value === idx ? 'var(--dg-blue)' : 'var(--dg-text-secondary)',
+                    background: value === idx ? 'var(--dg-bg-tertiary)' : 'transparent',
+                  }}
+                >
+                  {idx}
+                </button>
+              ))}
+              {!loading && filtered.length === 0 && (
+                <p className="text-xs px-2 py-3 text-center" style={{ color: 'var(--dg-text-muted)' }}>无匹配索引</p>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/components/monitor/log-center/LogCenter.tsx

@@ -7,6 +7,7 @@ import { LogQueryProvider } from './LogQueryContext';
 import { UnifiedQueryPanel } from './UnifiedQueryPanel';
 import { LogDatasourcePage } from './LogDatasourcePage';
 import { LogAlertsPanel } from './LogAlertsPanel';
+import LogRBAC from './LogRBAC';
 import type { LogEngine } from './types-v3';
 
 const SECTION_META: Record<string, { title: string; description: string; engine?: LogEngine }> = {
@@ -14,9 +15,10 @@ const SECTION_META: Record<string, { title: string; description: string; engine?
   es: { title: 'ES 查询', description: '对接自建 Elasticsearch · 索引日志检索', engine: 'elasticsearch' },
   datasources: { title: '日志库', description: '管理日志数据源连接（Loki / Elasticsearch）' },
   alerts: { title: '日志告警', description: '基于查询条件的日志告警策略' },
+  rbac: { title: '日志权限', description: '按 ES 索引 / Loki Label 正则限制查询范围' },
 };
 
-const VALID_TABS = ['loki', 'es', 'datasources', 'alerts'];
+const VALID_TABS = ['loki', 'es', 'datasources', 'alerts', 'rbac'];
 
 export default function LogCenter() {
   const { section } = useParams<{ section: string }>();
@@ -25,6 +27,8 @@ export default function LogCenter() {
 
   if (!tab) return <Navigate to="/log-center/loki" replace />;
 
+  if (tab === 'rbac') return <LogRBAC />;
+
   const meta = SECTION_META[tab];
 
   return (

frontend/src/components/monitor/log-center/LogFieldSidebar.tsx

@@ -32,7 +32,7 @@ export function LogFieldSidebar({
 }: LogFieldSidebarProps) {
   const [search, setSearch] = useState('');
   const [showDisplay, setShowDisplay] = useState(true);
-  const [showIndexed, setShowIndexed] = useState(false);
+  const [showIndexed, setShowIndexed] = useState((indexedFields?.length || 0) > 0);
 
   const filteredFields = useMemo(() => {
     if (!search) return fields;

frontend/src/components/monitor/log-center/LogNav.tsx

@@ -0,0 +1,37 @@
+import { NavLink } from 'react-router-dom';
+import { FileSearch, Database, HardDrive, AlertTriangle, Shield } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const NAV_ITEMS = [
+  { path: '/log-center/loki', label: 'Loki 查询', icon: FileSearch },
+  { path: '/log-center/es', label: 'ES 查询', icon: Database },
+  { path: '/log-center/datasources', label: '日志库', icon: HardDrive },
+  { path: '/log-center/alerts', label: '日志告警', icon: AlertTriangle },
+  { path: '/log-center/rbac', label: '日志权限', icon: Shield },
+];
+
+// 日志中心二级导航 // Logan.Li
+export function LogNav() {
+  return (
+    <nav className="flex items-center gap-1 p-1 rounded-lg bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] w-fit flex-wrap">
+      {NAV_ITEMS.map((item) => {
+        const Icon = item.icon;
+        return (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            className={({ isActive }) => cn(
+              'flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors',
+              isActive
+                ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] shadow-sm'
+                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)]',
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+            {item.label}
+          </NavLink>
+        );
+      })}
+    </nav>
+  );
+}

frontend/src/components/monitor/log-center/LogQueryToolbar.tsx

@@ -1,5 +1,5 @@
 // LogQueryToolbar.tsx — 查询工具栏（统计条 + 分页 + 操作）// Logan.Li
-import { ArrowUpDown, Bell, Download, Copy, ChevronLeft, ChevronRight } from 'lucide-react';
+import { ArrowUpDown, Bell, Download, Copy, ChevronLeft, ChevronRight, ChevronsDown } from 'lucide-react';
 import { useState } from 'react';
 
 interface Props {
@@ -17,6 +17,9 @@ interface Props {
   onCopy?: () => void;
   onBellClick?: () => void;
   hasAlertRule?: boolean;
+  hasMore?: boolean;
+  loadingMore?: boolean;
+  onLoadMore?: () => void;
 }
 
 const STATUS_LABEL: Record<string, { text: string; color: string }> = {
@@ -28,7 +31,7 @@ const STATUS_LABEL: Record<string, { text: string; color: string }> = {
 export function LogQueryToolbar({
   total, queryTime, status = 'precise', perPage, onPerPageChange,
   page, totalPages, onPageChange, sortDirection, onSortToggle,
-  onExport, onCopy, onBellClick, hasAlertRule,
+  onExport, onCopy, onBellClick, hasAlertRule, hasMore, loadingMore, onLoadMore,
 }: Props) {
   const [jumpPage, setJumpPage] = useState('');
   const st = STATUS_LABEL[status] || STATUS_LABEL.precise;
@@ -131,6 +134,18 @@ export function LogQueryToolbar({
         </div>
       </div>
 
+      {hasMore && onLoadMore && (
+        <button
+          onClick={onLoadMore}
+          disabled={loadingMore}
+          className="h-7 px-2.5 text-[11px] rounded border flex items-center gap-1 disabled:opacity-40"
+          style={{ borderColor: 'var(--dg-border)', color: 'var(--dg-blue)', background: 'var(--dg-bg-tertiary)' }}
+        >
+          <ChevronsDown className={`h-3.5 w-3.5 ${loadingMore ? 'animate-bounce' : ''}`} />
+          加载更多
+        </button>
+      )}
+
       {/* 右侧操作 */}
       <div className="flex items-center gap-1">
         <button

frontend/src/components/monitor/log-center/LogRBAC.tsx

@@ -0,0 +1,406 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Shield, Plus, Trash2, Loader2, Users, UserPlus, Check, X, ScrollText } from 'lucide-react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { toast } from 'sonner';
+import { userApi } from '@/api';
+import { logCenterApi } from '@/api/log/log-center';
+import { logRbacApi, type LogScopeRole, type UserLogScopeRole } from '@/api/log/log-rbac';
+import { useConfirm } from '@/components/ui/confirm-dialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { PageEmpty } from '@/components/layout/PageEmpty';
+
+import { LogRoleCreateDialog } from './log-rbac/LogRoleCreateDialog';
+import { matchSampleScopes, SAMPLE_SCOPES, scopeDisplayLabel } from './log-rbac/matchLogScope';
+import type { LogDataSource } from '@/api/log/log-center';
+import type { JsonData } from '@/types/common';
+
+const ROLE_LABEL: Record<string, string> = {
+  viewer: '查看者',
+  analyst: '分析者',
+};
+
+const ENGINE_LABEL: Record<string, string> = {
+  '*': '全部',
+  loki: 'Loki',
+  elasticsearch: 'ES',
+};
+
+const FIELD_LABEL: Record<string, string> = {
+  index: '索引',
+  app: 'app',
+  namespace: 'namespace',
+  job: 'job',
+};
+
+// 日志查询范围权限 — 正则匹配 ES 索引 / Loki Label // Logan.Li
+export default function LogRBAC() {
+  const [roles, setRoles] = useState<LogScopeRole[]>([]);
+  const [datasources, setDatasources] = useState<LogDataSource[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [activeTab, setActiveTab] = useState('roles');
+  const [previewRoleId, setPreviewRoleId] = useState<number | null>(null);
+  const [users, setUsers] = useState<JsonData[]>([]);
+  const [assignments, setAssignments] = useState<UserLogScopeRole[]>([]);
+  const [selectedUserId, setSelectedUserId] = useState('');
+  const [assignRoleId, setAssignRoleId] = useState('');
+  const [assignLoading, setAssignLoading] = useState(false);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newCode, setNewCode] = useState('');
+  const [newEngine, setNewEngine] = useState('*');
+  const [newMatchField, setNewMatchField] = useState('app');
+  const [newPattern, setNewPattern] = useState('');
+  const [newRole, setNewRole] = useState('viewer');
+  const [newDatasourceId, setNewDatasourceId] = useState('');
+  const [newDesc, setNewDesc] = useState('');
+  const [editing, setEditing] = useState<number | null>(null);
+  const [editPattern, setEditPattern] = useState('');
+  const [editRole, setEditRole] = useState('');
+
+  const _confirm = useConfirm();
+
+  const loadData = async () => {
+    setLoading(true);
+    try {
+      const [rolesRes, dsRes, usersRes] = await Promise.all([
+        logRbacApi.getRoles(),
+        logCenterApi.listDatasources(),
+        userApi.getUsers({ page_size: 500 }),
+      ]);
+      setRoles(Array.isArray(rolesRes) ? rolesRes : (rolesRes as JsonData)?.list || []);
+      setDatasources(Array.isArray(dsRes) ? dsRes : (dsRes as JsonData)?.list || []);
+      setUsers(Array.isArray(usersRes) ? usersRes : (usersRes as JsonData)?.list || []);
+    } catch { /* silent */ }
+    finally { setLoading(false); }
+  };
+
+  useEffect(() => { loadData(); }, []);
+
+  const loadAssignments = async () => {
+    if (!selectedUserId) { setAssignments([]); return; }
+    try {
+      const res = await logRbacApi.getUserRoles(Number(selectedUserId));
+      setAssignments(Array.isArray(res) ? res : (res as JsonData)?.list || []);
+    } catch { setAssignments([]); }
+  };
+
+  useEffect(() => { loadAssignments(); }, [selectedUserId]);
+
+  const matchCount = useMemo(() => {
+    const map: Record<number, typeof SAMPLE_SCOPES> = {};
+    roles.forEach((r) => {
+      map[r.id] = matchSampleScopes(r.pattern, r.match_field, r.engine);
+    });
+    return map;
+  }, [roles]);
+
+  const previewMatches = previewRoleId
+    ? (matchCount[previewRoleId] || [])
+    : SAMPLE_SCOPES;
+
+  const handleCreate = async () => {
+    if (!newName.trim() || !newCode.trim() || !newPattern.trim()) {
+      toast.error('请填写名称、标识与正则'); return;
+    }
+    setSaving(true);
+    try {
+      await logRbacApi.createRole({
+        name: newName.trim(),
+        code: newCode.trim(),
+        engine: newEngine,
+        match_field: newMatchField,
+        pattern: newPattern.trim(),
+        role: newRole,
+        description: newDesc,
+        ...(newDatasourceId ? { datasource_id: Number(newDatasourceId) } : {}),
+      });
+      toast.success('已创建');
+      setCreateOpen(false);
+      setNewName(''); setNewCode(''); setNewEngine('*'); setNewMatchField('app');
+      setNewPattern(''); setNewRole('viewer'); setNewDatasourceId(''); setNewDesc('');
+      loadData();
+    } catch (e: unknown) {
+      toast.error((e as Error)?.message || '创建失败');
+    } finally { setSaving(false); }
+  };
+
+  const handleUpdate = async (id: number) => {
+    if (!editPattern.trim()) { toast.error('正则不能为空'); return; }
+    setSaving(true);
+    try {
+      await logRbacApi.updateRole(id, { pattern: editPattern, role: editRole });
+      toast.success('已更新');
+      setEditing(null);
+      loadData();
+    } catch (e: unknown) {
+      toast.error((e as Error)?.message || '更新失败');
+    } finally { setSaving(false); }
+  };
+
+  const handleDelete = async (role: LogScopeRole) => {
+    const ok = await _confirm({
+      title: '删除权限',
+      description: `确定删除「${role.name}」？将影响 ${matchCount[role.id]?.length || 0} 个示例范围`,
+      variant: 'destructive',
+    });
+    if (!ok) return;
+    try { await logRbacApi.deleteRole(role.id); toast.success('已删除'); loadData(); }
+    catch { toast.error('删除失败'); }
+  };
+
+  const handleToggleStatus = async (role: LogScopeRole) => {
+    try {
+      await logRbacApi.updateRole(role.id, { status: role.status ? 0 : 1 });
+      toast.success(role.status ? '已禁用' : '已启用');
+      loadData();
+    } catch { toast.error('操作失败'); }
+  };
+
+  const handleAssign = async () => {
+    if (!selectedUserId || !assignRoleId) { toast.error('请选择用户和权限'); return; }
+    setAssignLoading(true);
+    try {
+      await logRbacApi.assignRole(Number(selectedUserId), {
+        log_scope_role_id: Number(assignRoleId),
+      });
+      toast.success('已分配');
+      setAssignRoleId('');
+      loadAssignments();
+    } catch (e: unknown) {
+      toast.error((e as Error)?.message || '分配失败');
+    } finally { setAssignLoading(false); }
+  };
+
+  const handleRevoke = async (id: number) => {
+    try {
+      await logRbacApi.removeRole(Number(selectedUserId), id);
+      toast.success('已撤销');
+      loadAssignments();
+    } catch { toast.error('撤销失败'); }
+  };
+
+  const selectedUser = users.find((u) => String(u.id) === selectedUserId);
+  const pageTabs = [
+    { id: 'roles', label: '权限策略', badge: roles.length || undefined },
+    { id: 'users', label: '用户授权' },
+    { id: 'preview', label: '命中预览' },
+  ];
+
+  return (
+    <PageShell
+      variant="list"
+      title="日志权限"
+      subtitle="按 ES 索引 / Loki Label 正则限制查询范围"
+      icon={<ScrollText className="h-5 w-5" />}
+      loading={loading}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      actions={(
+        <Button className="dg-btn-primary" onClick={() => setCreateOpen(true)}>
+          <Plus className="w-4 h-4 mr-1" />新建权限
+        </Button>
+      )}
+      contentClassName="space-y-4"
+    >
+      {activeTab === 'roles' && (
+        roles.length === 0 ? (
+          <PageEmpty
+            icon={<Shield className="h-10 w-10" />}
+            title="暂无日志权限策略"
+            description="创建策略并分配给用户后，将按正则限制可查询的索引与 Label 范围"
+            action={<Button onClick={() => setCreateOpen(true)}><Plus className="h-4 w-4 mr-1" />新建权限</Button>}
+          />
+        ) : (
+          <div className="space-y-2">
+            {roles.map((role) => (
+              <Card key={role.id} className={`dg-card ${role.status === 0 ? 'opacity-50' : ''}`}>
+                <CardContent className="p-3">
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="text-sm font-medium text-[var(--dg-text-primary)]">{role.name}</span>
+                        <Badge variant="outline" className="text-[10px] border-[var(--dg-border)]">
+                          {ROLE_LABEL[role.role] || role.role}
+                        </Badge>
+                        <Badge variant="outline" className="text-[10px] border-[var(--dg-border)]">
+                          {ENGINE_LABEL[role.engine] || role.engine}
+                        </Badge>
+                        <Badge variant="outline" className="text-[10px] border-[var(--dg-border)]">
+                          {FIELD_LABEL[role.match_field] || role.match_field}
+                        </Badge>
+                        {role.status === 0 && <Badge variant="outline" className="text-[10px]">已禁用</Badge>}
+                        <Badge
+                          variant="outline"
+                          className="text-[10px] cursor-pointer border-[var(--dg-border)]"
+                          onClick={() => { setActiveTab('preview'); setPreviewRoleId(role.id); }}
+                        >
+                          {matchCount[role.id]?.length || 0} 个范围
+                        </Badge>
+                      </div>
+                      <p className="text-xs text-[var(--dg-text-muted)] mt-1 font-mono truncate">
+                        {role.pattern}
+                        {role.description ? ` · ${role.description}` : ''}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-1 shrink-0">
+                      {editing === role.id ? (
+                        <>
+                          <Input value={editPattern} onChange={(e) => setEditPattern(e.target.value)} className="h-7 w-32 text-xs font-mono dg-input" />
+                          <Select value={editRole} onValueChange={setEditRole}>
+                            <SelectTrigger className="h-7 w-20 text-xs"><SelectValue /></SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="viewer">查看者</SelectItem>
+                              <SelectItem value="analyst">分析者</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => handleUpdate(role.id)}><Check className="w-3.5 h-3.5" /></Button>
+                          <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => setEditing(null)}><X className="w-3.5 h-3.5" /></Button>
+                        </>
+                      ) : (
+                        <>
+                          <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => { setEditing(role.id); setEditPattern(role.pattern); setEditRole(role.role); }}>编辑</Button>
+                          <Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => handleToggleStatus(role)}>{role.status ? '禁用' : '启用'}</Button>
+                          <Button variant="ghost" size="icon" className="h-7 w-7 text-[var(--dg-red)]" onClick={() => handleDelete(role)}><Trash2 className="w-3.5 h-3.5" /></Button>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )
+      )}
+
+      {activeTab === 'users' && (
+        <Card className="dg-card">
+          <CardContent className="p-4 space-y-4">
+            <p className="text-xs text-[var(--dg-text-muted)]">
+              用户未分配任何策略时不拦截（向后兼容）；分配后仅允许命中策略的查询。
+            </p>
+            <div className="flex flex-wrap gap-3 items-end">
+              <div className="space-y-1 flex-1 min-w-[200px]">
+                <Label className="text-xs">用户</Label>
+                <Select value={selectedUserId} onValueChange={setSelectedUserId}>
+                  <SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder="选择用户" /></SelectTrigger>
+                  <SelectContent className="max-h-60">
+                    {users.map((u) => (
+                      <SelectItem key={u.id as number} value={String(u.id)}>
+                        {(u.real_name as string) || (u.username as string)} ({u.username as string})
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1 w-48">
+                <Label className="text-xs">权限策略</Label>
+                <Select value={assignRoleId} onValueChange={setAssignRoleId}>
+                  <SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder="选择策略" /></SelectTrigger>
+                  <SelectContent>
+                    {roles.filter((r) => r.status === 1).map((r) => (
+                      <SelectItem key={r.id} value={String(r.id)}>{r.name} ({ROLE_LABEL[r.role]})</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <Button className="h-8" onClick={handleAssign} disabled={assignLoading || !selectedUserId || !assignRoleId}>
+                {assignLoading ? <Loader2 className="w-3.5 h-3.5 mr-1 animate-spin" /> : <UserPlus className="w-3.5 h-3.5 mr-1" />}
+                分配
+              </Button>
+            </div>
+            {selectedUser ? (
+              assignments.length === 0 ? (
+                <p className="text-xs text-[var(--dg-text-muted)]">该用户尚未分配日志权限</p>
+              ) : (
+                <div className="space-y-1.5">
+                  {assignments.map((a) => {
+                    const roleInfo = a.log_scope_role || roles.find((r) => r.id === a.log_scope_role_id);
+                    return (
+                      <div key={a.id} className="flex items-center justify-between py-2 px-2.5 rounded-md bg-[var(--dg-bg-tertiary)] text-xs">
+                        <div className="flex items-center gap-2 min-w-0">
+                          <Badge variant="outline" className="text-[10px] shrink-0">{ROLE_LABEL[roleInfo?.role || ''] || roleInfo?.role}</Badge>
+                          <span className="text-[var(--dg-text-primary)]">{roleInfo?.name}</span>
+                          <code className="text-[var(--dg-text-muted)] truncate">{roleInfo?.pattern}</code>
+                        </div>
+                        <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0" onClick={() => handleRevoke(a.id)}>
+                          <X className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    );
+                  })}
+                </div>
+              )
+            ) : (
+              <p className="text-xs text-[var(--dg-text-muted)] flex items-center gap-1"><Users className="w-3.5 h-3.5" />选择用户后查看已分配权限</p>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {activeTab === 'preview' && (
+        <Card className="dg-card">
+          <CardContent className="p-4 space-y-3">
+            <div className="flex flex-wrap gap-1.5">
+              <Button variant={previewRoleId === null ? 'secondary' : 'ghost'} size="sm" onClick={() => setPreviewRoleId(null)}>
+                全部 ({SAMPLE_SCOPES.length})
+              </Button>
+              {roles.map((r) => (
+                <Button
+                  key={r.id}
+                  variant={previewRoleId === r.id ? 'secondary' : 'ghost'}
+                  size="sm"
+                  className={r.status === 0 ? 'opacity-40' : ''}
+                  onClick={() => setPreviewRoleId(r.id)}
+                >
+                  {r.name} ({matchCount[r.id]?.length || 0})
+                </Button>
+              ))}
+            </div>
+            <div className="flex flex-wrap gap-1.5 max-h-48 overflow-y-auto">
+              {previewMatches.map((s) => (
+                <Badge key={s.label} variant="outline" className="text-xs font-mono border-[var(--dg-border)]">
+                  <Shield className="w-3 h-3 mr-0.5" />
+                  {scopeDisplayLabel(s)}
+                </Badge>
+              ))}
+              {previewRoleId !== null && previewMatches.length === 0 && (
+                <span className="text-xs text-[var(--dg-text-muted)]">无匹配 — 请调整正则</span>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <LogRoleCreateDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        datasources={datasources}
+        saving={saving}
+        name={newName}
+        code={newCode}
+        engine={newEngine}
+        matchField={newMatchField}
+        pattern={newPattern}
+        role={newRole}
+        datasourceId={newDatasourceId}
+        description={newDesc}
+        onNameChange={setNewName}
+        onCodeChange={setNewCode}
+        onEngineChange={setNewEngine}
+        onMatchFieldChange={setNewMatchField}
+        onPatternChange={setNewPattern}
+        onRoleChange={setNewRole}
+        onDatasourceIdChange={setNewDatasourceId}
+        onDescriptionChange={setNewDesc}
+        onSubmit={handleCreate}
+      />
+    </PageShell>
+  );
+}

frontend/src/components/monitor/log-center/LokiLabelBrowser.tsx

@@ -0,0 +1,119 @@
+import { useState, useEffect, useCallback } from 'react';
+import { ChevronDown, ChevronRight, Loader2, Tags } from 'lucide-react';
+import { logCenterApi } from '@/api/log/log-center';
+import { extractLokiSelector, mergeLokiSelector } from './query-builder';
+import type { TimeRange } from './types-v3';
+
+interface Props {
+  datasourceId?: number;
+  query: string;
+  timeRange: TimeRange;
+  onQueryChange: (q: string) => void;
+}
+
+// Loki Label 浏览器 — 标签名 → 标签值 → 注入 LogQL 选择器 // Logan.Li
+export function LokiLabelBrowser({ datasourceId, query, timeRange, onQueryChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const [labels, setLabels] = useState<string[]>([]);
+  const [activeLabel, setActiveLabel] = useState('');
+  const [values, setValues] = useState<string[]>([]);
+  const [loadingLabels, setLoadingLabels] = useState(false);
+  const [loadingValues, setLoadingValues] = useState(false);
+  const [selected, setSelected] = useState<Record<string, string>>({});
+
+  const timeParams = useCallback(() => ({
+    start: timeRange.start.replace(' ', 'T'),
+    end: timeRange.end.replace(' ', 'T'),
+  }), [timeRange]);
+
+  useEffect(() => {
+    if (!open || !datasourceId) return;
+    setLoadingLabels(true);
+    logCenterApi.listLokiLabels(datasourceId, timeParams())
+      .then((res) => setLabels(Array.isArray(res) ? res : []))
+      .catch(() => setLabels([]))
+      .finally(() => setLoadingLabels(false));
+  }, [open, datasourceId, timeParams]);
+
+  useEffect(() => {
+    if (!activeLabel || !datasourceId) {
+      setValues([]);
+      return;
+    }
+    setLoadingValues(true);
+    const selector = extractLokiSelector(query);
+    logCenterApi.listLokiLabelValues(datasourceId, activeLabel, {
+      ...timeParams(),
+      ...(selector ? { query: selector } : {}),
+    })
+      .then((res) => setValues(Array.isArray(res) ? res : []))
+      .catch(() => setValues([]))
+      .finally(() => setLoadingValues(false));
+  }, [activeLabel, datasourceId, query, timeParams]);
+
+  const applySelection = (label: string, value: string) => {
+    const next = { ...selected, [label]: value };
+    setSelected(next);
+    onQueryChange(mergeLokiSelector(query, next));
+  };
+
+  return (
+    <div className="rounded-lg border" style={{ borderColor: 'var(--dg-border)', background: 'var(--dg-bg-secondary)' }}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center gap-2 px-3 py-2 text-xs font-medium"
+        style={{ color: 'var(--dg-text-secondary)' }}
+      >
+        {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
+        <Tags className="h-3.5 w-3.5" style={{ color: '#06b6d4' }} />
+        Label 浏览器
+        {Object.keys(selected).length > 0 && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ background: 'var(--dg-bg-tertiary)', color: 'var(--dg-text-muted)' }}>
+            已选 {Object.keys(selected).length}
+          </span>
+        )}
+      </button>
+      {open && (
+        <div className="flex border-t min-h-[140px]" style={{ borderColor: 'var(--dg-border)' }}>
+          <div className="w-36 border-r overflow-y-auto max-h-48" style={{ borderColor: 'var(--dg-border)' }}>
+            {loadingLabels ? (
+              <div className="flex justify-center py-6"><Loader2 className="h-4 w-4 animate-spin text-[var(--dg-text-muted)]" /></div>
+            ) : labels.map((lb) => (
+              <button
+                key={lb}
+                type="button"
+                onClick={() => setActiveLabel(lb)}
+                className="w-full text-left px-2 py-1.5 text-[11px] font-mono truncate"
+                style={{
+                  color: activeLabel === lb ? '#06b6d4' : 'var(--dg-text-secondary)',
+                  background: activeLabel === lb ? 'var(--dg-bg-tertiary)' : 'transparent',
+                }}
+              >
+                {lb}
+              </button>
+            ))}
+          </div>
+          <div className="flex-1 overflow-y-auto max-h-48 p-1">
+            {!activeLabel && <p className="text-[11px] px-2 py-4 text-center" style={{ color: 'var(--dg-text-muted)' }}>选择左侧标签</p>}
+            {loadingValues && <div className="flex justify-center py-6"><Loader2 className="h-4 w-4 animate-spin" /></div>}
+            {!loadingValues && activeLabel && values.map((v) => (
+              <button
+                key={v}
+                type="button"
+                onClick={() => applySelection(activeLabel, v)}
+                className="w-full text-left px-2 py-1 text-[11px] font-mono truncate rounded hover:opacity-80"
+                style={{
+                  color: selected[activeLabel] === v ? '#22c55e' : 'var(--dg-text-primary)',
+                  background: selected[activeLabel] === v ? 'rgba(34,197,94,0.1)' : 'transparent',
+                }}
+              >
+                {v}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/monitor/log-center/QueryAutocompleteInput.tsx

@@ -0,0 +1,176 @@
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { highlightSyntax } from './query-syntax';
+import {
+  detectAutocompleteContext,
+  filterSuggestions,
+  applySuggestion,
+  type AutocompleteContext,
+} from './query-autocomplete';
+
+interface Props {
+  value: string;
+  onChange: (v: string) => void;
+  engine: 'loki' | 'elasticsearch';
+  placeholder?: string;
+  labelNames?: string[];
+  labelValues?: string[];
+  mappingFields?: string[];
+  onRequestLabelValues?: (label: string) => void;
+}
+
+// 语法高亮 + 自动补全查询输入框 // Logan.Li
+export function QueryAutocompleteInput({
+  value,
+  onChange,
+  engine,
+  placeholder,
+  labelNames = [],
+  labelValues = [],
+  mappingFields = [],
+  onRequestLabelValues,
+}: Props) {
+  const taRef = useRef<HTMLTextAreaElement>(null);
+  const preRef = useRef<HTMLPreElement>(null);
+  const [ctx, setCtx] = useState<AutocompleteContext | null>(null);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [open, setOpen] = useState(false);
+
+  const sync = useCallback(() => {
+    if (preRef.current && taRef.current) {
+      preRef.current.scrollLeft = taRef.current.scrollLeft;
+      preRef.current.scrollTop = taRef.current.scrollTop;
+    }
+  }, []);
+
+  const suggestions = useMemo(() => {
+    if (!ctx) return [];
+    return filterSuggestions(ctx, labelNames, labelValues, mappingFields);
+  }, [ctx, labelNames, labelValues, mappingFields]);
+
+  const updateContext = useCallback(() => {
+    const el = taRef.current;
+    if (!el) return;
+    const next = detectAutocompleteContext(value, el.selectionStart, engine);
+    setCtx(next);
+    setOpen(!!next);
+    setActiveIdx(0);
+    if (next?.kind === 'value' && next.labelName) {
+      onRequestLabelValues?.(next.labelName);
+    }
+  }, [value, engine, onRequestLabelValues]);
+
+  const pickSuggestion = useCallback((s: string) => {
+    if (!ctx) return;
+    const { text, cursor } = applySuggestion(value, ctx, s);
+    onChange(text);
+    setOpen(false);
+    setCtx(null);
+    requestAnimationFrame(() => {
+      const el = taRef.current;
+      if (el) {
+        el.focus();
+        el.selectionStart = el.selectionEnd = cursor;
+      }
+    });
+  }, [ctx, value, onChange]);
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (open && suggestions.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIdx((i) => Math.min(i + 1, suggestions.length - 1));
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIdx((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        pickSuggestion(suggestions[activeIdx]);
+        return;
+      }
+      if (e.key === 'Escape') {
+        setOpen(false);
+        return;
+      }
+    }
+    if (e.key === 'Tab' && !open) {
+      e.preventDefault();
+      const t = e.currentTarget;
+      const s = t.selectionStart;
+      const ed = t.selectionEnd;
+      onChange(value.slice(0, s) + '  ' + value.slice(ed));
+      requestAnimationFrame(() => { t.selectionStart = t.selectionEnd = s + 2; });
+    }
+    if (e.key === ' ' && e.ctrlKey) {
+      e.preventDefault();
+      updateContext();
+    }
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    updateContext();
+  }, [value, open, updateContext]);
+
+  const html = useMemo(() => highlightSyntax(value, engine), [value, engine]);
+
+  return (
+    <div className="relative flex-1 min-w-[120px]">
+      <div
+        className="relative"
+        style={{ height: '40px', background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', borderRadius: '0.25rem' }}
+      >
+        <textarea
+          ref={taRef}
+          value={value}
+          onChange={(e) => { onChange(e.target.value); updateContext(); }}
+          onScroll={sync}
+          onKeyDown={onKeyDown}
+          onClick={updateContext}
+          onFocus={updateContext}
+          spellCheck={false}
+          autoComplete="off"
+          rows={1}
+          className="absolute inset-0 w-full h-full font-mono text-xs rounded resize-none outline-none overflow-auto whitespace-pre-wrap break-all px-3 py-2.5"
+          style={{ background: 'transparent', color: 'transparent', caretColor: 'var(--dg-text-primary)', lineHeight: '20px', zIndex: 1 }}
+          placeholder={placeholder}
+        />
+        <pre
+          ref={preRef}
+          className="absolute inset-0 m-0 font-mono text-xs rounded pointer-events-none overflow-hidden whitespace-pre-wrap break-all px-3 py-2.5"
+          style={{ background: 'transparent', lineHeight: '20px', color: 'var(--dg-text-primary)', zIndex: 2 }}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+        {!value && (
+          <div className="absolute inset-0 flex items-center px-3 pointer-events-none" style={{ zIndex: 3 }}>
+            <span className="text-xs font-mono" style={{ color: 'var(--dg-text-muted)' }}>{placeholder}</span>
+          </div>
+        )}
+      </div>
+      {open && suggestions.length > 0 && (
+        <div
+          className="absolute left-0 right-0 top-full mt-1 z-50 max-h-40 overflow-y-auto rounded border shadow-lg"
+          style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}
+        >
+          {suggestions.map((s, i) => (
+            <button
+              key={`${s}-${i}`}
+              type="button"
+              onMouseDown={(e) => { e.preventDefault(); pickSuggestion(s); }}
+              className="w-full text-left px-3 py-1.5 text-xs font-mono truncate"
+              style={{
+                color: i === activeIdx ? 'var(--dg-blue)' : 'var(--dg-text-secondary)',
+                background: i === activeIdx ? 'var(--dg-bg-tertiary)' : 'transparent',
+              }}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/monitor/log-center/QuickQueryBar.tsx

@@ -0,0 +1,65 @@
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+
+const ALL_TEMPLATES: Record<'loki' | 'elasticsearch', { label: string; query: string }[]> = {
+  loki: [
+    { label: 'Nginx 错误', query: '{job="nginx"} |= "error"' },
+    { label: 'JSON 过滤', query: '{namespace="prod"} | json | level="warn"' },
+    { label: '超时搜索', query: '{app="api"} |= "timeout"' },
+    { label: '级别统计', query: 'sum by(level) (count_over_time({job="app"}[5m]))' },
+    { label: '正则多级别', query: '{container="frontend"} |~ "ERROR|WARN|FATAL"' },
+    { label: '慢请求>1s', query: '{job="api"} | json | response_time > 1000' },
+    { label: '错误率统计', query: 'sum by(level) (count_over_time({app="cex-admin-api"} |= "error" [5m]))' },
+    { label: '追踪ID查询', query: '{app="cex-admin-api"} |= "trace_id" | json' },
+    { label: '服务聚合', query: 'sum by(service_name) (count_over_time({namespace="astralx"}[5m]))' },
+    { label: '高延迟筛选', query: '{app="cex-admin-api"} | json | response_time > 500' },
+    { label: '异常堆栈', query: '{app="cex-admin-api"} |= "Exception"' },
+    { label: '日志趋势', query: 'sum(count_over_time({app="cex-admin-api"}[1h]))' },
+    { label: '正则提取', query: '{app="cex-admin-api"} | regexp "(?P<method>[A-Za-z0-9_]+) (?P<path>[^ ]+)"' },
+    { label: '格式输出', query: '{app="cex-admin-api"} | json | line_format "{{.level}} {{.message}}"' },
+  ],
+  elasticsearch: [
+    { label: 'API 5xx', query: 'status:500 AND path:"/api/*"' },
+    { label: '错误超时', query: '(level:error OR log.level:error) AND message:*timeout*' },
+    { label: '排除调试', query: 'host.name:server-* AND NOT level:debug' },
+    { label: '慢请求', query: 'response_time:>1000 AND method:POST' },
+    { label: '严重错误', query: '@timestamp:[now-1h TO now] AND (level:critical OR log.level:critical)' },
+    { label: '服务错误', query: 'service:nginx AND (level:(error OR fatal) OR log.level:(error OR fatal))' },
+    { label: '组合查询', query: 'app:cex-admin-api AND (level:(error OR warn) OR log.level:(error OR warn))' },
+    { label: '模糊匹配', query: 'message:*timeout* AND app:cex-admin-api' },
+    { label: '范围查询', query: 'response_time:[1000 TO *] AND method:POST' },
+    { label: '排除路径', query: 'app:cex-admin-api AND NOT path:/health' },
+    { label: '时间过滤', query: '@timestamp:[now-1h TO now] AND level:error' },
+    { label: 'IP段过滤', query: 'client_ip:172.36.* AND app:cex-admin-api' },
+    { label: '多级别筛选', query: 'app:cex-admin-api AND (level:(error OR warn OR info) OR log.level:(error OR warn OR info))' },
+    { label: '嵌套字段', query: 'labels.orgId:10001 AND app:cex-admin-api' },
+  ],
+};
+
+// 快捷查询模板条 // Logan.Li
+export function QuickQueryBar({ engine, onSelect }: { engine: 'loki' | 'elasticsearch'; onSelect: (q: string) => void }) {
+  const [open, setOpen] = useState(false);
+  const templates = ALL_TEMPLATES[engine];
+  const labels: Record<'loki' | 'elasticsearch', string> = { loki: 'LogQL', elasticsearch: 'Lucene' };
+  return (
+    <div>
+      <button onClick={() => setOpen(!open)} className="flex items-center gap-1 text-[11px] px-2 py-1 rounded transition-colors" style={{ color: 'var(--dg-blue)', background: open ? 'var(--dg-bg-tertiary)' : 'transparent' }}>
+        <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--dg-blue)' }} />
+        {labels[engine]} 快捷查询模板
+        <ChevronDown className="h-3 w-3" style={{ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)', transition: 'transform 0.2s' }} />
+      </button>
+      {open && (
+        <div className="mt-1.5 p-2.5 rounded-lg border" style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}>
+          <div className="grid grid-cols-3 lg:grid-cols-4 gap-1.5">
+            {templates.map((t) => (
+              <button key={t.label} onClick={() => { onSelect(t.query); setOpen(false); }} className="text-left px-2 py-1.5 rounded border text-[11px] transition-all hover:opacity-80" style={{ background: 'var(--dg-bg-tertiary)', borderColor: 'var(--dg-border)', color: 'var(--dg-text-secondary)' }} title={t.query}>
+                <span className="font-medium block truncate" style={{ color: 'var(--dg-text-primary)' }}>{t.label}</span>
+                <span className="block truncate opacity-60 font-mono mt-0.5 text-[10px]">{t.query}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/monitor/log-center/SaveQueryDialog.tsx

@@ -4,7 +4,7 @@ import { X, Save, BellRing, Loader2 } from 'lucide-react';
 import { alertApi } from '@/api';
 import { useToast } from '@/hooks/use-toast';
 import type { LogEngine, TimeRange } from './types-v3';
-import { ENGINE_META } from './types-v3';
+import { ENGINE_META, savedQueryStorage } from './types-v3';
 
 interface SaveQueryProps {
   open: boolean;
@@ -12,11 +12,12 @@ interface SaveQueryProps {
   engine: LogEngine;
   query: string;
   timeRange: TimeRange;
+  datasourceId?: number;
   datasourceName?: string;
   onSave?: (name: string) => void;
 }
 
-export function SaveQueryDialog({ open, onClose, engine, query, timeRange, datasourceName, onSave }: SaveQueryProps) {
+export function SaveQueryDialog({ open, onClose, engine, query, timeRange, datasourceId, datasourceName, onSave }: SaveQueryProps) {
   const [name, setName] = useState('');
   const [saving, setSaving] = useState(false);
   const [saved, setSaved] = useState(false);
@@ -24,9 +25,20 @@ export function SaveQueryDialog({ open, onClose, engine, query, timeRange, datas
   if (!open) return null;
 
   const handleSave = () => {
-    if (!name.trim()) return;
+    if (!name.trim() || !datasourceId) return;
     setSaving(true);
-    setTimeout(() => { setSaving(false); setSaved(true); onSave?.(name); setTimeout(() => { setSaved(false); onClose(); }, 800); }, 500);
+    savedQueryStorage.add({
+      name: name.trim(),
+      engine,
+      datasourceId,
+      query,
+      queryType: 'logs',
+      timeRangeLabel: timeRange.label,
+    });
+    setSaving(false);
+    setSaved(true);
+    onSave?.(name.trim());
+    setTimeout(() => { setSaved(false); setName(''); onClose(); }, 600);
   };
 
   return (

frontend/src/components/monitor/log-center/SavedQueriesPanel.tsx

@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react';
+import { X, Trash2, Play, Bookmark, Clock } from 'lucide-react';
+import type { SavedQuery } from './types-v3';
+import { savedQueryStorage } from './types-v3';
+import { ENGINE_META } from './types-v3';
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+  onSelect: (item: SavedQuery) => void;
+}
+
+// 已保存查询面板（localStorage）// Logan.Li
+export function SavedQueriesPanel({ visible, onClose, onSelect }: Props) {
+  const [items, setItems] = useState<SavedQuery[]>([]);
+
+  useEffect(() => {
+    if (visible) setItems(savedQueryStorage.getAll());
+  }, [visible]);
+
+  if (!visible) return null;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-40" style={{ background: 'rgba(0,0,0,0.3)' }} onClick={onClose} />
+      <div
+        className="fixed right-0 top-0 h-full z-50 border-l flex flex-col"
+        style={{ width: '380px', background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}
+      >
+        <div className="flex items-center justify-between px-4 py-3 border-b" style={{ borderColor: 'var(--dg-border)' }}>
+          <div className="flex items-center gap-2">
+            <Bookmark className="h-4 w-4" style={{ color: 'var(--dg-blue)' }} />
+            <span className="text-sm font-medium" style={{ color: 'var(--dg-text-primary)' }}>已保存查询</span>
+            <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ background: 'var(--dg-bg-tertiary)', color: 'var(--dg-text-muted)' }}>
+              {items.length}
+            </span>
+          </div>
+          <button onClick={onClose} className="h-7 w-7 flex items-center justify-center" style={{ color: 'var(--dg-text-muted)' }}>
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-3 space-y-2">
+          {items.length === 0 ? (
+            <p className="text-xs text-center py-8" style={{ color: 'var(--dg-text-muted)' }}>暂无保存的查询</p>
+          ) : items.map((item) => (
+            <div
+              key={item.id}
+              className="p-3 rounded-lg border group"
+              style={{ background: 'var(--dg-bg-tertiary)', borderColor: 'var(--dg-border)' }}
+            >
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <p className="text-sm font-medium truncate" style={{ color: 'var(--dg-text-primary)' }}>{item.name}</p>
+                  <p className="text-[10px] mt-0.5" style={{ color: ENGINE_META[item.engine]?.color || 'var(--dg-text-muted)' }}>
+                    {ENGINE_META[item.engine]?.name} · {item.timeRangeLabel}
+                  </p>
+                  <p className="text-[11px] font-mono mt-1 truncate" style={{ color: 'var(--dg-text-secondary)' }}>{item.query}</p>
+                  <p className="text-[10px] mt-1 flex items-center gap-1" style={{ color: 'var(--dg-text-muted)' }}>
+                    <Clock className="h-3 w-3" />
+                    {new Date(item.createdAt).toLocaleString()}
+                  </p>
+                </div>
+                <div className="flex flex-col gap-1 opacity-80 group-hover:opacity-100">
+                  <button
+                    onClick={() => { onSelect(item); onClose(); }}
+                    className="h-7 w-7 flex items-center justify-center rounded border"
+                    style={{ borderColor: 'var(--dg-border)', color: '#22c55e' }}
+                    title="应用"
+                  >
+                    <Play className="h-3.5 w-3.5" />
+                  </button>
+                  <button
+                    onClick={() => { savedQueryStorage.remove(item.id); setItems(savedQueryStorage.getAll()); }}
+                    className="h-7 w-7 flex items-center justify-center rounded border"
+                    style={{ borderColor: 'var(--dg-border)', color: 'var(--dg-text-muted)' }}
+                    title="删除"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/monitor/log-center/UnifiedQueryPanel.tsx

@@ -1,6 +1,7 @@
 // UnifiedQueryPanel.tsx — 统一查询面板（接入真实 API）// Logan.Li
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { Play, Loader2, Clock, Save, ChevronDown, Bell } from 'lucide-react';
+import { useSearchParams, useLocation } from 'react-router-dom';
+import { Play, Loader2, Clock, Save, ChevronDown, Bell, Link2, Bookmark, Radio } from 'lucide-react';
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { TimeRangePicker } from './TimeRangePicker';
 import { LogFieldSidebar } from './LogFieldSidebar';
@@ -10,9 +11,18 @@ import { StatChartPanel } from './StatChartPanel';
 import { LogClusterPanel } from './LogClusterPanel';
 import { SaveQueryDialog, SaveAlertDialog } from './SaveQueryDialog';
 import { QueryHistoryPanel } from './QueryHistoryPanel';
+import { SavedQueriesPanel } from './SavedQueriesPanel';
 import { LogAlertFromQueryDialog } from './LogAlertFromQueryDialog';
-import { logCenterApi, type LogDataSource } from '@/api';
-import type { LogEngine, TimeRange, ResultTab, ViewMode, LogEntry, StatTable, LogCluster, QueryHistoryItem } from './types-v3';
+import { QueryAutocompleteInput } from './QueryAutocompleteInput';
+import { QuickQueryBar } from './QuickQueryBar';
+import { parseLogQueryUrl, buildLogQueryParams, buildShareUrl } from './query-url-state';
+import { logCenterApi, type LogDataSource, type LogQueryEntry } from '@/api';
+import { copyToClipboard } from '@/utils/clipboard';
+import { buildLogCopyText, formatHistogramCount, formatHistogramTick, formatLogTimestamp } from './log-format';
+import { EsIndexPicker } from './EsIndexPicker';
+import { LokiLabelBrowser } from './LokiLabelBrowser';
+import { applyESFieldFilter, applyLokiLabelFilter, extractLokiSelector } from './query-builder';
+import type { LogEngine, TimeRange, ResultTab, ViewMode, LogEntry, LogField, StatTable, LogCluster, QueryHistoryItem, SavedQuery } from './types-v3';
 import { ENGINE_META, buildStatTableFromEntries, buildClustersFromEntries, extractFields, generateHistogramData, historyStorage } from './types-v3';
 import { useToast } from '@/hooks/use-toast';
 
@@ -37,104 +47,14 @@ const ENGINE_BADGE: Record<'loki' | 'elasticsearch', { label: string; dotColor:
   elasticsearch: { label: 'Lucene', dotColor: '#22c55e' },
 };
 
-// 增强快捷查询模板（14+ 条/引擎） // Logan.Li
-const ALL_TEMPLATES: Record<'loki' | 'elasticsearch', { label: string; query: string }[]> = {
-  loki: [
-    { label: 'Nginx 错误', query: '{job="nginx"} |= "error"' },
-    { label: 'JSON 过滤', query: '{namespace="prod"} | json | level="warn"' },
-    { label: '超时搜索', query: '{app="api"} |= "timeout"' },
-    { label: '级别统计', query: 'sum by(level) (count_over_time({job="app"}[5m]))' },
-    { label: '正则多级别', query: '{container="frontend"} |~ "ERROR|WARN|FATAL"' },
-    { label: '慢请求>1s', query: '{job="api"} | json | response_time > 1000' },
-    { label: '错误率统计', query: 'sum by(level) (count_over_time({app="cex-admin-api"} |= "error" [5m]))' },
-    { label: '追踪ID查询', query: '{app="cex-admin-api"} |= "trace_id" | json' },
-    { label: '服务聚合', query: 'sum by(service_name) (count_over_time({namespace="astralx"}[5m]))' },
-    { label: '高延迟筛选', query: '{app="cex-admin-api"} | json | response_time > 500' },
-    { label: '异常堆栈', query: '{app="cex-admin-api"} |= "Exception"' },
-    { label: '日志趋势', query: 'sum(count_over_time({app="cex-admin-api"}[1h]))' },
-    { label: '正则提取', query: '{app="cex-admin-api"} | regexp "(?P<method>[A-Za-z0-9_]+) (?P<path>[^ ]+)"' }, // LogQL regexp 用 RE2，不支持 \w \S 等 Perl 简写，须用显式字符类，否则 Loki 返回 400 invalid char escape // Logan.Li
-    { label: '格式输出', query: '{app="cex-admin-api"} | json | line_format "{{.level}} {{.message}}"' },
-  ],
-  elasticsearch: [
-    { label: 'API 5xx', query: 'status:500 AND path:"/api/*"' },
-    { label: '错误超时', query: 'level:error AND message:*timeout*' },
-    { label: '排除调试', query: 'host.name:server-* AND NOT level:debug' },
-    { label: '慢请求', query: 'response_time:>1000 AND method:POST' },
-    { label: '严重错误', query: '@timestamp:[now-1h TO now] AND level:critical' },
-    { label: '服务错误', query: 'service:nginx AND (level:error OR level:fatal)' },
-    { label: '组合查询', query: 'app:cex-admin-api AND (level:error OR level:warn)' },
-    { label: '模糊匹配', query: 'message:*timeout* AND app:cex-admin-api' },
-    { label: '范围查询', query: 'response_time:[1000 TO *] AND method:POST' },
-    { label: '排除路径', query: 'app:cex-admin-api AND NOT path:/health' },
-    { label: '时间过滤', query: '@timestamp:[now-1h TO now] AND level:error' },
-    { label: 'IP段过滤', query: 'client_ip:172.36.* AND app:cex-admin-api' },
-    { label: '聚合统计', query: 'app:cex-admin-api | STATS count(*) by level' },
-    { label: '嵌套字段', query: 'labels.orgId:10001 AND app:cex-admin-api' },
-  ],
-};
-
-// LogQL / Lucene 语法高亮 → HTML // Logan.Li
-function highlightSyntax(query: string, engine: 'loki' | 'elasticsearch'): string {
-  if (!query) return '<span style="color:transparent">.</span>';
-  // 先转义 HTML 特殊字符，避免查询语句中的 < > & 破坏标签结构 // Logan.Li
-  const esc = query.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-  const span = (color: string, text: string) => `<span style="color:${color}">${text}</span>`;
-  if (engine === 'loki') {
-    // 单正则 + 回调：一次匹配，避免链式 replace 对已生成颜色值的二次匹配 // Logan.Li
-    return esc.replace(
-      /("(?:[^"\\]|\\.)*")|([a-zA-Z_][\w-]*)(?==)|(\|json|\|regexp|\|line_format|\|unwrap|\|pattern|\|label_format)|\b(count_over_time|sum|rate|avg|max|min|count|by|over)\b|([{}])|(\|=|\!=|=~|!~|=)/g,
-      (m, str, ident, pipe, fn, brace, op) => {
-        if (str) return span('#22c55e', str);
-        if (ident) return span('#f59e0b', ident);
-        if (pipe) return span('#8b5cf6', pipe);
-        if (fn) return span('#06b6d4', fn);
-        if (brace) return span('#f59e0b', brace);
-        if (op) return span('#f43f5e', op);
-        return m;
-      },
-    ) + '<span style="color:transparent">.</span>';
-  }
-  return esc.replace(
-    /("(?:[^"\\]|\\.)*")|\b(AND|OR|NOT)\b|([a-zA-Z_@][\w.-]*)(?=:)|([*?~^[\]()])/g,
-    (m, str, kw, field, punct) => {
-      if (str) return span('#22c55e', str);
-      if (kw) return span('#f43f5e', kw);
-      if (field) return span('#f59e0b', field);
-      if (punct) return span('#8b5cf6', punct);
-      return m;
-    },
-  ) + '<span style="color:transparent">.</span>';
-}
-
-// 语法高亮输入框：底层高亮 + 上层透明输入 // Logan.Li
-function SyntaxHighlightInput({ value, onChange, engine, placeholder }: {
-  value: string; onChange: (v: string) => void; engine: 'loki' | 'elasticsearch'; placeholder?: string;
-}) {
-  const taRef = useRef<HTMLTextAreaElement>(null);
-  const preRef = useRef<HTMLPreElement>(null);
-  const sync = useCallback(() => {
-    if (preRef.current && taRef.current) { preRef.current.scrollLeft = taRef.current.scrollLeft; preRef.current.scrollTop = taRef.current.scrollTop; }
-  }, []);
-  const onKey = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Tab') { e.preventDefault(); const t = e.currentTarget, s = t.selectionStart, ed = t.selectionEnd; onChange(value.slice(0, s) + '  ' + value.slice(ed)); requestAnimationFrame(() => { t.selectionStart = t.selectionEnd = s + 2; }); }
-  };
-  const html = useMemo(() => highlightSyntax(value, engine), [value, engine]);
-  return (
-    <div className="relative flex-1 min-w-[120px]" style={{ height: '40px', background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', borderRadius: '0.25rem' }}>
-      <textarea ref={taRef} value={value} onChange={e => onChange(e.target.value)} onScroll={sync} onKeyDown={onKey} spellCheck={false} autoComplete="off" rows={1}
-        className="absolute inset-0 w-full h-full font-mono text-xs rounded resize-none outline-none overflow-auto whitespace-pre-wrap break-all px-3 py-2.5"
-        style={{ background: 'transparent', color: 'transparent', caretColor: 'var(--dg-text-primary)', lineHeight: '20px', zIndex: 1 }}
-        placeholder={placeholder} />
-      <pre ref={preRef} className="absolute inset-0 m-0 font-mono text-xs rounded pointer-events-none overflow-hidden whitespace-pre-wrap break-all px-3 py-2.5" style={{ background: 'transparent', lineHeight: '20px', color: 'var(--dg-text-primary)', zIndex: 2 }} dangerouslySetInnerHTML={{ __html: html }} />
-      {!value && <div className="absolute inset-0 flex items-center px-3 pointer-events-none" style={{ zIndex: 3 }}><span className="text-xs font-mono" style={{ color: 'var(--dg-text-muted)' }}>{placeholder}</span></div>}
-    </div>
-  );
-}
-
 interface Props { engine: LogEngine; onRuleCreated: () => void; }
 
 export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
   const { toast } = useToast();
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const urlBootstrapped = useRef(false);
+  const autoRunDone = useRef(false);
   const effEngine: 'loki' | 'elasticsearch' = engine === 'sls' ? 'loki' : engine;
   const meta = ENGINE_META[effEngine];
   const badge = ENGINE_BADGE[effEngine];
@@ -164,8 +84,8 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
   const [queryTime, setQueryTime] = useState(0);
   const [resultTab, setResultTab] = useState<ResultTab>('logs');
   const [viewMode, setViewMode] = useState<ViewMode>('raw');
-  const [wrapLines, setWrapLines] = useState(false);
-  const [truncate, setTruncate] = useState(true);
+  const [wrapLines, setWrapLines] = useState(true);
+  const [truncate, setTruncate] = useState(false);
   const [selectedFields, setSelectedFields] = useState<string[]>([]);
   const [page, setPage] = useState(1);
   const [perPage, setPerPage] = useState(20);
@@ -176,17 +96,74 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
   const [alertDialogOpen, setAlertDialogOpen] = useState(false);
   const [saveMenuOpen, setSaveMenuOpen] = useState(false);
   const [hasQueried, setHasQueried] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [nextCursor, setNextCursor] = useState('');
+  const [searchAfter, setSearchAfter] = useState<unknown[] | undefined>();
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [liveTail, setLiveTail] = useState(false);
+  const [savedPanelOpen, setSavedPanelOpen] = useState(false);
+  const [labelNames, setLabelNames] = useState<string[]>([]);
+  const [labelValues, setLabelValues] = useState<string[]>([]);
+  const [indexedFields, setIndexedFields] = useState<LogField[]>([]);
 
-  // 数据源加载后选中默认或首个（无源时保持空），并同步 ES 默认索引 // Logan.Li
+  const timeIsoParams = useCallback(() => ({
+    start: timeRange.start.replace(' ', 'T'),
+    end: timeRange.end.replace(' ', 'T'),
+  }), [timeRange]);
+
+  const currentSource = sources.find((s) => String(s.id) === dsId);
+
+  // 数据源加载后选中默认或首个；首次从 URL 恢复查询状态 // Logan.Li
   useEffect(() => {
-    if (sources.length > 0) {
-      const def = sources.find(s => s.is_default) || sources[0];
+    if (sources.length === 0) return;
+    if (!urlBootstrapped.current) {
+      const parsed = parseLogQueryUrl(searchParams);
+      const def = sources.find((s) => String(s.id) === parsed.datasourceId)
+        || sources.find((s) => s.is_default) || sources[0];
       setDsId(String(def.id));
-      setEsIndex(def.default_index || '');
+      setEsIndex(parsed.index || def.default_index || '');
+      if (parsed.query) setQuery(parsed.query);
+      if (parsed.timeRange) setTimeRange(parsed.timeRange);
+      urlBootstrapped.current = true;
+      return;
     }
-  }, [sources]);
+    const def = sources.find((s) => String(s.id) === dsId) || sources.find((s) => s.is_default) || sources[0];
+    if (!dsId && def) setDsId(String(def.id));
+  }, [sources, searchParams, dsId]);
 
-  const currentSource = sources.find(s => String(s.id) === dsId);
+  // 查询状态同步到 URL（可分享）// Logan.Li
+  useEffect(() => {
+    if (!urlBootstrapped.current) return;
+    const p = buildLogQueryParams({
+      query,
+      datasourceId: dsId || undefined,
+      index: esIndex || undefined,
+      timeRange,
+    });
+    setSearchParams(p, { replace: true });
+  }, [query, dsId, esIndex, timeRange, setSearchParams]);
+
+  // Loki 标签名（自动补全）// Logan.Li
+  useEffect(() => {
+    if (effEngine !== 'loki' || !currentSource?.id) return;
+    logCenterApi.listLokiLabels(currentSource.id, timeIsoParams())
+      .then((res) => setLabelNames(Array.isArray(res) ? res : []))
+      .catch(() => setLabelNames([]));
+  }, [effEngine, currentSource?.id, timeIsoParams]);
+
+  // ES mapping 索引字段（Kibana 风格侧栏）// Logan.Li
+  useEffect(() => {
+    if (effEngine !== 'elasticsearch' || !currentSource?.id) return;
+    logCenterApi.esMapping({ datasource_id: currentSource.id, index: esIndex || undefined })
+      .then((res) => {
+        const list = Array.isArray(res) ? res : [];
+        setIndexedFields(list.map((f) => ({
+          name: f.name,
+          type: (['keyword', 'long', 'date', 'boolean', 'ip'].includes(f.type) ? f.type : 'text') as LogField['type'],
+        })));
+      })
+      .catch(() => setIndexedFields([]));
+  }, [effEngine, currentSource?.id, esIndex]);
 
   const fields = useMemo(() => extractFields(entries), [entries]);
   const commonLabels = useMemo(() => extractCommonLabels(entries), [entries]);
@@ -194,55 +171,92 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
   const totalPages = Math.max(1, Math.ceil(sortedEntries.length / perPage));
   const pagedEntries = useMemo(() => { const s = (page - 1) * perPage; return sortedEntries.slice(s, s + perPage); }, [sortedEntries, page, perPage]);
 
+  const mapRawEntries = useCallback((rawEntries: LogQueryEntry[]): LogEntry[] => rawEntries.map((e) => {
+    const raw = String(e.raw || e.message || '');
+    let level = String(e.level || e.labels?.detected_level || e.labels?.level || '');
+    if (!level && effEngine === 'elasticsearch' && raw) {
+      try {
+        const parsed = JSON.parse(raw) as Record<string, unknown>;
+        level = String(parsed.level || parsed['log.level'] || (parsed.log as Record<string, unknown>)?.level || '');
+      } catch { /* 非 JSON */ }
+    }
+    if (!level) {
+      const levelMatch = raw.match(/\s(INFO|WARN|WARNING|ERROR|DEBUG|TRACE|FATAL)\s/i);
+      if (levelMatch) level = levelMatch[1].toLowerCase();
+    }
+    const labels = e.labels || {};
+    return {
+      timestamp: formatLogTimestamp(e.timestamp || ''),
+      level,
+      message: String(e.message || raw),
+      labels,
+      raw,
+      source: labels.app || labels.service_name || '',
+    };
+  }), [effEngine]);
+
+  const fetchHistogram = useCallback(async (dsIdNum: number, startISO: string, endISO: string) => {
+    try {
+      if (effEngine === 'loki') {
+        const res = await logCenterApi.lokiHistogram({ datasource_id: dsIdNum, query, start: startISO, end: endISO });
+        const buckets = res?.buckets || [];
+        if (buckets.length > 0) {
+          setHistogramData(buckets.map((b) => ({
+            timestamp: formatLogTimestamp(b.timestamp),
+            count: b.count,
+          })));
+          return;
+        }
+      } else {
+        const res = await logCenterApi.esHistogram({
+          datasource_id: dsIdNum, query, index: esIndex || undefined, start: startISO, end: endISO,
+        });
+        const buckets = res?.buckets || [];
+        if (buckets.length > 0) {
+          setHistogramData(buckets.map((b) => ({
+            timestamp: formatLogTimestamp(b.timestamp),
+            count: b.count,
+          })));
+          return;
+        }
+      }
+    } catch { /* 直方图失败时回退客户端聚合 */ }
+  }, [effEngine, query, esIndex]);
+
   // 执行查询 — 接入真实 API（无 mock）// Logan.Li
   const handleRun = useCallback(async () => {
     // 空查询兜底：后端 Query 字段 required，空值会 400，这里提前拦截 // Logan.Li
     if (!currentSource || !query.trim()) return;
     const dsIdNum = currentSource.id;
     setLoading(true);
+    setHasMore(false);
+    setNextCursor('');
+    setSearchAfter(undefined);
     const t0 = performance.now();
 
     try {
       const startISO = (timeRange.start + (timeRange.start.includes('T') ? '' : '.000Z')).replace(' ', 'T');
       const endISO = (timeRange.end + (timeRange.end.includes('T') ? '' : '.000Z')).replace(' ', 'T');
-      let result: any;
 
-      if (effEngine === 'loki') {
-        result = await logCenterApi.queryLoki({
-          datasource_id: dsIdNum,
-          query,
-          limit: queryLimit,
-          start: startISO,
-          end: endISO,
-          direction: 'backward',
+      const data = effEngine === 'loki'
+        ? await logCenterApi.queryLoki({
+          datasource_id: dsIdNum, query, limit: queryLimit, start: startISO, end: endISO, direction: 'backward',
+        })
+        : await logCenterApi.queryElasticsearch({
+          datasource_id: dsIdNum, index: esIndex || undefined, query, size: queryLimit, start: startISO, end: endISO,
         });
-      } else {
-        result = await logCenterApi.queryElasticsearch({
-          datasource_id: dsIdNum,
-          index: esIndex || undefined,
-          query,
-          size: queryLimit,
-          start: startISO,
-          end: endISO,
-        });
-      }
 
-      const data = (result as any)?.data || result;
-      const rawEntries: any[] = data?.entries || [];
-      const mapped: LogEntry[] = rawEntries.map((e: any) => ({
-        timestamp: e.timestamp || '',
-        level: e.level || '',
-        message: e.message || '',
-        labels: e.labels || {},
-        raw: e.raw || e.message || '',
-        source: e.labels?.app || e.labels?.service_name || '',
-      }));
+      const rawEntries = data?.entries || [];
+      const mapped = mapRawEntries(rawEntries);
 
       setEntries(mapped);
+      void fetchHistogram(dsIdNum, startISO, endISO);
       setHistogramData(generateHistogramData(mapped));
-      setTotalCount(data?.total || mapped.length);
+      setTotalCount(data?.total ?? mapped.length);
+      setHasMore(!!data?.has_more);
+      setNextCursor(data?.next_cursor || '');
+      setSearchAfter(data?.search_after);
       setQueryTime(Math.round(performance.now() - t0));
-      // 统计图表 / 聚类基于真实返回条目聚合（无 mock）// Logan.Li
       setStatTable(buildStatTableFromEntries(mapped));
       setClusters(buildClustersFromEntries(mapped));
       setPage(1);
@@ -259,7 +273,139 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
     } finally {
       setLoading(false);
     }
-  }, [effEngine, query, currentSource, timeRange, toast, queryLimit, esIndex]);
+  }, [effEngine, query, currentSource, timeRange, toast, queryLimit, esIndex, mapRawEntries, fetchHistogram]);
+
+  const handleLoadMore = useCallback(async () => {
+    if (!currentSource || !hasMore || loadingMore) return;
+    setLoadingMore(true);
+    try {
+      const startISO = (timeRange.start + (timeRange.start.includes('T') ? '' : '.000Z')).replace(' ', 'T');
+      const endISO = (timeRange.end + (timeRange.end.includes('T') ? '' : '.000Z')).replace(' ', 'T');
+      const dsIdNum = currentSource.id;
+      const data = effEngine === 'loki'
+        ? await logCenterApi.queryLoki({
+          datasource_id: dsIdNum, query, limit: queryLimit, start: startISO, end: endISO,
+          direction: 'backward', cursor: nextCursor,
+        })
+        : await logCenterApi.queryElasticsearch({
+          datasource_id: dsIdNum, index: esIndex || undefined, query, size: queryLimit,
+          start: startISO, end: endISO, search_after: searchAfter,
+        });
+      const more = mapRawEntries(data?.entries || []);
+      setEntries((prev) => {
+        const merged = [...prev, ...more];
+        setStatTable(buildStatTableFromEntries(merged));
+        setClusters(buildClustersFromEntries(merged));
+        return merged;
+      });
+      setHasMore(!!data?.has_more);
+      setNextCursor(data?.next_cursor || '');
+      setSearchAfter(data?.search_after);
+    } catch (e: unknown) {
+      toast({ title: '加载更多失败', description: (e as Error)?.message, variant: 'destructive' });
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [currentSource, hasMore, loadingMore, effEngine, query, queryLimit, timeRange, esIndex, nextCursor, searchAfter, mapRawEntries, toast]);
+
+  const handleLabelFilter = useCallback((key: string, value: string, op: 'include' | 'exclude') => {
+    if (effEngine === 'loki') {
+      setQuery((q) => applyLokiLabelFilter(q, key, value, op));
+    } else {
+      setQuery((q) => applyESFieldFilter(q, key, value, op));
+    }
+  }, [effEngine]);
+
+  const handleRequestLabelValues = useCallback((label: string) => {
+    if (!currentSource?.id) return;
+    const selector = extractLokiSelector(query);
+    logCenterApi.listLokiLabelValues(currentSource.id, label, {
+      ...timeIsoParams(),
+      ...(selector ? { query: selector } : {}),
+    })
+      .then((res) => setLabelValues(Array.isArray(res) ? res : []))
+      .catch(() => setLabelValues([]));
+  }, [currentSource?.id, timeIsoParams, query]);
+
+  const handleFieldClick = useCallback((field: string) => {
+    if (effEngine === 'elasticsearch') {
+      setQuery((q) => applyESFieldFilter(q, field, '*', 'include'));
+    } else {
+      setQuery((q) => `${q} ${field}=""`.trim());
+    }
+  }, [effEngine]);
+
+  const handleShareLink = useCallback(async () => {
+    const url = buildShareUrl(location.pathname, {
+      query, datasourceId: dsId, index: esIndex || undefined, timeRange,
+    }, true);
+    const full = `${window.location.origin}${url}`;
+    const ok = await copyToClipboard(full);
+    toast({
+      title: ok ? '分享链接已复制' : '复制失败',
+      description: ok ? '收件人打开链接将自动执行查询' : undefined,
+      variant: ok ? 'default' : 'destructive',
+    });
+  }, [location.pathname, query, dsId, esIndex, timeRange, toast]);
+
+  const runLiveTailTick = useCallback(async () => {
+    if (!currentSource || !query.trim()) return;
+    const now = new Date();
+    const start = new Date(now.getTime() - 5 * 60000);
+    const tr: TimeRange = {
+      start: start.toISOString().replace('T', ' ').substring(0, 19),
+      end: now.toISOString().replace('T', ' ').substring(0, 19),
+      label: 'Live',
+      type: 'relative',
+    };
+    setTimeRange(tr);
+    const startISO = tr.start.replace(' ', 'T');
+    const endISO = tr.end.replace(' ', 'T');
+    try {
+      const data = effEngine === 'loki'
+        ? await logCenterApi.queryLoki({
+          datasource_id: currentSource.id, query, limit: 200, start: startISO, end: endISO, direction: 'backward',
+        })
+        : await logCenterApi.queryElasticsearch({
+          datasource_id: currentSource.id, index: esIndex || undefined, query, size: 200, start: startISO, end: endISO,
+        });
+      const mapped = mapRawEntries(data?.entries || []);
+      setEntries((prev) => {
+        const keys = new Set(prev.map((e) => `${e.timestamp}|${e.message}`));
+        const fresh = mapped.filter((e) => !keys.has(`${e.timestamp}|${e.message}`));
+        if (fresh.length === 0) return prev;
+        const merged = [...fresh, ...prev].slice(0, 2000);
+        setStatTable(buildStatTableFromEntries(merged));
+        setClusters(buildClustersFromEntries(merged));
+        setTotalCount(merged.length);
+        setHasQueried(true);
+        return merged;
+      });
+    } catch { /* Live tail 静默失败 */ }
+  }, [currentSource, query, effEngine, esIndex, mapRawEntries]);
+
+  useEffect(() => {
+    if (!liveTail) return undefined;
+    void runLiveTailTick();
+    const id = setInterval(() => { void runLiveTailTick(); }, 3000);
+    return () => clearInterval(id);
+  }, [liveTail, runLiveTailTick]);
+
+  const handleRunRef = useRef(handleRun);
+  handleRunRef.current = handleRun;
+  useEffect(() => {
+    if (!urlBootstrapped.current || autoRunDone.current) return;
+    if (searchParams.get('run') !== '1' || !currentSource || !query.trim()) return;
+    autoRunDone.current = true;
+    void handleRunRef.current();
+  }, [currentSource, query, searchParams]);
+
+  const handleSavedQuerySelect = useCallback((item: SavedQuery) => {
+    setQuery(item.query);
+    if (String(item.datasourceId) !== dsId) setDsId(String(item.datasourceId));
+  }, [dsId]);
+
+  const mappingFieldNames = useMemo(() => indexedFields.map((f) => f.name), [indexedFields]);
 
   const toggleField = useCallback((n: string) => setSelectedFields(p => p.includes(n) ? p.filter(f => f !== n) : [...p, n]), []);
   const handleSaveMenu = (a: 'query' | 'alert') => { setSaveMenuOpen(false); a === 'query' ? setSaveQueryOpen(true) : setSaveAlertOpen(true); };
@@ -272,6 +418,30 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
     setTimeRange(p => ({ ...p, start: histogramData[sIdx].timestamp, end: histogramData[eIdx].timestamp, label: '自定义', type: 'absolute' as const }));
   }, [histogramData]);
 
+  const formatEntryLine = useCallback((e: LogEntry) => buildLogCopyText(e), []);
+
+  const handleExportLogs = useCallback(() => {
+    const t = sortedEntries.map(formatEntryLine).join('\n');
+    const b = new Blob([t], { type: 'text/plain;charset=utf-8' });
+    const u = URL.createObjectURL(b);
+    const a = document.createElement('a');
+    a.href = u;
+    a.download = `${effEngine}-logs-${Date.now()}.txt`;
+    a.click();
+    URL.revokeObjectURL(u);
+    toast({ title: '已导出', description: `${sortedEntries.length} 条日志` });
+  }, [sortedEntries, effEngine, formatEntryLine, toast]);
+
+  const handleCopyLogs = useCallback(async () => {
+    const text = pagedEntries.map(formatEntryLine).join('\n');
+    const ok = await copyToClipboard(text);
+    if (ok) {
+      toast({ title: '已复制', description: `当前页 ${pagedEntries.length} 条完整日志` });
+    } else {
+      toast({ title: '复制失败', description: '请使用导出或展开单条复制', variant: 'destructive' });
+    }
+  }, [pagedEntries, formatEntryLine, toast]);
+
   return (
     <div className="space-y-3">
       {/* ===== 查询控制行 ===== */}
@@ -281,10 +451,32 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
             <span className="w-2 h-2 rounded-full" style={{ background: badge.dotColor }} />
             <span className="text-[11px] font-semibold" style={{ color: badge.dotColor }}>{badge.label}</span>
           </div>
-          <SyntaxHighlightInput value={query} onChange={setQuery} engine={effEngine} placeholder={meta.queryPlaceholder} />
-          <button onClick={handleRun} disabled={loading || !currentSource || !query.trim()} className="h-10 px-4 rounded text-xs font-medium text-white flex items-center gap-1.5 flex-shrink-0 transition-opacity hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed" style={{ background: '#22c55e' }}>
+          <QueryAutocompleteInput
+            value={query}
+            onChange={setQuery}
+            engine={effEngine}
+            placeholder={meta.queryPlaceholder}
+            labelNames={labelNames}
+            labelValues={labelValues}
+            mappingFields={mappingFieldNames}
+            onRequestLabelValues={handleRequestLabelValues}
+          />
+          <button onClick={() => { setLiveTail(false); void handleRun(); }} disabled={loading || liveTail || !currentSource || !query.trim()} className="h-10 px-4 rounded text-xs font-medium text-white flex items-center gap-1.5 flex-shrink-0 transition-opacity hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed" style={{ background: '#22c55e' }}>
             {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Play className="h-4 w-4" />} 查询
           </button>
+          <button
+            onClick={() => setLiveTail((v) => !v)}
+            disabled={!currentSource || !query.trim()}
+            className="h-10 px-3 rounded text-xs flex items-center gap-1 flex-shrink-0"
+            style={{
+              border: `1px solid ${liveTail ? '#ef4444' : 'var(--dg-border)'}`,
+              color: liveTail ? '#ef4444' : 'var(--dg-text-secondary)',
+              background: liveTail ? 'rgba(239,68,68,0.1)' : 'var(--dg-bg-tertiary)',
+            }}
+            title="Live Tail — 每 3 秒刷新最近 5 分钟日志"
+          >
+            <Radio className={`h-3.5 w-3.5 ${liveTail ? 'animate-pulse' : ''}`} /> Tail
+          </button>
         </div>
       </div>
       {/* 次级控件行（时间 / 数据源 / 索引 / 上限 / 另存为 / 历史）// Logan.Li */}
@@ -297,13 +489,10 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
         </select>
 
         {effEngine === 'elasticsearch' && (
-          <input
+          <EsIndexPicker
+            datasourceId={currentSource?.id}
             value={esIndex}
-            onChange={e => setEsIndex(e.target.value)}
-            placeholder="索引通配符"
-            title="临时覆盖数据源默认索引，留空使用数据源配置"
-            className="h-10 px-2 text-xs rounded flex-shrink-0 font-mono"
-            style={{ width: '150px', background: 'var(--dg-bg-tertiary)', border: '1px solid var(--dg-border)', color: 'var(--dg-text-primary)' }}
+            onChange={setEsIndex}
           />
         )}
 
@@ -336,6 +525,12 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
           </>)}
         </div>
 
+        <button onClick={() => { void handleShareLink(); }} className="h-10 px-2.5 flex items-center gap-1 rounded flex-shrink-0 text-xs" style={{ border: '1px solid var(--dg-border)', color: 'var(--dg-text-muted)', background: 'var(--dg-bg-tertiary)' }} title="复制分享链接">
+          <Link2 className="h-3.5 w-3.5" /> 分享
+        </button>
+        <button onClick={() => setSavedPanelOpen(true)} className="h-10 w-10 flex items-center justify-center rounded flex-shrink-0" style={{ border: '1px solid var(--dg-border)', color: 'var(--dg-text-muted)', background: 'var(--dg-bg-tertiary)' }} title="已保存查询">
+          <Bookmark className="h-4 w-4" />
+        </button>
         <button onClick={() => setHistoryPanelOpen(true)} className="h-10 w-10 flex items-center justify-center rounded flex-shrink-0" style={{ border: '1px solid var(--dg-border)', color: 'var(--dg-text-muted)', background: 'var(--dg-bg-tertiary)' }} title="查询历史">
           <Clock className="h-4 w-4" />
         </button>
@@ -349,11 +544,20 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
       )}
 
       {/* 快捷查询助手 */}
-      <QuickQueryBar engine={effEngine} templates={ALL_TEMPLATES[effEngine]} onSelect={setQuery} />
+      <QuickQueryBar engine={effEngine} onSelect={setQuery} />
+
+      {effEngine === 'loki' && currentSource && (
+        <LokiLabelBrowser
+          datasourceId={currentSource.id}
+          query={query}
+          timeRange={timeRange}
+          onQueryChange={setQuery}
+        />
+      )}
 
       {/* 统计条 + 工具栏 */}
       {entries.length > 0 && !loading && (
-        <LogQueryToolbar total={totalCount} queryTime={queryTime} perPage={perPage} onPerPageChange={n => { setPerPage(n); setPage(1); }} page={page} totalPages={totalPages} onPageChange={setPage} sortDirection={sortDirection} onSortToggle={() => setSortDirection(d => d === 'desc' ? 'asc' : 'desc')} onExport={() => { const t = sortedEntries.map(e => `${e.timestamp}\t${e.level || ''}\t${e.message}`).join('\n'); const b = new Blob([t], { type: 'text/plain' }); const u = URL.createObjectURL(b); const a = document.createElement('a'); a.href = u; a.download = `${effEngine}-logs-${Date.now()}.txt`; a.click(); URL.revokeObjectURL(u); }} onCopy={() => navigator.clipboard.writeText(pagedEntries.map(e => `${e.timestamp}\t${e.level || ''}\t${e.message}`).join('\n'))} onBellClick={() => setAlertDialogOpen(true)} />
+        <LogQueryToolbar total={totalCount} queryTime={queryTime} perPage={perPage} onPerPageChange={n => { setPerPage(n); setPage(1); }} page={page} totalPages={totalPages} onPageChange={setPage} sortDirection={sortDirection} onSortToggle={() => setSortDirection(d => d === 'desc' ? 'asc' : 'desc')} onExport={handleExportLogs} onCopy={() => { void handleCopyLogs(); }} onBellClick={() => setAlertDialogOpen(true)} hasMore={hasMore} loadingMore={loadingMore} onLoadMore={() => { void handleLoadMore(); }} />
       )}
 
       {/* Log Volume 面积图 */}
@@ -368,8 +572,8 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
                 </linearGradient>
               </defs>
               <CartesianGrid strokeDasharray="3 3" stroke="var(--dg-border)" vertical={false} />
-              <XAxis dataKey="timestamp" tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} axisLine={{ stroke: 'var(--dg-border)' }} tickLine={false} tickFormatter={(v: string) => v.slice(-5)} interval="preserveStartEnd" />
-              <YAxis tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} axisLine={false} tickLine={false} width={30} />
+              <XAxis dataKey="timestamp" tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} axisLine={{ stroke: 'var(--dg-border)' }} tickLine={false} tickFormatter={formatHistogramTick} interval="preserveStartEnd" />
+              <YAxis tick={{ fontSize: 9, fill: 'var(--dg-text-muted)' }} axisLine={false} tickLine={false} width={36} tickFormatter={formatHistogramCount} />
               <Tooltip contentStyle={{ background: 'var(--dg-bg-secondary)', border: '1px solid var(--dg-border)', borderRadius: '6px', fontSize: '11px', color: 'var(--dg-text-primary)' }} formatter={(v: number) => [`${v} 条日志`, '数量']} labelFormatter={(l: string) => `时间: ${l}`} />
               <Area type="monotone" dataKey="count" stroke={meta.color} fill={`url(#vol-${effEngine})`} strokeWidth={1.5} dot={false} activeDot={{ r: 4, stroke: meta.color, strokeWidth: 2, fill: 'var(--dg-bg-secondary)' }} />
             </AreaChart>
@@ -395,9 +599,9 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
           <div className="p-2">
             {resultTab === 'logs' && (<>
               <div className="flex gap-3">
-                <LogFieldSidebar fields={fields} selectedFields={selectedFields} onFieldClick={n => setQuery(p => `${p} ${n}=""`)} onToggleDisplayField={toggleField} loading={loading} />
+                <LogFieldSidebar fields={fields} indexedFields={indexedFields} selectedFields={selectedFields} onFieldClick={handleFieldClick} onToggleDisplayField={toggleField} loading={loading} />
                 <div className="flex-1 min-w-0">
-                  <EnhancedLogResults entries={pagedEntries} loading={loading} viewMode={viewMode} wrapLines={wrapLines} truncate={truncate} commonLabels={commonLabels || undefined} />
+                  <EnhancedLogResults entries={pagedEntries} loading={loading} viewMode={viewMode} wrapLines={wrapLines} truncate={truncate} commonLabels={commonLabels || undefined} onLabelFilter={handleLabelFilter} />
                 </div>
               </div>
               <div className="flex items-center gap-3 py-2 px-1">
@@ -408,8 +612,8 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
                     </button>
                   ))}
                 </div>
-                <label className="flex items-center gap-1.5 text-[11px] cursor-pointer" style={{ color: 'var(--dg-text-muted)' }}><input type="checkbox" checked={truncate} onChange={e => setTruncate(e.target.checked)} className="h-3.5 w-3.5 rounded" /> 截断</label>
-                <label className="flex items-center gap-1.5 text-[11px] cursor-pointer" style={{ color: 'var(--dg-text-muted)' }}><input type="checkbox" checked={wrapLines} onChange={e => setWrapLines(e.target.checked)} className="h-3.5 w-3.5 rounded" /> 换行</label>
+                <label className="flex items-center gap-1.5 text-[11px] cursor-pointer" style={{ color: 'var(--dg-text-muted)' }} title="开启后折叠行仅显示前 500 字预览"><input type="checkbox" checked={truncate} onChange={e => setTruncate(e.target.checked)} className="h-3.5 w-3.5 rounded" /> 截断预览</label>
+                <label className="flex items-center gap-1.5 text-[11px] cursor-pointer" style={{ color: 'var(--dg-text-muted)' }} title="长日志自动换行显示"><input type="checkbox" checked={wrapLines} onChange={e => setWrapLines(e.target.checked)} className="h-3.5 w-3.5 rounded" /> 换行</label>
               </div>
             </>)}
             {resultTab === 'stats' && <StatChartPanel statTable={statTable} engine={effEngine as LogEngine} query={query} onSaveAsAlert={() => setSaveAlertOpen(true)} onSaveAsQuery={() => setSaveQueryOpen(true)} />}
@@ -452,37 +656,11 @@ export function UnifiedQueryPanel({ engine, onRuleCreated }: Props) {
       )}
 
       {/* 对话框 */}
-      <SaveQueryDialog open={saveQueryOpen} onClose={() => setSaveQueryOpen(false)} engine={effEngine as LogEngine} query={query} timeRange={timeRange} datasourceName={currentSource?.name} />
+      <SaveQueryDialog open={saveQueryOpen} onClose={() => setSaveQueryOpen(false)} engine={effEngine as LogEngine} query={query} timeRange={timeRange} datasourceId={currentSource?.id} datasourceName={currentSource?.name} />
+      <SavedQueriesPanel visible={savedPanelOpen} onClose={() => setSavedPanelOpen(false)} onSelect={handleSavedQuerySelect} />
       <SaveAlertDialog open={saveAlertOpen} onClose={() => setSaveAlertOpen(false)} engine={effEngine as LogEngine} query={query} datasourceId={currentSource?.id} datasourceName={currentSource?.name} />
       <QueryHistoryPanel visible={historyPanelOpen} onClose={() => setHistoryPanelOpen(false)} onSelect={(it: QueryHistoryItem) => { setQuery(it.query); setHistoryPanelOpen(false); }} onCreateAlert={() => { setSaveAlertOpen(true); setHistoryPanelOpen(false); }} />
       <LogAlertFromQueryDialog open={alertDialogOpen} onOpenChange={setAlertDialogOpen} ctx={{ engine: effEngine as LogEngine, datasourceId: currentSource?.id, datasourceName: currentSource?.name, query, timeRange: timeRange.label }} onSaved={onRuleCreated} />
     </div>
   );
 }
-
-// 内联紧凑版快捷查询助手
-function QuickQueryBar({ engine, templates, onSelect }: { engine: 'loki' | 'elasticsearch'; templates: { label: string; query: string }[]; onSelect: (q: string) => void; }) {
-  const [open, setOpen] = useState(false);
-  const labels: Record<'loki' | 'elasticsearch', string> = { loki: 'LogQL', elasticsearch: 'Lucene' };
-  return (
-    <div>
-      <button onClick={() => setOpen(!open)} className="flex items-center gap-1 text-[11px] px-2 py-1 rounded transition-colors" style={{ color: 'var(--dg-blue)', background: open ? 'var(--dg-bg-tertiary)' : 'transparent' }}>
-        <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'var(--dg-blue)' }} />
-        {labels[engine]} 快捷查询模板
-        <ChevronDown className="h-3 w-3" style={{ transform: open ? 'rotate(0deg)' : 'rotate(-90deg)', transition: 'transform 0.2s' }} />
-      </button>
-      {open && (
-        <div className="mt-1.5 p-2.5 rounded-lg border" style={{ background: 'var(--dg-bg-secondary)', borderColor: 'var(--dg-border)' }}>
-          <div className="grid grid-cols-3 lg:grid-cols-4 gap-1.5">
-            {templates.map((t, i) => (
-              <button key={i} onClick={() => { onSelect(t.query); setOpen(false); }} className="text-left px-2 py-1.5 rounded border text-[11px] transition-all hover:opacity-80" style={{ background: 'var(--dg-bg-tertiary)', borderColor: 'var(--dg-border)', color: 'var(--dg-text-secondary)' }} title={t.query}>
-                <span className="font-medium block truncate" style={{ color: 'var(--dg-text-primary)' }}>{t.label}</span>
-                <span className="block truncate opacity-60 font-mono mt-0.5 text-[10px]">{t.query}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/monitor/log-center/log-center-types.ts

@@ -1,6 +1,6 @@
 // log-center-types.ts — 日志中心类型（无状态：仅存连接与告警策略）// Logan.Li
 
-export type LogCenterTab = 'loki' | 'es' | 'datasources' | 'alerts';
+export type LogCenterTab = 'loki' | 'es' | 'datasources' | 'alerts' | 'rbac';
 
 export type LogEngine = 'loki' | 'elasticsearch';
 

frontend/src/components/monitor/log-center/log-format.ts

@@ -0,0 +1,90 @@
+// log-format.ts — 日志时间戳格式化与展示辅助 // Logan.Li
+
+/** 将 Loki 纳秒时间戳或 epoch 转为可读 ISO 时间 */
+export function formatLogTimestamp(ts: string): string {
+  if (!ts) return '';
+  const trimmed = ts.trim();
+  // 已是 ISO / 可读格式
+  if (/[-T:]/.test(trimmed) && !/^\d+$/.test(trimmed)) {
+    return trimmed;
+  }
+  const n = Number(trimmed);
+  if (!Number.isFinite(n)) return trimmed;
+
+  let ms: number;
+  if (n > 1e18) ms = Math.floor(n / 1e6);       // 纳秒
+  else if (n > 1e15) ms = Math.floor(n / 1e6);   // 纳秒（Loki 常见）
+  else if (n > 1e12) ms = Math.floor(n);         // 毫秒
+  else ms = Math.floor(n * 1000);                 // 秒
+
+  const d = new Date(ms);
+  if (Number.isNaN(d.getTime())) return trimmed;
+  return d.toISOString();
+}
+
+/** 直方图 X 轴时间刻度（避免科学计数法原样显示）// Logan.Li */
+export function formatHistogramTick(ts: string | number): string {
+  const raw = String(ts).trim();
+  if (!raw) return '';
+  if (/^[\d.eE+-]+$/.test(raw)) {
+    const n = Number(raw);
+    if (Number.isFinite(n)) {
+      const ms = n > 1e12 ? n : n * 1000;
+      const d = new Date(ms);
+      if (!Number.isNaN(d.getTime())) {
+        return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+      }
+    }
+  }
+  const iso = formatLogTimestamp(raw);
+  const d = new Date(iso);
+  if (!Number.isNaN(d.getTime())) {
+    return d.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+  }
+  return raw.length > 8 ? raw.slice(11, 19) : raw;
+}
+
+/** 直方图 Y 轴条数刻度 // Logan.Li */
+export function formatHistogramCount(v: number): string {
+  if (!Number.isFinite(v)) return String(v);
+  if (v >= 1e6) return `${(v / 1e6).toFixed(1)}M`;
+  if (v >= 1e4) return `${Math.round(v / 1000)}k`;
+  return String(Math.round(v));
+}
+
+/** 日志行展示文本（截断仅影响折叠预览，展开始终全文） */
+export function formatLogPreview(text: string, trunc: boolean, maxLen = 500): string {
+  if (!trunc || text.length <= maxLen) return text;
+  return `${text.slice(0, maxLen)}…`;
+}
+
+/** 从 Spring / key=value 日志中提取结构化字段 */
+export function detectLogFields(raw: string): { name: string; value: string }[] {
+  const fields: { name: string; value: string }[] = [];
+  if (!raw) return fields;
+
+  try {
+    const parsed = JSON.parse(raw);
+    if (typeof parsed === 'object' && parsed !== null) {
+      for (const [k, v] of Object.entries(parsed)) {
+        fields.push({ name: k, value: String(v) });
+      }
+      return fields;
+    }
+  } catch { /* 非 JSON */ }
+
+  const kvRegex = /(\w+)=([^,\s]+)/g;
+  let m: RegExpExecArray | null;
+  while ((m = kvRegex.exec(raw)) !== null) {
+    fields.push({ name: m[1], value: m[2] });
+  }
+  return fields;
+}
+
+/** 组装复制用完整日志行 */
+export function buildLogCopyText(entry: { timestamp?: string; level?: string; raw?: string; message: string }): string {
+  const body = entry.raw || entry.message || '';
+  const ts = formatLogTimestamp(entry.timestamp || '');
+  const level = entry.level ? ` ${entry.level.toUpperCase()}` : '';
+  return ts ? `${ts}${level} ${body}` : body;
+}

frontend/src/components/monitor/log-center/log-rbac/LogRoleCreateDialog.tsx

@@ -0,0 +1,192 @@
+import { useMemo } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Loader2, Save } from 'lucide-react';
+import { matchSampleScopes, SAMPLE_SCOPES, type SampleScopeItem } from './matchLogScope';
+import type { LogDataSource } from '@/api/log/log-center';
+
+interface LogRoleCreateDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  datasources: LogDataSource[];
+  saving: boolean;
+  name: string;
+  code: string;
+  engine: string;
+  matchField: string;
+  pattern: string;
+  role: string;
+  datasourceId: string;
+  description: string;
+  onNameChange: (v: string) => void;
+  onCodeChange: (v: string) => void;
+  onEngineChange: (v: string) => void;
+  onMatchFieldChange: (v: string) => void;
+  onPatternChange: (v: string) => void;
+  onRoleChange: (v: string) => void;
+  onDatasourceIdChange: (v: string) => void;
+  onDescriptionChange: (v: string) => void;
+  onSubmit: () => void;
+}
+
+// 新建日志范围权限弹窗 // Logan.Li
+export function LogRoleCreateDialog({
+  open,
+  onOpenChange,
+  datasources,
+  saving,
+  name,
+  code,
+  engine,
+  matchField,
+  pattern,
+  role,
+  datasourceId,
+  description,
+  onNameChange,
+  onCodeChange,
+  onEngineChange,
+  onMatchFieldChange,
+  onPatternChange,
+  onRoleChange,
+  onDatasourceIdChange,
+  onDescriptionChange,
+  onSubmit,
+}: LogRoleCreateDialogProps) {
+  const preview = useMemo(
+    () => matchSampleScopes(pattern, matchField, engine, SAMPLE_SCOPES),
+    [pattern, matchField, engine],
+  );
+
+  const patternHint = useMemo(() => {
+    if (!pattern.trim()) {
+      return matchField === 'index' ? '输入正则，匹配 ES 索引名' : `输入正则，匹配 Loki ${matchField} Label`;
+    }
+    try {
+      // eslint-disable-next-line no-new
+      new RegExp(pattern);
+      return preview.length > 0 ? `命中 ${preview.length} 个示例范围` : '无匹配示例';
+    } catch {
+      return '正则语法错误';
+    }
+  }, [pattern, matchField, preview.length]);
+
+  const filteredDS = datasources.filter((ds) => {
+    if (engine === '*') return true;
+    return ds.type === engine;
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md bg-[var(--dg-bg-primary)] border-[var(--dg-border)]">
+        <DialogHeader>
+          <DialogTitle>新建日志权限</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-muted)]">
+            按正则匹配 ES 索引或 Loki Label，限制用户可查询的日志范围
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label className="text-xs">名称</Label>
+              <Input value={name} onChange={(e) => onNameChange(e.target.value)} placeholder="后端日志" className="h-8 text-sm dg-input" />
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">标识</Label>
+              <Input value={code} onChange={(e) => onCodeChange(e.target.value)} placeholder="backend-logs" className="h-8 text-sm font-mono dg-input" />
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label className="text-xs">引擎</Label>
+              <Select value={engine} onValueChange={onEngineChange}>
+                <SelectTrigger className="h-8 text-sm dg-input"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="*">全部引擎</SelectItem>
+                  <SelectItem value="loki">Loki</SelectItem>
+                  <SelectItem value="elasticsearch">Elasticsearch</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">匹配维度</Label>
+              <Select value={matchField} onValueChange={onMatchFieldChange}>
+                <SelectTrigger className="h-8 text-sm dg-input"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="index">ES 索引</SelectItem>
+                  <SelectItem value="app">Loki app</SelectItem>
+                  <SelectItem value="namespace">Loki namespace</SelectItem>
+                  <SelectItem value="job">Loki job</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">匹配正则</Label>
+            <Input
+              value={pattern}
+              onChange={(e) => onPatternChange(e.target.value)}
+              placeholder={matchField === 'index' ? 'logstash-.*' : '^cex-.*'}
+              className="h-8 text-sm font-mono dg-input"
+            />
+            <p className="text-[10px] text-[var(--dg-text-muted)]">{patternHint}</p>
+          </div>
+          <div className="grid grid-cols-2 gap-2">
+            <div className="space-y-1">
+              <Label className="text-xs">数据源（可选）</Label>
+              <Select value={datasourceId || '__all'} onValueChange={(v) => onDatasourceIdChange(v === '__all' ? '' : v)}>
+                <SelectTrigger className="h-8 text-sm dg-input"><SelectValue placeholder="全部数据源" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all">全部数据源</SelectItem>
+                  {filteredDS.map((ds) => (
+                    <SelectItem key={ds.id} value={String(ds.id)}>{ds.name} ({ds.type})</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label className="text-xs">权限级别</Label>
+              <Select value={role} onValueChange={onRoleChange}>
+                <SelectTrigger className="h-8 text-sm dg-input"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="viewer">查看者 — 只读查询</SelectItem>
+                  <SelectItem value="analyst">分析者 — 查询 + 告警</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Label className="text-xs">说明</Label>
+            <Input value={description} onChange={(e) => onDescriptionChange(e.target.value)} placeholder="可选" className="h-8 text-sm dg-input" />
+          </div>
+          {preview.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {preview.map((s: SampleScopeItem) => (
+                <span key={s.label} className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] font-mono">
+                  {s.label}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+          <Button onClick={onSubmit} disabled={saving}>
+            {saving ? <Loader2 className="h-4 w-4 animate-spin mr-1" /> : <Save className="h-4 w-4 mr-1" />}
+            创建
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/src/components/monitor/log-center/log-rbac/matchLogScope.ts

@@ -0,0 +1,46 @@
+// 日志范围正则命中工具（ES 索引 / Loki Label）// Logan.Li
+
+export interface SampleScopeItem {
+  label: string;
+  value: string;
+  engine: 'loki' | 'elasticsearch';
+  field: 'index' | 'app' | 'namespace' | 'job';
+}
+
+export const SAMPLE_SCOPES: SampleScopeItem[] = [
+  { label: 'logstash-2026.07', value: 'logstash-2026.07', engine: 'elasticsearch', field: 'index' },
+  { label: 'logstash-2026.06', value: 'logstash-2026.06', engine: 'elasticsearch', field: 'index' },
+  { label: 'app=cex-admin-api', value: 'cex-admin-api', engine: 'loki', field: 'app' },
+  { label: 'app=api-gateway', value: 'api-gateway', engine: 'loki', field: 'app' },
+  { label: 'ns=astralx', value: 'astralx', engine: 'loki', field: 'namespace' },
+  { label: 'job=promtail', value: 'promtail', engine: 'loki', field: 'job' },
+];
+
+export function engineMatches(roleEngine: string, targetEngine: string): boolean {
+  const re = (roleEngine || '*').toLowerCase();
+  if (re === '*' || re === '') return true;
+  return re === targetEngine.toLowerCase();
+}
+
+export function matchSampleScopes(
+  pattern: string,
+  matchField: string,
+  engine: string,
+  samples: SampleScopeItem[] = SAMPLE_SCOPES,
+): SampleScopeItem[] {
+  if (!pattern.trim()) return [];
+  try {
+    const re = new RegExp(pattern);
+    return samples.filter((s) => {
+      if (s.field !== matchField) return false;
+      if (!engineMatches(engine, s.engine)) return false;
+      return re.test(s.value);
+    });
+  } catch {
+    return [];
+  }
+}
+
+export function scopeDisplayLabel(s: SampleScopeItem): string {
+  return s.label;
+}

frontend/src/components/monitor/log-center/query-autocomplete.ts

@@ -0,0 +1,114 @@
+// 查询输入自动补全上下文检测 // Logan.Li
+
+import { COMMON_ES_FIELDS, ES_KEYWORD_SUGGESTIONS, LOKI_PIPE_SUGGESTIONS } from './query-syntax';
+
+export interface AutocompleteContext {
+  prefix: string;
+  replaceStart: number;
+  replaceEnd: number;
+  kind: 'label' | 'value' | 'pipe' | 'field' | 'keyword';
+  labelName?: string;
+}
+
+const LOKI_SELECTOR_RE = /\{([^}]*)\}/g;
+
+export function detectAutocompleteContext(
+  query: string,
+  cursor: number,
+  engine: 'loki' | 'elasticsearch',
+): AutocompleteContext | null {
+  const before = query.slice(0, cursor);
+  if (engine === 'loki') {
+    if (before.endsWith('|') || before.endsWith('| ')) {
+      return { prefix: '', replaceStart: cursor, replaceEnd: cursor, kind: 'pipe' };
+    }
+    const selectorMatch = [...query.matchAll(LOKI_SELECTOR_RE)].find((m) => {
+      const start = m.index ?? 0;
+      const end = start + m[0].length;
+      return cursor >= start && cursor <= end;
+    });
+    if (!selectorMatch) return null;
+    const inner = selectorMatch[1];
+    const innerStart = (selectorMatch.index ?? 0) + 1;
+    const rel = cursor - innerStart;
+    const innerBefore = inner.slice(0, rel);
+    const valueMatch = innerBefore.match(/([a-zA-Z_][\w.-]*)\s*(=~|!~|=|!=)\s*"?([^"]*)$/);
+    if (valueMatch) {
+      const labelName = valueMatch[1];
+      const valStart = innerStart + innerBefore.length - (valueMatch[3]?.length || 0);
+      return {
+        prefix: valueMatch[3] || '',
+        replaceStart: valStart,
+        replaceEnd: cursor,
+        kind: 'value',
+        labelName,
+      };
+    }
+    const labelMatch = innerBefore.match(/(?:^|,)\s*([a-zA-Z_][\w.-]*)?$/);
+    if (labelMatch) {
+      const partial = labelMatch[1] || '';
+      return {
+        prefix: partial,
+        replaceStart: cursor - partial.length,
+        replaceEnd: cursor,
+        kind: 'label',
+      };
+    }
+    return null;
+  }
+
+  const fieldMatch = before.match(/(?:^|\s)([a-zA-Z_@][\w.-]*)$/);
+  if (fieldMatch) {
+    const partial = fieldMatch[1];
+    return {
+      prefix: partial,
+      replaceStart: cursor - partial.length,
+      replaceEnd: cursor,
+      kind: 'field',
+    };
+  }
+  if (/\b(AND|OR|NOT)\s*$/i.test(before) || before.endsWith(' ')) {
+    return { prefix: '', replaceStart: cursor, replaceEnd: cursor, kind: 'keyword' };
+  }
+  return null;
+}
+
+export function filterSuggestions(
+  ctx: AutocompleteContext,
+  labels: string[],
+  labelValues: string[],
+  mappingFields: string[],
+): string[] {
+  const p = ctx.prefix.toLowerCase();
+  const match = (items: string[]) => items.filter((s) => s.toLowerCase().startsWith(p)).slice(0, 20);
+
+  switch (ctx.kind) {
+    case 'label':
+      return match(labels);
+    case 'value':
+      return match(labelValues);
+    case 'pipe':
+      return LOKI_PIPE_SUGGESTIONS;
+    case 'field':
+      return match([...new Set([...mappingFields, ...COMMON_ES_FIELDS])]);
+    case 'keyword':
+      return ES_KEYWORD_SUGGESTIONS;
+    default:
+      return [];
+  }
+}
+
+export function applySuggestion(query: string, ctx: AutocompleteContext, suggestion: string): { text: string; cursor: number } {
+  const left = query.slice(0, ctx.replaceStart);
+  const right = query.slice(ctx.replaceEnd);
+  let insert = suggestion;
+  if (ctx.kind === 'value') {
+    insert = suggestion.includes(' ') ? `"${suggestion}"` : suggestion;
+  } else if (ctx.kind === 'label') {
+    insert = `${suggestion}=`;
+  } else if (ctx.kind === 'field') {
+    insert = `${suggestion}:`;
+  }
+  const text = left + insert + right;
+  return { text, cursor: left.length + insert.length };
+}

frontend/src/components/monitor/log-center/query-builder.ts

@@ -0,0 +1,64 @@
+// LogQL / Lucene 查询构建辅助（标签点击过滤）// Logan.Li
+
+const LOKI_SELECTOR_RE = /\{([^}]*)\}/;
+
+export function applyLokiLabelFilter(
+  query: string,
+  key: string,
+  value: string,
+  op: 'include' | 'exclude',
+): string {
+  const trimmed = query.trim();
+  const match = trimmed.match(LOKI_SELECTOR_RE);
+  const clause = op === 'include' ? `${key}="${value}"` : `${key}!="${value}"`;
+  if (match) {
+    const inner = match[1].trim();
+    const withoutKey = inner
+      .split(',')
+      .map((s) => s.trim())
+      .filter((s) => s && !s.startsWith(`${key}=`) && !s.startsWith(`${key}!=`))
+      .join(', ');
+    const nextInner = withoutKey ? `${withoutKey}, ${clause}` : clause;
+    return trimmed.replace(LOKI_SELECTOR_RE, `{${nextInner}}`);
+  }
+  const pipeline = trimmed.startsWith('{') ? '' : trimmed;
+  return pipeline ? `{${clause}} ${pipeline}` : `{${clause}}`;
+}
+
+export function applyESFieldFilter(
+  query: string,
+  key: string,
+  value: string,
+  op: 'include' | 'exclude',
+): string {
+  const token = value.includes(' ') || value.includes(':')
+    ? `${key}:"${value.replace(/"/g, '\\"')}"`
+    : `${key}:${value}`;
+  const base = query.trim();
+  if (op === 'exclude') {
+    const neg = `NOT ${token}`;
+    return base ? `${base} AND ${neg}` : neg;
+  }
+  return base ? `${base} AND ${token}` : token;
+}
+
+/** 从 LogQL 提取 stream selector（Label API 仅接受 {...} 部分）// Logan.Li */
+export function extractLokiSelector(query: string): string {
+  const trimmed = query.trim();
+  const match = trimmed.match(LOKI_SELECTOR_RE);
+  return match ? `{${match[1]}}` : '';
+}
+
+export function buildLokiSelector(labels: Record<string, string>): string {
+  const parts = Object.entries(labels).map(([k, v]) => `${k}="${v}"`);
+  return `{${parts.join(', ')}}`;
+}
+
+export function mergeLokiSelector(query: string, labels: Record<string, string>): string {
+  let q = query.trim();
+  const selector = buildLokiSelector(labels);
+  if (LOKI_SELECTOR_RE.test(q)) {
+    return q.replace(LOKI_SELECTOR_RE, selector);
+  }
+  return `${selector} ${q}`.trim();
+}

frontend/src/components/monitor/log-center/query-syntax.ts

@@ -0,0 +1,40 @@
+// LogQL / Lucene 语法高亮 // Logan.Li
+
+export function highlightSyntax(query: string, engine: 'loki' | 'elasticsearch'): string {
+  if (!query) return '<span style="color:transparent">.</span>';
+  const esc = query.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const span = (color: string, text: string) => `<span style="color:${color}">${text}</span>`;
+  if (engine === 'loki') {
+    return esc.replace(
+      /("(?:[^"\\]|\\.)*")|([a-zA-Z_][\w-]*)(?==)|(\|json|\|regexp|\|line_format|\|unwrap|\|pattern|\|label_format)|\b(count_over_time|sum|rate|avg|max|min|count|by|over)\b|([{}])|(\|=|\!=|=~|!~|=)/g,
+      (m, str, ident, pipe, fn, brace, op) => {
+        if (str) return span('#22c55e', str);
+        if (ident) return span('#f59e0b', ident);
+        if (pipe) return span('#8b5cf6', pipe);
+        if (fn) return span('#06b6d4', fn);
+        if (brace) return span('#f59e0b', brace);
+        if (op) return span('#f43f5e', op);
+        return m;
+      },
+    ) + '<span style="color:transparent">.</span>';
+  }
+  return esc.replace(
+    /("(?:[^"\\]|\\.)*")|\b(AND|OR|NOT)\b|([a-zA-Z_@][\w.-]*)(?=:)|([*?~^[\]()])/g,
+    (m, str, kw, field, punct) => {
+      if (str) return span('#22c55e', str);
+      if (kw) return span('#f43f5e', kw);
+      if (field) return span('#f59e0b', field);
+      if (punct) return span('#8b5cf6', punct);
+      return m;
+    },
+  ) + '<span style="color:transparent">.</span>';
+}
+
+export const LOKI_PIPE_SUGGESTIONS = ['|= ', '!= ', '|~ ', '!~ ', '| json', '| regexp ', '| line_format ', '| unwrap ', '| pattern '];
+
+export const ES_KEYWORD_SUGGESTIONS = ['AND ', 'OR ', 'NOT '];
+
+export const COMMON_ES_FIELDS = [
+  'message', 'level', 'log.level', 'app', 'service', 'host.name', '@timestamp',
+  'kubernetes.namespace', 'trace_id', 'status', 'method', 'path',
+];

frontend/src/components/monitor/log-center/query-url-state.ts

@@ -0,0 +1,52 @@
+// 日志查询 URL 状态编解码 — 可分享链接 // Logan.Li
+
+import type { TimeRange } from './types-v3';
+
+export interface LogQueryUrlState {
+  query?: string;
+  datasourceId?: string;
+  index?: string;
+  timeRange?: TimeRange;
+  autoRun?: boolean;
+}
+
+export function parseLogQueryUrl(params: URLSearchParams): LogQueryUrlState {
+  const query = params.get('q') || undefined;
+  const datasourceId = params.get('ds') || undefined;
+  const index = params.get('index') || undefined;
+  const start = params.get('from') || undefined;
+  const end = params.get('to') || undefined;
+  const timeLabel = params.get('tr') || '自定义';
+  const autoRun = params.get('run') === '1';
+  const state: LogQueryUrlState = { query, datasourceId, index, autoRun };
+  if (start && end) {
+    state.timeRange = {
+      start: decodeURIComponent(start),
+      end: decodeURIComponent(end),
+      label: decodeURIComponent(timeLabel),
+      type: params.get('trt') === 'relative' ? 'relative' : 'absolute',
+    };
+  }
+  return state;
+}
+
+export function buildLogQueryParams(state: LogQueryUrlState): URLSearchParams {
+  const p = new URLSearchParams();
+  if (state.query) p.set('q', state.query);
+  if (state.datasourceId) p.set('ds', state.datasourceId);
+  if (state.index) p.set('index', state.index);
+  if (state.timeRange) {
+    p.set('from', state.timeRange.start);
+    p.set('to', state.timeRange.end);
+    p.set('tr', state.timeRange.label);
+    p.set('trt', state.timeRange.type);
+  }
+  return p;
+}
+
+export function buildShareUrl(pathname: string, state: LogQueryUrlState, autoRun = false): string {
+  const p = buildLogQueryParams(state);
+  if (autoRun) p.set('run', '1');
+  const qs = p.toString();
+  return qs ? `${pathname}?${qs}` : pathname;
+}

frontend/src/components/monitor/log-center/types-v3.ts

@@ -257,11 +257,11 @@ export const QUICK_TEMPLATES: Record<LogEngine, { label: string; query: string }
   ],
   elasticsearch: [
     { label: 'API 5xx 错误', query: 'status:500 AND path:"/api/*"' },
-    { label: '错误超时日志', query: 'level:error AND message:*timeout*' },
-    { label: '排除调试日志', query: 'host.name:server-* AND NOT level:debug' },
+    { label: '错误超时日志', query: '(level:error OR log.level:error) AND message:*timeout*' },
+    { label: '排除调试日志', query: 'host.name:server-* AND NOT level:debug AND NOT log.level:debug' },
     { label: '慢请求检测', query: 'response_time:>1000 AND method:POST' },
-    { label: '最近1小时严重错误', query: '@timestamp:[now-1h TO now] AND level:critical' },
-    { label: '特定服务错误', query: 'service:nginx AND (level:error OR level:fatal)' },
+    { label: '最近1小时严重错误', query: '@timestamp:[now-1h TO now] AND (level:critical OR log.level:critical)' },
+    { label: '特定服务错误', query: 'service:nginx AND (level:(error OR fatal) OR log.level:(error OR fatal))' },
   ],
   sls: [
     { label: '错误日志筛选', query: "* | select * where level = 'error'" },