From 1bfd47758767527564884d4516a3aeeea456d1c8 Mon Sep 17 00:00:00 2001 From: yoan <536464346@qq.com> Date: Thu, 22 Aug 2024 11:10:30 +0800 Subject: [PATCH] Add service provider icon. --- ui/package-lock.json | 32 +++++++++ ui/package.json | 1 + ui/public/imgs/providers/aliyun.svg | 1 + ui/public/imgs/providers/baidu.svg | 1 + ui/public/imgs/providers/baisan.avif | Bin 0 -> 2163 bytes ui/public/imgs/providers/qiniu.svg | 1 + ui/public/imgs/providers/tencent.svg | 1 + ui/public/imgs/providers/volcengine.svg | 13 ++++ ui/public/imgs/providers/wangsu.svg | 9 +++ ui/src/components/certimate/AccessEdit.tsx | 52 +++++++------- ui/src/components/ui/radio-group.tsx | 42 +++++++++++ ui/src/domain/access.ts | 6 +- ui/src/domain/domain.ts | 7 ++ ui/src/pages/access/Access.tsx | 8 ++- ui/src/pages/domains/Edit.tsx | 79 +++++++++++++++------ 15 files changed, 199 insertions(+), 54 deletions(-) create mode 100644 ui/public/imgs/providers/aliyun.svg create mode 100644 ui/public/imgs/providers/baidu.svg create mode 100644 ui/public/imgs/providers/baisan.avif create mode 100644 ui/public/imgs/providers/qiniu.svg create mode 100644 ui/public/imgs/providers/tencent.svg create mode 100644 ui/public/imgs/providers/volcengine.svg create mode 100644 ui/public/imgs/providers/wangsu.svg create mode 100644 ui/src/components/ui/radio-group.tsx diff --git a/ui/package-lock.json b/ui/package-lock.json index 17b0b0db..854089cb 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -14,6 +14,7 @@ "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-progress": "^1.1.0", + "@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", @@ -1559,6 +1560,37 @@ } } }, + "node_modules/@radix-ui/react-radio-group": { + "version": "1.2.0", + "resolved": "https://registry.npmmirror.com/@radix-ui/react-radio-group/-/react-radio-group-1.2.0.tgz", + "integrity": "sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-presence": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0", + "@radix-ui/react-use-previous": "1.1.0", + "@radix-ui/react-use-size": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-roving-focus": { "version": "1.1.0", "resolved": "https://registry.npmmirror.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz", diff --git a/ui/package.json b/ui/package.json index 2d9ea906..9257ccf0 100644 --- a/ui/package.json +++ b/ui/package.json @@ -16,6 +16,7 @@ "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-progress": "^1.1.0", + "@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", diff --git a/ui/public/imgs/providers/aliyun.svg b/ui/public/imgs/providers/aliyun.svg new file mode 100644 index 00000000..dedad191 --- /dev/null +++ b/ui/public/imgs/providers/aliyun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/public/imgs/providers/baidu.svg b/ui/public/imgs/providers/baidu.svg new file mode 100644 index 00000000..5ac20a05 --- /dev/null +++ b/ui/public/imgs/providers/baidu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/public/imgs/providers/baisan.avif b/ui/public/imgs/providers/baisan.avif new file mode 100644 index 0000000000000000000000000000000000000000..1313cda9e89f185f687e9a0b1ec50912b989fbc8 GIT binary patch literal 2163 zcmYjR2{@E(7k-(c(Kl)=ks-3x*kbIIeGidsDoSGvUNd6`lZ>)6RQl788WKY!VI*7f z^GULWw8)YqeYT9U)-+%EX7qRc|8rf>bDwkW`#I-4?{%&h0D%2LR2l^v1qK1U#YYkt zgeHO5AXh82H2?@)CE=-9KF3?AkU(O@FB1SLAddRm<|7dd_?>1K1*DR;IRW0O2@=UT zzGn*nf&f3l+t7FbfUNQSZBL+{NA>b-YY+_E?qr)m@*F&0!oPuy(m~shiRA4D{>SiW zK4V3sgkbqfBp8AJl>q>DVb4Vqw`=mNJ_RWe6dv9NDL66@CBaAvo`?Kp`QMG8fYBg7 z0D-|^Jb+`P&^CzxoF9_Fk%(v+tGi6AzDW{UmYzC1`FZNGzemG`lr0)ojH0)*ArVLm!THsB=@`?7oR(~mOBVs#<}t0T{?_jWKZb%5%yI0ozE9hs8omax`(Eazufa9>!`q(b#$mxP|e>v`V_-@x{a%&rb{KD(ViuUfeT>j3pHoN$V}mz3@mCKd13DhaFJHlvH&N zK0dnnS`MuzW>y?KJr>yhO6@FZcF0&bN)mzp*dS#t?^nLiZ*e3Zjojz?ge|M5Eg|W< zOv-2+H0nj9f4@;usr`O4|1{Zft!a>%X5!7^I_RtpwzdVTC4cjkcX3J&(0x1Rv2n>& z%`Wuv*VHQ4iEHE+=4F8{9_v_by=blgB|PTyoqbsoIR|4Zy)*IF>ztImO-+gweO1!e znq^i4C-(M(7Y=JM5dJfk1x94q1=ag{708Cqc0rn(`N~@MLr`~!*vxPt-GkoaF+2U( z;4Ic+rMoC8j+JKS4K?q^(_)Qxi{;<*H}GnofxonxI`AW%s&IH0+5yFzWD))(Cqbd2 zFx|g)@P-+1AKpwVsQD6d{lN|~h&JNEvZ(3@Iv^9>mQh7>p4K{(XSt-e?i-o_3oC5s zVR8@MeO#^LpqbfKt{X^==@)i1nz}Q9qR@Uk?2z;;0j=hXZe$EOv;Vhy`diF1fFeSLD@g$V+q!Y?ak#gt;LZ}|>T zSl^0QRAYIjzW(G$z%uZ-1DEhV)4* zN|Bjt$W+F?o24kZIwvFU%r}exqe&Lcon&c82+teJ1$AvIx{2F{Gml917R;ZKK4itX zcA0ZbbN!NvL*7ui*$P7=CpdM<{pZ^{n5KDBsH4kp&e4JL?nJ7sR+-4%$DOhz4b0M= zeQ&oop=dGVQ+HkuigrkkOcnbg+ju{Jw3i7{O5#Oa%H8Il%OTzO^Ri=3N}P8lwcKLW z+q3`Qot|Y@*?UZ(Y&Q)q8I9Su1U?c0R)iTX^4mE40-}do?RDG^ z9r3S*_!J){Yc@uzh%hs*(d-<1EcW}h2y9G9o@C+aTM~`WS`TSCDzt#d`wqfx)t>Nw zUVIM1r2kA0(W+Ca>ds;ZjE7dFI7CIFP{Sg`YwrrwHKx+VH1sY`&dcV>NfKO}s$^=_ z7aTX5i)t&V6%ugv6#TyU!a})R%_;#79b1>|)9^f=)+Z(3f6qiH`PJWx`DO*pE{eFW ztP8~_b<7gu`iuS!98E8=g}$lVNOnt_nE>`TLN1w0+crwUoM>UI@&*>4fkLv|i7T%vzV!Ps6U94b-F9y@`>&{hU))wx}!(+k}G6#-xd?56)L>p2^1@Rkr@S(-7}| z3ox7_jDFJp(m?MJu(`pq@eCDYMIB%$VZ`q^b*kmM)}>EaAjdAH`#eoCy*|#c_L=b& PZ_iG4Q?9&zuX^$y-dLD5 literal 0 HcmV?d00001 diff --git a/ui/public/imgs/providers/qiniu.svg b/ui/public/imgs/providers/qiniu.svg new file mode 100644 index 00000000..4088190b --- /dev/null +++ b/ui/public/imgs/providers/qiniu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/public/imgs/providers/tencent.svg b/ui/public/imgs/providers/tencent.svg new file mode 100644 index 00000000..1f4e8a79 --- /dev/null +++ b/ui/public/imgs/providers/tencent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/public/imgs/providers/volcengine.svg b/ui/public/imgs/providers/volcengine.svg new file mode 100644 index 00000000..32d508d0 --- /dev/null +++ b/ui/public/imgs/providers/volcengine.svg @@ -0,0 +1,13 @@ + + + appbar_logo_dark.2 + + + + + + + + + + \ No newline at end of file diff --git a/ui/public/imgs/providers/wangsu.svg b/ui/public/imgs/providers/wangsu.svg new file mode 100644 index 00000000..585b00c5 --- /dev/null +++ b/ui/public/imgs/providers/wangsu.svg @@ -0,0 +1,9 @@ + + + wangsu + + + + + + \ No newline at end of file diff --git a/ui/src/components/certimate/AccessEdit.tsx b/ui/src/components/certimate/AccessEdit.tsx index 98d8679f..188e9bcd 100644 --- a/ui/src/components/certimate/AccessEdit.tsx +++ b/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 ( @@ -77,25 +74,28 @@ export function AccessEdit({
- - + {typeKeys.map((key) => ( +
+
+ ))} + {form}
diff --git a/ui/src/components/ui/radio-group.tsx b/ui/src/components/ui/radio-group.tsx new file mode 100644 index 00000000..43b43b48 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + ) +}) +RadioGroup.displayName = RadioGroupPrimitive.Root.displayName + +const RadioGroupItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + return ( + + + + + + ) +}) +RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName + +export { RadioGroup, RadioGroupItem } diff --git a/ui/src/domain/access.ts b/ui/src/domain/access.ts index 28e47488..206b5848 100644 --- a/ui/src/domain/access.ts +++ b/ui/src/domain/access.ts @@ -1,8 +1,8 @@ import { z } from "zod"; -export const accessTypeMap: Map = new Map([ - ["tencent", "腾讯云"], - ["aliyun", "阿里云"], +export const accessTypeMap: Map = new Map([ + ["tencent", ["腾讯云", "/imgs/providers/tencent.svg"]], + ["aliyun", ["阿里云", "/imgs/providers/aliyun.svg"]], ]); export const accessFormType = z.union( diff --git a/ui/src/domain/domain.ts b/ui/src/domain/domain.ts index 0e545513..70aeecf3 100644 --- a/ui/src/domain/domain.ts +++ b/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 = new Map([ + ["aliyun-cdn", ["阿里云-CDN", "/imgs/providers/aliyun.svg"]], + ["aliyun-oss", ["阿里云-OSS", "/imgs/providers/aliyun.svg"]], +]); + +export const targetTypeKeys = Array.from(targetTypeMap.keys()); diff --git a/ui/src/pages/access/Access.tsx b/ui/src/pages/access/Access.tsx index e3ab0ca1..3213310a 100644 --- a/ui/src/pages/access/Access.tsx +++ b/ui/src/pages/access/Access.tsx @@ -58,8 +58,12 @@ const Access = () => {
{access.name}
-
- {accessTypeMap.get(access.configType)} +
+ +
{accessTypeMap.get(access.configType)?.[0]}
diff --git a/ui/src/pages/domains/Edit.tsx b/ui/src/pages/domains/Edit.tsx index 69916c20..33792e47 100644 --- a/ui/src/pages/domains/Edit.tsx +++ b/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 ( <>
@@ -207,7 +215,15 @@ const Edit = () => { 服务商授权配置 {accesses.map((item) => ( - {item.name} +
+ +
{item.name}
+
))} @@ -227,28 +243,37 @@ const Edit = () => { 部署服务类型 - + {targetTypeKeys.map((key) => ( +
+ +
+ ))} + @@ -288,7 +313,15 @@ const Edit = () => { 服务商授权配置 {targetAccesses.map((item) => ( - {item.name} +
+ +
{item.name}
+
))}