style: 添加网站页面部分组件样式修改

src/assets/icon/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 5.25L7 8.75L3.5 5.25" stroke="#888888" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/icon/question-circle.svg

@@ -0,0 +1,12 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_63_30)">
+<path d="M7 13C8.65684 13 10.1568 12.3284 11.2426 11.2426C12.3284 10.1568 13 8.65684 13 7C13 5.34316 12.3284 3.84316 11.2426 2.75736C10.1568 1.67157 8.65684 1 7 1C5.34316 1 3.84316 1.67157 2.75736 2.75736C1.67157 3.84316 1 5.34316 1 7C1 8.65684 1.67157 10.1568 2.75736 11.2426C3.84316 12.3284 5.34316 13 7 13Z" stroke="#313131" stroke-width="0.833333" stroke-linejoin="round"/>
+<path d="M7 8.3488V7.18213C7.9665 7.18213 8.75 6.39862 8.75 5.43213C8.75 4.46563 7.9665 3.68213 7 3.68213C6.0335 3.68213 5.25 4.46563 5.25 5.43213" stroke="#313131" stroke-width="0.833333" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00004 10.974C7.40274 10.974 7.72921 10.6475 7.72921 10.2448C7.72921 9.84209 7.40274 9.51562 7.00004 9.51562C6.59734 9.51562 6.27087 9.84209 6.27087 10.2448C6.27087 10.6475 6.59734 10.974 7.00004 10.974Z" fill="#313131"/>
+</g>
+<defs>
+<clipPath id="clip0_63_30">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/assets/table.css

@@ -303,8 +303,7 @@
 /* style test */
 .ui.definition.table > tr > td:nth-child(2), .ui.definition.table > tbody > tr > td:nth-child(2) {
     border-left: 1px solid var(--p-content-border-color);
-    padding-left: 30px;
-    vertical-align: middle;
+    padding: 18px 30px;
 }
 
 
@@ -1080,8 +1079,10 @@ table.definition > tbody > tr > td:first-child, table.definition > tr > td:first
     min-width: 150px;
     height: 50px;
     min-height: 50px;
+    line-height: 14px;
+    padding: 18px 0;
     text-align: center;
-    vertical-align: middle;
+    /* vertical-align: middle; */
 }
 
 /* 主题色暂用 style test */

src/components/common/TipIcon.vue

