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 00000000..1313cda9 Binary files /dev/null and b/ui/public/imgs/providers/baisan.avif differ 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}
+
))}