瀏覽代碼

style: 选择分组与添加分组弹窗样式修改

zhaonan 4 天之前
父節點
當前提交
d6fbd38d5d
共有 4 個文件被更改,包括 490 次插入11 次删除
  1. 446 1
      mock/index.ts
  2. 6 0
      src/components/ui/TTag.vue
  3. 15 4
      src/views/servers/groups/createPopup.vue
  4. 23 6
      src/views/servers/groups/selectPopup.vue

+ 446 - 1
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;

+ 6 - 0
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 {

+ 15 - 4
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>

+ 23 - 6
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>