mock/index.ts

@@ -1,3 +1,5 @@
+import { MockMethod } from "vite-plugin-mock";
+
 const mock = [
     {
         url: "/",
@@ -654,8 +656,451 @@ const mock = [
                 "teaVersion": "1.1.1"
             },
             "message": ""
+        },
+    },
+    {
+        url: "/servers/groups/selectPopup",
+        method: "get",
+        response: {
+            "code": 200,
+            "data": {
+                "firstMenuItem": "",
+                "groups": [],
+                "mainMenu": "",
+                "mainTab": "",
+                "teaBadge": 0,
+                "teaCommon": {
+                    "teaIsPlus": true,
+                    "teaLogoFileId": 0,
+                    "teaShowVersion": true,
+                    "teaUsername": "默认用户"
+                },
+                "teaDemoEnabled": false,
+                "teaDocURL": "",
+                "teaFaviconFileId": 0,
+                "teaFrontMode": "",
+                "teaIsSuper": false,
+                "teaLang": "zh-cn",
+                "teaMenu": "servers",
+                "teaModules": [
+                    {
+                        "code": "dashboard",
+                        "icon": "dashboard",
+                        "isOn": true,
+                        "name": "概览",
+                        "subItems": []
+                    },
+                    {
+                        "code": "servers",
+                        "icon": "pi-sitemap",
+                        "isOn": true,
+                        "name": "CDN加速",
+                        "subItems": [
+                            {
+                                "code": "servers",
+                                "name": "我的网站",
+                                "url": "/servers"
+                            },
+                            {
+                                "code": "cache",
+                                "name": "刷新预热",
+                                "url": "/servers/cache"
+                            },
+                            {
+                                "code": "certs",
+                                "name": "证书管理",
+                                "url": "/servers/certs"
+                            },
+                            {
+                                "code": "acme",
+                                "isOn": true,
+                                "name": "证书申请",
+                                "url": "/servers/certs/acme"
+                            },
+                            {
+                                "code": "trafficStat",
+                                "isOn": true,
+                                "name": "用量统计",
+                                "url": "/servers/traffic-stats"
+                            },
+                            {
+                                "code": "fee",
+                                "isOn": false,
+                                "name": "计费方式",
+                                "url": "/servers/fee"
+                            },
+                            {
+                                "code": "trafficPackage",
+                                "isOn": false,
+                                "name": "流量包",
+                                "url": "/servers/packages"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "lb",
+                        "icon": "paper plane",
+                        "isOn": true,
+                        "name": "负载均衡"
+                    },
+                    {
+                        "code": "waf",
+                        "icon": "magnet",
+                        "isOn": true,
+                        "name": "WAF安全",
+                        "subItems": [
+                            {
+                                "code": "overview",
+                                "name": "概览",
+                                "url": "/waf"
+                            },
+                            {
+                                "code": "wafLogs",
+                                "name": "拦截日志",
+                                "url": "/waf/logs"
+                            },
+                            {
+                                "code": "iplist",
+                                "name": "拦截IP",
+                                "url": "/waf/iplists"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "plans",
+                        "icon": "puzzle piece",
+                        "isOn": true,
+                        "name": "套餐管理"
+                    },
+                    {
+                        "code": "anti-ddos",
+                        "icon": "shield",
+                        "isOn": true,
+                        "name": "DDoS高防",
+                        "subItems": [
+                            {
+                                "code": "instance",
+                                "name": "实例列表",
+                                "url": "/anti-ddos/instances"
+                            },
+                            {
+                                "code": "package",
+                                "name": "购买实例",
+                                "url": "/anti-ddos/packages"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "ns",
+                        "icon": "globe",
+                        "isOn": true,
+                        "name": "域名解析",
+                        "subItems": [
+                            {
+                                "code": "domain",
+                                "name": "我的域名",
+                                "url": "/ns/domains"
+                            },
+                            {
+                                "code": "domainGroup",
+                                "name": "域名分组",
+                                "url": "/ns/domains/groups"
+                            },
+                            {
+                                "code": "domainBatch",
+                                "name": "批量操作",
+                                "url": "/ns/domains/batch"
+                            },
+                            {
+                                "code": "route",
+                                "name": "线路管理",
+                                "url": "/ns/routes"
+                            },
+                            {
+                                "code": "plan",
+                                "name": "套餐",
+                                "url": "/ns/plans"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "finance",
+                        "icon": "dollar sign",
+                        "isOn": true,
+                        "name": "财务管理",
+                        "subItems": [
+                            {
+                                "code": "overview",
+                                "name": "概览",
+                                "url": "/finance"
+                            },
+                            {
+                                "code": "bills",
+                                "name": "费用账单",
+                                "url": "/finance/bills"
+                            },
+                            {
+                                "code": "logs",
+                                "name": "收支明细",
+                                "url": "/finance/logs"
+                            },
+                            {
+                                "code": "charge",
+                                "name": "充值",
+                                "url": "/finance/charge"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "tickets",
+                        "icon": "ticket",
+                        "isOn": true,
+                        "name": "工单系统"
+                    },
+                    {
+                        "code": "acl",
+                        "icon": "address book",
+                        "isOn": true,
+                        "name": "访问控制"
+                    }
+                ],
+                "teaName": "FlexCDN演示",
+                "teaPageFooterHTML": "",
+                "teaRole": "user",
+                "teaShowIndexPage": false,
+                "teaShowPageFooter": false,
+                "teaSubMenu": "servers",
+                "teaSubMenus": [],
+                "teaTabbar": [],
+                "teaTheme": "violet",
+                "teaTitle": "FlexCDN用户系统演示",
+                "teaUserAvatar": "",
+                "teaVersion": "1.1.1"
+            },
+            "message": ""
+        }
+    },
+    {
+        url: "/servers/groups/createPopup",
+        method: "get",
+        response: {
+            "code": 200,
+            "data": {
+                "firstMenuItem": "",
+                "mainMenu": "",
+                "mainTab": "",
+                "teaBadge": 0,
+                "teaCommon": {
+                    "teaIsPlus": true,
+                    "teaLogoFileId": 0,
+                    "teaShowVersion": true,
+                    "teaUsername": "默认用户"
+                },
+                "teaDemoEnabled": false,
+                "teaDocURL": "",
+                "teaFaviconFileId": 0,
+                "teaFrontMode": "",
+                "teaIsSuper": false,
+                "teaLang": "zh-cn",
+                "teaMenu": "servers",
+                "teaModules": [
+                    {
+                        "code": "dashboard",
+                        "icon": "dashboard",
+                        "isOn": true,
+                        "name": "概览",
+                        "subItems": []
+                    },
+                    {
+                        "code": "servers",
+                        "icon": "pi-sitemap",
+                        "isOn": true,
+                        "name": "CDN加速",
+                        "subItems": [
+                            {
+                                "code": "servers",
+                                "name": "我的网站",
+                                "url": "/servers"
+                            },
+                            {
+                                "code": "cache",
+                                "name": "刷新预热",
+                                "url": "/servers/cache"
+                            },
+                            {
+                                "code": "certs",
+                                "name": "证书管理",
+                                "url": "/servers/certs"
+                            },
+                            {
+                                "code": "acme",
+                                "isOn": true,
+                                "name": "证书申请",
+                                "url": "/servers/certs/acme"
+                            },
+                            {
+                                "code": "trafficStat",
+                                "isOn": true,
+                                "name": "用量统计",
+                                "url": "/servers/traffic-stats"
+                            },
+                            {
+                                "code": "fee",
+                                "isOn": false,
+                                "name": "计费方式",
+                                "url": "/servers/fee"
+                            },
+                            {
+                                "code": "trafficPackage",
+                                "isOn": false,
+                                "name": "流量包",
+                                "url": "/servers/packages"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "lb",
+                        "icon": "paper plane",
+                        "isOn": true,
+                        "name": "负载均衡"
+                    },
+                    {
+                        "code": "waf",
+                        "icon": "magnet",
+                        "isOn": true,
+                        "name": "WAF安全",
+                        "subItems": [
+                            {
+                                "code": "overview",
+                                "name": "概览",
+                                "url": "/waf"
+                            },
+                            {
+                                "code": "wafLogs",
+                                "name": "拦截日志",
+                                "url": "/waf/logs"
+                            },
+                            {
+                                "code": "iplist",
+                                "name": "拦截IP",
+                                "url": "/waf/iplists"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "plans",
+                        "icon": "puzzle piece",
+                        "isOn": true,
+                        "name": "套餐管理"
+                    },
+                    {
+                        "code": "anti-ddos",
+                        "icon": "shield",
+                        "isOn": true,
+                        "name": "DDoS高防",
+                        "subItems": [
+                            {
+                                "code": "instance",
+                                "name": "实例列表",
+                                "url": "/anti-ddos/instances"
+                            },
+                            {
+                                "code": "package",
+                                "name": "购买实例",
+                                "url": "/anti-ddos/packages"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "ns",
+                        "icon": "globe",
+                        "isOn": true,
+                        "name": "域名解析",
+                        "subItems": [
+                            {
+                                "code": "domain",
+                                "name": "我的域名",
+                                "url": "/ns/domains"
+                            },
+                            {
+                                "code": "domainGroup",
+                                "name": "域名分组",
+                                "url": "/ns/domains/groups"
+                            },
+                            {
+                                "code": "domainBatch",
+                                "name": "批量操作",
+                                "url": "/ns/domains/batch"
+                            },
+                            {
+                                "code": "route",
+                                "name": "线路管理",
+                                "url": "/ns/routes"
+                            },
+                            {
+                                "code": "plan",
+                                "name": "套餐",
+                                "url": "/ns/plans"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "finance",
+                        "icon": "dollar sign",
+                        "isOn": true,
+                        "name": "财务管理",
+                        "subItems": [
+                            {
+                                "code": "overview",
+                                "name": "概览",
+                                "url": "/finance"
+                            },
+                            {
+                                "code": "bills",
+                                "name": "费用账单",
+                                "url": "/finance/bills"
+                            },
+                            {
+                                "code": "logs",
+                                "name": "收支明细",
+                                "url": "/finance/logs"
+                            },
+                            {
+                                "code": "charge",
+                                "name": "充值",
+                                "url": "/finance/charge"
+                            }
+                        ]
+                    },
+                    {
+                        "code": "tickets",
+                        "icon": "ticket",
+                        "isOn": true,
+                        "name": "工单系统"
+                    },
+                    {
+                        "code": "acl",
+                        "icon": "address book",
+                        "isOn": true,
+                        "name": "访问控制"
+                    }
+                ],
+                "teaName": "FlexCDN演示",
+                "teaPageFooterHTML": "",
+                "teaRole": "user",
+                "teaShowIndexPage": false,
+                "teaShowPageFooter": false,
+                "teaSubMenu": "servers",
+                "teaSubMenus": [],
+                "teaTabbar": [],
+                "teaTheme": "violet",
+                "teaTitle": "FlexCDN用户系统演示",
+                "teaUserAvatar": "",
+                "teaVersion": "1.1.1"
+            },
+            "message": ""
         }
     }
-]
+] as MockMethod[]
 
 export default mock;

src/components/common/CodeLabel.vue

@@ -10,11 +10,14 @@ const click = (...allArgs) => {
 </script>
 
 <template>
-	<TLabel class="text-xs" @click.prevent="click"><slot></slot></TLabel>
+	<TLabel class="text-[14px]" @click.prevent="click"><slot></slot></TLabel>
 </template>
 
 <style scoped>
 .p-chip {
-	padding: 0.1em 0.8em;
+	padding: 7px 8px;
+	color: inherit !important;
+	height: 24px;
+	border: 1px solid #EEF2FA;
 }
 </style>

src/components/ui/TDialogDynamic.vue

@@ -25,7 +25,13 @@ provide("$inDialogDynamic", true)
 
 </style>
 <style>
+.p-dialog-header {
+	padding: 20px 16px 16px 30px !important;
+}
 .p-dialog-title {
 	font-weight: 400!important;
 }
+.p-dialog-content {
+	padding: 0 30px 20px 30px !important;
+}
 </style>

src/components/ui/TTag.vue

@@ -52,6 +52,12 @@ onUpdated(() => {
 <style scoped>
 .p-tag {
 	font-weight: 400;
+	height: 34px !important;
+	padding-left: 12px;
+	padding-right: 12px;
+	border: 1px solid #F5F8FF;
+	background-color: #EEF2FA;
+	@apply rounded-[17px];
 }
 
 .p-tag.small {

src/components/ui/TTextarea.vue

@@ -22,7 +22,7 @@ defineExpose({
 </script>
 
 <template>
-	<Textarea ref="rootRef"></Textarea>
+	<Textarea ref="rootRef" class="resize-none"></Textarea>
 </template>
 
 <style scoped>

src/components/ui/services/dialog.js

@@ -9,7 +9,7 @@ class Dialog {
 		blockScroll: true,
 		style: {},
 		breakpoints: {},
-		maximizable: true
+		maximizable: false
 	}
 	_templates = {}
 	_onCloseFunction = null

src/utils/utils.js

@@ -389,7 +389,7 @@ export default function useUtils() {
 				})
 
 				let width = "45em"
-				let height = "30em"
+				let height = null
 				if (options["width"] != null) {
 					width = options["width"]
 				}

src/views/servers/addServerNamePopup.vue

@@ -4,20 +4,28 @@
 import PopupLayout from "@/layouts/PopupLayout.vue";
 import ctxRef from "@/utils/ctx_ref.js"
 import Context from "./addServerNamePopup.js"
-import {ref} from "vue";
+import { ref } from "vue";
 import PostForm from "@/components/form/PostForm.vue";
 import TInputText from "@/components/ui/TInputText.vue";
 import CodeLabel from "@/components/common/CodeLabel.vue";
 import TTextarea from "@/components/ui/TTextarea.vue";
 import SubmitButton from "@/components/form/SubmitButton.vue";
 import DefinitionTable from "@/components/common/DefinitionTable.vue";
+import Tab from "primevue/tab";
+import Tabs from "primevue/tabs";
+import TabList from "primevue/tablist";
+import TabPanels from "primevue/tabpanels";
+import TabPanel from "primevue/tabpanel";
+
 
 const serverName = ref()
 const serverNames = ref()
 const ctx = ctxRef(new Context(), {
-	refs: {serverName, serverNames}
+	refs: { serverName, serverNames }
 })
-
+const handleTagChange = (mode) => {
+	ctx.switchMode(mode)
+}
 </script>
 
 <template>
@@ -25,7 +33,66 @@ const ctx = ctxRef(new Context(), {
 
 		<header v-if="!ctx.isUpdating">添加域名绑定</header>
 		<header v-if="ctx.isUpdating">修改域名绑定</header>
-		<PostForm action="$" @success="ctx.success">
+		<div class="add-popup-container">
+			<Tabs value="single">
+				<TabList >
+					<Tab value="single" @click="handleTagChange('single')">单个域名<span class="text-red-500">*</span></Tab>
+					<Tab value="multiple" @click="handleTagChange('multiple')">多个域名<span class="text-red-500">*</span></Tab>
+				</TabList>
+				<TabPanels>
+					<TabPanel value="single">
+						<PostForm action="$" @success="ctx.success">
+							<div class="form-container">
+								<TInputText name="serverName" ref="serverName" autofocus maxlength="100"
+									v-model="ctx.serverName.name" class="w-full" />
+								<p class="comment"
+									style="margin-top: 12px; margin-bottom: 0; line-height: 30px; letter-spacing: 0.4pt;">
+									每行一个域名，比如
+									<CodeLabel>example.com</CodeLabel>
+									、
+									<CodeLabel>www.example.com</CodeLabel>
+									，不要包含
+									<CodeLabel>http://</CodeLabel>
+									或
+									<CodeLabel>https://</CodeLabel>
+									或端口号；也可以使用泛域名，比如
+									<CodeLabel>*.example.com</CodeLabel>
+								</p>
+							</div>
+							<div class="flex justify-end mt-[20px]">
+								<SubmitButton></SubmitButton>
+							</div>
+						</PostForm>
+					</TabPanel>
+					<TabPanel value="multiple">
+						<PostForm action="$" @success="ctx.success">
+							<div class="form-container">
+								<TTextarea name="serverNames" ref="serverNames" v-model="ctx.multipleServerNames"
+									class="w-full" rows="5"></TTextarea>
+								<p class="comment"
+									style="margin-top: 12px; margin-bottom: 0; line-height: 30px; letter-spacing: 0.4pt;">
+									每行一个域名，比如
+									<CodeLabel>example.com</CodeLabel>
+									、
+									<CodeLabel>www.example.com</CodeLabel>
+									，不要包含
+									<CodeLabel>http://</CodeLabel>
+									或
+									<CodeLabel>https://</CodeLabel>
+									或端口号；也可以使用泛域名，比如
+									<CodeLabel>*.example.com</CodeLabel>
+								</p>
+							</div>
+							<div class="flex justify-end mt-[20px]">
+								<SubmitButton></SubmitButton>
+							</div>
+						</PostForm>
+					</TabPanel>
+				</TabPanels>
+			</Tabs>
+
+		</div>
+		<!-- <PostForm action="$" @success="ctx.success">
 			<input type="hidden" name="mode" :value="ctx.mode"/>
 			<DefinitionTable>
 				<tbody>
@@ -69,9 +136,43 @@ const ctx = ctxRef(new Context(), {
 			</DefinitionTable>
 			<SubmitButton></SubmitButton> &nbsp;
 			<a href="" class="link" v-if="ctx.mode == 'single'" @click.prevent="ctx.switchMode('multiple')">批量添加</a><a href="" v-if="ctx.mode == 'multiple'" @click.prevent="ctx.switchMode('single')" class="link">单个添加</a>
-		</PostForm>
+		</PostForm> -->
 	</PopupLayout>
 </template>
 
 <style lang="postcss" scoped>
+:deep(.p-tab) {
+	font-weight: normal;
+	border: 1px solid #E5E8F2;
+	border-bottom: none;
+	border-left: none;
+}
+
+:deep(.p-tab:first-child) {
+	border-left: 1px solid #E5E8F2;
+}
+
+:deep(.p-tab-active) {
+	color: inherit;
+	font-weight: normal;
+	background-color: #EEF2FA;
+}
+
+:deep(.p-tablist-active-bar) {
+	background: none;
+}
+
+:deep(.p-tablist-tab-list) {
+	border-color: #E5E8F2;
+}
+
+:deep(.p-tabpanels) {
+	padding: 0;
+}
+
+.form-container {
+	border: 1px solid #EEF2FA;
+	border-top: none;
+	padding: 20px;
+}
 </style>

src/views/servers/groups/createPopup.vue

@@ -16,7 +16,19 @@ const ctx = ctxRef(new Context())
 <template>
 	<PopupLayout>
 		<header>创建分组</header>
-		<PostForm action="$" @success="ctx.success">
+		<div class="select-container">
+			<div class="text-[14px] font-[400] leading-[14px] text-[#313131]">分组名称<span class="text-red-500">*</span>
+			</div>
+			<div class="mt-[12px]">
+				<PostForm action="$" @success="ctx.success">
+					<TInputText name="name" maxlength="50" autofocus class="w-full" />
+					<div class="flex justify-end mt-[20px]">
+						<SubmitButton></SubmitButton>
+					</div>
+				</PostForm>
+			</div>
+		</div>
+		<!-- <PostForm action="$" @success="ctx.success">
 			<DefinitionTable>
 				<tbody>
 				<tr>
@@ -28,9 +40,8 @@ const ctx = ctxRef(new Context())
 				</tbody>
 			</DefinitionTable>
 			<SubmitButton></SubmitButton>
-		</PostForm>
+		</PostForm> -->
 	</PopupLayout>
 </template>
 
-<style lang="postcss" scoped>
-</style>
+<style lang="postcss" scoped></style>

src/views/servers/groups/selectPopup.vue

@@ -10,14 +10,32 @@ import TTag from "@/components/ui/TTag.vue";
 import DefinitionTable from "@/components/common/DefinitionTable.vue";
 
 const ctx = ctxRef(new Context())
-
+console.log(ctx)
 </script>
 
 <template>
 	<PopupLayout>
 		<header>选择分组</header>
-
-		<PostForm action="$" @success="ctx.success">
+		<div class="select-container">
+			<div class="text-[14px] font-[400] leading-[14px] text-[#313131]">选择分组</div>
+			<div class="select-form mt-[12px] p-[12px] border border-[#E5E8F2] border-solid rounded-[4px]">
+				<PostForm action="$" @success="ctx.success">
+					<input type="hidden" name="groupId" :value="ctx.groupId" />
+					<div v-if="ctx.groups.length > 0">
+						<div class="label-group">
+							<a href="" v-for="group in ctx.groups" @click.prevent="ctx.selectGroup(group)">
+								<TTag :secondary="group.id != ctx.groupId">{{ group.name }}</TTag>
+							</a>
+						</div>
+						<p class="comment" style="margin-top: 12px; margin-bottom: 0;">点击可已选中要使用的分组。</p>
+					</div>
+					<div v-else>
+						<p class="comment">暂时还没有可以使用的分组。</p>
+					</div>
+				</PostForm>
+			</div>
+		</div>
+		<!-- <PostForm action="$" @success="ctx.success">
 			<input type="hidden" name="groupId" :value="ctx.groupId"/>
 			<DefinitionTable>
 				<tbody>
@@ -40,9 +58,8 @@ const ctx = ctxRef(new Context())
 				</tbody>
 			</DefinitionTable>
 			<SubmitButton>确定</SubmitButton>
-		</PostForm>
+		</PostForm> -->
 	</PopupLayout>
 </template>
 
-<style lang="postcss" scoped>
-</style>
+<style lang="postcss" scoped></style>

tailwind.config.js

@@ -2,6 +2,9 @@
 module.exports = {
 	content: ["./src/**/*.{html,js,ts,vue}"],
 	theme: {
+		fontFamily: {
+			sans: "Source Han Sans SC"
+		},
 		extend: {},
 	},
 	plugins: [],