Add service provider icon.

ui/src/components/certimate/AccessEdit.tsx

@@ -11,18 +11,11 @@ import { useState } from "react";
 import AccessTencentForm from "./AccessTencentForm";
 
 import { Label } from "../ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "../ui/select";
+
 import { Access, accessTypeMap } from "@/domain/access";
 import AccessAliyunForm from "./AccessAliyunForm";
 import { cn } from "@/lib/utils";
+import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
 
 type TargetConfigEditProps = {
   op: "add" | "edit";
@@ -66,6 +59,10 @@ export function AccessEdit({
       break;
   }
 
+  const getOptionCls = (val: string) => {
+    return val == configType ? "border-primary" : "";
+  };
+
   return (
     <Dialog onOpenChange={setOpen} open={open}>
       <DialogTrigger asChild className={cn(className)}>
@@ -77,25 +74,28 @@ export function AccessEdit({
         </DialogHeader>
         <div className="container">
           <Label>服务商</Label>
-
-          <Select
-            onValueChange={(value) => {
-              setConfigType(value);
-            }}
+          <RadioGroup
             value={configType}
+            className="flex mt-3 space-x-2"
+            onValueChange={setConfigType}
           >
-            <SelectTrigger className="mt-3">
-              <SelectValue placeholder="选择服务商" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectGroup>
-                <SelectLabel>服务商</SelectLabel>
-                {typeKeys.map((key) => (
-                  <SelectItem value={key}>{accessTypeMap.get(key)}</SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
+            {typeKeys.map((key) => (
+              <div className="flex items-center space-x-2" key={key}>
+                <RadioGroupItem value={key} id={key} hidden />
+                <Label htmlFor={key}>
+                  <div
+                    className={cn(
+                      "flex items-center space-x-2 border p-2 rounded cursor-pointer",
+                      getOptionCls(key)
+                    )}
+                  >
+                    <img src={accessTypeMap.get(key)?.[1]} className="h-6" />
+                    <div>{accessTypeMap.get(key)?.[0]}</div>
+                  </div>
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
 
           {form}
         </div>

ui/src/components/ui/radio-group.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }

ui/src/domain/access.ts

@@ -1,8 +1,8 @@
 import { z } from "zod";
 
-export const accessTypeMap: Map<string, string> = new Map([
-  ["tencent", "腾讯云"],
-  ["aliyun", "阿里云"],
+export const accessTypeMap: Map<string, [string, string]> = new Map([
+  ["tencent", ["腾讯云", "/imgs/providers/tencent.svg"]],
+  ["aliyun", ["阿里云", "/imgs/providers/aliyun.svg"]],
 ]);
 
 export const accessFormType = z.union(

ui/src/domain/domain.ts

@@ -24,3 +24,10 @@ export type Domain = {
 export const getLastDeployment = (domain: Domain): Deployment | undefined => {
   return domain.expand?.lastDeployment;
 };
+
+export const targetTypeMap: Map<string, [string, string]> = new Map([
+  ["aliyun-cdn", ["阿里云-CDN", "/imgs/providers/aliyun.svg"]],
+  ["aliyun-oss", ["阿里云-OSS", "/imgs/providers/aliyun.svg"]],
+]);
+
+export const targetTypeKeys = Array.from(targetTypeMap.keys());

ui/src/pages/access/Access.tsx

@@ -58,8 +58,12 @@ const Access = () => {
               <div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
                 {access.name}
               </div>
-              <div className="sm:w-48 w-full pt-1 sm:pt-0 flex  items-center">
-                {accessTypeMap.get(access.configType)}
+              <div className="sm:w-48 w-full pt-1 sm:pt-0 flex  items-center space-x-2">
+                <img
+                  src={accessTypeMap.get(access.configType)?.[1]}
+                  className="w-6"
+                />
+                <div>{accessTypeMap.get(access.configType)?.[0]}</div>
               </div>
 
               <div className="sm:w-52 w-full pt-1 sm:pt-0 flex items-center">

ui/src/pages/domains/Edit.tsx

@@ -24,7 +24,7 @@ import {
 } from "@/components/ui/select";
 import { useConfig } from "@/providers/config";
 import { useEffect, useState } from "react";
-import { Domain } from "@/domain/domain";
+import { Domain, targetTypeKeys, targetTypeMap } from "@/domain/domain";
 import { save, get } from "@/repository/domains";
 import { ClientResponseError } from "pocketbase";
 import { PbErrorData } from "@/domain/base";
@@ -33,6 +33,10 @@ import { Toaster } from "@/components/ui/toaster";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Plus } from "lucide-react";
 import { AccessEdit } from "@/components/certimate/AccessEdit";
+import { accessTypeMap } from "@/domain/access";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
 
 const Edit = () => {
   const {
@@ -149,6 +153,10 @@ const Edit = () => {
     }
   };
 
+  const getOptionCls = (val: string) => {
+    return form.getValues().targetType == val ? "border-primary" : "";
+  };
+
   return (
     <>
       <div className="">
@@ -207,7 +215,15 @@ const Edit = () => {
                             <SelectLabel>服务商授权配置</SelectLabel>
                             {accesses.map((item) => (
                               <SelectItem key={item.id} value={item.id}>
-                                {item.name}
+                                <div className="flex items-center space-x-2">
+                                  <img
+                                    className="w-6"
+                                    src={
+                                      accessTypeMap.get(item.configType)?.[1]
+                                    }
+                                  />
+                                  <div>{item.name}</div>
+                                </div>
                               </SelectItem>
                             ))}
                           </SelectGroup>
@@ -227,28 +243,37 @@ const Edit = () => {
                   <FormItem>
                     <FormLabel>部署服务类型</FormLabel>
                     <FormControl>
-                      <Select
-                        {...field}
-                        onValueChange={(value) => {
-                          setTargetType(value);
-                          form.setValue("targetType", value);
+                      <RadioGroup
+                        className="flex mt-3 space-x-2"
+                        onValueChange={(val: string) => {
+                          setTargetType(val);
+                          form.setValue("targetType", val);
                         }}
+                        {...field}
                       >
-                        <SelectTrigger>
-                          <SelectValue placeholder="请选择部署服务类型" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectLabel>部署服务类型</SelectLabel>
-                            <SelectItem value="aliyun-oss">
-                              阿里云-OSS
-                            </SelectItem>
-                            <SelectItem value="aliyun-cdn">
-                              阿里云-CDN
-                            </SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
+                        {targetTypeKeys.map((key) => (
+                          <div
+                            className="flex items-center space-x-2"
+                            key={key}
+                          >
+                            <Label>
+                              <RadioGroupItem value={key} id={key} hidden />
+                              <div
+                                className={cn(
+                                  "flex items-center space-x-2 border p-2 rounded cursor-pointer",
+                                  getOptionCls(key)
+                                )}
+                              >
+                                <img
+                                  src={targetTypeMap.get(key)?.[1]}
+                                  className="h-6"
+                                />
+                                <div>{targetTypeMap.get(key)?.[0]}</div>
+                              </div>
+                            </Label>
+                          </div>
+                        ))}
+                      </RadioGroup>
                     </FormControl>
 
                     <FormMessage />
@@ -288,7 +313,15 @@ const Edit = () => {
                             <SelectLabel>服务商授权配置</SelectLabel>
                             {targetAccesses.map((item) => (
                               <SelectItem key={item.id} value={item.id}>
-                                {item.name}
+                                <div className="flex items-center space-x-2">
+                                  <img
+                                    className="w-6"
+                                    src={
+                                      accessTypeMap.get(item.configType)?.[1]
+                                    }
+                                  />
+                                  <div>{item.name}</div>
+                                </div>
                               </SelectItem>
                             ))}
                           </SelectGroup>