@@ -12,9 +12,20 @@ const showTip = function () {
 </script>
 
 <template>
-	<a href="" title="查看帮助" @click.prevent="showTip" v-tooltip.top="'点击查看帮助'"><i class="pi pi-question-circle gray"></i></a>
+	<a href="" title="查看帮助" @click.prevent="showTip" v-tooltip.top="'点击查看帮助'" class="flex items-center"><div class="question-circle-icon text-black"></div></a>
 </template>
 
 <style scoped>
-
+.question-circle-icon {
+	width: 1em;
+	height: 1em;
+	mask-image: var(--svg);
+	--svg: url(@/assets/icon/question-circle.svg);
+	background-color: currentColor;
+	display: inline-block;
+	-webkit-mask-size: 100% 100%;
+	mask-size: 100% 100%;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+}
 </style>

src/components/server/CacheCondBox.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import "@/lib/array.js"
-import {ref} from "vue"
+import { ref } from "vue"
 import TInputText from "@/components/ui/TInputText.vue";
 import TimeDurationBox from "@/components/common/TimeDurationBox.vue";
 import TDivider from "@/components/ui/TDivider.vue";
@@ -11,7 +11,7 @@ import TLabel from "@/components/ui/TLabel.vue";
 
 const extInputRef = ref()
 const pathInputRef = ref()
-const {conds, addingExt, addingPath, extDuration, pathDuration} = (function () {
+const { conds, addingExt, addingPath, extDuration, pathDuration } = (function () {
 	return {
 		conds: ref([]),
 		addingExt: ref(false),
@@ -117,54 +117,61 @@ const cancel = function () {
 
 <template>
 	<div>
-		<input type="hidden" name="cacheCondsJSON" :value="JSON.stringify(conds)"/>
-		<div v-if="conds.length > 0" class="label-group">
+		<input type="hidden" name="cacheCondsJSON" :value="JSON.stringify(conds)" />
+		<div v-if="conds.length > 0" class="flex flex-wrap items-center">
 			<TLabel outlined="" v-for="(cond, index) in conds">
 				<span v-if="cond.type == 'url-extension'">扩展名</span>
-				<span v-if="cond.type == 'url-prefix'">路径</span>：{{ cond.value }} &nbsp; <span class="grey small">(<TimeDurationText :v-value="cond.duration"></TimeDurationText>)</span> &nbsp;
+				<span v-if="cond.type == 'url-prefix'">路径</span>：{{ cond.value }} &nbsp; <span class="grey small">(
+					<TimeDurationText :v-value="cond.duration"></TimeDurationText>)</span> &nbsp;
 				<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a>
 			</TLabel>
-			<TDivider></TDivider>
+			<TDivider style="margin-top: 8px; margin-bottom: 16px;"></TDivider>
 		</div>
 
-		<!-- 添加扩展名 -->
-		<div v-show="addingExt">
-			<div class="ui fields inline">
-				<div class="ui field">
-					<TInputText type="text" placeholder="扩展名，比如.png, .gif，英文逗号分割" style="width:20em" ref="extInputRef" @keyup.enter="confirmExt" @keypress.enter.prevent="1"/>
-				</div>
-				<div class="ui field">
-					<TimeDurationBox placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changeExtDuration"></TimeDurationBox>
-				</div>
-				<div class="ui field">
-					<TButton secondary="" size="small" @click.prevent="confirmExt">确定</TButton> &nbsp;
-					<a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
+		<div class="flex flex-col gap-[12px]">
+			<!-- 添加扩展名 -->
+			<div v-show="addingExt">
+				<div class="ui fields flex items-center gap-[12px]">
+					<div class="ui field">
+						<TInputText type="text" placeholder="扩展名，比如.png, .gif，英文逗号分割" style="width:20em"
+							ref="extInputRef" @keyup.enter="confirmExt" @keypress.enter.prevent="1" />
+					</div>
+					<div class="ui field">
+						<TimeDurationBox placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changeExtDuration">
+						</TimeDurationBox>
+					</div>
+					<div class="ui field flex gap-[12px] items-center">
+						<TButton secondary="" size="small" @click.prevent="confirmExt" class="w-[57px] h-[34px]">确定
+						</TButton>
+						<a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
+					</div>
 				</div>
 			</div>
-		</div>
 
-		<!-- 添加路径 -->
-		<div v-show="addingPath">
-			<div class="ui fields inline">
-				<div class="ui field">
-					<TInputText type="text" placeholder="路径，以/开头" style="width:20em" ref="pathInputRef" @keyup.enter="confirmPath" @keypress.enter.prevent="1"/>
-				</div>
-				<div class="ui field">
-					<TimeDurationBox placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changePathDuration"></TimeDurationBox>
-				</div>
-				<div class="ui field">
-					<TButton type="button" secondary="" size="small" @click.prevent="confirmPath">确定</TButton>&nbsp;
-					<a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
+			<!-- 添加路径 -->
+			<div v-show="addingPath">
+				<div class="ui fields inline">
+					<div class="ui field">
+						<TInputText type="text" placeholder="路径，以/开头" style="width:20em" ref="pathInputRef"
+							@keyup.enter="confirmPath" @keypress.enter.prevent="1" />
+					</div>
+					<div class="ui field">
+						<TimeDurationBox placeholder="缓存时长" :v-unit="'day'" :v-count="1" @change="changePathDuration">
+						</TimeDurationBox>
+					</div>
+					<div class="ui field">
+						<TButton type="button" secondary="" size="small" @click.prevent="confirmPath">确定</TButton>&nbsp;
+						<a href="" title="取消" @click.prevent="cancel()"><i class="icon remove small"></i></a>
+					</div>
 				</div>
 			</div>
-		</div>
 
-		<div style="margin-top: 1em">
-			<TButton type="button" secondary="" size="small" @click.prevent="addExt">+缓存扩展名</TButton> &nbsp;
-			<TButton type="button" secondary="" size="small" @click.prevent="addPath">+缓存路径</TButton>
+			<div >
+				<TButton type="button" secondary="" size="small" @click.prevent="addExt">+缓存扩展名</TButton> &nbsp;
+				<TButton type="button" secondary="" size="small" @click.prevent="addPath">+缓存路径</TButton>
+			</div>
 		</div>
 	</div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

src/components/server/OriginInputBox.vue

@@ -103,16 +103,16 @@ defineExpose({
 	<div>
 		<input type="hidden" name="originsJSON" :value="JSON.stringify(origins)"/>
 		<div>
-			<div class="ui fields inline">
-				<div class="ui field" style="padding-left: 0.1em; width:6.8em; color: grey">源站协议</div>
-				<div class="ui field" style="width:21em; color: grey">源站地址（Host:Port）</div>
-				<div class="ui field flex items-center" style="color: grey">优先级 &nbsp;<TipIcon content="优先级：优先使用主源站，如果主源站无法连接时才会连接备用源站"></TipIcon>
+			<div class="ui fields inline" style="gap: 0;">
+				<div class="ui field" style="width:112px;">源站协议</div>
+				<div class="ui field" style="width:292px;">源站地址（Host:Port）</div>
+				<div class="ui field flex items-center gap-[9px]">优先级<TipIcon content="优先级：优先使用主源站，如果主源站无法连接时才会连接备用源站"></TipIcon>
 				</div>
 			</div>
 			<TDivider></TDivider>
 			<div v-for="(origin, index) in origins">
-				<div class="ui fields inline" style="margin-top: 0.6em">
-					<div class="ui field">
+				<div class="ui fields inline" style="margin-top: 0.6em; gap: 12px;">
+					<div class="ui field w-[100px]">
 						<TSelect v-model="origin.scheme">
 							<TOption value="http" v-if="family == 'http'">http://</TOption>
 							<TOption value="https" v-if="family == 'http'">https://</TOption>

src/components/ui/TRadio.vue

@@ -20,7 +20,7 @@ if (typeof props.inputId === "string") {
 
 <template>
 	<div class="inline-block">
-		<div :class="{'flex flex-row gap-2 items-center':$slots.default}">
+		<div :class="{'flex flex-row gap-[8px] items-center':$slots.default}">
 			<RadioButton v-bind="$attrs" :inputId="inputId"></RadioButton>
 			<label :for="inputId" v-if="$slots.default">
 				<slot></slot>

src/components/ui/TSelect.vue

@@ -239,4 +239,23 @@ const onChange = e => {
 </template>
 
 <style scoped>
+:global(.p-select-dropdown) {
+	width: 14px !important;
+	height: 14px !important;
+	margin: 10px 10px;
+
+
+	mask-image: var(--svg);
+	--svg: url(@/assets/icon/arrow-down.svg) !important;
+	background-color: currentColor !important;
+	display: inline-block !important;
+	-webkit-mask-size: 100% 100% !important;
+	mask-size: 100% 100% !important;
+	-webkit-mask-repeat: no-repeat !important;
+	mask-repeat: no-repeat !important;
+}
+
+:global(.p-select-dropdown svg) {
+	display: none;
+}
 </style>

src/views/servers/create.vue

@@ -17,12 +17,12 @@ import WarningMessage from "@/components/common/WarningMessage.vue";
 import ServerNameBox from "@/components/server/ServerNameBox.vue";
 import OriginInputBox from "@/components/server/OriginInputBox.vue";
 import CacheCondBox from "@/components/server/CacheCondBox.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 import DefinitionTable from "@/components/common/DefinitionTable.vue";
 
 const serverNameBox = ref()
 const ctx = ctxRef(new Context(), {
-	refs: {serverNameBox}
+	refs: { serverNameBox }
 })
 
 </script>
@@ -34,78 +34,86 @@ const ctx = ctxRef(new Context(), {
 		需要管理员在后台设置当前用户所属集群后才能继续操作。
 	</WarningMessage>
 
-	<PostForm action="$" @success="ctx.success" @fail="ctx.fail" v-show="ctx.clusterId > 0">
+	<PostForm action="$" @success="ctx.success" @fail="ctx.fail" v-show="ctx.clusterId > 0"
+		class="ml-[30px] mt-[20px] mr-[29px]">
 		<DefinitionTable>
 			<tbody>
-			<tr>
-				<td class="title after:content-['*'] after:text-red-500">加速域名</td>
-				<td>
-					<ServerNameBox ref="serverNameBox"></ServerNameBox>
-				</td>
-			</tr>
-			<tr>
-				<td class="after:content-['*'] after:text-red-500">域名协议</td>
-				<td>
-					<div class="flex items-center gap-[60px]">
-						<TCheckboxBinary name="protocols" :value="'http'">HTTP</TCheckboxBinary>
-						<TCheckboxBinary name="protocols" :value="'https'" v-model="ctx.supportHTTPS">HTTPS</TCheckboxBinary>
-					</div>
-				</td>
-			</tr>
-			<tr v-show="ctx.supportHTTPS">
-				<td class="after:content-['*'] after:text-red-500">HTTPS证书</td>
-				<td>
-					<SSLCertsBox :v-domains="ctx.findServerNames"></SSLCertsBox>
-				</td>
-			</tr>
-			<tr>
-				<td class="after:content-['*'] after:text-red-500">源站信息</td>
-				<td>
-					<OriginInputBox :v-oss-types="ctx.ossTypes"></OriginInputBox>
-				</td>
-			</tr>
-			<tr>
-				<td class="after:content-['*'] after:text-red-500">回源主机名</td>
-				<td>
-					<TRadio name="requestHostType" :value="0" v-model="ctx.requestHostType">跟随CDN服务</TRadio> &nbsp;
-					<TRadio name="requestHostType" :value="1" v-model="ctx.requestHostType">跟随源站</TRadio> &nbsp;
-					<TRadio name="requestHostType" :value="2" v-model="ctx.requestHostType">自定义</TRadio>
-					<div v-show="ctx.requestHostType == 2" style="margin-top: 0.8em">
-						<TInputText name="requestHost" placeholder="比如example.com" v-model="ctx.requestHost" class="w-full"/>
-					</div>
-					<p class="comment">请求源站时的Host，用于设置访问源站的站点域名
-						<span v-if="ctx.requestHostType == 0">，"跟随CDN服务"是指访问源站的站点域名和当前CDN服务保持一致</span>
-						<span v-if="ctx.requestHostType == 1">，"跟随源站"是指访问源站的站点域名仍然是填写的源站地址中的信息，不随CDN服务域名改变而改变</span>
-						<span v-if="ctx.requestHostType == 2">，自定义Host内容中支持请求变量</span>。</p>
-				</td>
-			</tr>
-			<tr>
-				<td>缓存设置</td>
-				<td>
-					<CacheCondBox></CacheCondBox>
-				</td>
-			</tr>
-			<tr v-show="ctx.requirePlan || ctx.userPlans.length > 0">
-				<td>绑定套餐<span v-if="ctx.requirePlan" class="text-red-500">*</span></td>
-				<td>
-					<input type="hidden" name="isChanged" value="1"/>
-					<span v-if="ctx.userPlans.length == 0 && !ctx.requirePlan" class="disabled">当前还没有可以使用的套餐。</span>
-					<span v-if="ctx.userPlans.length == 0 && ctx.requirePlan" class="red"><a href="/plans"><span class="red">当前还没有可以使用的套餐，请先购买套餐</span></a> 。</span>
-					<div v-else>
-						<TSelect name="userPlanId" filter>
-							<TOption value="0" v-if="!ctx.requirePlan">[不使用套餐]</TOption>
-							<TOption value="0" v-if="ctx.requirePlan">[选择套餐]</TOption>
-							<TOption v-for="userPlan in ctx.userPlans" :value="userPlan.id">{{ userPlan.name }}（{{ userPlan.dayTo }}）</TOption>
-						</TSelect>
-					</div>
-				</td>
-			</tr>
-			<tr>
-				<td>所属分组</td>
-				<td>
-					<ServerGroupSelector></ServerGroupSelector>
-				</td>
-			</tr>
+				<tr>
+					<td class="title after:content-['*'] after:text-red-500">加速域名</td>
+					<td>
+						<ServerNameBox ref="serverNameBox"></ServerNameBox>
+					</td>
+				</tr>
+				<tr>
+					<td class="after:content-['*'] after:text-red-500">域名协议</td>
+					<td>
+						<div class="flex items-center gap-[60px]">
+							<TCheckboxBinary name="protocols" :value="'http'">HTTP</TCheckboxBinary>
+							<TCheckboxBinary name="protocols" :value="'https'" v-model="ctx.supportHTTPS">HTTPS
+							</TCheckboxBinary>
+						</div>
+					</td>
+				</tr>
+				<tr v-show="ctx.supportHTTPS">
+					<td class="after:content-['*'] after:text-red-500">HTTPS证书</td>
+					<td>
+						<SSLCertsBox :v-domains="ctx.findServerNames"></SSLCertsBox>
+					</td>
+				</tr>
+				<tr>
+					<td class="after:content-['*'] after:text-red-500">源站信息</td>
+					<td>
+						<OriginInputBox :v-oss-types="ctx.ossTypes"></OriginInputBox>
+					</td>
+				</tr>
+				<tr>
+					<td class="after:content-['*'] after:text-red-500">回源主机名</td>
+					<td>
+						<div class="flex gap-[30px]">
+							<TRadio name="requestHostType" :value="0" v-model="ctx.requestHostType">跟随CDN服务</TRadio>
+							<TRadio name="requestHostType" :value="1" v-model="ctx.requestHostType">跟随源站</TRadio>
+							<TRadio name="requestHostType" :value="2" v-model="ctx.requestHostType">自定义</TRadio>
+						</div>
+						<div v-show="ctx.requestHostType == 2" style="margin-top: 0.8em">
+							<TInputText name="requestHost" placeholder="比如example.com" v-model="ctx.requestHost"
+								class="w-full" />
+						</div>
+						<p class="comment" style="margin-top: 13px; margin-bottom: 0;">请求源站时的Host，用于设置访问源站的站点域名
+							<span v-if="ctx.requestHostType == 0">，"跟随CDN服务"是指访问源站的站点域名和当前CDN服务保持一致</span>
+							<span v-if="ctx.requestHostType == 1">，"跟随源站"是指访问源站的站点域名仍然是填写的源站地址中的信息，不随CDN服务域名改变而改变</span>
+							<span v-if="ctx.requestHostType == 2">，自定义Host内容中支持请求变量</span>。
+						</p>
+					</td>
+				</tr>
+				<tr>
+					<td>缓存设置</td>
+					<td style="padding-top: 8px; padding-bottom: 16px;">
+						<CacheCondBox></CacheCondBox>
+					</td>
+				</tr>
+				<tr v-show="ctx.requirePlan || ctx.userPlans.length > 0">
+					<td>绑定套餐<span v-if="ctx.requirePlan" class="text-red-500">*</span></td>
+					<td>
+						<input type="hidden" name="isChanged" value="1" />
+						<span v-if="ctx.userPlans.length == 0 && !ctx.requirePlan" class="disabled">当前还没有可以使用的套餐。</span>
+						<span v-if="ctx.userPlans.length == 0 && ctx.requirePlan" class="red"><a href="/plans"><span
+									class="red">当前还没有可以使用的套餐，请先购买套餐</span></a> 。</span>
+						<div v-else>
+							<TSelect name="userPlanId" filter>
+								<TOption value="0" v-if="!ctx.requirePlan">[不使用套餐]</TOption>
+								<TOption value="0" v-if="ctx.requirePlan">[选择套餐]</TOption>
+								<TOption v-for="userPlan in ctx.userPlans" :value="userPlan.id">{{ userPlan.name }}（{{
+									userPlan.dayTo }}）</TOption>
+							</TSelect>
+						</div>
+					</td>
+				</tr>
+				<tr>
+					<td>所属分组</td>
+					<td>
+						<ServerGroupSelector></ServerGroupSelector>
+					</td>
+				</tr>
 			</tbody>
 		</DefinitionTable>
 
@@ -114,5 +122,4 @@ const ctx = ctxRef(new Context(), {
 
 </template>
 
-<style lang="postcss" scoped>
-</style>
+<style lang="postcss" scoped></style>