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/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')">单个域名</Tab>
+					<Tab value="multiple" @click="handleTagChange('multiple')">多个域名</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>

tailwind.config.js

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