From a34f403dc74e90782146f8cbb6ee62cbb1046c37 Mon Sep 17 00:00:00 2001
From: pengda <1111@qq.com>
Date: Wed, 9 Jul 2025 11:32:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E8=AE=BE=E7=BD=AE=20?=
 =?UTF-8?q?=E5=9F=9F=E5=90=8D=E8=AE=BE=E7=BD=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/site/next-line.png    | Bin 0 -> 210 bytes
 src/assets/site/step_error.png   | Bin 0 -> 435 bytes
 src/assets/site/step_success.png | Bin 0 -> 426 bytes
 src/components/domainBind.vue    | 341 +++++++++++++++++++++++++++++++++++++++
 src/views/elementGroups.vue      |   6 +
 5 files changed, 347 insertions(+)
 create mode 100644 src/assets/site/next-line.png
 create mode 100644 src/assets/site/step_error.png
 create mode 100644 src/assets/site/step_success.png
 create mode 100644 src/components/domainBind.vue

diff --git a/src/assets/site/next-line.png b/src/assets/site/next-line.png
new file mode 100644
index 0000000000000000000000000000000000000000..62d39e02fa5fd123479ea8f1b0cc2088f649d5dc
GIT binary patch
literal 210
zcmeAS@N?(olHy`uVBq!ia0vp^szA)f!3HE<mW9s-QjEnx?oJHr&dIz4a#)I;JVQ8u
zpoSx*1IVxOba4#Pn3$X(;ZX4JPiZT6_`5Uq_5XG;ZL+w`u#=rnLh_%w!NyH<_E&r@
zvyI`I>0JI{zGFjU<3a|{2M6ul+Kw^uYw~>P|H$~*;Z{A+09LiIX}@`Rc;qD{B-Q@>
zK5BIFLcmAn(+*Z$jX*GQV&dWZ@%3E1yr%L8jxcaptDbpRVA>6I2ZN`ppUXO@geCxK
CkV(4$

literal 0
HcmV?d00001

diff --git a/src/assets/site/step_error.png b/src/assets/site/step_error.png
new file mode 100644
index 0000000000000000000000000000000000000000..19ed12897af27a3e6d62caba1653dfabbb457229
GIT binary patch
literal 435
zcmV;k0ZjghP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqT}ebiR5*>LldW>XKoo_)WrD(>QcL;-arj_r0!WH&
zb!ne~=@U?@TU#ReF%=|e98b_-6NN!#hFh_OkkHI9(_?n_+&%Yi?^P5acije686wyy
z8b^8uG9{^u)%SFJ{$Az8ZhHjk8PkN81E#4BVF-Qz`#m6UYB7H)21eY@N_u^f*<4Do
z^hJ7o5x29V7+HFKktiw`r--7XllBNe9cvC5Jn6Kr!F&N9pO7f4LiI49R?CZjLYR2j
zed1{@McdW=smjm*)xC(kUTaYl>w6IB^VZ7Vv>f>IYy+rcS$PNdJuOa!j-$DAm?kJ1
zmFtQwhk>vqj_n*f@pN>@$x65}^I3!;z|KIi!4K@5vDwT@0WD6s6n+56H2cQK2i@Ik
z;0G{%heYY-{b!I)IF0hsFBi||7o+_5GNpr+es3J>wBwlKGUXgVy3U6Is4h^~BwG|4
d67^bK=U;SaAbuvf41NFr002ovPDHLkV1f`4ySe}X

literal 0
HcmV?d00001

diff --git a/src/assets/site/step_success.png b/src/assets/site/step_success.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ff9982b93b3b9572d4746af6a764d91ad999bfd
GIT binary patch
literal 426
zcmV;b0agBqP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#1am@3R0s$N2z&@+hyVZqR7pfZR5*>Lldn?(K@`V7dt;&PU?p5JOQbneEd)D8
zgaFJ{XOO>O&)|#=?F5sNvq6NafeS=%uF-skz2oGLW1R7ucE7XVx9`XIDY9sZi^Bk@
z0&dJk2(JhaJgM;abG0Y#h(YMNWoXvGJ+<^=1<x~xwt&LtQT1~l(~&@XB4#3m7)?dA
zCqhSptk`HzWVtRDCs?j`K}=e6+eZH@%tVB?2rY3P6kT0{n_9lA1ku*^AVIGVZW(YG
zI4By&!~k_4`s28XF`8CWbpU-{*%!=L>A63)cXJK8l=AU}+>=A;)_tf};NlGY00x)E
zB|1PDZc;**>~HU%FnqJZ`>VWgVY7^&EhG0X-|65(r14Zd3GIn+D`q#wV+P7%G)>27
z^ZA#N62w+MW+*esTlwHJCB{m|8*bob2H_XEW!et_wkL`%iUy!#HU#E;Gt92@4+Vmp
U9uAYWrT_o{07*qoM6N<$f-Szau>b%7

literal 0
HcmV?d00001

diff --git a/src/components/domainBind.vue b/src/components/domainBind.vue
new file mode 100644
index 0000000..8ce7a26
--- /dev/null
+++ b/src/components/domainBind.vue
@@ -0,0 +1,341 @@
+<template>
+    <div>
+        <el-form class="el-row demo-ruleForm" ref="formRef">
+            <GuipFormItem column="column" class="combo-formItem w540" v-if="domainOptions" :label="label" :class="label ? '' : 'combo-formItem-nolabel'">
+                <div slot="formDom" class="self-drop-wrap flex w540">
+                    <GuipInput v-model="prefix" style="width: 60%;" placeholder="仅支持数字、字母" @blur="inputEnd"></GuipInput>
+                    <!-- 只用作选中内容展示 -->
+                    <div @click="toggleDrop" class="point flex appendDrop" style="width: 40%;">{{domain}}</div>
+                </div>
+                <!--触发 真实下拉操作 -->
+                <!-- valueKey="id" displayKey="name" 不添加时，默认取值 value、label-->
+                <CustomDropdown slot="formDom" ref="dropDomain" width="100%" v-model="domain"
+                                :options="domainOptions" @change="changeSelect" placeholder="请选择">
+                    <template #normal>
+                        <div class="flex flex-between noraml-jump">
+                            <div class="left">
+                                <b>添加新域名</b>
+                                <p class="one ft12">域名需要在阿里云完成ICP备案并解析到平台服务器</p>
+                                <p class="ft12">如果暂时未准备好，可先选用平台免费域名，随时支持域名修改。 </p>
+                            </div>
+                            <div class="right">
+                                <GuipButton size="form" @click="bindNewDomain">前往绑定</GuipButton>
+                            </div>
+                        </div>
+                    </template>
+                </CustomDropdown>
+            </GuipFormItem>
+        </el-form>
+
+        <GuipDialog :dialogVisible="dialogVisible" :show-close-button="false" :showFooterButton="false"
+                    type="center" title="温馨提示">
+            <div class="domain-wrap">
+                <el-form class="el-row demo-ruleForm" ref="formRef" :rules="rules" :model="formData">
+                    <p class="p-info">设置自己的域名，需要做 2 步站外操作。如果暂时未准备好，或打算稍后设置，可以先选用平台免费域名，平台随时支持域名修改。 </p>
+                    <p class="p-title"><span>1.</span>域名必须在阿里云完成 ICP 备案</p>
+                    <p class="p-desc mb18">备案网址：https://beian.aliyun.com</p>
+                    <p class="p-title"><span>2.</span>域名要解析到平台服务器上</p>
+                    <p class="p-desc mb18">记录类型：CNAME；记录值：lunwen.kuailedns.com</p>
+                    <p class="p-title"><span>3.</span>域名填写</p>
+                    <GuipInput width="458px" placeholder="填写完整域名" class="mb18" prop="domain" v-model="formData.domain"></GuipInput>
+                    <p class="p-title"><span>4.</span>域名备案号</p>
+                    <GuipInput width="458px" placeholder="填写备案号" class="mb32" prop="beian" v-model="formData.beian"></GuipInput>
+                    <div class="flex flex-between">
+                        <GuipButton type="ignore" :btnstyle="{'width': '247px', 'border-radius': '4px'}" @click="handleCancel">先用平台免费域名</GuipButton>
+                        <GuipButton type="primary" :btnstyle="{'width': '247px', 'border-radius': '4px'}" :loading="show_step" @click="handleConfirm" >准备完毕，验证自有域名</GuipButton>
+                    </div>
+                    <div class="domain-step" v-if="show_step">
+                        <div class="flex mr12">
+                            <GuipButton v-if="step1 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}">
+                                验证域名解析
+                            </GuipButton>
+                            <GuipButton v-if="step1 === 2" type="text" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_success.png" alt="" class="mr5"><span>域名已解析</span>
+                            </GuipButton>
+                            <GuipButton v-if="step1 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_error.png" alt="" class="mr5"><span>域名未解析</span>
+                            </GuipButton>
+                        </div>
+                        <div class="flex">
+                            <img src="@/assets/site/next-line.png" alt="">
+                        </div>
+                        <div class="flex ml12">
+                            <GuipButton v-if="step2 === 0" type="text" :btnstyle="{'color': '#8A9099', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_wait.png" alt="" class="mr5"><span>验证ICP备案</span>
+                            </GuipButton>
+                            <GuipButton v-if="step2 === 1" type="text" :loading="true" :btnstyle="{'color': '#1675FF', 'font-size': '12px'}">
+                                验证ICP备案
+                            </GuipButton>
+                            <GuipButton v-if="step2 === 3" type="text" :btnstyle="{'color': '#FF4D4F', 'font-size': '12px'}">
+                                <img src="@/assets/site/step_error.png" alt="" class="mr5"><span>ICP未备案</span>
+                            </GuipButton>
+                        </div>
+                    </div>
+                </el-form>
+            </div>
+        </GuipDialog>
+    </div>
+</template>
+<script>
+import GuipInput from "@/components/GuipInput.vue";
+import GuipDialog from "@/components/GuipDialog.vue";
+import GuipButton from "@/components/GuipButton.vue";
+import GuipFormItem from "@/components/GuipFormItem.vue";
+import CustomDropdown from "@/components/CustomDropdown.vue";
+
+export default {
+  name: 'domainBind',
+  props:['label', 'options'],
+  components: {
+      CustomDropdown, GuipFormItem,
+      GuipButton,
+      GuipDialog,
+      GuipInput
+  },
+  data(){
+    return {
+        domainOptions:[],
+        prefix: '',
+        domain: '',
+        dialogVisible: false,
+        formData: {
+            domain: '',
+            beian: '',
+        },
+        rules: {
+            domain: [
+                { required: true, message: '请输入域名', trigger: 'blur' },
+                {
+                    pattern: /^[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/,
+                    message: '格式错误，请输入正确域名',
+                    trigger: 'blur'
+                }
+            ],
+            beian: [
+                { required: true, message: '请输入域名备案号', trigger: 'blur' }
+            ],
+        },
+        show_step: false,
+        step1: 1, //1正在验证 2验证成功 3验证失败
+        step2: 0 //0等待验证 1正在验证 3验证失败
+    }
+  },
+  watch: {
+    options: {
+      immediate: true,
+      handler(newVal) {
+        this.domainOptions = newVal;
+        if (newVal.length>0) {
+          this.domain = newVal[0].value
+        }
+      },
+    },
+    formData: {
+      deep: true,
+      handler() {
+        this.show_step = false;
+        this.step1 = 1
+        this.step2 = 0
+      }
+    }
+  },
+  methods:{
+      toggleDrop(e) {
+          this.$refs.dropDomain.toggleDropdown(e)
+      },
+      inputEnd(){
+          this.$emit('handleEvent', {
+              prefix: this.prefix,
+              domain: this.domain,
+          })
+      },
+      changeSelect() {
+          this.$emit('handleEvent', {
+              prefix: this.prefix,
+              domain: this.domain,
+          })
+      },
+      bindNewDomain(){
+          this.dialogVisible = true
+      },
+      handleCancel(){
+          this.dialogVisible = false
+      },
+      handleConfirm(){
+          this.$refs.formRef.validate((valid) => {
+              if (valid) this.verfiyDNS();
+          });
+      },
+      verfiyDNS() {
+          this.show_step = true
+
+          const that = this
+          that.$http('POST', '/agentnew/ajax_check_dns', {
+              domain: that.formData.domain
+          }, {
+              headers: {
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(response.status){
+                  that.step1 = 2
+                  that.step2 = 1
+                  that.verfiyBeian()
+              } else {
+                  that.step1 = 3
+              }
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+      verfiyBeian(){
+          const that = this
+          that.$http('POST', '/agentnew/ajax_check_beian', {
+              domain: that.formData.domain
+          },{
+              headers:{
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(response.status){
+                  that.addDomain()
+              } else {
+                  that.step2 = 3
+              }
+
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+      addDomain(){
+          const that = this
+          that.$http('POST', '/agentnew/ajax_add_domain', {
+              domain: that.formData.domain,
+              beian: that.formData.beian
+          },{
+              headers:{
+                  'Auth': this.token
+              }
+          }).then(response => {
+              if(response.status){
+                  this.domain = that.formData.domain
+                  that.domainOptions.unshift({
+                      label: that.formData.domain,
+                      value: that.formData.domain
+                  })
+                  that.show_step = false
+                  that.dialogVisible = false
+                  that.$message.success('添加成功');
+                  return true
+              }
+              that.$message.error(response.info);
+          }).catch(error => {
+              console.error(error, 'error')
+          })
+      },
+  }
+}
+</script>
+<style scoped lang="scss">
+.w540 {
+  width: 540px!important;
+}
+.mb18{
+  margin-bottom: 18px;
+}
+.mb32{
+  margin-bottom: 32px;
+}
+.mr12{
+  margin-right: 12px;
+}
+.ml12{
+  margin-left: 12px;
+}
+.mr5{
+  margin-right: 5px;
+}
+
+.combo-formItem-nolabel{
+  ::v-deep {
+    .form-item-top{
+      display: none;
+      height: 0;
+      margin: 0;
+    }
+  }
+}
+
+.combo-formItem {
+  ::v-deep {
+    .form-item-bottom {
+      position: relative;
+    }
+
+    .select-trigger {
+      background: #F6F7FA;
+      border-color: transparent;
+    }
+
+    .is-open .select-trigger {
+      border-color: #006AFF;
+    }
+
+    .el-input__inner {
+      border-radius: 2px 0 0 2px;
+    }
+  }
+
+  .self-drop-wrap {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+  }
+
+  .appendDrop {
+    height: 38px;
+    align-items: center;
+    border-radius: 0 2px 2px 0;
+    border: 1px solid #DFE2E6;
+    border-left-color: transparent;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0 30px 0 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &:hover {
+      border: 1px solid #006AFF;
+    }
+  }
+}
+.domain-wrap{
+  letter-spacing: 0.08em;
+  font-size: 14px;
+  .p-info{
+    color: #626573;
+    margin-bottom: 24px;
+  }
+  .p-title{
+    color: #23242B;
+    margin-bottom: 8px;
+    span{
+      width: 23px;
+      display: inline-block;
+    }
+  }
+  .p-desc{
+    color: #8A9099;
+    padding-left: 23px;
+  }
+
+  .domain-step{
+    margin-top: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index 083487b..939e9ac 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="main-content12">
         <div class="elementWrap">
+            <domainBind label="域名设置" :options="domainOptions" @handleEvent="handleEvent"/>
             <PromptText text='这是一个提示框' :type="1" />
             <PromptText text='这是一个提示框' :type="2" />
             <PromptText text='这是一个提示框' :type="3" />
@@ -577,11 +578,13 @@ import GuipFormItem from '@/components/GuipFormItem.vue'
 import SvgIcon from '@/components/SvgIcon.vue';
 import PromptText from "@/components/PromptText.vue";
 import DevicePreview from "@/components/PreviewTab.vue";
+import domainBind from "@/components/domainBind.vue";
 
 
 export default {
     name: 'HomeView',
     components: {
+        domainBind,
         PromptText,
         GuipTextarea,
         GuipTable,
@@ -945,6 +948,9 @@ export default {
         }
     },
     methods: {
+        handleEvent(data){
+            console.log(data,'data')
+        },
         // 手动copy内容
         handleClickCopy(){
             this.$copy(this.form.input1, {