Auto commit: 2026-03-27 13:04

.cnb/docker_sync.yml

@@ -0,0 +1,13 @@
+
+$:
+  api_trigger_event:
+    - docker:
+        image: docker.cnb.cool/kevisual/dev-env:latest
+      services:
+        - docker
+      stages: 
+        - name: '执行同步脚本'
+          run: |
+            docker pull redis:latest
+            docker tag redis:latest docker.cnb.cool/kevisual/dev-env/redis:latest
+            docker push docker.cnb.cool/kevisual/dev-env/redis:latest

src/pages/cnb-packages/detail/components/AddDockerDialog.tsx

@@ -0,0 +1,70 @@
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createDockerBuildConfig } from "@/pages/repos/store/build";
+import { usePackageStore } from "../../store";
+import { useShallow } from "zustand/shallow";
+
+interface AddDockerDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  slug: string;
+}
+
+export function AddDockerDialog({ open, onOpenChange, slug }: AddDockerDialogProps) {
+  const [repo, setRepo] = useState(() => {
+    return slug;
+  });
+  const [dockerImage, setDockerImage] = useState(() => {
+    return localStorage.getItem("add-docker-image") || "";
+  });
+  useEffect(() => {
+    localStorage.setItem("add-docker-image", dockerImage);
+  }, [dockerImage]);
+  const cnbPackageSore = usePackageStore(useShallow((state) => ({ repo: state.repo, dockerBuild: state.dockerBuild })));
+  const handleConfirm = async () => {
+    console.log("repo:", repo, "docker image:", dockerImage);
+    onOpenChange(false);
+    const config = createDockerBuildConfig({ repo, image: dockerImage });
+    await cnbPackageSore.dockerBuild({ repo, config });
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>添加 Docker 镜像</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Repo</label>
+          <Input
+            placeholder="kevisual/dev-env"
+            value={repo}
+            onChange={(e) => setRepo(e.target.value)}
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Docker</label>
+          <Input
+            placeholder="redis:latest"
+            value={dockerImage}
+            onChange={(e) => setDockerImage(e.target.value)}
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={handleConfirm}>确定</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/pages/cnb-packages/detail/page.tsx

@@ -2,7 +2,7 @@ import { useSearch } from "@tanstack/react-router";
 import { MarkItem, usePackageStore } from "../store";
 import { PackageItem } from "../store/package-type";
 import { useShallow } from "zustand/shallow";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import dayjs from "dayjs";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -15,7 +15,7 @@ import {
   CardAction,
 } from "@/components/ui/card";
 import { SidebarLayout } from "@/pages/sidebar/components";
-import { ArrowLeftIcon, Copy, MoreVertical, Info, ExternalLink } from "lucide-react";
+import { ArrowLeftIcon, Copy, MoreVertical, Info, ExternalLink, Plus, RefreshCw } from "lucide-react";
 import { toast } from "sonner";
 import {
   DropdownMenu,
@@ -24,6 +24,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { AddDockerDialog } from "./components/AddDockerDialog";
 
 export const App = () => {
   const searchParams = useSearch({ strict: false }) as { slug?: string; id?: string };
@@ -38,6 +39,19 @@ export const App = () => {
 
   const [detailItem, setDetailItem] = useState<MarkItem | null>(null);
   const [detailLoading, setDetailLoading] = useState(false);
+  const [addDockerOpen, setAddDockerOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredPackagesList = useMemo(() => {
+    if (!searchQuery.trim()) return packageStore.packagesList;
+    const query = searchQuery.toLowerCase();
+    return packageStore.packagesList.filter(
+      (item: PackageItem) =>
+        item.package?.toLowerCase().includes(query) ||
+        item.description?.toLowerCase().includes(query) ||
+        item.labels?.some((label: string) => label.toLowerCase().includes(query))
+    );
+  }, [packageStore.packagesList, searchQuery]);
 
   useEffect(() => {
     if (slug) {
@@ -54,13 +68,16 @@ export const App = () => {
       });
     }
   }, [id]);
+  const getGroup = (slug: string | undefined): string => {
+    if (!slug) return "";
+    const parts = slug.split("/").filter(Boolean);
+    if (parts.length <= 2) return parts[0];
+    return parts.slice(0, 2).join("/");
+  };
   const onCopy = (data: PackageItem) => {
-    // kevisual/dev-env 取 kevisual，删除最后一个斜杠和后面的内容
-    const _group = slug?.split?.('/')?.filter(Boolean);
-    _group?.shift?.();
-    const group = _group?.[0];
-    const value = `docker.cnb.cool/${slug}/${data.package}:latest`
-  }
+    const group = getGroup(slug);
+    const value = `docker.cnb.cool/${group}/${data.package}:latest`;
+  };
   const onDetail = (item: PackageItem) => {
 
   }
@@ -108,15 +125,60 @@ export const App = () => {
           </div>
         )}
 
-        <h2 className="text-xl font-semibold mb-4">制品列表</h2>
+        <div className="flex items-center gap-3 mb-4">
+          <h2 className="text-xl font-semibold">制品列表</h2>
+          <div className="flex items-center gap-1">
+            <input
+              type="text"
+              placeholder="搜索制品..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="h-8 w-48 px-3 text-sm border rounded-md bg-background"
+            />
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0 cursor-pointer"
+                    onClick={() => slug && packageStore.getPackagesList({ slug })}
+                  >
+                    <RefreshCw className="w-4 h-4" />
+                  </Button>
+                }
+              />
+              <TooltipContent>刷新</TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-8 w-8 p-0 cursor-pointer"
+                    onClick={() => setAddDockerOpen(true)}
+                  >
+                    <Plus className="w-4 h-4" />
+                  </Button>
+                }
+              />
+              <TooltipContent>添加</TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+        <AddDockerDialog open={addDockerOpen} onOpenChange={setAddDockerOpen} slug={slug || ""} />
         {packageStore.packagesListLoading ? (
           <div className="text-center py-10 text-muted-foreground">加载中...</div>
-        ) : packageStore.packagesList.length === 0 ? (
-          <div className="text-center py-10 text-muted-foreground">暂无制品数据</div>
+        ) : filteredPackagesList.length === 0 ? (
+          <div className="text-center py-10 text-muted-foreground">
+            {searchQuery ? "未找到匹配的制品" : "暂无制品数据"}
+          </div>
         ) : (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {packageStore.packagesList.map((item: PackageItem) => {
-              const dockerValue = `docker.cnb.cool/${slug}/${item.package}:latest`;
+            {filteredPackagesList.map((item: PackageItem) => {
+              const group = getGroup(slug);
+              const dockerValue = `docker.cnb.cool/${group}/${item.package}:latest`;
               const dockerPullValue = `docker pull ${dockerValue}`;
               return (
               <Card key={item.package}>
@@ -185,10 +247,20 @@ export const App = () => {
                             <Copy className="w-4 h-4 mr-2" />
                             复制 docker registry
                           </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={() => {
+                              const url = `https://cnb.cool/${slug}/-/packages/${item.package_type}/${item.package}`;
+                              window.open(url, '_blank');
+                            }}
+                            className="cursor-pointer"
+                          >
+                            <ExternalLink className="w-4 h-4 mr-2" />
+                            跳转详情包
+                          </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => {
                               const type = 'docker';
-                              const url = `https://cnb.cool/${slug}/-/packages?type=${type}&ordering=last_push_at`;
+                              const url = `https://cnb.cool/${slug}/-/packages?type=${type}&ordering=last_push_at&search=${item.package}`;
                               window.open(url, '_blank');
                             }}
                             className="cursor-pointer"

src/pages/cnb-packages/store/index.ts

@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 import { queryApi as markApi } from '@/modules/mark-api';
-import { queryApi as cnbApi } from '@/modules/package-api';
+import { queryApi as packageApi } from '@/modules/package-api';
+import { queryApi as cnbApi } from '@/modules/cnb-api';
 import { toast } from 'sonner';
 import { PackageItem } from './package-type';
 
@@ -23,6 +24,7 @@ type PackageState = {
   setLoading: (loading: boolean) => void;
   // CNB packages list
   packagesList: PackageItem[];
+  repo: string;
   packagesListLoading: boolean;
   getPackagesList: (params: { slug: string, type?: string, ordering?: string, name?: string, page?: number, pageSize?: number }) => Promise<PackageItem[]>;
   // Dialog states
@@ -38,6 +40,7 @@ type PackageState = {
   updateItem: (id: string, data: { title?: string, tags?: string[], link?: string, summary?: string, description?: string }) => Promise<void>;
   deleteItem: (id: string) => Promise<void>;
   getItem: (id: string) => Promise<MarkItem | null>;
+  dockerBuild: (config: { repo: string, config: string }) => Promise<void>;
 }
 
 export type { PackageState, PackageItem };
@@ -50,11 +53,12 @@ export const usePackageStore = create<PackageState>((set, get) => ({
   setLoading: (loading) => set({ loading }),
   packagesList: [],
   packagesListLoading: false,
+  repo: '',
   getPackagesList: async (params: { slug: string, type?: string, ordering?: string, name?: string, page?: number, pageSize?: number }) => {
-    const { slug, type = 'all', ordering, name, page = 1, pageSize = 20 } = params;
-    set({ packagesListLoading: true });
+    const { slug, type = 'all', ordering, name, page = 1, pageSize = 99 } = params;
+    set({ packagesListLoading: true, repo: slug });
     try {
-      const res = await cnbApi.cnb['list-packages']({
+      const res = await packageApi.cnb['list-packages']({
         slug,
         type,
         ordering,
@@ -185,5 +189,19 @@ export const usePackageStore = create<PackageState>((set, get) => ({
       console.error('获取详情失败', e);
       return null;
     }
+  },
+  dockerBuild: async (config) => {
+    const res = await cnbApi.cnb['cloud-build']({
+      repo: config.repo,
+      branch: 'main',
+      env: {} as any,
+      event: 'api_trigger_event',
+      config: config.config,
+    })
+    if (res.code === 200) {
+      toast.success('构建已触发')
+    } else {
+      toast.error(res.message || '构建触发失败')
+    }
   }
 }));

src/pages/repos/store/build.ts

@@ -98,3 +98,41 @@ ${branch}:
       #     script: zsh -i -c 'bun run end'
 `
 }
+
+export const createDockerBuildConfig = (params: {
+  repo: string,
+  // 参考 redis:latest 这种格式的镜像名称，必须包含冒号和标签，如果没有标签则默认为 latest
+  image: string
+}) => {
+  const toRepo = params.repo!;
+  let image = params.image!;
+  const tagIndex = image.lastIndexOf(':');
+  if (tagIndex === -1) {
+    image = `${image}:latest`;
+  }
+  const tagVersion = image.split(':').pop()!;
+  const imageLastPart = image.split('/').pop()!;
+  const imageNameWithoutTag = imageLastPart.split(':')[0];
+  const pullCmd = `docker pull ${image}`;
+  const tagCmd = `docker tag ${image} docker.cnb.cool/${toRepo}/${imageLastPart}`;
+  const pushCmd = `docker push docker.cnb.cool/${toRepo}/${imageLastPart}`;
+  let pushLatestCmd = 'echo "不需要推送 latest 标签"';
+  if (tagVersion !== 'latest') {
+    pushLatestCmd = `docker tag ${image} docker.cnb.cool/${toRepo}/${imageNameWithoutTag}:latest && docker push docker.cnb.cool/${toRepo}/${imageNameWithoutTag}:latest`;
+  }
+  return `
+$:
+  api_trigger_event:
+    - docker:
+        image: cnbcool/default-dev-env:latest
+      services:
+        - docker
+      stages: 
+        - name: '执行同步脚本'
+          script: |
+            ${pullCmd}
+            ${tagCmd}
+            ${pushCmd}
+            ${pushLatestCmd}
+`
+}