From b9ab22dad170349cfab009ea71d98ed1dabbe000 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 27 Oct 2023 23:01:00 +0800
Subject: [PATCH 01/77] =?UTF-8?q?code=20review=EF=BC=9A=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/customer/CustomerForm.vue | 1 +
 src/views/crm/customer/index.vue        | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/views/crm/customer/CustomerForm.vue b/src/views/crm/customer/CustomerForm.vue
index 52ff923a..4c04617e 100644
--- a/src/views/crm/customer/CustomerForm.vue
+++ b/src/views/crm/customer/CustomerForm.vue
@@ -1,5 +1,6 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <!-- TODO @wanwan：表单按照 docs 提供的再改下 -->
     <el-form
       ref="formRef"
       :model="formData"
diff --git a/src/views/crm/customer/index.vue b/src/views/crm/customer/index.vue
index 15a0d144..7db9bb03 100644
--- a/src/views/crm/customer/index.vue
+++ b/src/views/crm/customer/index.vue
@@ -1,6 +1,7 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
+    <!-- TODO @wanwan：筛选条件，按照 docs 的再改下 -->
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -64,6 +65,7 @@
   </ContentWrap>
 
   <!-- 列表 -->
+  <!-- TODO @wanwan：列表，按照 docs 的再改下 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />

From dc5cf9f24cb6c9cf71d293e24df147d790ea2925 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 29 Oct 2023 17:55:39 +0800
Subject: [PATCH 02/77] =?UTF-8?q?code=20review=EF=BC=9A=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/customer/CustomerForm.vue | 5 +++--
 src/views/crm/customer/index.vue        | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/crm/customer/CustomerForm.vue b/src/views/crm/customer/CustomerForm.vue
index 6d08450e..6e5cd62e 100644
--- a/src/views/crm/customer/CustomerForm.vue
+++ b/src/views/crm/customer/CustomerForm.vue
@@ -1,6 +1,5 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <!-- TODO @wanwan：表单按照 docs 提供的再改下 -->
     <el-form
       ref="formRef"
       :model="formData"
@@ -9,6 +8,7 @@
       v-loading="formLoading"
     >
       <el-row>
+        <!-- TODO @wanwan：name 参数校验，必填 -->
         <el-form-item label="客户名称" prop="name">
           <el-input v-model="formData.name" placeholder="请输入客户名称" />
         </el-form-item>
@@ -70,6 +70,7 @@
         </el-form-item>
       </el-row>
       <el-row>
+        <!-- TODO @wanwan：地区的多级选择，可以参考 UserForm.vue 的 所在地 areaId -->
         <el-form-item label="地区编号" prop="areaId">
           <el-input v-model="formData.areaId" placeholder="请输入地区编号" />
         </el-form-item>
@@ -77,7 +78,7 @@
           <el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
         </el-form-item>
       </el-row>
-      <!-- TODO @Wanwan 少一个负责人字段，默认先选中自己 -->
+      <!-- TODO @wanwan： 少一个负责人字段，默认先选中自己；可以先参考 TaskAssignRuleForm.vue 的 formData.userIds；注意，新增的时候，可以选择；修改的时候，只展示 -->
       <el-row>
         <el-form-item label="下次联系时间" prop="contactNextTime">
           <el-date-picker
diff --git a/src/views/crm/customer/index.vue b/src/views/crm/customer/index.vue
index 58543449..ace56dac 100644
--- a/src/views/crm/customer/index.vue
+++ b/src/views/crm/customer/index.vue
@@ -1,7 +1,7 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <!-- TODO @wanwan：筛选条件，按照 docs 的再改下 -->
+    <!-- TODO @wanwan：看看怎么表单可以对齐一点； -->
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -27,6 +27,7 @@
           class="!w-240px"
         />
       </el-form-item>
+      <!-- TODO @wanwan：筛选字段，加所属行业、客户等级、客户来源 -->
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -102,7 +103,8 @@
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.lockStatus" />
         </template>
       </el-table-column>
-      <!--  TODO @Wanwan 距进入公海天数    -->
+      <!--  TODO @wanwan 距进入公海天数    -->
+      <!-- TODO @wanwan：操作要 fixed 再右侧哈； -->
       <el-table-column label="操作" align="center" width="160">
         <template #default="scope">
           <el-button

From e9ff8d323752dd0df8bebbb71b8c3fe4f6e8caff Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sun, 29 Oct 2023 22:03:24 +0800
Subject: [PATCH 03/77] =?UTF-8?q?=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/promotion/diy/page.ts            |  35 ++
 src/api/mall/promotion/diy/template.ts        |  41 ++
 src/assets/imgs/diy/statusBar.png             | Bin 0 -> 8917 bytes
 src/components/ColorInput/index.vue           |  54 ++
 .../DiyEditor/components/ComponentLibrary.vue | 196 +++++++
 .../components/mobile/Carousel/config.ts      |  44 ++
 .../components/mobile/Carousel/index.vue      |  75 +++
 .../components/mobile/Carousel/property.vue   | 125 ++++
 .../components/mobile/Divider/config.ts       |  29 +
 .../components/mobile/Divider/index.vue       |  29 +
 .../components/mobile/Divider/property.vue    |  80 +++
 .../components/mobile/NavigationBar/config.ts |  38 ++
 .../components/mobile/NavigationBar/index.vue |  60 ++
 .../mobile/NavigationBar/property.vue         |  63 ++
 .../components/mobile/NoticeBar/config.ts     |  39 ++
 .../components/mobile/NoticeBar/index.vue     |  26 +
 .../components/mobile/NoticeBar/property.vue  |  77 +++
 .../components/mobile/PageConfig/config.ts    |  23 +
 .../components/mobile/PageConfig/property.vue |  34 ++
 .../components/mobile/SearchBar/config.ts     |  35 ++
 .../components/mobile/SearchBar/index.vue     |  80 +++
 .../components/mobile/SearchBar/property.vue  | 100 ++++
 .../components/mobile/TabBar/config.ts        |  91 +++
 .../components/mobile/TabBar/index.vue        |  58 ++
 .../components/mobile/TabBar/property.vue     | 161 ++++++
 .../components/mobile/TitleBar/config.ts      |  65 +++
 .../components/mobile/TitleBar/index.vue      |  80 +++
 .../components/mobile/TitleBar/property.vue   | 115 ++++
 .../DiyEditor/components/mobile/index.ts      |  61 ++
 src/components/DiyEditor/index.vue            | 539 ++++++++++++++++++
 src/components/DiyEditor/util.ts              |  59 ++
 src/components/UploadFile/src/UploadImg.vue   |  14 +-
 src/router/modules/remaining.ts               |  28 +
 .../mall/promotion/diy/page/DiyPageForm.vue   | 114 ++++
 .../mall/promotion/diy/page/decorate.vue      |  99 ++++
 src/views/mall/promotion/diy/page/index.vue   | 189 ++++++
 .../diy/template/DiyTemplateForm.vue          | 115 ++++
 .../mall/promotion/diy/template/decorate.vue  | 134 +++++
 .../mall/promotion/diy/template/index.vue     | 225 ++++++++
 39 files changed, 3425 insertions(+), 5 deletions(-)
 create mode 100644 src/api/mall/promotion/diy/page.ts
 create mode 100644 src/api/mall/promotion/diy/template.ts
 create mode 100644 src/assets/imgs/diy/statusBar.png
 create mode 100644 src/components/ColorInput/index.vue
 create mode 100644 src/components/DiyEditor/components/ComponentLibrary.vue
 create mode 100644 src/components/DiyEditor/components/mobile/Carousel/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/Carousel/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/Carousel/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/Divider/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/Divider/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/Divider/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/NavigationBar/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/NavigationBar/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/NavigationBar/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/NoticeBar/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/NoticeBar/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/NoticeBar/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/PageConfig/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/PageConfig/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/SearchBar/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/SearchBar/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/SearchBar/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/TabBar/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/TabBar/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/TabBar/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/TitleBar/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/TitleBar/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/TitleBar/property.vue
 create mode 100644 src/components/DiyEditor/components/mobile/index.ts
 create mode 100644 src/components/DiyEditor/index.vue
 create mode 100644 src/components/DiyEditor/util.ts
 create mode 100644 src/views/mall/promotion/diy/page/DiyPageForm.vue
 create mode 100644 src/views/mall/promotion/diy/page/decorate.vue
 create mode 100644 src/views/mall/promotion/diy/page/index.vue
 create mode 100644 src/views/mall/promotion/diy/template/DiyTemplateForm.vue
 create mode 100644 src/views/mall/promotion/diy/template/decorate.vue
 create mode 100644 src/views/mall/promotion/diy/template/index.vue

diff --git a/src/api/mall/promotion/diy/page.ts b/src/api/mall/promotion/diy/page.ts
new file mode 100644
index 00000000..255015d2
--- /dev/null
+++ b/src/api/mall/promotion/diy/page.ts
@@ -0,0 +1,35 @@
+import request from '@/config/axios'
+
+export interface DiyPageVO {
+  id?: number
+  templateId?: number
+  name: string
+  remark: string
+  previewImageUrls: string[]
+  property: string
+}
+
+// 查询装修页面列表
+export const getDiyPagePage = async (params: any) => {
+  return await request.get({ url: `/promotion/diy-page/page`, params })
+}
+
+// 查询装修页面详情
+export const getDiyPage = async (id: number) => {
+  return await request.get({ url: `/promotion/diy-page/get?id=` + id })
+}
+
+// 新增装修页面
+export const createDiyPage = async (data: DiyPageVO) => {
+  return await request.post({ url: `/promotion/diy-page/create`, data })
+}
+
+// 修改装修页面
+export const updateDiyPage = async (data: DiyPageVO) => {
+  return await request.put({ url: `/promotion/diy-page/update`, data })
+}
+
+// 删除装修页面
+export const deleteDiyPage = async (id: number) => {
+  return await request.delete({ url: `/promotion/diy-page/delete?id=` + id })
+}
diff --git a/src/api/mall/promotion/diy/template.ts b/src/api/mall/promotion/diy/template.ts
new file mode 100644
index 00000000..72eea41c
--- /dev/null
+++ b/src/api/mall/promotion/diy/template.ts
@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+export interface DiyTemplateVO {
+  id?: number
+  name: string
+  used: boolean
+  usedTime?: Date
+  remark: string
+  previewImageUrls: string[]
+  property: string
+}
+
+// 查询装修模板列表
+export const getDiyTemplatePage = async (params: any) => {
+  return await request.get({ url: `/promotion/diy-template/page`, params })
+}
+
+// 查询装修模板详情
+export const getDiyTemplate = async (id: number) => {
+  return await request.get({ url: `/promotion/diy-template/get?id=` + id })
+}
+
+// 新增装修模板
+export const createDiyTemplate = async (data: DiyTemplateVO) => {
+  return await request.post({ url: `/promotion/diy-template/create`, data })
+}
+
+// 修改装修模板
+export const updateDiyTemplate = async (data: DiyTemplateVO) => {
+  return await request.put({ url: `/promotion/diy-template/update`, data })
+}
+
+// 删除装修模板
+export const deleteDiyTemplate = async (id: number) => {
+  return await request.delete({ url: `/promotion/diy-template/delete?id=` + id })
+}
+
+// 使用装修模板
+export const useDiyTemplate = async (id: number) => {
+  return await request.put({ url: `/promotion/diy-template/use?id=` + id })
+}
diff --git a/src/assets/imgs/diy/statusBar.png b/src/assets/imgs/diy/statusBar.png
new file mode 100644
index 0000000000000000000000000000000000000000..b85562e4236852358c93161735671f8f0466db71
GIT binary patch
literal 8917
zcmc(F^;;ax5-zd?hs6o*?h**@9^BpCEy3O0J-9<~hsE831a}MWF5zy@z0di+^B3It
zVV>FQ-m<Cbu70Z`6y+t65%3ToARv&XrNopWAfU^@&zx{j;Cny2k{<*F352wmu<AF+
zv-PhN9BN&#mx#u_f%?4e;-}$onze=(a5cvIvfc*xB>8|CV`C1y6aa=OM<gX4IWCMa
zX0ov)WCu<M8Jwn&uvK74fwN#*k{4S>PR6>$*WBN3xxYL7Y|SmEKD!+7{(gAz@iQ~$
z>iF|~@=l*i0t5sK0pXy8N#FnhB(*DOOWsWehCi79{`zO=l^BW?qy_tbC;dON4O9Sd
zlhY~7CE<U_;CayhL-_wVk8xo@?SL%kANzm+Dv2#-zo&5rzn9g9DV~#AS?0IZ%|G`w
zes4BAKV0lv2eEb5cCcGo*U#)9dSC@Ei5^;q)phJR$Kgf1ErgkU{>7|z1^Bp2{QlTa
z{O7W9PX1-;E9fRn@D&msbl!gQ>6iG%;}92U($3yxv17w6P0!t9ZI|ewHjMvN{%iZ(
zeA4pi^GQu^`%N@q4d~fgKrG~1f~$QdRma|ATxY}iwD#cj!tdS7wqeEaW|C{uwqf#k
zI%Sz<)bGzt?xMa|H6q9AHLYcq!c(hh%MBG*TSP9sV1G(4sRcaLJ1HETMsnO!IB~py
zGgn$$!pSx1;Qkz!t<}L{bZLnK(%rkoiJJY2r505K1*OWtQHR{Gi02<PFF`$c!g*2{
zTDU;{9f?tvw-rS;41}Bnw;8lVan3JfPU3vS&0-?aa_dHT7#rnmxrK28&ltIn1985$
zg<0#T=3HGzUt(B{9`-HOd%6!YZT?)v`SI<b#eEx<)xUoIEl8|x!rbk`mc_Q?bzENR
zdul@ba-`s=ZBFI=c4{H`;t!2-m~H9u+u;3qvHSh)B88O;HO4;ZL&o=Dg}D11GgSHa
z6NC56{@a_}_t)!j=I+z_aqm@W^gl15({>JCI_Kl=t9C8BvAi39?pt!bm8RG#Z;_#F
zFd!@5r@?N!@O|h&WbTar(7o7oF1`&%Ist<$5hYQOMzLFl$5ZN{IT?u_-;gD5hM(b7
ztgysR?JSWCno~;D&~*xNKxvLxe?8#3uvuPlaJ=Erd5$bGe$qz1W{0cd1VoAfc|LS1
zd~14|bntb#U$(%wd|CS~0FH+o>blcFe>wz9>VoGySbocs>J}n;C(O(tP!mB(5lw2Z
zRcDyMZ9a5Gxd&H7_jRa(-}9W{%kuQO*XE1Bg~#-&+oIluV;HZTGvlPwL2JylzW3GO
zU;j)ZRHIY)Tm})p`or@1n`iAXbRl>~)}^itPCjltfT(@-dGtN@Q^L0>g1ql44c=B3
zLFOrPvrA)O53MU6OXE#1g{t&TyiOzMx=ekRbca}W(@Rx)(kzkhz10>Hu-`}n-BO|(
zD+%n8qW1b<Z3#qVI@uo)0T!sBCZN?^Uay7`^>m#_DWN_%3SnP;eyVpnSx5jGjk8AM
zmkYk#&I!IhO^+i9fFq#P?i}p+ICoZLp6zs#*r$DFKWQ^!@5|mm8WlKR!X3Je`{ous
z*BNo9?YcOh)1erANd=AjY`;HG#7`rVn#L>Uas2m=br{+p2cHw2+@}c(rq(Se^E=KO
zj~JlrCT+bST$LvPsM7Z`s^ELQ<}&TGM^4<f>H89cu40<TDQT75ukZFtjpAIrr5$Vi
zx=fNE!Rd6*f=_efQAv_8#K721irowx1b<X=pH;^IULOZj=c3+cK6Ch^)$UOXTt&or
zOqc{uOW;R!pqWza{i^Z3+glluqv7z}1=~g3wH<UftFg8<qf#|Nq+yK`pI@oKy$#^n
zNmh|>d+54Yhd*7SwUgPQ&sNl`iD>pkk;{QM>RQVR_*B503`%_f2RiZFp(JW!_97|b
z15WqjAgb?W5c@P=QoLp|l@(!Jtig_`TlfBm|J&oR;KA?~i1(~<jvpKwDX2<|Pp0H>
zRd|3y$b3ZCn`ri_Jf60N;HYQwY&cr1UX^v1Y5taV_tk*bBNn{qg}=;`<ar`G*;Q{f
zE4yy$)pnR{BRFtANi!-!AxT&6QwT1rwg>JPI!-JrmNox$EB!K?uFfh--tZCC@3FsS
z**vSxf>lQ*T5r3BcQ6zgf5=@rh@_SdjmDRXl;>&yBkHF|RRy5-_^#k%_J&Cuzq(Yc
zaof1wd7vARKcQyx{m(<EJ%g4O9lb%v5=k41&o-jL&xBba9k+pF*UuN7H)H*#(>~`e
zcNM{EIB1Q3A2Csui^d4Z)|c3=$Ezu;o9a}4@?lPaUje<c0;gL=_(Ae<^W`zvi9YRU
zPeT=7q8Iv(22bVkKIzmUS15Bpa<;FopWp9M3oc{%JdGQa6p{$86MUk)%CR5v9EE}C
z(>ub4%w^j4*?>qZW`~$t{967}Eq=&ekQyRhf~3ngM6!_Ue_rk2V}qy>IuqRHPg$#4
z(48$6)f60D?Myti+|vDaRx0>*)X9}^P-%Ca(mroh>I2lggR51z7Rd##YFL%<T_Xz-
zAjO=4$S-6z1ytx3zM$J;=9C$mm1yZ6BaM-ZQR-Z|W7gBDS|?WDg3fd<9gzvEXz33Z
zHlkfDJ@R2A^$M-L<J1V8a)n0(DE{zrBHn{P9xo3slp&9@T<&25#Kj<B?~KyA!HW+z
z88=;LG6Y>;X|YB6BQ@VPd@|C4u=gc<2FB}YA@Lhcdvr_0fjU908jo;mnwa1|twMsT
zuqi9H^K*=YH*`RLCU;}vuTaJ=sXD3OPQ!$fF<XU^x<>@$Bt%Or`V=8*O+f9y(#+4#
zq|6j`x(fX6K|1m-1vF$Z2%j#U0eX);SSiuVOK1nHJ(R6H+}(%b%mrmIZC~JV96U&p
za$QLyYQ*vtHpSa5xM^f}huEFHOZLa-(4bHJZ9BoAidoE`+fu;{EZ)fL>n=<*?eNqN
z<Ua%-bjdiPDa#Gf7|C~3BmLJ$>Z|@nl1|mhVoggG<AUQR2tVgd*bo;|IzRVyk2?2x
zz7#h|19Y7-?R~(0@oktlm5D&sI>5(sn0LczFG2FW^JdBwrjC%P)+6~eNvnXaTbjH9
zn8-Kz!A!@rAbE_{ia@(hUN8DnmLn?t3BxH_%zF_vzjSuQIO9~2r$hRqGC9%bo;%qE
zH~$$P7^3OtV>asp>THWlm;g0@e~wsmT64TBvd(DE2pc_|N=BiV^RL}mI5MMBaU<Pn
zpC~Z(cyE7-&KOikn6U^bc2tIAieujnrl9g&3JLExk3@vufYT1hyKLguEm$Y@iTs~h
z2r<q1LWfKqMDPT9au8`-<+IS=lqf;oCcC>JZM=r>UlWm!i#z*;tMIIZS>w2O;8IY3
zI3=FDIEc<UUnud4<47fF8GUU$pGUAxQnQ^P%;d>4>*cL8Wn6fB*xW>S`h7g}WUm>%
z`F8%*;ALe|hTpLd$$t52R{yaNhsgJF`?Zq`bQLr0G3COb2uc0YW`BxtB8#*qpnqSV
zM(Dm|gmja&`D!lPkjWIKY4%;zTbRoW<T7O`Y#2l0e_W@gTErmZ5!~ppUC#<o@r_Si
zjJ~rbBJ9vBs0J@$UbZwNN&Y9NB7!6dns)*(r#JU4-FmcsO>#MBVPCH^^e_=A9A)cT
zX+Hi!hmg>OeP(Oth*10?g)Y0iI7@PyKJdd4(`9v$0i3&N3kgYtx59gzcU*wN2%N(;
zcgrpd`o1xyMs$zSa?Xw8Ids3>Ka*K|PnCrBE)5*udS*iU0r6~h%5i3^{)}xEd^7DN
zpls9R#x7e?n{PP9q#lAXi-QTOL?=1zb7a%gd_>_r_4nc!HaKoJQc8gAs+)%_wN#kQ
z6z%Gvm9TWz+6b@7VnjXkO;)L36TSejWwEF4HV>M<(e7iLDUrWKTk!RZ46wcQ;jg%u
zt;vt~&1M)=QGOpt)r_)_pbVd?4@|8RfpIyEUQC3|RZgx(hK|nk5=iJ0Uj7^?!Or@G
zn32%+u+h<A=@YqJA`8@1fm2L|A_5@yitlRo9a6sp@OqlVT%}}u93gLVEaVB+7QD?z
zt&>~RAcS|Q{PJ`J34MjntoQr5UQPU%S4X}+iK&=)Lida?Nn)LKC{V&3K?9YBRYRj*
zj_zy1!Ldn;{FpRQK6T$TVlwsKo^xcHq}CnSL#&D!K8UWb-m3D=3IYo;yab3pYR%6#
z)|%ww?JrE-$)Q|#@YsmT*@yAzn=BE`NExOlbOzcmr-;!H-CGf%x2me1=D7UUsuY}A
zFXR6E&K;~87FF3h#yb?ewGmL-ic{>_H~|kVCSF*zGnzJH!?Eq$N?YeZn!@gs*2n#-
z0+cNsft_*cyoK)Tl$!7WmD|1_YvtO+bM4N8jOu5MDB_<N9xQ|EymZm(E4{;dYdeLe
zmFTS`ZFM4|d$rIie<uIbqFD8%Lf9M}`7&KyKS^oWXe*n(k}8;D$-<Cuh}m3+AsYlf
z`N$yit4aOj8ONmvAuz@oP?XJ4hWtV`OvENd#EGj`63BHMo#=0j7qgp!mg7IJno6NC
zPUilJXk+x$XchO9U`9~&P?}5v9~M`iI%UF#aOPEM80iS>r$C&}9=O8D5G&Ta6ZCU8
zJ>4td<~DC)VI@A~LbjU(>q~Ijh+zRhQ7#QaolV<l28~`#GX#1I1gLEkp1&juU>r!Z
z#-l75fyl+K*_xX*F%#MgV7mT-^*G;vsjdwx%wB8l`g1FAc<p7yS<N2vJG_w_6^HwH
z)M4k|J|zg<CFPE%E7#upH=p_DsQM@r&24j0*{KEpiPrJ`htMWdGy}|}5DetZ*vIR=
zBAG!wT#5kw0S(-t5t`Q39-cAhisK|BQ`sdY)uoE2HCA)_RlXUsAj9c<IP^+WYFs>)
ze!h|QubW+ShN!w4C@=veia<lubXar^0q9zikRr_&W4^Jh2+I%V{aLdg1<B{n@uIG1
zSV$T=Z6HaRHOnM*@SC=3n*1VjJ1spWVwj`K+~ZU8L|d1McoK99uTF`J8}`Mx>)@E&
z2Bbz*X1*03#Jf9>ejhX%jF~?9Zk%|84p2vi0$4w4169oRm_l&I9KYh(@I^;nzFX|I
zcrJcJ<DqXB7gX(A;lpXSmE&mPGgU`<qSdELm4qQ(YhR61&wvj7QZTNli7lu*`CAy4
zu;{iRu8B*b<>zYrZ2`W<7qihDM8epvY_Km)6a;HNOk{cIhN%XN9^RJnpIOoDc77nn
z9ZuZ&O}i)V!l>eb+&s5y|H>$Sb&TzJHFLf<04uC9VF>8OXI8zI^kzun)caIx@t{Cq
z)#!B(K5w(YLm@%i`A^hAk`>xYSK`#mI{YN!Q!}Pl4!p7IC%#YrlsfABjYG`45#1n0
zNz_P*jG?EegQ^I6pv7%S%a^XaZ=}vq$+Rjh!NqOOoYe{;OyFbec`b-;vR2=-T&(n1
zJVlGOxIhd9)6Tv3Gu^ED2p^!%55-2|3MUZhdjFIiQq7}{ha>06i2$oX)yK%nfP7n^
z3CFuG!i$wlz)#ZFX}`fd7&3n>dmr-akcT5jJ}(at@ylKbQ8Vuf*|HQ>*+?^Yik<0p
zG7#0G$7CSz#3uYvhD>pJj1J&5Xb2GG@u}HwZA#6Asra)VdX*t6G1H$uQ5~|uSNKaE
zJ3CADA**)wo01Xg@VC;$0>m(xfKC|gEHiR27Ew$lbfgl96n$8wtrKfz1Gw+Mfe6`_
z{#Yjw@@P$)DH|r$_sCRG&Agi*)qRybam9eB)?n;8wA@9WO+Gn5R$}(uy*{U2EuG&c
ztU7kc>4Xw7?59*RR{znq<xz>ce0;>691H!)zNHK~K*@U3_V3Gxga|0$I)p`Pn$}M%
zB-7P?P8Kf1gU7Z_SK;TeT`rU*1r<AO_YzsD<<j;@UJkA_Uf~%sv5GKkSO`%p-8g;=
zS5<S0b3zgnkBuRh6r;pzz9@?7Fu2X}tU`rCF&L>rGbs8(h|8`hzbg+%7jA%(>jsh>
zd<v1@e_1nRJ~4`)_rQ$&yoqrabD+DBTet%<54?j4e%ms<>Zd^VAWdh@8jxGDdNVqn
zja{fLOH8F)=o7)0Id`V4w%Qao^8;$S0)mC+5%Zg+@*i~Tg@WrWKNw3v5Ejta>10TH
zd5=-57+XVYBDx1&(eOT1)<^2I7iss@HWIwlv3U-aFS8d1BbAn30oU;Kjo&T#hT<5-
z&L=w^WctMUtOq+_fLn$wci3rHZ6_q?;zTjAi>b?C3@MMqzq5V?6H#*hD>cJC&hL!;
z#n#5&^rzL<`dA;RDAnY`V%8lS)ZACK8qXBm+$v1u5@wCH{to4}Vr!ALFW18+?g-3Q
z@RDfziKF?OkL}kYV{B$I&r_=&Scr8P^BDT`RRd{E_ZtV=BlL1mYbg{UW0ndFiVM|m
zBj%pY@)9*zqcjf_150t%tEclV00STL$-9NVsZs~RMe{=ZDVvBJKBN)-dU~=}bIJwd
zF1lbtFS#C`Ay+2@i8Sd0zVId>DRGHw<W1}pg%=nV>)DXXU3^G==TSBpu4HHvU!4d&
z#U+#a@W#-mBZPrDljdt^TNYT4!Fe0pWKlfIIlkRNq-|feEVZp~r02Q@P0u0CPaZ?M
z)IU`oc)9H*>$Ff<jT`{);C_=x#Y(CO_q-sxRq1t;iIG2Z=zF!Nvwp)44s|N1^h(q$
zc@2&Su9k77&0?p|rdj#K=i%bG>iB({nvhn-CG!%I7?oNDO$5cgmY;W`^+?da>;D2#
zv=U&YsWuH7sV7q+mAXfz?{0Fymzd&BmNVTpS7PfEgy(V9*sJgGK0j(x_D;?*%zbK(
z<gK@^cb@0(V<gx)kNqAi(jwCdow2AEtBv8VO|w%Y!d>QaX2yvdjMFqfQaNbqk@4Y#
zCVGH}&aez#-NF^YCawCqH*^x4UHykWBbzy$^HObkwkLT#8o*rGzlp@`&uQ4a3R)l0
zM!%30tz@bY_dtiiYcDc}$llp)d1+-6z$^|4FN?HRhHtby+@VtVtd#&?*SMTw4563P
z&uRHUYvK!yM!Mv)6uOoFqw$UTxso<{xK>#Lu!05C`%sA0B*;q%FJ_)Va21R>x{~>m
zD&pbN`OFUc5URnRT3YE22}3Aq0wgf2fI%}?<1-?-96yjLJXATiI-J)({2ndrjGcw{
z)+S<DIFTj|i)S53W0x~~ibEm@LV3Lm6J$`AGRcdm41H_|Rz!>7m)%uBtfZ$rej3)^
zwxgHs8G^RcG;s>TY)Zyr;lZF+XnWAvxW+ch@@#Z8*c_wSLpk=9)#4r&EMrW0)Gl0@
zgM=mMS(A~Jp-Kf_Aos3SYT>vngbs2Vh0Z;qM}ZN@6Gq9zo+QMR>aV2u!iMgEaIA+!
z3eR(4>ku`?lM+lBe=#+PofFJ?xCG2KLKbLlN(XGt+XekLkwn?z`J)tFiZ9BxDWcq5
z%ehh9_;W~KzMn9ej(dHDznlM5l)l7gG3)~q`f(71$eJr+mmhFsJZkv^P0{+wVe{3|
zi6rk%>*~Oxfe^634V5fG3hJ}iYs5eXG!ihz$l?<uqmZ__!i*B0S(X+)a%eFzwEg-J
zV#!lBMHX|KvUea_J@d^qFs)09VVB}QZ(M@pLgsb9mGA!YI<4EAvg={t_4i{^2@FgM
z(}Cu0bpI|h%avQ!n?dF?mU?d%Etmb;;q%Pc6ry`supwjbN{@_q=0`?8H7%WW2Tqn4
zS+lO<4tULk4Vj^2>;{Xc%%XN4Y+3)#coPDRDJ8{ah3h<mu;T2fj4F+U7;x%FB2=HA
z@fYhj&VwsNg)atrOJzI4iHtU~;6gh(WnoRvz#}Ebq?XN!OHud)66ZSh!8g|SK%4aM
zHEN?|7hC{~g}+=aO|Gfb673NEaz+_7u(HBqg6%ll1^v)IgT;$EVhad)#LIPOvx}Qj
zl=NXA{R5Vo2?xZkfId={p|2JH96d(WBs2<~o^5qaQ<h+NL?z^nV2&74i`QsJOtbvn
z=#qt?+)YulziI7pu)<xlLnF+!k_S5Mk$$^n#O<`s)=6GeQ?apJ4Ssg#yDBEjimMS;
zEHZui6I^gp5_^uhhqHQ_+jAQ5m765fcH%Izl2D6be!;*>2idJOWlV|&rQ|KkZIq!n
z#YlKDRd$6&R~_d!deC-ouVVaAcD4BntJ`?&Hd@vd2N63T;i&#>)hzd47;_0rL?b#(
zOf$dv%dXgKSC*Wncme?on}1vdw|h9&XE4Ac`Pr;ac~5UYrIpsX+#5S?&sL!<99I6z
z;3!;%zu0$=)R9R`FB}m{Wro=tTOndUPU1UNHf<4MYraFua^=R2&>RlZUtB!j{*&!Q
zLR1LVeXEc=0|q2A_NwSi(jW&?)zjmadx8km8V0!3?Zr&CCaalz$p$Rx)yUoWPLt9=
zzjOTrewk9eo}u4yF#HNzKh{4HOu!KIi6^ETOp+>Gv2|rzX_ZS;gqyGo!den7&lIH|
z#t<s%Fzu(h0*<K;V;Hc8F6`PstTzteJUhpl?;D|v2d4hs$%}(N>~K*xby2GKQ!j$q
zUbeH{;D%l=<=vyosCYQjTEqTA7@U7+6fhF;N#IWL6L@<_$AP*PU^<N8NPzgxSZTOd
z(n?yc>>HeXta|myQ6KsBiP~mnS)we3$#`RaaaJ6YV=U@X-dL3fwu(0=;SFQl$QaEa
z4p|jneKi?*ASW?lz_p7=@q`@2lq);UL+6&4nT#_2HKX%hlQZc^tUBR8n}Yx#9v1b!
zEPux%7To~Em6lkwoq3Czqc|k&onRP;EHwkSu(C;J=Pa4XLS~%UZ(>jvNNFP0US-g|
zF*5j-@<<BJiHV?PYEyyuIyQhK#mLT3lo_K$5T;^=A|?cfA9i2+)T&uG!wv_EKR^Wk
zzy!rS93ibC%81zwZ#RNDhbdBV_zq+2?l;wP{HclqbuH;5sqt}jl8WvV!bJA+?k}xY
zHbTa8`Y{nH%*XZwpC|_y^K=zJz^@p8mS_au9ja|nSq`m2DLR_~6?A200$c1bqxj_S
z4tnwCffLPEa~a71l7`=?HtAe;^SZRPb0IUCIgihk)D@!Yk^Jnfm4_-g=HYi0$2VWZ
zO<G)KHz(B|Cgc&(Ja$$a>?t+(1JY|Z1O~u>uq&C6!$?39IqDSKq3$N00S4J#lgy$b
z)e6wawjN33HwnZodT!FiWPVd=<fpLgVfoyjf+i6)4TjT28y@@v>TN*%@sARLXf_y2
zMqz~6+Q}N3<6Pxm%M><fnHED%Q$VhH*2)OTce5=RVP@+`^Ujw0?;l%F0#lOlpBK5_
z>ykbycn_o0B_iVznHpf_9P2yb9k1G8Fi?H9G{p0!WohE82)K9Qqj)`cpk*M3K~<+#
z7~eW4t3Oxb8*lt^_xU@ADERaQ0oe>tDI!LbL}gpOWU4KIwM4x?Xx)u9`Opcaa$7uv
z>Wazh1h;$JEPJOUMUioLB>IaaHqp#8^vP)YS)0jCP_`eCnMDSuD~5C<wH&B_W>Qaj
zn*&|AmVG8?^xm?|gOZKp*h3I+dRejX1J?j^;D8)~qPJy;quAKQjQOTA#gI?eeq4Kt
zvbc>_u|hZ=gOR1jn-8FeqmXoKi5^x01%L;AhCh9IS`^Vwz7NU#2VIp-mqqclmhcZN
z3OG(FX1UzcGE8k(-{5d^*f4w5aCo;;v*1HWKqm$B!Wl$vMt#uFr5;w}buljim_a*+
zKO;qO%UGNR*V{@?Kdq0NUx*7MT4~A=(0Xgsopx;8{iwsaxF1JvPiRmuj6@rOa2S>0
zIW8-lShIZtqg7sKW-|_bW*mbdMPPJ<0Wbg^tOl;d<o+$gY>0&lr{d_Z)G+iaVD-q2
z`@Wn}7tM5XEK`VOc&1b;k@w2W5o%kabj;he6T#q&8}(b(W>TNw!{(^<_aq~*war5A
z$leGI@e=fqm5Ji8+Nuct`pK1hiV9Up1bM5J{17jS;&Gz08Ce~<MF!Gjc%LgY@01a6
zhj(t;U=Q~kTQMm<yw2LVrP2$h_%6geDpsD*lVb4DzL@Z4gv4KPES4MurMhlovKp*S
zHqvl+t#psLL#H8RN{jHmzGSQGm4aL$#FUd*<gE(-k{;dDE0neX=kg9O5ijz$1ljtm
z^QWiX?SyXJ;P?nT`mx~E77GU!`u^;RWyp%bXTFl}_mW5$s|x?FJDY8_sLQLBCwKb@
z2fWhL??1HI1B0a?3zux2Py{G23~?`{FYfsRvkbmCJQgTTCCM-#T34}CyP?h#ZWK?6
z>132m6IO?3p233o-AFP+=;lgnMbo%KPU~{Ca%|~SKBT*=p|SDy#sjSvRUZZ9V7zU`
zI6=B87z}v#2BbUB{PcNP*XV_wI<96;MnVoMHpJOTCOe6`YbJA*qQD~oNIV%j2O1Ax
zOJ4%*XtkHX#VSk+q}H|Yn1-KL@)TU+W}M<n%?VES@H91c2^5P&>2zkY1V7uJYX_T^
zsMsGUu+G7NWf(nfgNq@XkLaY0;5Fk~r9g~1#=yY!(>-Gs|5Mu#hQUEVVV*=0(y;}5
zJd3C5uIKZ1p_GNqp7|z^luLhgK@FGf(w3g#<Xiu$G7_#uWsI2-X?xQIe&H++&qHn^
zjInGg)y_CKBmJ-MFMI5UKutvejg1+SF*MP3;zc3Xl@#wNxluC1iQLmN?Ft<(x!Z`1
zU1pLzfeh{U=pvwOb=`^WX!>@cJiqj5a4OK!h>cbP!~Wyc%+=AIc6}2B1XTRrUI3lq
z-~us}wv8RDxl|@Gxt75!PWAZ{%AG1I(Io`QI>-3~{Ef>GB_U&k{2Jg5wJ8*$p0cnH
z(GH&3h*Y;2R|7gg8eP)CuqzprGRV+XSpuNpRS_CR-&SOd(bZoA$Ez->^ivg@<U}e<
z31uF0XLWh0{0O<e>b(2g%YkUYiD2E=Scm3AEsxL9;q`FjBFyuao;hb4hSYWvy<}Ia
z*##(cQ6I9NJF|N2TW>B;CbT8jS>`HgKB%N_sac+W`5eM~T=q-Fx8fJ~QBl&dk`Jx1
z8f5>?=*-`?f*xhGyh9rM5^<prsN$#{Zzin%MpUT382&u)BUXx-HEY9Y3R0IC@0Cbf
zUih7+#VSX(Y!mg+sV=5A^%ddwv!y~Z7%~vl&=lFSy{AbBg9`L*&ewo_lL)eXlM_&A
zDeLz~l!xj6$oi-HUkilWONl{r%3>S+tHgf?w9w$La<F=D!5aLh3*tXxns5LSZ=9V^
zW{LkI!a+5V0e5)m1CNOR^?wpD<KRc80lP7Zf3*hy0p{W)17FnvbAsSg-G2odk^<qb
z^ukw@r9b>bB!QcV6biqnf-CvE4*yqRj|d5HrvunRn}qZa5uA8nfjcj>(B$6#%k;0>
zAwpnjr1mOQAOEcy3q81Vqk$~_&wrWzH5)MiEKOvsM2_u$R8t3=Y$49__CHo&Lj}CU
Y)KD1lT9stKL4Yr5ae1*HB8Gwg2lSJ;0RR91

literal 0
HcmV?d00001

diff --git a/src/components/ColorInput/index.vue b/src/components/ColorInput/index.vue
new file mode 100644
index 00000000..abd083a1
--- /dev/null
+++ b/src/components/ColorInput/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-input v-model="color">
+    <template #prepend>
+      <el-color-picker v-model="color" :predefine="COLORS" />
+    </template>
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { propTypes } from '@/utils/propTypes'
+
+// 颜色输入框
+defineOptions({ name: 'ColorInput' })
+
+// 预设颜色
+const COLORS = [
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  '#409EFF',
+  '#909399',
+  '#C0C4CC',
+  '#b7390b',
+  '#ff7800',
+  '#fad400',
+  '#5b8c5f',
+  '#00babd',
+  '#1f73c3',
+  '#711f57'
+]
+
+const props = defineProps({
+  modelValue: propTypes.string.def('')
+})
+const emit = defineEmits(['update:modelValue'])
+const color = computed({
+  get: () => {
+    return props.modelValue
+  },
+  set: (val: string) => {
+    emit('update:modelValue', val)
+  }
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.el-input-group__prepend) {
+  padding: 0;
+}
+</style>
diff --git a/src/components/DiyEditor/components/ComponentLibrary.vue b/src/components/DiyEditor/components/ComponentLibrary.vue
new file mode 100644
index 00000000..8e918fa9
--- /dev/null
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -0,0 +1,196 @@
+<template>
+  <el-aside class="editor-left" width="260px">
+    <el-scrollbar>
+      <el-collapse v-model="extendGroups">
+        <el-collapse-item
+          v-for="group in groups"
+          :key="group.name"
+          :name="group.name"
+          :title="group.name"
+        >
+          <draggable
+            class="component-container"
+            ghost-class="draggable-ghost"
+            :list="group.components"
+            :sort="false"
+            :group="{ name: 'component', pull: 'clone', put: false }"
+            :clone="handleCloneComponent"
+            :animation="200"
+            :force-fallback="true"
+          >
+            <template #item="{ element }">
+              <div>
+                <div class="drag-placement">组件放置区域</div>
+                <div class="component">
+                  <Icon :icon="element.icon" :size="32" />
+                  <span class="mt-4px text-12px">{{ element.name }}</span>
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </el-collapse-item>
+      </el-collapse>
+    </el-scrollbar>
+  </el-aside>
+</template>
+
+<script setup lang="ts">
+import draggable from 'vuedraggable'
+import { componentConfigs } from '../components/mobile/index'
+import { cloneDeep } from 'lodash-es'
+import { DiyComponent, DiyComponentLibrary } from '@/components/DiyEditor/util'
+
+/** 组件库 */
+defineOptions({ name: 'ComponentLibrary' })
+
+// 组件列表
+const props = defineProps<{
+  list: DiyComponentLibrary[]
+}>()
+const groups = reactive<any[]>([])
+// 展开的折叠面板
+const extendGroups = reactive<string[]>([])
+watch(
+  () => props.list,
+  () => {
+    // 清除旧数据
+    extendGroups.length = 0
+    groups.length = 0
+    // 重新生成数据
+    props.list.forEach((group) => {
+      // 是否展开分组
+      if (group.extended) {
+        extendGroups.push(group.name)
+      }
+      // 查找组件
+      const components = group.components
+        .map((name) => componentConfigs[name] as DiyComponent<any>)
+        .filter((component) => component)
+      if (components.length > 0) {
+        groups.push({
+          name: group.name,
+          components
+        })
+      }
+    })
+  },
+  {
+    immediate: true
+  }
+)
+
+// 克隆组件
+const handleCloneComponent = (component: DiyComponent<any>) => {
+  return cloneDeep(component)
+}
+</script>
+
+<style scoped lang="scss">
+.editor-left {
+  z-index: 1;
+  flex-shrink: 0;
+  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12);
+
+  :deep(.el-collapse) {
+    border-top: none;
+  }
+  :deep(.el-collapse-item__wrap) {
+    border-bottom: none;
+  }
+  :deep(.el-collapse-item__content) {
+    padding-bottom: 0;
+  }
+  :deep(.el-collapse-item__header) {
+    border-bottom: none;
+    background-color: var(--el-bg-color-page);
+    padding: 0 24px;
+    height: 32px;
+    line-height: 32px;
+  }
+
+  .component-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .component {
+    width: 86px;
+    height: 86px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-right: 1px solid var(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    cursor: move;
+
+    .el-icon {
+      margin-bottom: 4px;
+      color: gray;
+    }
+  }
+  .component.active,
+  .component:hover {
+    background: var(--el-color-primary);
+    color: var(--el-color-white);
+
+    .el-icon {
+      color: var(--el-color-white);
+    }
+  }
+
+  .component:nth-of-type(3n) {
+    border-right: none;
+  }
+}
+
+/* 拖拽占位提示，默认不显示 */
+.drag-placement {
+  display: none;
+  color: #fff;
+}
+
+.drag-area {
+  /* 拖拽到手机区域时的样式 */
+  .draggable-ghost {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 条纹背景 */
+    background: linear-gradient(
+      45deg,
+      #91a8d5 0,
+      #91a8d5 10%,
+      #94b4eb 10%,
+      #94b4eb 50%,
+      #91a8d5 50%,
+      #91a8d5 60%,
+      #94b4eb 60%,
+      #94b4eb
+    );
+    background-size: 1rem 1rem;
+    transition: all 0.5s;
+    span {
+      color: #fff;
+      display: inline-block;
+      width: 140px;
+      height: 25px;
+      font-size: 12px;
+      text-align: center;
+      line-height: 25px;
+      background: #5487df;
+    }
+    /* 拖拽时隐藏组件 */
+    .component {
+      display: none;
+    }
+    /* 拖拽时显示占位提示 */
+    .drag-placement {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/Carousel/config.ts b/src/components/DiyEditor/components/mobile/Carousel/config.ts
new file mode 100644
index 00000000..6c790186
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Carousel/config.ts
@@ -0,0 +1,44 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 轮播图属性 */
+export interface CarouselProperty {
+  // 选择模板
+  swiperType: number
+  // 图片圆角
+  borderRadius: number
+  // 页面边距
+  pageMargin: number
+  // 图片边距
+  imageMargin: number
+  // 分页类型
+  pagingType: 'bullets' | 'fraction' | 'progressbar'
+  // 一行个数
+  rowIndividual: number
+  // 添加图片
+  items: CarouselItemProperty[]
+}
+
+export interface CarouselItemProperty {
+  title: string
+  imgUrl: string
+  link: string
+}
+
+// 定义组件
+export const component = {
+  id: 'Carousel',
+  name: '轮播图',
+  icon: 'system-uicons:carousel',
+  property: {
+    swiperType: 0, // 选择模板
+    borderRadius: 0, // 图片圆角
+    pageMargin: 0, // 页面边距
+    imageMargin: 0, // 图片边距
+    pagingType: 'bullets', // 分页类型
+    rowIndividual: 2, // 一行个数
+    items: [
+      { imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg' },
+      { imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg' }
+    ] as CarouselItemProperty[]
+  }
+} as DiyComponent<CarouselProperty>
diff --git a/src/components/DiyEditor/components/mobile/Carousel/index.vue b/src/components/DiyEditor/components/mobile/Carousel/index.vue
new file mode 100644
index 00000000..e9a0ab39
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Carousel/index.vue
@@ -0,0 +1,75 @@
+<template>
+  <!-- 无图片 -->
+  <div
+    class="h-250px flex items-center justify-center bg-gray-3"
+    v-if="property.items.length === 0"
+  >
+    <Icon icon="tdesign:image" class="text-gray-8 text-120px!" />
+  </div>
+  <!-- 一行一个 -->
+  <div
+    v-if="property.swiperType === 0"
+    class="flex flex-col"
+    :style="{
+      paddingLeft: property.pageMargin + 'px',
+      paddingRight: property.pageMargin + 'px'
+    }"
+  >
+    <div v-for="(item, index) in property.items" :key="index">
+      <div
+        class="img-item"
+        :style="{
+          marginBottom: property.imageMargin + 'px',
+          borderRadius: property.borderRadius + 'px'
+        }"
+      >
+        <img alt="" :src="item.imgUrl" />
+        <div v-if="item.title" class="title">{{ item.title }}</div>
+      </div>
+    </div>
+  </div>
+  <el-carousel height="174px" v-else :type="property.swiperType === 3 ? 'card' : ''">
+    <el-carousel-item v-for="(item, index) in property.items" :key="index">
+      <div class="img-item" :style="{ borderRadius: property.borderRadius + 'px' }">
+        <img alt="" :src="item.imgUrl" />
+        <div v-if="item.title" class="title">{{ item.title }}</div>
+      </div>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+<script setup lang="ts">
+import { CarouselProperty } from './config'
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'NavigationBar' })
+
+const props = defineProps<{ property: CarouselProperty }>()
+</script>
+
+<style scoped lang="scss">
+.img-item {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  &:last-child {
+    margin: 0 !important;
+  }
+  /* 图片 */
+  img {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  .title {
+    height: 36px;
+    width: 100%;
+    background-color: rgba(51, 51, 51, 0.8);
+    text-align: center;
+    line-height: 36px;
+    color: #fff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/Carousel/property.vue b/src/components/DiyEditor/components/mobile/Carousel/property.vue
new file mode 100644
index 00000000..acaee35f
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Carousel/property.vue
@@ -0,0 +1,125 @@
+<template>
+  <el-form label-width="80px" :model="formData">
+    <el-form-item label="选择模板" prop="swiperType">
+      <el-radio-group v-model="formData.swiperType">
+        <el-tooltip class="item" content="一行一个" placement="bottom">
+          <el-radio-button :label="0">
+            <Icon icon="icon-park-twotone:multi-picture-carousel" />
+          </el-radio-button>
+        </el-tooltip>
+        <el-tooltip class="item" content="轮播海报" placement="bottom">
+          <el-radio-button :label="1">
+            <Icon icon="system-uicons:carousel" />
+          </el-radio-button>
+        </el-tooltip>
+        <el-tooltip class="item" content="多图单行" placement="bottom">
+          <el-radio-button :label="2">
+            <Icon icon="icon-park-twotone:carousel" />
+          </el-radio-button>
+        </el-tooltip>
+        <el-tooltip class="item" content="立体轮播" placement="bottom">
+          <el-radio-button :label="3">
+            <Icon icon="ic:round-view-carousel" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+
+    <el-text tag="p">添加图片</el-text>
+    <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
+
+    <!-- 图片广告 -->
+    <div v-if="formData.items[0]">
+      <draggable
+        :list="formData.items"
+        :force-fallback="true"
+        :animation="200"
+        handle=".drag-icon"
+        class="m-t-8px"
+      >
+        <template #item="{ element, index }">
+          <div class="mb-4px flex flex-row gap-4px rounded bg-gray-100 p-8px">
+            <div class="flex flex-col items-start justify-between">
+              <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+              <Icon
+                icon="ep:delete"
+                class="cursor-pointer text-red-5"
+                @click="handleDeleteImage(index)"
+                v-if="formData.items.length > 1"
+              />
+            </div>
+            <div class="flex flex-1 flex-col items-center justify-between gap-8px">
+              <UploadImg
+                v-model="element.imgUrl"
+                draggable="false"
+                height="80px"
+                width="100%"
+                class="min-w-80px"
+              />
+              <!-- 标题 -->
+              <el-input v-model="element.title" placeholder="标题，选填" />
+              <!-- 输入链接 -->
+              <el-input placeholder="链接，选填" v-model="element.link" />
+            </div>
+          </div>
+        </template>
+      </draggable>
+    </div>
+    <el-button @click="handleAddImage" type="primary" plain class="w-full"> 添加图片 </el-button>
+    <el-form-item label="一行个数" prop="rowIndividual" v-show="formData.swiperType === 2">
+      <!-- 单选框 -->
+      <el-radio-group v-model="formData.rowIndividual">
+        <el-radio :label="2">2个</el-radio>
+        <el-radio :label="3">3个</el-radio>
+        <el-radio :label="4">4个</el-radio>
+        <el-radio :label="5">5个</el-radio>
+        <el-radio :label="6">6个</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="分页类型" prop="pagingType">
+      <el-radio-group v-model="formData.pagingType">
+        <el-radio :label="0">不显示</el-radio>
+        <el-radio label="bullets">样式一</el-radio>
+        <el-radio label="fraction">样式二</el-radio>
+        <el-radio label="progressbar">样式三</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="图片圆角" prop="borderRadius">
+      <el-slider v-model="formData.borderRadius" :max="30" />
+    </el-form-item>
+    <el-form-item label="页面边距" prop="pageMargin" v-show="formData.swiperType === 0">
+      <el-slider v-model="formData.pageMargin" :max="20" />
+    </el-form-item>
+    <el-form-item
+      label="图片边距"
+      prop="imageMargin"
+      v-show="formData.swiperType === 0 || formData.swiperType === 2"
+    >
+      <el-slider v-model="formData.imageMargin" :max="20" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import draggable from 'vuedraggable' //拖拽组件
+import { CarouselItemProperty, CarouselProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 轮播图属性面板
+defineOptions({ name: 'CarouselProperty' })
+
+const props = defineProps<{ modelValue: CarouselProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+// 添加图片
+const handleAddImage = () => {
+  formData.value.items.push({} as CarouselItemProperty)
+}
+// 删除图片
+const handleDeleteImage = (index) => {
+  formData.value.items.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/Divider/config.ts b/src/components/DiyEditor/components/mobile/Divider/config.ts
new file mode 100644
index 00000000..9b553604
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Divider/config.ts
@@ -0,0 +1,29 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 分割线属性 */
+export interface DividerProperty {
+  // 高度
+  height: number
+  // 线宽
+  lineWidth: number
+  // 边距类型
+  paddingType: 'none' | 'horizontal'
+  // 颜色
+  lineColor: string
+  // 类型
+  borderType: 'solid' | 'dashed' | 'dotted' | 'none'
+}
+
+// 定义组件
+export const component = {
+  id: 'Divider',
+  name: '分割线',
+  icon: 'tdesign:component-divider-vertical',
+  property: {
+    height: 30,
+    lineWidth: 1,
+    paddingType: 'none',
+    lineColor: '#dcdfe6',
+    borderType: 'solid'
+  }
+} as DiyComponent<DividerProperty>
diff --git a/src/components/DiyEditor/components/mobile/Divider/index.vue b/src/components/DiyEditor/components/mobile/Divider/index.vue
new file mode 100644
index 00000000..f7785043
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Divider/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="flex items-center"
+    :style="{
+      height: property.height + 'px'
+    }"
+  >
+    <div
+      class="w-full"
+      :style="{
+        borderTopStyle: property.borderType,
+        borderTopColor: property.lineColor,
+        borderTopWidth: `${property.lineWidth}px`,
+        margin: property.paddingType === 'none' ? '0' : '0px 16px'
+      }"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DividerProperty } from './config'
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'Divider' })
+
+defineProps<{ property: DividerProperty }>()
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/Divider/property.vue b/src/components/DiyEditor/components/mobile/Divider/property.vue
new file mode 100644
index 00000000..3d7be26d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/Divider/property.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-form label-width="80px" :model="formData">
+    <el-form-item label="高度" prop="height">
+      <el-slider v-model="formData.height" :min="1" :max="100" show-input input-size="small" />
+    </el-form-item>
+    <el-form-item label="选择样式" prop="borderType">
+      <el-radio-group v-model="formData!.borderType">
+        <el-tooltip
+          placement="top"
+          v-for="(item, index) in BORDER_TYPES"
+          :key="index"
+          :content="item.text"
+        >
+          <el-radio-button :label="item.type">
+            <Icon :icon="item.icon" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+    <template v-if="formData.borderType !== 'none'">
+      <el-form-item label="线宽" prop="lineWidth">
+        <el-slider v-model="formData.lineWidth" :min="1" :max="30" show-input input-size="small" />
+      </el-form-item>
+      <el-form-item label="左右边距" prop="paddingType">
+        <el-radio-group v-model="formData!.paddingType">
+          <el-tooltip content="无边距" placement="top">
+            <el-radio-button label="none">
+              <Icon icon="tabler:box-padding" />
+            </el-radio-button>
+          </el-tooltip>
+          <el-tooltip content="左右留边" placement="top">
+            <el-radio-button label="horizontal">
+              <Icon icon="vaadin:padding" />
+            </el-radio-button>
+          </el-tooltip>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="颜色">
+        <!-- 分割线颜色 -->
+        <ColorInput v-model="formData.lineColor" />
+      </el-form-item>
+    </template>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { DividerProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+// 导航栏属性面板
+defineOptions({ name: 'DividerProperty' })
+const props = defineProps<{ modelValue: DividerProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+//线类型
+const BORDER_TYPES = [
+  {
+    icon: 'vaadin:line-h',
+    text: '实线',
+    type: 'solid'
+  },
+  {
+    icon: 'tabler:line-dashed',
+    text: '虚线',
+    type: 'dashed'
+  },
+  {
+    icon: 'tabler:line-dotted',
+    text: '点线',
+    type: 'dotted'
+  },
+  {
+    icon: 'entypo:progress-empty',
+    text: '无',
+    type: 'none'
+  }
+]
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
new file mode 100644
index 00000000..b250f5f1
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -0,0 +1,38 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 顶部导航栏属性 */
+export interface NavigationBarProperty {
+  // 页面标题
+  title: string
+  // 页面描述
+  description: string
+  // 顶部导航高度
+  navBarHeight: number
+  // 页面背景颜色
+  backgroundColor: string
+  // 页面背景图片
+  backgroundImage: string
+  // 样式类型：默认 | 沉浸式
+  styleType: 'default' | 'immersion'
+  // 常驻显示
+  alwaysShow: boolean
+  // 是否显示返回按钮
+  showGoBack: boolean
+}
+
+// 定义组件
+export const component = {
+  id: 'NavigationBar',
+  name: '顶部导航栏',
+  icon: 'tabler:layout-navbar',
+  property: {
+    title: '页面标题',
+    description: '',
+    navBarHeight: 35,
+    backgroundColor: '#f5f5f5',
+    backgroundImage: '',
+    styleType: 'default',
+    alwaysShow: true,
+    showGoBack: true
+  }
+} as DiyComponent<NavigationBarProperty>
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
new file mode 100644
index 00000000..953748c7
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="navigation-bar"
+    :style="{
+      height: `${property.navBarHeight}px`,
+      backgroundColor: property.backgroundColor,
+      backgroundImage: `url(${property.backgroundImage})`
+    }"
+  >
+    <!-- 左侧 -->
+    <div class="left">
+      <Icon icon="ep:arrow-left" v-show="property.showGoBack" />
+    </div>
+    <!-- 中间 -->
+    <div
+      class="center"
+      :style="{
+        height: `${property.navBarHeight}px`,
+        lineHeight: `${property.navBarHeight}px`
+      }"
+    >
+      {{ property.title }}
+    </div>
+    <!-- 右侧 -->
+    <div class="right"></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { NavigationBarProperty } from './config'
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'NavigationBar' })
+
+defineProps<{ property: NavigationBarProperty }>()
+</script>
+<style lang="scss" scoped>
+.navigation-bar {
+  height: 35px;
+  background: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  /* 左边 */
+  .left {
+    margin-left: 8px;
+  }
+  .center {
+    flex: 1;
+    text-align: center;
+    font-size: 14px;
+    line-height: 35px;
+    color: #333333;
+  }
+  /* 右边 */
+  .right {
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/property.vue b/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
new file mode 100644
index 00000000..c4ca4588
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/property.vue
@@ -0,0 +1,63 @@
+<template>
+  <el-form label-width="80px" :model="formData" :rules="rules">
+    <el-form-item label="页面标题" prop="title">
+      <el-input v-model="formData!.title" placeholder="页面标题" maxlength="25" show-word-limit />
+    </el-form-item>
+    <el-form-item label="页面描述" prop="description">
+      <el-input
+        type="textarea"
+        v-model="formData!.description"
+        placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
+      />
+    </el-form-item>
+    <el-form-item label="样式" prop="styleType">
+      <el-radio-group v-model="formData!.styleType">
+        <el-radio label="default">默认</el-radio>
+        <el-radio label="immersion">沉浸式</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="常驻显示" prop="alwaysShow" v-if="formData.styleType === 'immersion'">
+      <el-radio-group v-model="formData!.alwaysShow">
+        <el-radio :label="false">关闭</el-radio>
+        <el-radio :label="true">开启</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="高度" prop="navBarHeight">
+      <el-slider
+        v-model="formData!.navBarHeight"
+        :max="100"
+        :min="35"
+        show-input
+        input-size="small"
+      />
+    </el-form-item>
+    <el-form-item label="返回按钮" prop="showGoBack">
+      <el-switch v-model="formData!.showGoBack" />
+    </el-form-item>
+    <el-form-item label="背景颜色" prop="backgroundColor">
+      <ColorInput v-model="formData!.backgroundColor" />
+    </el-form-item>
+    <el-form-item label="背景图片" prop="backgroundImage">
+      <UploadImg v-model="formData!.backgroundImage" :limit="1">
+        <template #tip>建议宽度 750px</template>
+      </UploadImg>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { NavigationBarProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarProperty' })
+// 表单校验
+const rules = {
+  name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }]
+}
+
+const props = defineProps<{ modelValue: NavigationBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/config.ts b/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
new file mode 100644
index 00000000..03e7143a
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/config.ts
@@ -0,0 +1,39 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 公告栏属性 */
+export interface NoticeBarProperty {
+  // 图标地址
+  iconUrl: string
+  // 公告内容列表
+  contents: NoticeContentProperty[]
+  // 背景颜色
+  backgroundColor: string
+  // 文字颜色
+  textColor: string
+}
+
+/** 内容属性 */
+export interface NoticeContentProperty {
+  // 内容文字
+  text: string
+  // 链接地址
+  url: string
+}
+
+// 定义组件
+export const component = {
+  id: 'NoticeBar',
+  name: '公告栏',
+  icon: 'ep:bell',
+  property: {
+    iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
+    contents: [
+      {
+        text: '',
+        url: ''
+      }
+    ],
+    backgroundColor: '#fff',
+    textColor: '#333'
+  }
+} as DiyComponent<NoticeBarProperty>
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/index.vue b/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
new file mode 100644
index 00000000..dc360688
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div
+    class="flex items-center text-12px"
+    :style="{ backgroundColor: property.backgroundColor, color: property.textColor }"
+  >
+    <el-image :src="property.iconUrl" class="h-18px" />
+    <el-divider direction="vertical" />
+    <el-carousel height="24px" direction="vertical" :autoplay="true" class="flex-1 p-r-8px">
+      <el-carousel-item v-for="(item, index) in property.contents" :key="index">
+        <div class="h-24px truncate leading-24px">{{ item.text }}</div>
+      </el-carousel-item>
+    </el-carousel>
+    <Icon icon="ep:arrow-right" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NoticeBarProperty } from './config'
+
+/** 公告栏 */
+defineOptions({ name: 'NoticeBar' })
+
+defineProps<{ property: NoticeBarProperty }>()
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/property.vue b/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
new file mode 100644
index 00000000..11e7f4b7
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/property.vue
@@ -0,0 +1,77 @@
+<template>
+  <el-form label-width="80px" :model="formData" :rules="rules">
+    <el-form-item label="公告图标" prop="iconUrl">
+      <UploadImg v-model="formData.iconUrl" height="48px">
+        <template #tip>建议尺寸：24 * 24</template>
+      </UploadImg>
+    </el-form-item>
+    <el-form-item label="背景颜色" prop="backgroundColor">
+      <ColorInput v-model="formData.backgroundColor" />
+    </el-form-item>
+    <el-form-item label="文字颜色" prop="文字颜色">
+      <ColorInput v-model="formData.textColor" />
+    </el-form-item>
+    <el-text tag="p"> 公告内容 </el-text>
+    <el-text type="info" size="small"> 拖动左上角的小圆点可以调整热词顺序 </el-text>
+    <template v-if="formData.contents.length">
+      <VueDraggable
+        :list="formData.contents"
+        item-key="index"
+        handle=".drag-icon"
+        :forceFallback="true"
+        :animation="200"
+        class="m-t-8px"
+      >
+        <template #item="{ element, index }">
+          <div class="mb-4px flex flex-row gap-4px rounded bg-gray-100 p-8px">
+            <div class="flex flex-col items-start justify-between">
+              <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+              <Icon
+                icon="ep:delete"
+                class="cursor-pointer text-red-5"
+                @click="handleDeleteContent(index)"
+                v-if="formData.contents.length > 1"
+              />
+            </div>
+            <div class="w-full flex flex-col gap-8px">
+              <el-input v-model="element.text" placeholder="请输入公告" />
+              <el-input v-model="element.url" placeholder="请输入链接" />
+            </div>
+          </div>
+        </template>
+      </VueDraggable>
+    </template>
+    <el-form-item label-width="0">
+      <el-button @click="handleAddContent" type="primary" plain class="m-t-8px w-full">
+        添加内容
+      </el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { NoticeBarProperty, NoticeContentProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import VueDraggable from 'vuedraggable'
+// 通知栏属性面板
+defineOptions({ name: 'NoticeBarProperty' })
+// 表单校验
+const rules = {
+  content: [{ required: true, message: '请输入公告', trigger: 'blur' }]
+}
+
+const props = defineProps<{ modelValue: NoticeBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+/* 添加公告 */
+const handleAddContent = () => {
+  formData.value.contents.push({} as NoticeContentProperty)
+}
+/* 删除公告 */
+const handleDeleteContent = (index: number) => {
+  formData.value.contents.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/PageConfig/config.ts b/src/components/DiyEditor/components/mobile/PageConfig/config.ts
new file mode 100644
index 00000000..f8e45e45
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PageConfig/config.ts
@@ -0,0 +1,23 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 页面设置属性 */
+export interface PageConfigProperty {
+  // 页面描述
+  description: string
+  // 页面背景颜色
+  backgroundColor: string
+  // 页面背景图片
+  backgroundImage: string
+}
+
+// 定义页面组件
+export const component = {
+  id: 'PageConfig',
+  name: '页面设置',
+  icon: 'ep:document',
+  property: {
+    description: '',
+    backgroundColor: '#f5f5f5',
+    backgroundImage: ''
+  }
+} as DiyComponent<PageConfigProperty>
diff --git a/src/components/DiyEditor/components/mobile/PageConfig/property.vue b/src/components/DiyEditor/components/mobile/PageConfig/property.vue
new file mode 100644
index 00000000..278bc940
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/PageConfig/property.vue
@@ -0,0 +1,34 @@
+<template>
+  <el-form label-width="80px" :model="formData" :rules="rules">
+    <el-form-item label="页面描述" prop="description">
+      <el-input
+        type="textarea"
+        v-model="formData!.description"
+        placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
+      />
+    </el-form-item>
+    <el-form-item label="背景颜色" prop="backgroundColor">
+      <ColorInput v-model="formData!.backgroundColor" />
+    </el-form-item>
+    <el-form-item label="背景图片" prop="backgroundImage">
+      <UploadImg v-model="formData!.backgroundImage" :limit="1">
+        <template #tip>建议宽度 750px</template>
+      </UploadImg>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { PageConfigProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+// 导航栏属性面板
+defineOptions({ name: 'PageConfigProperty' })
+// 表单校验
+const rules = {}
+
+const props = defineProps<{ modelValue: PageConfigProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/config.ts b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
new file mode 100644
index 00000000..1241748d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
@@ -0,0 +1,35 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 搜索框属性 */
+export interface SearchProperty {
+  height: number // 搜索栏高度
+  showScan: boolean // 显示扫一扫
+  borderRadius: number // 框体样式
+  placeholder: string // 占位文字
+  placeholderPosition: PlaceholderPosition // 占位文字位置
+  backgroundColor: string // 背景颜色
+  borderColor: string // 框体颜色
+  textColor: string // 字体颜色
+  hotKeywords: string[] // 热词
+}
+
+// 文字位置
+export type PlaceholderPosition = 'left' | 'center'
+
+// 定义组件
+export const component = {
+  id: 'SearchBar',
+  name: '搜索框',
+  icon: 'ep:search',
+  property: {
+    height: 28,
+    showScan: false,
+    borderRadius: 0,
+    placeholder: '搜索商品',
+    placeholderPosition: 'left',
+    backgroundColor: 'rgb(249, 249, 249)',
+    borderColor: 'rgb(255, 255, 255)',
+    textColor: 'rgb(150, 151, 153)',
+    hotKeywords: []
+  }
+} as DiyComponent<SearchProperty>
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
new file mode 100644
index 00000000..e120405a
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="search-bar"
+    :style="{
+      background: property.backgroundColor,
+      border: `1px solid ${property.backgroundColor}`,
+      color: property.textColor
+    }"
+  >
+    <!-- 搜索框 -->
+    <div
+      class="inner"
+      :style="{
+        height: `${property.height}px`,
+        background: property.borderColor,
+        borderRadius: `${property.borderRadius}px`
+      }"
+    >
+      <div
+        class="placeholder"
+        :style="{
+          justifyContent: property.placeholderPosition
+        }"
+      >
+        <Icon icon="ep:search" />
+        <span>{{ property.placeholder || '搜索商品' }}</span>
+      </div>
+      <div class="right">
+        <!-- 搜索热词 -->
+        <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{ keyword }}</span>
+        <!-- 扫一扫 -->
+        <Icon icon="ant-design:scan-outlined" v-show="property.showScan" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SearchProperty } from './config'
+/** 搜索框 */
+defineOptions({ name: 'SearchBar' })
+defineProps<{ property: SearchProperty }>()
+</script>
+
+<style scoped lang="scss">
+.search-bar {
+  position: relative;
+  /* 搜索框 */
+  .inner {
+    position: relative;
+    width: calc(100% - 16px);
+    min-height: 28px;
+    margin: 5px auto;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+
+    .placeholder {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 0 8px;
+      gap: 2px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+
+    .right {
+      position: absolute;
+      right: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/property.vue b/src/components/DiyEditor/components/mobile/SearchBar/property.vue
new file mode 100644
index 00000000..9123ebe5
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/SearchBar/property.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-text tag="p"> 搜索热词 </el-text>
+  <el-text type="info" size="small"> 拖动左侧的小圆点可以调整热词顺序 </el-text>
+
+  <!-- 表单 -->
+  <el-form label-width="80px" :model="formData" class="m-t-8px">
+    <div v-if="formData.hotKeywords.length">
+      <VueDraggable
+        :list="formData.hotKeywords"
+        item-key="index"
+        handle=".drag-icon"
+        :forceFallback="true"
+        :animation="200"
+      >
+        <template #item="{ index }">
+          <div class="mb-4px flex flex-row items-center gap-4px rounded bg-gray-100 p-8px">
+            <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+            <el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
+            <Icon icon="ep:delete" class="text-red-500" @click="deleteHotWord(index)" />
+          </div>
+        </template>
+      </VueDraggable>
+    </div>
+    <el-form-item label-width="0">
+      <el-button @click="handleAddHotWord" type="primary" plain class="m-t-8px w-full">
+        添加热词
+      </el-button>
+    </el-form-item>
+    <el-form-item label="框体样式">
+      <el-radio-group v-model="formData!.borderRadius">
+        <el-tooltip content="方形" placement="top">
+          <el-radio-button :label="0">
+            <Icon icon="tabler:input-search" />
+          </el-radio-button>
+        </el-tooltip>
+        <el-tooltip content="圆形" placement="top">
+          <el-radio-button :label="10">
+            <Icon icon="iconoir:input-search" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="提示文字" prop="placeholder">
+      <el-input v-model="formData.placeholder" />
+    </el-form-item>
+    <el-form-item label="文本位置" prop="placeholderPosition">
+      <el-radio-group v-model="formData!.placeholderPosition">
+        <el-tooltip content="居左" placement="top">
+          <el-radio-button label="left">
+            <Icon icon="ant-design:align-left-outlined" />
+          </el-radio-button>
+        </el-tooltip>
+        <el-tooltip content="居中" placement="top">
+          <el-radio-button label="center">
+            <Icon icon="ant-design:align-center-outlined" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="扫一扫" prop="showScan">
+      <el-switch v-model="formData!.showScan" />
+    </el-form-item>
+    <el-form-item label="框体高度" prop="height">
+      <el-slider v-model="formData!.height" :max="50" :min="28" show-input input-size="small" />
+    </el-form-item>
+    <el-form-item label="背景颜色" prop="backgroundColor">
+      <ColorInput v-model="formData.backgroundColor" />
+    </el-form-item>
+    <el-form-item label="框体颜色" prop="borderColor">
+      <ColorInput v-model="formData.borderColor" />
+    </el-form-item>
+    <el-form-item class="lef" label="文本颜色" prop="textColor">
+      <ColorInput v-model="formData.textColor" />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import VueDraggable from 'vuedraggable'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import { SearchProperty } from '@/components/DiyEditor/components/mobile/SearchBar/config'
+
+/** 搜索框属性面板 */
+defineOptions({ name: 'SearchProperty' })
+
+const props = defineProps<{ modelValue: SearchProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+/* 添加热词 */
+const handleAddHotWord = () => {
+  formData.value.hotKeywords.push('')
+}
+/* 删除热词 */
+const deleteHotWord = (index: number) => {
+  formData.value.hotKeywords.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/TabBar/config.ts b/src/components/DiyEditor/components/mobile/TabBar/config.ts
new file mode 100644
index 00000000..4a570a8e
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TabBar/config.ts
@@ -0,0 +1,91 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 底部导航菜单属性 */
+export interface TabBarProperty {
+  // 选项列表
+  items: TabBarItemProperty[]
+  // 主题
+  theme: string
+  // 样式
+  style: TabBarStyle
+}
+
+// 选项属性
+export interface TabBarItemProperty {
+  name: string // 标签名称
+  link: string // 链接
+  iconUrl: string // 默认图标链接
+  activeIconUrl: string // 选中的图标链接
+}
+
+// 样式
+export interface TabBarStyle {
+  // 背景类型
+  backgroundType: 'color' | 'img'
+  // 背景颜色 或 图片链接
+  background: string
+  // 默认颜色
+  color: string
+  // 选中的颜色
+  activeColor: string
+}
+
+// 定义组件
+export const component = {
+  id: 'TabBar',
+  name: '底部导航',
+  icon: 'fluent:table-bottom-row-16-filled',
+  property: {
+    theme: 'red',
+    style: {
+      backgroundType: 'color',
+      background: '#fff',
+      color: '#282828',
+      activeColor: '#fc4141'
+    },
+    items: [
+      {
+        name: '首页',
+        link: '/',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png'
+      },
+      {
+        name: '分类',
+        link: '/pages/goods_cate/goods_cate',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png'
+      },
+      {
+        name: '购物车',
+        link: '/pages/order_addcart/order_addcart',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png'
+      },
+      {
+        name: '我的',
+        link: '/pages/user/index',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png'
+      }
+    ]
+  }
+} as DiyComponent<TabBarProperty>
+
+export const THEME_LIST = [
+  { id: 'red', name: '中国红', icon: 'icon-park-twotone:theme', color: '#d10019' },
+  { id: 'orange', name: '桔橙', icon: 'icon-park-twotone:theme', color: '#f37b1d' },
+  { id: 'gold', name: '明黄', icon: 'icon-park-twotone:theme', color: '#fbbd08' },
+  { id: 'green', name: '橄榄绿', icon: 'icon-park-twotone:theme', color: '#8dc63f' },
+  { id: 'cyan', name: '天青', icon: 'icon-park-twotone:theme', color: '#1cbbb4' },
+  { id: 'blue', name: '海蓝', icon: 'icon-park-twotone:theme', color: '#0081ff' },
+  { id: 'purple', name: '姹紫', icon: 'icon-park-twotone:theme', color: '#6739b6' },
+  { id: 'brightRed', name: '嫣红', icon: 'icon-park-twotone:theme', color: '#e54d42' },
+  { id: 'forestGreen', name: '森绿', icon: 'icon-park-twotone:theme', color: '#39b54a' },
+  { id: 'mauve', name: '木槿', icon: 'icon-park-twotone:theme', color: '#9c26b0' },
+  { id: 'pink', name: '桃粉', icon: 'icon-park-twotone:theme', color: '#e03997' },
+  { id: 'brown', name: '棕褐', icon: 'icon-park-twotone:theme', color: '#a5673f' },
+  { id: 'grey', name: '玄灰', icon: 'icon-park-twotone:theme', color: '#8799a3' },
+  { id: 'gray', name: '草灰', icon: 'icon-park-twotone:theme', color: '#aaaaaa' },
+  { id: 'black', name: '墨黑', icon: 'icon-park-twotone:theme', color: '#333333' }
+]
diff --git a/src/components/DiyEditor/components/mobile/TabBar/index.vue b/src/components/DiyEditor/components/mobile/TabBar/index.vue
new file mode 100644
index 00000000..266a20c5
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TabBar/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="tab-bar">
+    <div
+      class="tab-bar-bg"
+      :style="{
+        background:
+          property.style.backgroundType === 'color'
+            ? property.style.background
+            : `url(${property.style.background})`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat'
+      }"
+    >
+      <div v-for="(item, index) in property.items" :key="index" class="tab-bar-item">
+        <img :src="index === 0 ? item.activeIconUrl : item.iconUrl" alt="" />
+        <span :style="{ color: index === 0 ? property.style.activeColor : property.style.color }">
+          {{ item.name }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { TabBarProperty } from './config'
+
+/** 页面底部导航栏 */
+defineOptions({ name: 'TabBar' })
+
+defineProps<{ property: TabBarProperty }>()
+</script>
+<style lang="scss" scoped>
+.tab-bar {
+  width: 100%;
+  z-index: 2;
+  .tab-bar-bg {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    padding: 8px 0;
+
+    .tab-bar-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      width: 100%;
+
+      img {
+        width: 26px;
+        height: 26px;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/TabBar/property.vue b/src/components/DiyEditor/components/mobile/TabBar/property.vue
new file mode 100644
index 00000000..512bb5a8
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TabBar/property.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="tab-bar">
+    <!-- 表单 -->
+    <el-form :model="formData" label-width="80px">
+      <el-form-item label="主题">
+        <el-select v-model="formData!.theme" @change="handleThemeChange">
+          <el-option
+            v-for="(theme, index) in THEME_LIST"
+            :key="index"
+            :label="theme.name"
+            :value="theme.id"
+          >
+            <template #default>
+              <div class="flex items-center justify-between">
+                <Icon :icon="theme.icon" :color="theme.color" />
+                <span>{{ theme.name }}</span>
+              </div>
+            </template>
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="默认颜色">
+        <ColorInput v-model="formData!.style.color" />
+      </el-form-item>
+      <el-form-item label="选中颜色">
+        <ColorInput v-model="formData!.style.activeColor" />
+      </el-form-item>
+      <el-form-item label="导航背景">
+        <el-radio-group
+          v-model="formData!.style.backgroundType"
+          @change="handleBackgroundTypeChange"
+        >
+          <el-radio-button label="color">纯色</el-radio-button>
+          <el-radio-button label="img">图片</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择颜色" v-if="formData!.style.backgroundType === 'color'">
+        <ColorInput v-model="formData!.style.background" />
+      </el-form-item>
+      <el-form-item label="选择图片" v-if="formData!.style.backgroundType === 'img'">
+        <UploadImg
+          v-model="formData!.style.background"
+          width="100%"
+          height="50px"
+          class="min-w-200px"
+        >
+          <template #tip> 建议尺寸 375 * 50 </template>
+        </UploadImg>
+      </el-form-item>
+
+      <el-text tag="p">图标设置</el-text>
+      <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44 </el-text>
+      <draggable
+        :list="formData!.items"
+        item-key="index"
+        :forceFallback="true"
+        :animation="200"
+        handle=".drag-icon"
+        class="m-t-8px"
+      >
+        <template #item="{ element, index }">
+          <div class="mb-4px flex flex-row gap-4px rounded bg-gray-100 p-8px">
+            <div class="flex flex-col items-start justify-between">
+              <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+              <Icon
+                icon="ep:delete"
+                class="cursor-pointer text-red-5"
+                @click="handleDeleteItem(index)"
+                v-if="formData.items.length > 1"
+              />
+            </div>
+            <div class="w-full flex flex-col">
+              <div class="m-b-8px flex items-center justify-around">
+                <div class="flex flex-col items-center justify-between">
+                  <UploadImg
+                    v-model="element.iconUrl"
+                    width="40px"
+                    height="40px"
+                    :show-delete="false"
+                    :show-btn-text="false"
+                  />
+                  <el-text size="small">默认图片</el-text>
+                </div>
+                <div>
+                  <UploadImg
+                    v-model="element.activeIconUrl"
+                    width="40px"
+                    height="40px"
+                    :show-delete="false"
+                    :show-btn-text="false"
+                  />
+                  <el-text>选中图片</el-text>
+                </div>
+              </div>
+              <el-form-item draggable="false" label-width="0" class="m-b-8px!">
+                <el-input v-model="element.name" placeholder="请输入文字" />
+              </el-form-item>
+              <el-form-item draggable="false" label-width="0" class="m-b-0!">
+                <el-input v-model="element.link" placeholder="请选择链接" />
+              </el-form-item>
+            </div>
+          </div>
+        </template>
+      </draggable>
+
+      <el-form-item label-width="0">
+        <!-- 添加导航按钮 -->
+        <el-tooltip content="最多添加5个">
+          <el-button
+            @click="handleAddItem"
+            class="m-b-16px w-full"
+            type="primary"
+            plain
+            :disabled="formData!.items.length >= 5"
+          >
+            添加导航
+          </el-button>
+        </el-tooltip>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import draggable from 'vuedraggable' //拖拽组件
+import { TabBarItemProperty, TabBarProperty, THEME_LIST } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+// 底部导航栏
+defineOptions({ name: 'TabBarProperty' })
+
+const props = defineProps<{ modelValue: TabBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+// 缓存背景：当背景类型切换时，防止参数丢失
+const backgroundCache = ref('')
+const handleBackgroundTypeChange = () => {
+  const background = formData.value!.style.background
+  formData.value!.style.background = backgroundCache.value
+  backgroundCache.value = background
+}
+
+/** 添加导航项 */
+const handleAddItem = () => {
+  formData?.value?.items?.push({} as TabBarItemProperty)
+}
+/** 删除导航项 */
+const handleDeleteItem = (index: number) => {
+  formData?.value?.items?.splice(index, 1)
+}
+
+// 要的主题
+const handleThemeChange = () => {
+  const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme)
+  if (theme?.color) {
+    formData.value.style.activeColor = theme.color
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/config.ts b/src/components/DiyEditor/components/mobile/TitleBar/config.ts
new file mode 100644
index 00000000..3d486cc3
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TitleBar/config.ts
@@ -0,0 +1,65 @@
+import { DiyComponent } from '@/components/DiyEditor/util'
+
+/** 标题栏属性 */
+export interface TitleBarProperty {
+  // 主标题
+  title: string
+  // 副标题
+  description: string
+  // 标题大小
+  titleSize: number
+  // 描述大小
+  descriptionSize: number
+  // 标题粗细
+  titleWeight: number
+  // 显示位置
+  position: 'left' | 'center'
+  // 描述粗细
+  descriptionWeight: number
+  // 标题颜色
+  titleColor: string
+  // 描述颜色
+  descriptionColor: string
+  // 背景颜色
+  backgroundColor: string
+  // 底部分割线
+  showBottomBorder: false
+  // 查看更多
+  more: {
+    // 是否显示查看更多
+    show: false
+    // 样式选择
+    type: 'text' | 'icon' | 'all'
+    // 自定义文字
+    text: string
+    // 链接
+    url: string
+  }
+}
+
+// 定义组件
+export const component = {
+  id: 'TitleBar',
+  name: '标题栏',
+  icon: 'material-symbols:line-start',
+  property: {
+    title: '主标题',
+    description: '副标题',
+    titleSize: 16,
+    descriptionSize: 12,
+    titleWeight: 400,
+    position: 'left',
+    descriptionWeight: 200,
+    titleColor: 'rgba(50, 50, 51, 10)',
+    descriptionColor: 'rgba(150, 151, 153, 10)',
+    backgroundColor: 'rgba(255, 255, 255, 10)',
+    showBottomBorder: false,
+    more: {
+      //查看更多
+      show: false,
+      type: 'icon',
+      text: '查看更多',
+      url: ''
+    }
+  }
+} as DiyComponent<TitleBarProperty>
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/index.vue b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
new file mode 100644
index 00000000..aab65779
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="title-bar"
+    :style="{
+      background: property.backgroundColor,
+      borderBottom: property.showBottomBorder ? '1px solid #F9F9F9' : '1px solid #fff'
+    }"
+  >
+    <div>
+      <!-- 标题 -->
+      <div
+        :style="{
+          fontSize: `${property.titleSize}px`,
+          fontWeight: property.titleWeight,
+          color: property.titleColor,
+          textAlign: property.position
+        }"
+        v-if="property.title"
+      >
+        {{ property.title }}
+      </div>
+      <!-- 副标题 -->
+      <div
+        :style="{
+          fontSize: `${property.descriptionSize}px`,
+          fontWeight: property.descriptionWeight,
+          color: property.descriptionColor,
+          textAlign: property.position
+        }"
+        class="m-t-8px"
+        v-if="property.description"
+      >
+        {{ property.description }}
+      </div>
+    </div>
+    <!-- 更多 -->
+    <div
+      class="more"
+      v-show="property.more.show"
+      :style="{
+        color: property.more.type === 'text' ? '#38f' : ''
+      }"
+    >
+      {{ property.more.type === 'icon' ? '' : property.more.text }}
+      <Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { TitleBarProperty } from './config'
+
+/** 标题栏 */
+defineOptions({ name: 'TitleBar' })
+
+defineProps<{ property: TitleBarProperty }>()
+</script>
+<style scoped lang="scss">
+.title-bar {
+  border: 2px solid #fff;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 16px;
+  min-height: 20px;
+  position: relative;
+
+  /* 更多 */
+  .more {
+    position: absolute;
+    right: 8px;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    font-size: 10px;
+    color: #969799;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/property.vue b/src/components/DiyEditor/components/mobile/TitleBar/property.vue
new file mode 100644
index 00000000..3e4dac2d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/TitleBar/property.vue
@@ -0,0 +1,115 @@
+<template>
+  <section class="title-bar">
+    <el-form label-width="85px" :model="formData" :rules="rules">
+      <el-form-item label="主标题" prop="title">
+        <el-input
+          v-model="formData.title"
+          placeholder="请输入主标题"
+          show-word-limit
+          maxlength="20"
+        />
+      </el-form-item>
+      <el-form-item label="副标题" prop="description">
+        <el-input
+          type="textarea"
+          v-model="formData.description"
+          placeholder="请输入副标题"
+          maxlength="50"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="显示位置" prop="position">
+        <el-radio-group v-model="formData!.position">
+          <el-tooltip content="居左" placement="top">
+            <el-radio-button label="left">
+              <Icon icon="ant-design:align-left-outlined" />
+            </el-radio-button>
+          </el-tooltip>
+          <el-tooltip content="居中" placement="top">
+            <el-radio-button label="center">
+              <Icon icon="ant-design:align-center-outlined" />
+            </el-radio-button>
+          </el-tooltip>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="标题大小" prop="titleSize">
+        <el-slider v-model="formData.titleSize" :max="60" :min="10" show-input input-size="small" />
+      </el-form-item>
+      <el-form-item label="副标题大小" prop="descriptionSize">
+        <el-slider
+          v-model="formData.descriptionSize"
+          :max="60"
+          :min="10"
+          show-input
+          input-size="small"
+        />
+      </el-form-item>
+      <el-form-item label="标题粗细" prop="titleWeight">
+        <el-slider
+          v-model="formData.titleWeight"
+          :min="100"
+          :max="900"
+          :step="100"
+          show-input
+          input-size="small"
+        />
+      </el-form-item>
+      <el-form-item label="副标题粗细" prop="descriptionWeight">
+        <el-slider
+          v-model="formData.descriptionWeight"
+          :min="100"
+          :max="900"
+          :step="100"
+          show-input
+          input-size="small"
+        />
+      </el-form-item>
+      <el-form-item label="标题颜色" prop="titleColor">
+        <ColorInput v-model="formData.titleColor" />
+      </el-form-item>
+      <el-form-item label="副标题颜色" prop="descriptionColor">
+        <ColorInput v-model="formData.descriptionColor" />
+      </el-form-item>
+      <el-form-item label="背景颜色" prop="backgroundColor">
+        <ColorInput v-model="formData.backgroundColor" />
+      </el-form-item>
+      <el-form-item label="底部分割线" prop="showBottomBorder">
+        <el-switch v-model="formData!.showBottomBorder" />
+      </el-form-item>
+      <el-form-item label="查看更多" prop="more.show">
+        <el-checkbox v-model="formData.more.show" />
+      </el-form-item>
+      <!-- 更多样式选择 -->
+      <template v-if="formData.more.show">
+        <el-form-item label="样式" prop="more.type">
+          <el-radio-group v-model="formData.more.type">
+            <el-radio label="text">文字</el-radio>
+            <el-radio label="icon">图标</el-radio>
+            <el-radio label="all">文字+图标</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
+          <el-input v-model="formData.more.text" />
+        </el-form-item>
+        <el-form-item label="跳转链接" prop="more.url">
+          <el-input v-model="formData.more.url" placeholder="请输入跳转链接" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </section>
+</template>
+<script setup lang="ts">
+import { TitleBarProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+// 导航栏属性面板
+defineOptions({ name: 'TitleBarProperty' })
+
+const props = defineProps<{ modelValue: TitleBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+// 表单校验
+const rules = {}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/index.ts b/src/components/DiyEditor/components/mobile/index.ts
new file mode 100644
index 00000000..c0dc67da
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/index.ts
@@ -0,0 +1,61 @@
+/*
+ * 组件注册
+ *
+ * 组件规范：
+ * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ * 4. property.vue：组件属性表单，用于配置组件，必选，
+ *
+ * 注：
+ * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致
+ */
+
+// 导入组件界面模块
+const viewModules: Record<string, any> = import.meta.glob('./*/*.vue')
+// 导入配置模块
+const configModules: Record<string, any> = import.meta.glob('./*/config.ts', { eager: true })
+
+// 界面模块
+const components = {}
+// 组件配置模块
+const componentConfigs = {}
+
+// 组件界面的类型
+type ViewType = 'index' | 'property'
+
+/**
+ * 注册组件的界面模块
+ *
+ * @param componentId 组件ID
+ * @param configPath 配置模块的文件路径
+ * @param viewType 组件界面的类型
+ */
+const registerComponentViewModule = (
+  componentId: string,
+  configPath: string,
+  viewType: ViewType
+) => {
+  const viewPath = configPath.replace('config.ts', `${viewType}.vue`)
+  const viewModule = viewModules[viewPath]
+  if (viewModule) {
+    // 定义异步组件
+    components[componentId] = defineAsyncComponent(viewModule)
+  }
+}
+
+// 注册
+Object.keys(configModules).forEach((modulePath: string) => {
+  const component = configModules[modulePath].component
+  const componentId = component?.id
+  if (componentId) {
+    // 注册组件
+    componentConfigs[componentId] = component
+    // 注册预览界面
+    registerComponentViewModule(componentId, modulePath, 'index')
+    // 注册属性配置表单
+    registerComponentViewModule(`${componentId}Property`, modulePath, 'property')
+  }
+})
+
+export { components, componentConfigs }
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
new file mode 100644
index 00000000..520cd497
--- /dev/null
+++ b/src/components/DiyEditor/index.vue
@@ -0,0 +1,539 @@
+<template>
+  <el-container class="editor">
+    <!-- 顶部：工具栏 -->
+    <el-header class="editor-header">
+      <!-- 左侧操作区 -->
+      <slot name="toolBarLeft"></slot>
+      <!-- 中心操作区 -->
+      <div class="header-center flex flex-1 items-center justify-center">
+        <span>{{ title }}</span>
+      </div>
+      <!-- 右侧操作区 -->
+      <el-button-group class="header-right">
+        <el-tooltip content="重置">
+          <el-button @click="handleReset">
+            <Icon icon="system-uicons:reset-alt" :size="24" />
+          </el-button>
+        </el-tooltip>
+        <el-tooltip content="预览">
+          <el-button @click="handlePreview">
+            <Icon icon="ep:view" :size="24" />
+          </el-button>
+        </el-tooltip>
+        <el-tooltip content="保存">
+          <el-button @click="handleSave">
+            <Icon icon="ep:check" :size="24" />
+          </el-button>
+        </el-tooltip>
+      </el-button-group>
+    </el-header>
+    <!-- 中心区域 -->
+    <el-container class="editor-container">
+      <!-- 左侧：组件库 -->
+      <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
+      <!-- 中心设计区域 -->
+      <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <div class="editor-design">
+          <!-- 手机顶部 -->
+          <div class="editor-design-top">
+            <!-- 手机顶部状态栏 -->
+            <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
+            <!-- 手机顶部导航栏 -->
+            <NavigationBar
+              v-if="showNavigationBar"
+              :property="navigationBarComponent.property"
+              @click="handleNavigationBarSelected"
+              :class="[
+                'component',
+                { active: selectedComponent?.id === navigationBarComponent.id }
+              ]"
+            />
+          </div>
+          <!-- 手机页面编辑区域 -->
+          <el-scrollbar class="editor-design-center" height="100%" view-class="page-prop-area">
+            <div
+              class="phone-container"
+              :style="{
+                backgroundColor: pageConfigComponent.property.backgroundColor,
+                backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
+              }"
+            >
+              <draggable
+                class="drag-area page-prop-area"
+                v-model="pageComponents"
+                item-key="index"
+                :animation="200"
+                filter=".component-toolbar"
+                ghost-class="draggable-ghost"
+                :force-fallback="true"
+                group="component"
+                @change="handleComponentChange"
+              >
+                <template #item="{ element, index }">
+                  <div class="component-box" @click="handleComponentSelected(element, index)">
+                    <!-- 左侧组件名 -->
+                    <div
+                      :class="['component-name', { active: selectedComponentIndex === index }]"
+                      v-if="element.name"
+                    >
+                      {{ element.name }}
+                    </div>
+                    <!-- 组件内容区 -->
+                    <component
+                      :is="element.id"
+                      :property="element.property"
+                      :class="['component', { active: selectedComponentIndex === index }]"
+                      :data-type="element.id"
+                    />
+                    <!-- 左侧：组件操作工具栏 -->
+                    <div
+                      class="component-toolbar"
+                      v-if="element.name && selectedComponentIndex === index"
+                    >
+                      <el-button-group type="primary">
+                        <el-tooltip content="上移" placement="right">
+                          <el-button
+                            :disabled="index === 0"
+                            @click.stop="handleMoveComponent(index, -1)"
+                          >
+                            <Icon icon="ep:arrow-up" />
+                          </el-button>
+                        </el-tooltip>
+                        <el-tooltip content="下移" placement="right">
+                          <el-button
+                            :disabled="index === pageComponents.length - 1"
+                            @click.stop="handleMoveComponent(index, 1)"
+                          >
+                            <Icon icon="ep:arrow-down" />
+                          </el-button>
+                        </el-tooltip>
+                        <el-tooltip content="复制" placement="right">
+                          <el-button @click.stop="handleCopyComponent(index)">
+                            <Icon icon="ep:copy-document" />
+                          </el-button>
+                        </el-tooltip>
+                        <el-tooltip content="删除" placement="right">
+                          <el-button @click.stop="handleDeleteComponent(index)">
+                            <Icon icon="ep:delete" />
+                          </el-button>
+                        </el-tooltip>
+                      </el-button-group>
+                    </div>
+                  </div>
+                </template>
+              </draggable>
+            </div>
+          </el-scrollbar>
+          <!-- 手机底部导航 -->
+          <div
+            v-if="showTabBar"
+            :class="[
+              'editor-design-bottom',
+              'component',
+              { active: selectedComponent?.id === tabBarComponent.id }
+            ]"
+          >
+            <TabBar :property="tabBarComponent.property" @click="handleTabBarSelected" />
+          </div>
+        </div>
+      </div>
+      <!-- 右侧属性面板 -->
+      <el-aside class="editor-right" width="350px" v-if="selectedComponent?.property">
+        <el-card
+          shadow="never"
+          body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
+          class="h-full"
+        >
+          <!-- 组件名称 -->
+          <template #header>
+            <div class="flex items-center gap-8px">
+              <Icon :icon="selectedComponent.icon" color="gray" />
+              <span>{{ selectedComponent.name }}</span>
+            </div>
+          </template>
+          <el-scrollbar
+            class="m-[calc(0px-var(--el-card-padding))]"
+            view-class="p-[var(--el-card-padding)] p-b-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
+          >
+            <component
+              :is="selectedComponent.id + 'Property'"
+              v-model="selectedComponent.property"
+            />
+          </el-scrollbar>
+        </el-card>
+      </el-aside>
+    </el-container>
+  </el-container>
+</template>
+<script lang="ts">
+// 注册所有的组件
+import { components } from './components/mobile/index'
+export default {
+  components: { ...components }
+}
+</script>
+<script lang="ts" setup>
+import draggable from 'vuedraggable'
+import ComponentLibrary from './components/ComponentLibrary.vue'
+import NavigationBar from './components/mobile/NavigationBar/index.vue'
+import TabBar from './components/mobile/TabBar/index.vue'
+import { cloneDeep, includes } from 'lodash-es'
+import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
+import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
+import { component as TAB_BAR_COMPONENT } from './components/mobile/TabBar/config'
+import { isString } from '@/utils/is'
+import { DiyComponent, DiyComponentLibrary, PageConfig } from '@/components/DiyEditor/util'
+import { componentConfigs } from '@/components/DiyEditor/components/mobile'
+
+/** 页面装修详情页 */
+defineOptions({ name: 'DiyPageDetail' })
+
+// 消息弹窗
+const message = useMessage()
+// 左侧组件库
+const componentLibrary = ref()
+// 页面设置组件
+const pageConfigComponent = ref<DiyComponent<any>>(cloneDeep(PAGE_CONFIG_COMPONENT))
+// 顶部导航栏
+const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_COMPONENT))
+// 底部导航菜单
+const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
+
+// 选中的组件，默认选中顶部导航栏
+const selectedComponent = ref<DiyComponent<any>>(unref(pageConfigComponent))
+// 选中的组件索引
+const selectedComponentIndex = ref<number>(-1)
+// 组件列表
+const pageComponents = ref<DiyComponent<any>[]>([])
+// 定义属性
+const props = defineProps<{
+  modelValue: string | PageConfig
+  title: string
+  libs: DiyComponentLibrary[] // 组件库
+  showNavigationBar: boolean
+  showTabBar: boolean
+}>()
+
+// 监听传入的页面配置
+watch(
+  () => props.modelValue,
+  () => {
+    const modelValue = isString(props.modelValue)
+      ? (JSON.parse(props.modelValue) as PageConfig)
+      : props.modelValue
+    pageConfigComponent.value.property = modelValue?.page || PAGE_CONFIG_COMPONENT.property
+    navigationBarComponent.value.property =
+      modelValue?.navigationBar || NAVIGATION_BAR_COMPONENT.property
+    tabBarComponent.value.property = modelValue?.tabBar || TAB_BAR_COMPONENT.property
+    // 查找对应的页面组件
+    pageComponents.value = (modelValue?.components || []).map((item) => {
+      const component = componentConfigs[item.id]
+      return { ...component, property: item.property }
+    })
+  },
+  {
+    immediate: true
+  }
+)
+// 保存
+const handleSave = () => {
+  const pageConfig = {
+    page: pageConfigComponent.value.property,
+    navigationBar: navigationBarComponent.value.property,
+    tabBar: tabBarComponent.value.property,
+    components: pageComponents.value.map((component) => {
+      // 只保留APP有用的字段
+      return { id: component.id, property: component.property }
+    })
+  } as PageConfig
+  // 发送数据更新通知
+  const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
+  emits('update:modelValue', modelValue)
+  // 发送保存通知
+  emits('save', pageConfig)
+}
+
+// 处理页面选中：显示属性表单
+const handlePageSelected = (event: any) => {
+  // 配置了样式 page-prop-area 的元素，才显示页面设置
+  if (includes(event?.target?.classList, 'page-prop-area')) {
+    handleComponentSelected(unref(pageConfigComponent))
+  }
+}
+
+/**
+ * 选中组件
+ *
+ * @param component 组件
+ * @param index 组件的索引
+ */
+const handleComponentSelected = (component: DiyComponent<any>, index: number = -1) => {
+  selectedComponent.value = component
+  selectedComponentIndex.value = index
+}
+
+// 选中顶部导航栏
+const handleNavigationBarSelected = () => {
+  handleComponentSelected(unref(navigationBarComponent))
+}
+
+// 选中底部导航菜单
+const handleTabBarSelected = () => {
+  handleComponentSelected(unref(tabBarComponent))
+}
+
+// 组件变动
+const handleComponentChange = (dragEvent: any) => {
+  // 新增，即从组件库拖拽添加组件
+  if (dragEvent.added) {
+    const { element, newIndex } = dragEvent.added
+    handleComponentSelected(element, newIndex)
+  } else if (dragEvent.moved) {
+    // 拖拽排序
+    const { newIndex } = dragEvent.moved
+    // 保持选中
+    selectedComponentIndex.value = newIndex
+  }
+}
+
+// 交换组件
+const swapComponent = (oldIndex: number, newIndex: number) => {
+  ;[pageComponents.value[oldIndex], pageComponents.value[newIndex]] = [
+    pageComponents.value[newIndex],
+    pageComponents.value[oldIndex]
+  ]
+  // 保持选中
+  selectedComponentIndex.value = newIndex
+}
+
+/** 移动组件 */
+const handleMoveComponent = (index: number, direction: number) => {
+  const newIndex = index + direction
+  if (newIndex < 0 || newIndex >= pageComponents.value.length) return
+
+  swapComponent(index, newIndex)
+}
+/** 复制组件 */
+const handleCopyComponent = (index: number) => {
+  const component = cloneDeep(pageComponents.value[index])
+  pageComponents.value.splice(index + 1, 0, component)
+}
+/**
+ * 删除组件
+ * @param index 当前组件index
+ */
+const handleDeleteComponent = (index: number) => {
+  // 删除组件
+  pageComponents.value.splice(index, 1)
+  if (index < pageComponents.value.length) {
+    // 1. 不是最后一个组件时，删除后选中下面的组件
+    let bottomIndex = index
+    handleComponentSelected(pageComponents.value[bottomIndex], bottomIndex)
+  } else if (pageComponents.value.length > 0) {
+    // 2. 不是第一个组件时，删除后选中上面的组件
+    let topIndex = index - 1
+    handleComponentSelected(pageComponents.value[topIndex], topIndex)
+  } else {
+    // 3. 组件全部删除之后，显示页面设置
+    handleComponentSelected(unref(pageConfigComponent))
+  }
+}
+
+// 工具栏操作
+const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue'])
+// 重置
+const handleReset = () => {
+  message.warning('开发中~')
+  emits('reset')
+}
+// 预览
+const handlePreview = () => {
+  message.warning('开发中~')
+  emits('preview')
+}
+</script>
+<style lang="scss" scoped>
+.editor {
+  height: 100%;
+  margin: calc(0px - var(--app-content-padding));
+  display: flex;
+  flex-direction: column;
+}
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: auto;
+  padding: 0;
+  border-bottom: solid 1px var(--el-border-color);
+  background-color: var(--el-bg-color);
+
+  .header-right {
+    height: 100%;
+    .el-button {
+      height: 100%;
+    }
+  }
+
+  :deep(.el-radio-button__inner),
+  :deep(.el-button) {
+    border-top: none !important;
+    border-bottom: none !important;
+    border-radius: 0 !important;
+  }
+}
+.editor-container {
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
+  );
+  /* 右侧属性面板 */
+  .editor-right {
+    flex-shrink: 0;
+    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
+
+    :deep(.el-card__header) {
+      padding: 8px 16px;
+    }
+
+    .property-group {
+      /* 属性分组 */
+      :deep(.el-card__header) {
+        border: none;
+        background: var(--el-bg-color-page);
+      }
+    }
+  }
+
+  /* 中心 */
+  .editor-center {
+    flex: 1 1 0;
+    padding: 16px 0;
+    background-color: var(--app-content-bg-color);
+    display: flex;
+    justify-content: center;
+
+    .editor-design {
+      position: relative;
+      height: 100%;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: hidden;
+
+      /* 组件 */
+      .component {
+        border: 1px solid #fff;
+        width: 375px !important;
+
+        &:hover {
+          border: 1px dashed #155bd4;
+        }
+      }
+      .component.active {
+        border: 2px solid #155bd4 !important;
+      }
+
+      .editor-design-top {
+        width: 379px;
+
+        .status-bar {
+          height: 20px;
+          width: 100%;
+          background-color: #fff;
+        }
+
+        .navigation-bar {
+          width: 100%;
+        }
+      }
+
+      .editor-design-bottom {
+        width: 379px;
+      }
+
+      .editor-design-center {
+        width: 100%;
+        flex: 1 1 0;
+
+        :deep(.el-scrollbar__view) {
+          height: 100%;
+        }
+
+        /* 主体内容 */
+        .phone-container {
+          height: 100%;
+          box-sizing: border-box;
+          cursor: move;
+          position: relative;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          width: 379px;
+          margin: 0 auto;
+
+          .drag-area {
+            height: 100%;
+          }
+
+          /* 组件容器 */
+          .component-box {
+            width: 100%;
+            position: relative;
+            /* 组件名称 */
+            .component-name {
+              position: absolute;
+              width: 80px;
+              text-align: center;
+              line-height: 25px;
+              height: 25px;
+              background: #fff;
+              font-size: 12px;
+              left: -80px;
+              top: 0;
+              box-shadow:
+                0 0 4px #00000014,
+                0 2px 6px #0000000f,
+                0 4px 8px 2px #0000000a;
+            }
+            .component-name.active {
+              background: #2d8cf0;
+              color: #fff;
+            }
+            /* 组件操作按钮 */
+            .component-toolbar {
+              position: absolute;
+              top: 0;
+              right: -50px;
+
+              .el-button-group {
+                display: inline-flex;
+                flex-direction: column;
+              }
+              .el-button-group > .el-button:first-child {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+                border-top-right-radius: var(--el-border-radius-base);
+                border-bottom-color: var(--el-button-divide-border-color);
+              }
+              .el-button-group > .el-button:last-child {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                border-bottom-left-radius: var(--el-border-radius-base);
+                border-top-color: var(--el-button-divide-border-color);
+              }
+              .el-button-group .el-button--primary:not(:first-child):not(:last-child) {
+                border-top-color: var(--el-button-divide-border-color);
+                border-bottom-color: var(--el-button-divide-border-color);
+              }
+              .el-button-group > .el-button:not(:last-child) {
+                margin-bottom: -1px;
+                margin-right: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
new file mode 100644
index 00000000..407efa30
--- /dev/null
+++ b/src/components/DiyEditor/util.ts
@@ -0,0 +1,59 @@
+import { ref, Ref } from 'vue'
+import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/PageConfig/config'
+import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
+import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
+
+export interface DiyComponent<T> {
+  id: string
+  name: string
+  icon: string
+  property: T
+}
+
+export interface DiyComponentLibrary {
+  name: string
+  extended: boolean
+  components: string[]
+}
+
+// 页面配置
+export interface PageConfig {
+  // 页面属性
+  page: PageConfigProperty
+  // 顶部导航栏属性
+  navigationBar: NavigationBarProperty
+  // 底部导航菜单属性
+  tabBar: TabBarProperty
+  // 页面组件列表
+  components: PageComponent[]
+}
+// 页面组件，只保留组件ID，组件属性
+export interface PageComponent extends Pick<DiyComponent<any>, 'id' | 'property'> {}
+
+// 属性表单监听
+export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: Ref<T> } {
+  const formData = ref<T>()
+  // 监听属性数据变动
+  watch(
+    () => modelValue,
+    () => {
+      formData.value = modelValue
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+  // 监听表单数据变动
+  watch(
+    () => formData.value,
+    () => {
+      emit('update:modelValue', formData.value)
+    },
+    {
+      deep: true
+    }
+  )
+
+  return { formData }
+}
diff --git a/src/components/UploadFile/src/UploadImg.vue b/src/components/UploadFile/src/UploadImg.vue
index 3cfc0a73..996fe40b 100644
--- a/src/components/UploadFile/src/UploadImg.vue
+++ b/src/components/UploadFile/src/UploadImg.vue
@@ -18,15 +18,15 @@
         <div class="upload-handle" @click.stop>
           <div class="handle-icon" @click="editImg">
             <Icon icon="ep:edit" />
-            <span>{{ t('action.edit') }}</span>
+            <span v-if="showBtnText">{{ t('action.edit') }}</span>
           </div>
           <div class="handle-icon" @click="imgViewVisible = true">
             <Icon icon="ep:zoom-in" />
-            <span>{{ t('action.detail') }}</span>
+            <span v-if="showBtnText">{{ t('action.detail') }}</span>
           </div>
-          <div class="handle-icon" @click="deleteImg">
+          <div class="handle-icon" @click="deleteImg" v-if="showDelete">
             <Icon icon="ep:delete" />
-            <span>{{ t('action.del') }}</span>
+            <span v-if="showBtnText">{{ t('action.del') }}</span>
           </div>
         </div>
       </template>
@@ -81,7 +81,11 @@ const props = defineProps({
   fileType: propTypes.array.def(['image/jpeg', 'image/png', 'image/gif']), // 图片类型限制 ==> 非必传（默认为 ["image/jpeg", "image/png", "image/gif"]）
   height: propTypes.string.def('150px'), // 组件高度 ==> 非必传（默认为 150px）
   width: propTypes.string.def('150px'), // 组件宽度 ==> 非必传（默认为 150px）
-  borderradius: propTypes.string.def('8px') // 组件边框圆角 ==> 非必传（默认为 8px）
+  borderradius: propTypes.string.def('8px'), // 组件边框圆角 ==> 非必传（默认为 8px）
+  // 是否显示删除按钮
+  showDelete: propTypes.bool.def(true),
+  // 是否显示按钮文字
+  showBtnText: propTypes.bool.def(true)
 })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index aa260cf1..70dc5b2f 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -459,6 +459,34 @@ const remainingRouter: AppRouteRecordRaw[] = [
         component: () => import('@/views/pay/cashier/index.vue')
       }
     ]
+  },
+  {
+    path: '/diy',
+    name: 'DiyCenter',
+    meta: { hidden: true },
+    component: Layout,
+    children: [
+      {
+        path: 'template/decorate/:id',
+        name: 'DiyTemplateDecorate',
+        meta: {
+          title: '模板装修',
+          noCache: true,
+          hidden: true
+        },
+        component: () => import('@/views/mall/promotion/diy/template/decorate.vue')
+      },
+      {
+        path: 'page/decorate/:id',
+        name: 'DiyPageDecorate',
+        meta: {
+          title: '页面装修',
+          noCache: true,
+          hidden: true
+        },
+        component: () => import('@/views/mall/promotion/diy/page/decorate.vue')
+      }
+    ]
   }
 ]
 
diff --git a/src/views/mall/promotion/diy/page/DiyPageForm.vue b/src/views/mall/promotion/diy/page/DiyPageForm.vue
new file mode 100644
index 00000000..e0cb18b6
--- /dev/null
+++ b/src/views/mall/promotion/diy/page/DiyPageForm.vue
@@ -0,0 +1,114 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="页面名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入页面名称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="预览图" prop="previewImageUrls">
+        <UploadImgs v-model="formData.previewImageUrls" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  remark: undefined,
+  previewImageUrls: []
+})
+const formRules = reactive({
+  name: [{ required: true, message: '页面名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const diyPage = await DiyPageApi.getDiyPage(id) // 处理预览图
+      if (diyPage?.previewImageUrls?.length > 0) {
+        diyPage.previewImageUrls = diyPage.previewImageUrls.map((url: string) => {
+          return { url }
+        })
+      }
+      formData.value = diyPage
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    // 处理预览图
+    const previewImageUrls = formData.value.previewImageUrls.map((item) => {
+      return item['url'] ? item['url'] : item
+    })
+    const data = { ...formData.value, previewImageUrls } as unknown as DiyPageApi.DiyPageVO
+    if (formType.value === 'create') {
+      await DiyPageApi.createDiyPage(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DiyPageApi.updateDiyPage(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    remark: undefined,
+    previewImageUrls: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/promotion/diy/page/decorate.vue b/src/views/mall/promotion/diy/page/decorate.vue
new file mode 100644
index 00000000..76336bc4
--- /dev/null
+++ b/src/views/mall/promotion/diy/page/decorate.vue
@@ -0,0 +1,99 @@
+<template>
+  <DiyEditor
+    v-if="formData && !formLoading"
+    v-model="formData.property"
+    :title="formData.name"
+    :libs="componentLibs"
+    :show-navigation-bar="true"
+    :show-tab-bar="false"
+    @save="submitForm"
+  />
+</template>
+<script setup lang="ts">
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageDecorate' })
+
+// 组件库
+const componentLibs = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'GridNavigation',
+      'ListNavigation',
+      'Divider',
+      'TitleBar'
+    ]
+  },
+  { name: '图文组件', extended: true, components: ['Carousel'] },
+  { name: '商品组件', extended: true, components: ['ProductCard'] },
+  {
+    name: '会员组件',
+    extended: true,
+    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
+  },
+  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
+] as DiyComponentLibrary[]
+
+const message = useMessage() // 消息弹窗
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref<DiyPageApi.DiyPageVO>()
+const formRef = ref() // 表单 Ref
+
+// 获取详情
+const getPageDetail = async (id: any) => {
+  formLoading.value = true
+  try {
+    formData.value = await DiyPageApi.getDiyPage(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+// 提交表单
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await DiyPageApi.updateDiyPage(unref(formData)!)
+    message.success('保存成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    templateId: undefined,
+    name: '',
+    remark: '',
+    previewImageUrls: [],
+    property: ''
+  } as DiyPageApi.DiyPageVO
+  formRef.value?.resetFields()
+}
+
+/** 初始化 **/
+const { currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+onMounted(() => {
+  resetForm()
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  getPageDetail(route.params.id)
+})
+</script>
diff --git a/src/views/mall/promotion/diy/page/index.vue b/src/views/mall/promotion/diy/page/index.vue
new file mode 100644
index 00000000..6436c2f7
--- /dev/null
+++ b/src/views/mall/promotion/diy/page/index.vue
@@ -0,0 +1,189 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="页面名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入页面名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['promotion:diy-page:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="预览图" align="center" prop="previewImageUrls">
+        <template #default="scope">
+          <el-image
+            class="h-40px max-w-40px"
+            v-for="(url, index) in scope.row.previewImageUrls"
+            :key="index"
+            :src="url"
+            :preview-src-list="scope.row.previewImageUrls"
+            :initial-index="index"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="页面名称" align="center" prop="name" />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handleDecorate(scope.row.id)"
+            v-hasPermi="['promotion:diy-page:update']"
+          >
+            装修
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['promotion:diy-page:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['promotion:diy-page:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DiyPageForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
+import DiyPageForm from './DiyPageForm.vue'
+
+/** 装修页面 */
+defineOptions({ name: 'DiyPage' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DiyPageApi.getDiyPagePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DiyPageApi.deleteDiyPage(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 打开装修页面 */
+const { push } = useRouter()
+const handleDecorate = (id: number) => {
+  push({ name: 'DiyPageDecorate', params: { id } })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mall/promotion/diy/template/DiyTemplateForm.vue b/src/views/mall/promotion/diy/template/DiyTemplateForm.vue
new file mode 100644
index 00000000..e4289f65
--- /dev/null
+++ b/src/views/mall/promotion/diy/template/DiyTemplateForm.vue
@@ -0,0 +1,115 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="模板名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入模板名称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" />
+      </el-form-item>
+      <el-form-item label="预览图" prop="previewImageUrls">
+        <UploadImgs v-model="formData.previewImageUrls" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+
+/** 装修模板表单 */
+defineOptions({ name: 'DiyTemplateForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  remark: undefined,
+  previewImageUrls: []
+})
+const formRules = reactive({
+  name: [{ required: true, message: '模板名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const diyTemplate = await DiyTemplateApi.getDiyTemplate(id)
+      // 处理预览图
+      if (diyTemplate?.previewImageUrls?.length > 0) {
+        diyTemplate.previewImageUrls = diyTemplate.previewImageUrls.map((url: string) => {
+          return { url }
+        })
+      }
+      formData.value = diyTemplate
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    // 处理预览图
+    const previewImageUrls = formData.value.previewImageUrls.map((item) => {
+      return item['url'] ? item['url'] : item
+    })
+    const data = { ...formData.value, previewImageUrls } as unknown as DiyTemplateApi.DiyTemplateVO
+    if (formType.value === 'create') {
+      await DiyTemplateApi.createDiyTemplate(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DiyTemplateApi.updateDiyTemplate(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    remark: undefined,
+    previewImageUrls: []
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue
new file mode 100644
index 00000000..9c7500b2
--- /dev/null
+++ b/src/views/mall/promotion/diy/template/decorate.vue
@@ -0,0 +1,134 @@
+<template>
+  <DiyEditor
+    v-if="formData && !formLoading"
+    v-model="formData.property"
+    :title="templateItems[selectedTemplateItem].name"
+    :libs="libs"
+    :show-tab-bar="selectedTemplateItem === 0"
+    :show-navigation-bar="selectedTemplateItem > 0"
+    @save="submitForm"
+  >
+    <template #toolBarLeft>
+      <el-radio-group
+        v-model="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <el-tooltip v-for="(item, index) in templateItems" :key="index" :content="item.name">
+          <el-radio-button :label="index">
+            <Icon :icon="item.icon" :size="24" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group>
+    </template>
+  </DiyEditor>
+</template>
+<script setup lang="ts">
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+
+/** 装修模板表单 */
+defineOptions({ name: 'DiyTemplateDecorate' })
+
+// 左上角工具栏操作按钮
+const selectedTemplateItem = ref(0)
+const templateItems = reactive([
+  { name: '基础设置', icon: 'ep:iphone' },
+  { name: '首页', icon: 'ep:home-filled' },
+  { name: '我的', icon: 'ep:user-filled' }
+])
+
+const message = useMessage() // 消息弹窗
+
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref<DiyTemplateApi.DiyTemplateVO>()
+const formRef = ref() // 表单 Ref
+
+// 获取详情
+const getPageDetail = async (id: any) => {
+  formLoading.value = true
+  try {
+    formData.value = await DiyTemplateApi.getDiyTemplate(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+// 模板组件库
+const templateLibs = [] as DiyComponentLibrary[]
+// 页面组件库
+const pageLibs = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'GridNavigation',
+      'ListNavigation',
+      'Divider',
+      'TitleBar'
+    ]
+  },
+  { name: '图文组件', extended: true, components: ['Carousel'] },
+  { name: '商品组件', extended: true, components: ['ProductCard'] },
+  {
+    name: '会员组件',
+    extended: true,
+    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
+  },
+  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
+] as DiyComponentLibrary[]
+// 当前组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs)
+const handleTemplateItemChange = () => {
+  if (selectedTemplateItem.value === 0) {
+    libs.value = templateLibs
+  } else {
+    libs.value = pageLibs
+  }
+}
+
+// 提交表单
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await DiyTemplateApi.updateDiyTemplate(unref(formData)!)
+    message.success('保存成功')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+// 重置表单
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    used: false,
+    usedTime: undefined,
+    remark: '',
+    previewImageUrls: [],
+    property: ''
+  } as DiyTemplateApi.DiyTemplateVO
+  formRef.value?.resetFields()
+}
+
+/** 初始化 **/
+const { currentRoute } = useRouter() // 路由
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+onMounted(() => {
+  resetForm()
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  getPageDetail(route.params.id)
+})
+</script>
diff --git a/src/views/mall/promotion/diy/template/index.vue b/src/views/mall/promotion/diy/template/index.vue
new file mode 100644
index 00000000..dcf13698
--- /dev/null
+++ b/src/views/mall/promotion/diy/template/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="模板名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入模板名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['promotion:diy-template:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="预览图" align="center" prop="previewImageUrls">
+        <template #default="scope">
+          <el-image
+            class="h-40px max-w-40px"
+            v-for="(url, index) in scope.row.previewImageUrls"
+            :key="index"
+            :src="url"
+            :preview-src-list="scope.row.previewImageUrls"
+            :initial-index="index"
+            preview-teleported
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="模板名称" align="center" prop="name" />
+      <el-table-column label="是否使用" align="center" prop="used">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.used" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="使用时间"
+        align="center"
+        prop="usedTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" width="200">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handleDecorate(scope.row.id)"
+            v-hasPermi="['promotion:diy-template:update']"
+          >
+            装修
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['promotion:diy-template:update']"
+          >
+            编辑
+          </el-button>
+          <template v-if="!scope.row.used">
+            <el-button
+              link
+              type="primary"
+              @click="handleUse(scope.row)"
+              v-hasPermi="['promotion:diy-template:use']"
+            >
+              使用
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              @click="handleDelete(scope.row.id)"
+              v-hasPermi="['promotion:diy-template:delete']"
+            >
+              删除
+            </el-button>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DiyTemplateForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import DiyTemplateForm from './DiyTemplateForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+
+/** 装修模板 */
+defineOptions({ name: 'DiyTemplate' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DiyTemplateApi.getDiyTemplatePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DiyTemplateApi.deleteDiyTemplate(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 使用模板 */
+const handleUse = async (row: DiyTemplateApi.DiyTemplateVO) => {
+  try {
+    // 使用模板的二次确认
+    await message.confirm(`是否使用模板“${row.name}”?`)
+    // 发起删除
+    await DiyTemplateApi.useDiyTemplate(row.id)
+    message.success('使用成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 打开装修页面 */
+const { push } = useRouter()
+const handleDecorate = (id: number) => {
+  push({ name: 'DiyTemplateDecorate', params: { id } })
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From 0c81a0d96a07fe473a1fac7636e64e84b2bb4062 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 29 Oct 2023 22:29:03 +0800
Subject: [PATCH 04/77] =?UTF-8?q?code=20review=EF=BC=9A=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/contract/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/crm/contract/index.vue b/src/views/crm/contract/index.vue
index 7a8211be..1670c418 100644
--- a/src/views/crm/contract/index.vue
+++ b/src/views/crm/contract/index.vue
@@ -166,7 +166,7 @@ import download from '@/utils/download'
 import * as ContractApi from '@/api/crm/contract'
 import ContractForm from './ContractForm.vue'
 
-defineOptions({ name: 'Contract' })
+defineOptions({ name: 'CrmContract' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化

From 55a961e86265a1c2b37874dfd076b60935de6964 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 29 Oct 2023 23:48:10 +0800
Subject: [PATCH 05/77] =?UTF-8?q?=E8=BD=AC=E8=B4=A6=20-=20=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=90=8E=E5=8F=B0=E6=96=B0=E5=A2=9E=E8=BD=AC=E8=B4=A6?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/pay/demo/transfer/index.ts            |  25 +++
 src/api/pay/transfer/index.ts                 |  18 +++
 src/utils/dict.ts                             |   2 +
 src/views/pay/demo/{ => order}/index.vue      |   0
 .../pay/demo/transfer/DemoTransferForm.vue    | 122 ++++++++++++++
 src/views/pay/demo/transfer/index.vue         | 152 ++++++++++++++++++
 src/views/pay/transfer/CreatePayTransfer.vue  | 141 ++++++++++++++++
 .../WalletRechargePackageForm.vue             |   2 +-
 8 files changed, 461 insertions(+), 1 deletion(-)
 create mode 100644 src/api/pay/demo/transfer/index.ts
 create mode 100644 src/api/pay/transfer/index.ts
 rename src/views/pay/demo/{ => order}/index.vue (100%)
 create mode 100644 src/views/pay/demo/transfer/DemoTransferForm.vue
 create mode 100644 src/views/pay/demo/transfer/index.vue
 create mode 100644 src/views/pay/transfer/CreatePayTransfer.vue

diff --git a/src/api/pay/demo/transfer/index.ts b/src/api/pay/demo/transfer/index.ts
new file mode 100644
index 00000000..a95b0d5c
--- /dev/null
+++ b/src/api/pay/demo/transfer/index.ts
@@ -0,0 +1,25 @@
+import request from '@/config/axios'
+
+export interface DemoTransferVO {
+  price: number
+  type: number
+  userName: string
+  alipayLogonId: string
+  openid: string
+}
+
+// 创建示例转账单
+export function createDemoTransfer(data: DemoTransferVO) {
+  return request.post({
+    url: '/pay/demo-transfer/create',
+    data: data
+  })
+}
+
+// 获得示例订单分页
+export function getDemoTransferPage(query: PageParam) {
+  return request.get({
+    url: '/pay/demo-transfer/page',
+    params: query
+  })
+}
diff --git a/src/api/pay/transfer/index.ts b/src/api/pay/transfer/index.ts
new file mode 100644
index 00000000..4b2f3154
--- /dev/null
+++ b/src/api/pay/transfer/index.ts
@@ -0,0 +1,18 @@
+import request from '@/config/axios'
+
+export interface TransferVO {
+  appId: number
+  channelCode: string
+  merchantTransferId: string
+  type: number
+  price: number
+  subject: string
+  userName: string
+  alipayLogonId: string
+  openid: string
+}
+
+// 新增转账单
+export const createTransfer = async (data: TransferVO) => {
+  return await request.post({ url: `/pay/transfer/create`, data })
+}
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 489d8e4b..12d01507 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -143,6 +143,8 @@ export enum DICT_TYPE {
   PAY_REFUND_STATUS = 'pay_refund_status', // 退款订单状态
   PAY_NOTIFY_STATUS = 'pay_notify_status', // 商户支付回调状态
   PAY_NOTIFY_TYPE = 'pay_notify_type', // 商户支付回调状态
+  PAY_TRANSFER_STATUS = 'pay_transfer_status', // 转账订单状态
+  PAY_TRANSFER_TYPE = 'pay_transfer_type', // 转账订单状态
 
   // ========== MP 模块 ==========
   MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
diff --git a/src/views/pay/demo/index.vue b/src/views/pay/demo/order/index.vue
similarity index 100%
rename from src/views/pay/demo/index.vue
rename to src/views/pay/demo/order/index.vue
diff --git a/src/views/pay/demo/transfer/DemoTransferForm.vue b/src/views/pay/demo/transfer/DemoTransferForm.vue
new file mode 100644
index 00000000..e5448f10
--- /dev/null
+++ b/src/views/pay/demo/transfer/DemoTransferForm.vue
@@ -0,0 +1,122 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="800px">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="转账类型" prop="type">
+        <el-radio-group v-model="formData.type">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE)"
+            :key="dict.value"
+            :label="dict.value"
+            :disabled="dict.value === 2 || dict.value === 3 || dict.value === 4"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="转账金额(元)" prop="price">
+        <el-input-number
+          v-model="formData.price"
+          :min="0"
+          :precision="2"
+          :step="0.01"
+          placeholder="请输入转账金额"
+          style="width: 200px"
+        />
+      </el-form-item>
+      <el-form-item label="收款人姓名" prop="userName">
+        <el-input v-model="formData.userName" placeholder="请输入收款人姓名" />
+      </el-form-item>
+      <el-form-item v-show="formData.type === 1" label="支付宝登录账号" prop="alipayLogonId">
+        <el-input v-model="formData.alipayLogonId" placeholder="请输入支付宝登录账号" />
+      </el-form-item>
+      <el-form-item v-show="formData.type === 2" label="微信 openid" prop="openid">
+        <el-input v-model="formData.openid" placeholder="请输入微信 openid" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DemoTransferApi from '@/api/pay/demo/transfer'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { yuanToFen } from '@/utils'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  price: undefined,
+  type: undefined,
+  userName: undefined,
+  alipayLogonId: undefined,
+  openid: undefined
+})
+const formRules = reactive({
+  price: [{ required: true, message: '转账金额不能为空', trigger: 'blur' }],
+  type: [{ required: true, message: '转账类型不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+}
+/** 关闭弹窗 */
+const close = async () => {
+  dialogVisible.value = false
+  resetForm()
+}
+defineExpose({ open, close }) // 提供 open， close 方法，用于打开, 关闭弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = { ...formData.value }
+    data.price = yuanToFen(data.price)
+    if (formType.value === 'create') {
+      await DemoTransferApi.createDemoTransfer(data)
+      message.success(t('common.createSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    price: undefined,
+    userName: undefined,
+    alipayLogonId: undefined,
+    openid: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/pay/demo/transfer/index.vue b/src/views/pay/demo/transfer/index.vue
new file mode 100644
index 00000000..7d0d8bad
--- /dev/null
+++ b/src/views/pay/demo/transfer/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" plain @click="openForm('create')"
+          ><Icon icon="ep:plus" />创建业务转账单
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
+      <el-table-column label="订单编号" align="center" prop="id" />
+      <el-table-column label="转账类型" align="center" prop="type" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_TRANSFER_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="转账金额" align="center" prop="price">
+        <template #default="scope">
+          <span>￥{{ (scope.row.price / 100.0).toFixed(2) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="收款人姓名" align="center" prop="userName" width="120" />
+      <el-table-column label="支付宝登录账号" align="center" prop="alipayLogonId" width="180" />
+      <el-table-column label="微信 openid" align="center" prop="openid" width="120" />
+      <el-table-column label="转账状态" align="center" prop="transferStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_TRANSFER_STATUS" :value="scope.row.transferStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="转账单号" align="center" prop="payTransferId" />
+      <el-table-column label="支付渠道" align="center" prop="payChannelCode" />
+      <el-table-column
+        label="转账时间"
+        align="center"
+        prop="transferTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="handleTransfer(scope.row)"
+            v-if="scope.row.transferStatus === 0"
+          >
+            发起转账
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DemoTransferForm ref="demoFormRef" @success="getList" />
+  <CreatePayTransfer ref="payTransferRef" :payTransfer="payTransfer" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as DemoTransferApi from '@/api/pay/demo/transfer'
+import * as PayTransferApi from '@/api/pay/transfer'
+import DemoTransferForm from './DemoTransferForm.vue'
+import CreatePayTransfer from '../../transfer/CreatePayTransfer.vue'
+import { DICT_TYPE } from '@/utils/dict'
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+const queryFormRef = ref() // 搜索的表单
+
+let payTransfer = {
+  appId: undefined,
+  merchantTransferId: undefined,
+  type: undefined,
+  price: undefined,
+  subject: undefined,
+  userName: undefined,
+  alipayLogonId: undefined,
+  openid: undefined
+} as PayTransferApi.TransferVO // 传递给转账订单的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DemoTransferApi.getDemoTransferPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 创建业务转账单操作 */
+const demoFormRef = ref()
+const payTransferRef = ref()
+const openForm = (type: string) => {
+  demoFormRef.value.open(type)
+}
+
+/** 发起转账操作 */
+const handleTransfer = (row: any) => {
+  payTransfer = { ...row }
+  payTransfer.merchantTransferId = row.id.toString()
+  payTransfer.subject = '示例转账'
+  payTransferRef.value.showPayTransfer(payTransfer)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/pay/transfer/CreatePayTransfer.vue b/src/views/pay/transfer/CreatePayTransfer.vue
new file mode 100644
index 00000000..5f0ea166
--- /dev/null
+++ b/src/views/pay/transfer/CreatePayTransfer.vue
@@ -0,0 +1,141 @@
+<template>
+  <Dialog title="发起转账" v-model="dialogVisible" width="800px">
+    <el-card style="margin-top: 10px">
+      <el-descriptions title="转账信息" :column="2" border>
+        <el-descriptions-item label="转账类型">
+          {{ typeName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="转账金额(元)">
+          ￥{{ (transfer.price / 100.0).toFixed(2) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="收款人姓名">
+          {{ transfer.userName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="支付宝登录账号" v-if="transfer.type === 1">
+          {{ transfer.alipayLogonId }}
+        </el-descriptions-item>
+        <el-descriptions-item label="微信 openid" v-if="transfer.type === 2">
+          {{ transfer.openid }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-card>
+    <el-card style="margin-top: 20px">
+      <template #header>
+        <div class="card-header">
+          <span>选择转账渠道</span>
+        </div>
+      </template>
+      <div>
+        <el-radio-group v-model="channelCode">
+          <el-radio
+            label="alipay_pc"
+            :disabled="transfer.type === 2 || transfer.type === 3 || transfer.type === 4"
+          >
+            <img :src="svg_alipay_app" />
+          </el-radio>
+          <el-radio
+            label="wx_app"
+            :disabled="transfer.type === 1 || transfer.type === 3 || transfer.type === 4"
+          >
+            <img :src="svg_wx_app" />
+          </el-radio>
+        </el-radio-group>
+      </div>
+    </el-card>
+    <el-divider />
+    <div style="text-align: right">
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import * as PayTransferApi from '@/api/pay/transfer'
+import { computed, PropType } from 'vue'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+// 导入图标
+import svg_alipay_app from '@/assets/svgs/pay/icon/alipay_app.svg'
+import svg_wx_app from '@/assets/svgs/pay/icon/wx_app.svg'
+import { yuanToFen } from '@/utils'
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const formLoading = ref(false) // 提交的按钮禁用
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+defineOptions({ name: 'CreatePayTransfer' })
+
+const props = defineProps({
+  payTransfer: {
+    type: Object as PropType<PayTransferApi.TransferVO>,
+    required: true
+  }
+})
+// 提交数据
+let submitTransferData = {
+  appId: undefined,
+  channelCode: undefined,
+  merchantTransferId: undefined,
+  type: undefined,
+  price: undefined,
+  subject: undefined,
+  userName: undefined,
+  alipayLogonId: undefined,
+  openid: undefined
+} as PayTransferApi.TransferVO
+
+const transfer = reactive(props.payTransfer)
+const dialogVisible = ref(false)
+const typeName = computed(() => {
+  return getDictLabel(DICT_TYPE.PAY_TRANSFER_TYPE, transfer.type)
+})
+const channelCode = computed(() => {
+  let channelCode = 'alipay_pc'
+  if (transfer.type === 2) {
+    channelCode = 'wx_app'
+  }
+  // TODO 银行卡和钱包 转账待实现
+  return channelCode
+})
+
+/** 打开弹窗 */
+const showPayTransfer = async (payTransfer: PayTransferApi.TransferVO) => {
+  dialogVisible.value = true
+  submitTransferData = payTransfer
+  transfer.merchantTransferId = payTransfer.merchantTransferId
+  transfer.price = payTransfer.price
+  transfer.userName = payTransfer.userName
+  transfer.type = payTransfer.type
+  transfer.appId = payTransfer.appId
+  transfer.subject = payTransfer.subject
+  transfer.alipayLogonId = payTransfer.alipayLogonId
+  transfer.openid = payTransfer.openid
+}
+/** 关闭弹窗 */
+const close = async () => {
+  dialogVisible.value = false
+}
+defineExpose({ showPayTransfer, close }) // 提供 showPayTransfer， close 方法，用于打开, 关闭弹窗
+
+const submitForm = async () => {
+  // 校验表单
+  formLoading.value = true
+  try {
+    submitTransferData.channelCode = channelCode.value
+    await PayTransferApi.createTransfer(submitTransferData)
+    message.success('发起转账成功. 是否转账成功,以转账订单状态为准')
+    // 发送操作成功的事件
+    emit('success')
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>
diff --git a/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue b/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue
index f538b78c..0153225e 100644
--- a/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue
+++ b/src/views/pay/wallet/rechargePackage/WalletRechargePackageForm.vue
@@ -90,7 +90,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as WalletRechargePackageApi.WalletRechargePackageVO
+    const data = { ...formData.value }
     data.payPrice = yuanToFen(data.payPrice)
     data.bonusPrice = yuanToFen(data.bonusPrice)
     if (formType.value === 'create') {

From 2b84de7e0927371a2c5271886bc1612a07fc6497 Mon Sep 17 00:00:00 2001
From: liuhongfeng <291117974@qq.com>
Date: Mon, 30 Oct 2023 21:32:50 +0800
Subject: [PATCH 06/77] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91?=
 =?UTF-8?q?=E8=B4=9F=E8=B4=A3=E4=BA=BA=20=E3=80=90=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E3=80=91=E8=A7=84=E8=8C=83=E5=91=BD=E5=90=8D=EF=BC=9A=E6=9C=9F?=
 =?UTF-8?q?=E6=95=B0=EF=BC=9AindexNo-=E3=80=8Bperiod?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/receivablePlan/index.ts           |  2 +-
 src/views/crm/receivable/ReceivableForm.vue   | 32 ++++++----
 src/views/crm/receivable/index.vue            | 13 +++--
 .../crm/receivablePlan/ReceivablePlanForm.vue | 45 ++++++++------
 src/views/crm/receivablePlan/index.vue        | 58 +++++++++++--------
 5 files changed, 90 insertions(+), 60 deletions(-)

diff --git a/src/api/crm/receivablePlan/index.ts b/src/api/crm/receivablePlan/index.ts
index 178b21b5..f80f0572 100644
--- a/src/api/crm/receivablePlan/index.ts
+++ b/src/api/crm/receivablePlan/index.ts
@@ -2,7 +2,7 @@ import request from '@/config/axios'
 
 export interface ReceivablePlanVO {
   id: number
-  indexNo: number
+  period: number
   receivableId: number
   status: number
   checkStatus: string
diff --git a/src/views/crm/receivable/ReceivableForm.vue b/src/views/crm/receivable/ReceivableForm.vue
index 2b9278fe..4ac9136a 100644
--- a/src/views/crm/receivable/ReceivableForm.vue
+++ b/src/views/crm/receivable/ReceivableForm.vue
@@ -54,15 +54,22 @@
         <el-input-number v-model="formData.price" placeholder="请输入回款金额" />
       </el-form-item>
       <el-form-item label="负责人" prop="ownerUserId">
-        <el-input v-model="formData.ownerUserId" placeholder="请输入负责人" />
+        <el-select v-model="formData.ownerUserId" clearable placeholder="请输入负责人">
+          <el-option
+            v-for="item in userList"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="批次" prop="batchId">
-        <el-input v-model="formData.batchId" placeholder="请输入批次" />
+        <el-input-number v-model="formData.batchId" placeholder="请输入批次" />
       </el-form-item>
-      <!--<el-form-item label="显示顺序" prop="sort">
-        <el-input v-model="formData.sort" placeholder="请输入显示顺序" />
-      </el-form-item>-->
-      <el-form-item label="状态" prop="status">
+      <el-form-item label="显示排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
+      </el-form-item>
+      <!--<el-form-item label="状态" prop="status">
         <el-select v-model="formData.status" placeholder="请选择状态">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -71,7 +78,7 @@
             :value="dict.value"
           />
         </el-select>
-      </el-form-item>
+      </el-form-item>-->
       <el-form-item label="备注" prop="remark">
         <el-input type="textarea" :rows="3" v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
@@ -85,10 +92,11 @@
 <script setup lang="ts">
 import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import * as ReceivableApi from '@/api/crm/receivable'
+import * as UserApi from '@/api/system/user'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -112,9 +120,9 @@ const formData = ref({
   status: undefined,
   remark: undefined
 })
-const formRules = reactive({
-  status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
-})
+// const formRules = reactive({
+//   status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+// })
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
@@ -132,6 +140,8 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
diff --git a/src/views/crm/receivable/index.vue b/src/views/crm/receivable/index.vue
index 8a07fdda..ae483015 100644
--- a/src/views/crm/receivable/index.vue
+++ b/src/views/crm/receivable/index.vue
@@ -26,19 +26,19 @@
           class="!w-240px"
         />
       </el-form-item>-->
-      <el-form-item label="客户" prop="customerId">
+      <el-form-item label="客户名称" prop="customerId">
         <el-input
           v-model="queryParams.customerId"
-          placeholder="请输入客户"
+          placeholder="请输入客户名称"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="合同" prop="contractId">
+      <el-form-item label="合同名称" prop="contractId">
         <el-input
           v-model="queryParams.contractId"
-          placeholder="请输入合同"
+          placeholder="请输入合同名称"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
@@ -227,8 +227,11 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="130px">
+      <el-table-column label="操作" align="center" width="180px">
         <template #default="scope">
+          <router-link :to="'/crm/receivable-plan?receivableId=' + scope.row.receivableId">
+            <el-button link type="primary">详情</el-button>
+          </router-link>
           <el-button
             link
             type="primary"
diff --git a/src/views/crm/receivablePlan/ReceivablePlanForm.vue b/src/views/crm/receivablePlan/ReceivablePlanForm.vue
index 22022ea0..bbc0379c 100644
--- a/src/views/crm/receivablePlan/ReceivablePlanForm.vue
+++ b/src/views/crm/receivablePlan/ReceivablePlanForm.vue
@@ -7,8 +7,24 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="期数" prop="indexNo">
-        <el-input-number v-model="formData.indexNo" placeholder="请输入期数" />
+      <el-form-item label="客户名称" prop="customerId">
+        <el-input v-model="formData.customerId" placeholder="请输入客户名称" />
+      </el-form-item>
+      <el-form-item label="合同名称" prop="contractId">
+        <el-input v-model="formData.contractId" placeholder="请输入合同名称" />
+      </el-form-item>
+      <el-form-item label="负责人" prop="ownerUserId">
+        <el-select v-model="formData.ownerUserId" clearable placeholder="请输入负责人">
+          <el-option
+            v-for="item in userList"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="期数" prop="period">
+        <el-input-number v-model="formData.period" placeholder="请输入期数" />
       </el-form-item>
       <!--<el-form-item label="回款ID" prop="receivableId">
         <el-input v-model="formData.receivableId" placeholder="请输入回款ID" />
@@ -58,18 +74,9 @@
           placeholder="选择提醒日期"
         />
       </el-form-item>
-      <el-form-item label="客户ID" prop="customerId">
-        <el-input v-model="formData.customerId" placeholder="请输入客户ID" />
+      <el-form-item label="显示排序" prop="sort">
+        <el-input-number v-model="formData.sort" :min="0" controls-position="right" />
       </el-form-item>
-      <el-form-item label="合同ID" prop="contractId">
-        <el-input v-model="formData.contractId" placeholder="请输入合同ID" />
-      </el-form-item>
-      <el-form-item label="负责人" prop="ownerUserId">
-        <el-input v-model="formData.ownerUserId" placeholder="请输入负责人" />
-      </el-form-item>
-      <!--<el-form-item label="显示顺序" prop="sort">
-        <el-input v-model="formData.sort" placeholder="请输入显示顺序" />
-      </el-form-item>-->
       <el-form-item label="备注" prop="remark">
         <el-input type="textarea" :rows="3" v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
@@ -81,19 +88,18 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 import * as ReceivablePlanApi from '@/api/crm/receivablePlan'
-
+import * as UserApi from '@/api/system/user'
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  indexNo: undefined,
+  period: undefined,
   receivableId: undefined,
   status: undefined,
   checkStatus: undefined,
@@ -128,6 +134,9 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -161,7 +170,7 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    indexNo: undefined,
+    period: undefined,
     receivableId: undefined,
     status: undefined,
     checkStatus: undefined,
diff --git a/src/views/crm/receivablePlan/index.vue b/src/views/crm/receivablePlan/index.vue
index 46857dcd..290e1cd8 100644
--- a/src/views/crm/receivablePlan/index.vue
+++ b/src/views/crm/receivablePlan/index.vue
@@ -8,9 +8,9 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="期数" prop="indexNo">
+      <el-form-item label="期数" prop="period">
         <el-input
-          v-model="queryParams.indexNo"
+          v-model="queryParams.period"
           placeholder="请输入期数"
           clearable
           @keyup.enter="handleQuery"
@@ -152,23 +152,13 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="ID" align="center" prop="id" />
-      <el-table-column label="期数" align="center" prop="indexNo" />
-      <!--<el-table-column label="回款ID" align="center" prop="receivableId" />-->
-      <el-table-column label="完成状态" align="center" prop="status">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column label="审批状态" align="center" prop="checkStatus" width="130px">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_CHECK_STATUS" :value="scope.row.checkStatus" />
-        </template>
-      </el-table-column>
-      <!--<el-table-column label="工作流编号" align="center" prop="processInstanceId" />-->
-      <el-table-column label="回款金额" align="center" prop="price" />
+      <!--<el-table-column label="ID" align="center" prop="id" />-->
+      <el-table-column label="客户名称" align="center" prop="customerId" width="150px" />
+      <el-table-column label="合同名称" align="center" prop="contractId" width="150px" />
+      <el-table-column label="期数" align="center" prop="period" />
+      <el-table-column label="计划回款" align="center" prop="price" />
       <el-table-column
-        label="回款日期"
+        label="计划回款日期"
         align="center"
         prop="returnTime"
         :formatter="dateFormatter2"
@@ -182,10 +172,24 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="客户ID" align="center" prop="customerId" />
-      <el-table-column label="合同ID" align="center" prop="contractId" />
-      <el-table-column label="负责人" align="center" prop="ownerUserId" />
-      <!--<el-table-column label="显示顺序" align="center" prop="sort" />-->
+      <!--<el-table-column label="回款ID" align="center" prop="receivableId" />-->
+      <el-table-column label="完成状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="审批状态" align="center" prop="checkStatus" width="130px">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.CRM_RECEIVABLE_CHECK_STATUS" :value="scope.row.checkStatus" />
+        </template>
+      </el-table-column>
+      <!--<el-table-column label="工作流编号" align="center" prop="processInstanceId" />-->
+      <el-table-column prop="ownerUserId" label="负责人" width="120">
+        <template #default="scope">
+          {{ userList.find((user) => user.id === scope.row.ownerUserId)?.nickname }}
+        </template>
+      </el-table-column>
+      <el-table-column label="显示顺序" align="center" prop="sort" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column
         label="创建时间"
@@ -234,6 +238,7 @@ import { dateFormatter, dateFormatter2 } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as ReceivablePlanApi from '@/api/crm/receivablePlan'
 import ReceivablePlanForm from './ReceivablePlanForm.vue'
+import * as UserApi from '@/api/system/user'
 
 defineOptions({ name: 'ReceivablePlan' })
 
@@ -243,10 +248,11 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
-  indexNo: null,
+  period: null,
   status: null,
   checkStatus: null,
   returnTime: [],
@@ -320,7 +326,9 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
-  getList()
+onMounted(async () => {
+  await getList()
+  // 获取用户列表
+  userList.value = await UserApi.getSimpleUserList()
 })
 </script>

From 881c4f3a2932ff4892bf09e6de9f790d5f93d9c6 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Tue, 31 Oct 2023 16:01:22 +0800
Subject: [PATCH 07/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=201.=20=E6=8B=86?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E9=9D=A2=E8=AE=BE=E8=AE=A1=E7=94=A8=E7=9A=84?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E4=BF=AE=E6=94=B9=E6=8E=A5=E5=8F=A3=202.=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=A8=A1=E6=9D=BF=E7=9A=84=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=BF=9D=E5=AD=98=203.=20=E5=A2=9E=E5=8A=A0=E5=94=AF=E4=B8=80?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E6=A0=A1=E9=AA=8C=204.=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=BC=96=E8=BE=91=E5=99=A8=EF=BC=8C=E9=BB=98?=
 =?UTF-8?q?=E8=AE=A4=E9=80=89=E4=B8=AD=E7=BB=84=E4=BB=B6=E5=88=A4=E6=96=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/promotion/diy/page.ts            | 10 +++++
 src/api/mall/promotion/diy/template.ts        | 17 ++++++++
 src/components/DiyEditor/index.vue            | 31 +++++++++++++--
 .../mall/promotion/diy/page/decorate.vue      |  5 ++-
 .../mall/promotion/diy/template/decorate.vue  | 39 ++++++++++++++-----
 5 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/src/api/mall/promotion/diy/page.ts b/src/api/mall/promotion/diy/page.ts
index 255015d2..1cd34282 100644
--- a/src/api/mall/promotion/diy/page.ts
+++ b/src/api/mall/promotion/diy/page.ts
@@ -33,3 +33,13 @@ export const updateDiyPage = async (data: DiyPageVO) => {
 export const deleteDiyPage = async (id: number) => {
   return await request.delete({ url: `/promotion/diy-page/delete?id=` + id })
 }
+
+// 获得装修页面属性
+export const getDiyPageProperty = async (id: number) => {
+  return await request.get({ url: `/promotion/diy-page/get-property?id=` + id })
+}
+
+// 更新装修页面属性
+export const updateDiyPageProperty = async (data: DiyPageVO) => {
+  return await request.put({ url: `/promotion/diy-page/update-property`, data })
+}
diff --git a/src/api/mall/promotion/diy/template.ts b/src/api/mall/promotion/diy/template.ts
index 72eea41c..f8d4bc80 100644
--- a/src/api/mall/promotion/diy/template.ts
+++ b/src/api/mall/promotion/diy/template.ts
@@ -1,4 +1,5 @@
 import request from '@/config/axios'
+import { DiyPageVO } from '@/api/mall/promotion/diy/page'
 
 export interface DiyTemplateVO {
   id?: number
@@ -10,6 +11,10 @@ export interface DiyTemplateVO {
   property: string
 }
 
+export interface DiyTemplatePropertyVO extends DiyTemplateVO {
+  pages: DiyPageVO[]
+}
+
 // 查询装修模板列表
 export const getDiyTemplatePage = async (params: any) => {
   return await request.get({ url: `/promotion/diy-template/page`, params })
@@ -39,3 +44,15 @@ export const deleteDiyTemplate = async (id: number) => {
 export const useDiyTemplate = async (id: number) => {
   return await request.put({ url: `/promotion/diy-template/use?id=` + id })
 }
+
+// 获得装修模板属性
+export const getDiyTemplateProperty = async (id: number) => {
+  return await request.get<DiyTemplatePropertyVO>({
+    url: `/promotion/diy-template/get-property?id=` + id
+  })
+}
+
+// 更新装修模板属性
+export const updateDiyTemplateProperty = async (data: DiyTemplateVO) => {
+  return await request.put({ url: `/promotion/diy-template/update-property`, data })
+}
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index 520cd497..f0fed316 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -59,7 +59,7 @@
               }"
             >
               <draggable
-                class="drag-area page-prop-area"
+                class="page-prop-area drag-area"
                 v-model="pageComponents"
                 item-key="index"
                 :animation="200"
@@ -200,18 +200,25 @@ const navigationBarComponent = ref<DiyComponent<any>>(cloneDeep(NAVIGATION_BAR_C
 const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT))
 
 // 选中的组件，默认选中顶部导航栏
-const selectedComponent = ref<DiyComponent<any>>(unref(pageConfigComponent))
+const selectedComponent = ref<DiyComponent<any>>()
 // 选中的组件索引
 const selectedComponentIndex = ref<number>(-1)
 // 组件列表
 const pageComponents = ref<DiyComponent<any>[]>([])
 // 定义属性
 const props = defineProps<{
+  // 页面配置，支持Json字符串
   modelValue: string | PageConfig
+  // 标题
   title: string
-  libs: DiyComponentLibrary[] // 组件库
+  // 组件库
+  libs: DiyComponentLibrary[]
+  // 是否显示顶部导航栏
   showNavigationBar: boolean
+  // 是否显示底部导航菜单
   showTabBar: boolean
+  // 是否显示页面配置
+  showPageConfig: boolean
 }>()
 
 // 监听传入的页面配置
@@ -255,6 +262,8 @@ const handleSave = () => {
 
 // 处理页面选中：显示属性表单
 const handlePageSelected = (event: any) => {
+  if (!props.showPageConfig) return
+
   // 配置了样式 page-prop-area 的元素，才显示页面设置
   if (includes(event?.target?.classList, 'page-prop-area')) {
     handleComponentSelected(unref(pageConfigComponent))
@@ -351,6 +360,22 @@ const handlePreview = () => {
   message.warning('开发中~')
   emits('preview')
 }
+
+// 设置默认选中的组件
+const setDefaultSelectedComponent = () => {
+  if (props.showPageConfig) {
+    selectedComponent.value = unref(pageConfigComponent)
+  } else if (props.showNavigationBar) {
+    selectedComponent.value = unref(navigationBarComponent)
+  } else if (props.showTabBar) {
+    selectedComponent.value = unref(tabBarComponent)
+  }
+}
+watch(
+  () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
+  () => setDefaultSelectedComponent()
+)
+onMounted(() => setDefaultSelectedComponent())
 </script>
 <style lang="scss" scoped>
 .editor {
diff --git a/src/views/mall/promotion/diy/page/decorate.vue b/src/views/mall/promotion/diy/page/decorate.vue
index 76336bc4..54e7206c 100644
--- a/src/views/mall/promotion/diy/page/decorate.vue
+++ b/src/views/mall/promotion/diy/page/decorate.vue
@@ -4,6 +4,7 @@
     v-model="formData.property"
     :title="formData.name"
     :libs="componentLibs"
+    :show-page-config="true"
     :show-navigation-bar="true"
     :show-tab-bar="false"
     @save="submitForm"
@@ -51,7 +52,7 @@ const formRef = ref() // 表单 Ref
 const getPageDetail = async (id: any) => {
   formLoading.value = true
   try {
-    formData.value = await DiyPageApi.getDiyPage(id)
+    formData.value = await DiyPageApi.getDiyPageProperty(id)
   } finally {
     formLoading.value = false
   }
@@ -63,7 +64,7 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    await DiyPageApi.updateDiyPage(unref(formData)!)
+    await DiyPageApi.updateDiyPageProperty(unref(formData)!)
     message.success('保存成功')
   } finally {
     formLoading.value = false
diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue
index 9c7500b2..7a3cff2f 100644
--- a/src/views/mall/promotion/diy/template/decorate.vue
+++ b/src/views/mall/promotion/diy/template/decorate.vue
@@ -1,11 +1,12 @@
 <template>
   <DiyEditor
     v-if="formData && !formLoading"
-    v-model="formData.property"
+    v-model="currentFormData!.property"
     :title="templateItems[selectedTemplateItem].name"
     :libs="libs"
+    :show-page-config="selectedTemplateItem !== 0"
     :show-tab-bar="selectedTemplateItem === 0"
-    :show-navigation-bar="selectedTemplateItem > 0"
+    :show-navigation-bar="selectedTemplateItem !== 0"
     @save="submitForm"
   >
     <template #toolBarLeft>
@@ -25,6 +26,7 @@
 </template>
 <script setup lang="ts">
 import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
+import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import { DiyComponentLibrary } from '@/components/DiyEditor/util'
 
@@ -42,14 +44,17 @@ const templateItems = reactive([
 const message = useMessage() // 消息弹窗
 
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formData = ref<DiyTemplateApi.DiyTemplateVO>()
+const formData = ref<DiyTemplateApi.DiyTemplatePropertyVO>()
 const formRef = ref() // 表单 Ref
+// 当前编辑的属性
+const currentFormData = ref<DiyTemplateApi.DiyTemplatePropertyVO | DiyPageApi.DiyPageVO>()
 
 // 获取详情
 const getPageDetail = async (id: any) => {
   formLoading.value = true
   try {
-    formData.value = await DiyTemplateApi.getDiyTemplate(id)
+    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id)
+    currentFormData.value = formData.value
   } finally {
     formLoading.value = false
   }
@@ -82,12 +87,21 @@ const pageLibs = [
 ] as DiyComponentLibrary[]
 // 当前组件库
 const libs = ref<DiyComponentLibrary[]>(templateLibs)
+// 模板选项切换
 const handleTemplateItemChange = () => {
+  // 编辑模板
   if (selectedTemplateItem.value === 0) {
     libs.value = templateLibs
-  } else {
-    libs.value = pageLibs
+    currentFormData.value = formData.value
+    return
   }
+
+  // 编辑页面
+  libs.value = pageLibs
+  currentFormData.value = formData.value!.pages.find(
+    (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
+  )
+  console.log(currentFormData.value)
 }
 
 // 提交表单
@@ -97,7 +111,13 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    await DiyTemplateApi.updateDiyTemplate(unref(formData)!)
+    if (selectedTemplateItem.value === 0) {
+      // 提交模板属性
+      await DiyTemplateApi.updateDiyTemplateProperty(unref(formData)!)
+    } else {
+      // 提交页面属性
+      await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!)
+    }
     message.success('保存成功')
   } finally {
     formLoading.value = false
@@ -113,8 +133,9 @@ const resetForm = () => {
     usedTime: undefined,
     remark: '',
     previewImageUrls: [],
-    property: ''
-  } as DiyTemplateApi.DiyTemplateVO
+    property: '',
+    pages: []
+  } as DiyTemplateApi.DiyTemplatePropertyVO
   formRef.value?.resetFields()
 }
 

From 9a3253ad20fd384c3692941ea2fb44323bf6db00 Mon Sep 17 00:00:00 2001
From: dongshanshan <dongshanshan@zjgtsj.wecom.work>
Date: Tue, 31 Oct 2023 16:53:44 +0800
Subject: [PATCH 08/77] =?UTF-8?q?feat:=20=E4=BC=9A=E5=91=98=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E6=94=B6=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/favorite.ts              |  28 +++
 src/hooks/web/useMessage.ts                   |  12 ++
 src/locales/en.ts                             |   8 +-
 src/locales/zh-CN.ts                          |   8 +-
 .../member/user/detail/UserFavoriteList.vue   | 195 ++++++++++++++++++
 src/views/member/user/detail/index.vue        |   5 +-
 6 files changed, 253 insertions(+), 3 deletions(-)
 create mode 100644 src/api/mall/product/favorite.ts
 create mode 100644 src/views/member/user/detail/UserFavoriteList.vue

diff --git a/src/api/mall/product/favorite.ts b/src/api/mall/product/favorite.ts
new file mode 100644
index 00000000..2e54ec78
--- /dev/null
+++ b/src/api/mall/product/favorite.ts
@@ -0,0 +1,28 @@
+import request from '@/config/axios'
+
+export interface Favorite {
+  id?: number
+  userId?: string // 用户编号
+  spuId?: number | null // 商品 SPU 编号
+}
+
+// 获得 ProductFavorite 列表
+export const getFavoritePage = (params: PageParam) => {
+  params.keyword = params.name
+  return request.get({ url: '/product/favorite/page', params })
+}
+
+// 收藏商品 Favorite
+export const createFavorite = (data: Favorite) => {
+  return request.post({ url: '/product/favorite/create', data })
+}
+
+// 取消商品收藏 Favorite
+export const delFavorite = (data: Favorite) => {
+  return request.delete({ url: '/product/favorite/delete', data })
+}
+
+// 是否收藏过商品 Favorite
+export const exitsFavorite = (data: Favorite) => {
+  return request.post({ url: '/product/favorite/exits', data })
+}
diff --git a/src/hooks/web/useMessage.ts b/src/hooks/web/useMessage.ts
index ac2b552e..9bfb7a3a 100644
--- a/src/hooks/web/useMessage.ts
+++ b/src/hooks/web/useMessage.ts
@@ -90,6 +90,18 @@ export const useMessage = () => {
         cancelButtonText: t('common.cancel'),
         type: 'warning'
       })
+    },
+    // 取消收藏窗体
+    delStarConfirm(content?: string, tip?: string) {
+      return ElMessageBox.confirm(
+        content ? content : t('common.confirmDelStar'),
+        tip ? tip : t('common.confirmTitle'),
+        {
+          confirmButtonText: t('common.ok'),
+          cancelButtonText: t('common.cancel'),
+          type: 'warning'
+        }
+      )
     }
   }
 }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 4f4d4895..d82e616e 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -54,7 +54,13 @@ export default {
     updateTime: 'Update Time',
     copy: 'Copy',
     copySuccess: 'Copy Success',
-    copyError: 'Copy Error'
+    copyError: 'Copy Error',
+    confirmDelStar: 'Delete the Star?',
+    starSuccess: 'Star Success',
+    starFail: 'Star Error',
+    delStarSuccess: 'Del Star Success',
+    delStarFail: 'Del Star Error',
+    existStar: 'exist Star'
   },
   error: {
     noPermission: `Sorry, you don't have permission to access this page.`,
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 4f95852f..49a3f895 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -54,7 +54,13 @@ export default {
     updateTime: '更新时间',
     copy: '复制',
     copySuccess: '复制成功',
-    copyError: '复制失败'
+    copyError: '复制失败',
+    confirmDelStar: '是否取消收藏？',
+    starSuccess: '收藏成功',
+    starFail: '收藏失败',
+    delStarSuccess: '取消收藏成功',
+    delStarFail: '取消收藏失败',
+    existStar: '收藏已存在'
   },
   error: {
     noPermission: `抱歉，您无权访问此页面。`,
diff --git a/src/views/member/user/detail/UserFavoriteList.vue b/src/views/member/user/detail/UserFavoriteList.vue
new file mode 100644
index 00000000..009a8b10
--- /dev/null
+++ b/src/views/member/user/detail/UserFavoriteList.vue
@@ -0,0 +1,195 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="商品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入商品名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="收藏时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon icon="ep:search" class="mr-5px" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon icon="ep:refresh" class="mr-5px" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column key="id" align="center" label="商品编号" width="180" prop="id" />
+      <el-table-column label="商品图" min-width="80">
+        <template #default="{ row }">
+          <el-image :src="row.picUrl" class="h-30px w-30px" @click="imagePreview(row.picUrl)" />
+        </template>
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
+      <el-table-column align="center" label="商品售价" min-width="90" prop="price">
+        <template #default="{ row }"> {{ floatToFixed2(row.price) }}元</template>
+      </el-table-column>
+      <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
+      <el-table-column
+        :formatter="dateFormatter"
+        align="center"
+        label="收藏时间"
+        prop="createTime"
+        width="180"
+      />
+      <el-table-column align="center" label="状态" min-width="80">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" min-width="200">
+        <template #default="{ row }">
+          <el-button
+            v-if="row.favoriteStatus === 0"
+            v-hasPermi="['product:spu:delete']"
+            link
+            type="danger"
+            @click="handleAdd(row)"
+          >
+            收藏
+          </el-button>
+          <el-button
+            v-if="row.favoriteStatus === 1"
+            v-hasPermi="['product:spu:delete']"
+            link
+            type="danger"
+            @click="handleDelete(row)"
+          >
+            取消收藏
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as FavoriteApi from '@/api/mall/product/favorite'
+import { floatToFixed2 } from '@/utils'
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  createTime: [],
+  userId: NaN
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await FavoriteApi.getFavoritePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 取消收藏按钮操作 */
+const handleDelete = async (row: object) => {
+  try {
+    console.log(row)
+    // 取消的二次确认
+    await message.delStarConfirm()
+    // 发起取消
+    await FavoriteApi.delFavorite({ userId: queryParams.userId, spuId: row.spuId })
+    message.success(t('common.delStarSuccess'))
+    row.favoriteStatus = 0
+    // 刷新列表
+    // await getList()
+  } catch {}
+}
+
+/** 收藏按钮操作 */
+const handleAdd = async (row: object) => {
+  try {
+    const data = { userId: queryParams.userId, spuId: row.spuId }
+    // 发起收藏
+    const result = await FavoriteApi.exitsFavorite(data)
+    if (result === false) {
+      // 发起收藏
+      await FavoriteApi.createFavorite(data)
+      message.success(t('common.starSuccess'))
+      row.favoriteStatus = 1
+      // 刷新列表
+      // await getList()
+    } else {
+      message.warning(t('common.existStar'))
+      row.favoriteStatus = 1
+    }
+  } catch {}
+}
+
+const { userId } = defineProps({
+  userId: {
+    type: Number,
+    required: true
+  }
+})
+
+/** 初始化 **/
+onMounted(() => {
+  queryParams.userId = userId
+  getList()
+})
+</script>
diff --git a/src/views/member/user/detail/index.vue b/src/views/member/user/detail/index.vue
index 1bac010e..6237cca6 100644
--- a/src/views/member/user/detail/index.vue
+++ b/src/views/member/user/detail/index.vue
@@ -48,7 +48,9 @@
             <UserOrderList :user-id="id" />
           </el-tab-pane>
           <el-tab-pane label="售后管理" lazy>售后管理(WIP)</el-tab-pane>
-          <el-tab-pane label="收藏记录" lazy>收藏记录(WIP)</el-tab-pane>
+          <el-tab-pane label="收藏记录" lazy>
+            <UserFavoriteList :user-id="id" />
+          </el-tab-pane>
           <el-tab-pane label="优惠劵" lazy>
             <UserCouponList :user-id="id" />
           </el-tab-pane>
@@ -76,6 +78,7 @@ import UserExperienceRecordList from './UserExperienceRecordList.vue'
 import UserOrderList from './UserOrderList.vue'
 import UserPointList from './UserPointList.vue'
 import UserSignList from './UserSignList.vue'
+import UserFavoriteList from './UserFavoriteList.vue'
 import { CardTitle } from '@/components/Card/index'
 import { ElMessage } from 'element-plus'
 

From 9bd33355e281276fcead1cc8429396e87da30e15 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Tue, 31 Oct 2023 17:17:46 +0800
Subject: [PATCH 09/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E8=A3=85?=
 =?UTF-8?q?=E4=BF=AE=E7=BC=96=E8=BE=91=E5=99=A8=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/NavigationBar/index.vue |   1 -
 .../components/mobile/NoticeBar/index.vue     |   2 +-
 src/components/DiyEditor/index.vue            | 355 ++++++++++--------
 3 files changed, 194 insertions(+), 164 deletions(-)

diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
index 953748c7..345b6681 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -40,7 +40,6 @@ defineProps<{ property: NavigationBarProperty }>()
   display: flex;
   justify-content: space-between;
   align-items: center;
-  cursor: pointer;
   /* 左边 */
   .left {
     margin-left: 8px;
diff --git a/src/components/DiyEditor/components/mobile/NoticeBar/index.vue b/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
index dc360688..fce1afbb 100644
--- a/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/NoticeBar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center text-12px"
+    class="flex items-center p-y-4px text-12px"
     :style="{ backgroundColor: property.backgroundColor, color: property.textColor }"
   >
     <el-image :src="property.iconUrl" class="h-18px" />
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index f0fed316..d0d49812 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -45,6 +45,7 @@
               @click="handleNavigationBarSelected"
               :class="[
                 'component',
+                'cursor-pointer!',
                 { active: selectedComponent?.id === navigationBarComponent.id }
               ]"
             />
@@ -70,7 +71,7 @@
                 @change="handleComponentChange"
               >
                 <template #item="{ element, index }">
-                  <div class="component-box" @click="handleComponentSelected(element, index)">
+                  <div class="component-container" @click="handleComponentSelected(element, index)">
                     <!-- 左侧组件名 -->
                     <div
                       :class="['component-name', { active: selectedComponentIndex === index }]"
@@ -79,12 +80,13 @@
                       {{ element.name }}
                     </div>
                     <!-- 组件内容区 -->
-                    <component
-                      :is="element.id"
-                      :property="element.property"
-                      :class="['component', { active: selectedComponentIndex === index }]"
-                      :data-type="element.id"
-                    />
+                    <div :class="['component', { active: selectedComponentIndex === index }]">
+                      <component
+                        :is="element.id"
+                        :property="element.property"
+                        :data-type="element.id"
+                      />
+                    </div>
                     <!-- 左侧：组件操作工具栏 -->
                     <div
                       class="component-toolbar"
@@ -130,6 +132,7 @@
             :class="[
               'editor-design-bottom',
               'component',
+              'cursor-pointer!',
               { active: selectedComponent?.id === tabBarComponent.id }
             ]"
           >
@@ -378,181 +381,209 @@ watch(
 onMounted(() => setDefaultSelectedComponent())
 </script>
 <style lang="scss" scoped>
+/* 手机宽度 */
+$phone-width: 375px;
+/* 根节点样式 */
 .editor {
   height: 100%;
   margin: calc(0px - var(--app-content-padding));
   display: flex;
   flex-direction: column;
-}
-.editor-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: auto;
-  padding: 0;
-  border-bottom: solid 1px var(--el-border-color);
-  background-color: var(--el-bg-color);
-
-  .header-right {
-    height: 100%;
-    .el-button {
-      height: 100%;
-    }
-  }
-
-  :deep(.el-radio-button__inner),
-  :deep(.el-button) {
-    border-top: none !important;
-    border-bottom: none !important;
-    border-radius: 0 !important;
-  }
-}
-.editor-container {
-  height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
-  );
-  /* 右侧属性面板 */
-  .editor-right {
-    flex-shrink: 0;
-    box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
-
-    :deep(.el-card__header) {
-      padding: 8px 16px;
-    }
-
-    .property-group {
-      /* 属性分组 */
-      :deep(.el-card__header) {
-        border: none;
-        background: var(--el-bg-color-page);
-      }
-    }
-  }
-
-  /* 中心 */
-  .editor-center {
-    flex: 1 1 0;
-    padding: 16px 0;
-    background-color: var(--app-content-bg-color);
+  /* 顶部：工具栏 */
+  .editor-header {
     display: flex;
-    justify-content: center;
-
-    .editor-design {
-      position: relative;
+    align-items: center;
+    justify-content: space-between;
+    height: auto;
+    padding: 0;
+    border-bottom: solid 1px var(--el-border-color);
+    background-color: var(--el-bg-color);
+    /* 工具栏：右侧按钮 */
+    .header-right {
       height: 100%;
-      width: 100%;
+      .el-button {
+        height: 100%;
+      }
+    }
+    /* 隐藏工具栏按钮的边框 */
+    :deep(.el-radio-button__inner),
+    :deep(.el-button) {
+      border-top: none !important;
+      border-bottom: none !important;
+      border-radius: 0 !important;
+    }
+  }
+  /* 中心操作区 */
+  .editor-container {
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
+    );
+    /* 右侧属性面板 */
+    .editor-right {
+      flex-shrink: 0;
+      box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
+      /* 属性面板顶部：减少内边距 */
+      :deep(.el-card__header) {
+        padding: 8px 16px;
+      }
+      /* 属性面板分组 */
+      .property-group {
+        /* 属性分组 */
+        :deep(.el-card__header) {
+          border: none;
+          background: var(--el-bg-color-page);
+        }
+      }
+    }
+
+    /* 中心区域 */
+    .editor-center {
+      flex: 1 1 0;
+      padding: 16px 0;
+      background-color: var(--app-content-bg-color);
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      overflow: hidden;
-
-      /* 组件 */
-      .component {
-        border: 1px solid #fff;
-        width: 375px !important;
-
-        &:hover {
-          border: 1px dashed #155bd4;
-        }
-      }
-      .component.active {
-        border: 2px solid #155bd4 !important;
-      }
-
-      .editor-design-top {
-        width: 379px;
-
-        .status-bar {
-          height: 20px;
-          width: 100%;
-          background-color: #fff;
-        }
-
-        .navigation-bar {
-          width: 100%;
-        }
-      }
-
-      .editor-design-bottom {
-        width: 379px;
-      }
-
-      .editor-design-center {
+      justify-content: center;
+      /* 中心设计区域 */
+      .editor-design {
+        position: relative;
+        height: 100%;
         width: 100%;
-        flex: 1 1 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
 
-        :deep(.el-scrollbar__view) {
-          height: 100%;
-        }
-
-        /* 主体内容 */
-        .phone-container {
-          height: 100%;
-          box-sizing: border-box;
+        /* 组件 */
+        .component {
+          border: 1px solid #fff;
+          width: $phone-width;
           cursor: move;
-          position: relative;
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-          width: 379px;
-          margin: 0 auto;
+          /* 鼠标放到组件上时 */
+          &:hover {
+            border: 1px dashed var(--el-color-primary);
+          }
+        }
+        /* 组件选中 */
+        .component.active {
+          border: 2px solid var(--el-color-primary);
+        }
+        /* 手机顶部 */
+        .editor-design-top {
+          width: $phone-width;
+          /* 手机顶部状态栏 */
+          .status-bar {
+            height: 20px;
+            width: $phone-width;
+            background-color: #fff;
+          }
+        }
+        /* 手机底部导航 */
+        .editor-design-bottom {
+          width: $phone-width;
+        }
+        /* 手机页面编辑区域 */
+        .editor-design-center {
+          width: 100%;
+          flex: 1 1 0;
 
-          .drag-area {
+          :deep(.el-scrollbar__view) {
             height: 100%;
           }
 
-          /* 组件容器 */
-          .component-box {
-            width: 100%;
+          /* 主体内容 */
+          .phone-container {
+            height: 100%;
+            box-sizing: border-box;
             position: relative;
-            /* 组件名称 */
-            .component-name {
-              position: absolute;
-              width: 80px;
-              text-align: center;
-              line-height: 25px;
-              height: 25px;
-              background: #fff;
-              font-size: 12px;
-              left: -80px;
-              top: 0;
-              box-shadow:
-                0 0 4px #00000014,
-                0 2px 6px #0000000f,
-                0 4px 8px 2px #0000000a;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            width: $phone-width;
+            margin: 0 auto;
+            .drag-area {
+              height: 100%;
             }
-            .component-name.active {
-              background: #2d8cf0;
-              color: #fff;
-            }
-            /* 组件操作按钮 */
-            .component-toolbar {
-              position: absolute;
-              top: 0;
-              right: -50px;
 
-              .el-button-group {
-                display: inline-flex;
-                flex-direction: column;
+            /* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
+            .component-container {
+              width: 100%;
+              position: relative;
+              /* 左侧：组件名称 */
+              .component-name {
+                position: absolute;
+                width: 80px;
+                text-align: center;
+                line-height: 25px;
+                height: 25px;
+                background: #fff;
+                font-size: 12px;
+                left: -85px;
+                top: 0;
+                box-shadow:
+                  0 0 4px #00000014,
+                  0 2px 6px #0000000f,
+                  0 4px 8px 2px #0000000a;
+                /* 右侧小三角 */
+                &:after {
+                  position: absolute;
+                  top: 7.5px;
+                  right: -10px;
+                  content: ' ';
+                  height: 0;
+                  width: 0;
+                  border: 5px solid transparent;
+                  border-left-color: #fff;
+                }
               }
-              .el-button-group > .el-button:first-child {
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-                border-top-right-radius: var(--el-border-radius-base);
-                border-bottom-color: var(--el-button-divide-border-color);
+              /* 组件选中按钮 */
+              .component-name.active {
+                background: var(--el-color-primary);
+                color: #fff;
+                &:after {
+                  border-left-color: var(--el-color-primary);
+                }
               }
-              .el-button-group > .el-button:last-child {
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-                border-bottom-left-radius: var(--el-border-radius-base);
-                border-top-color: var(--el-button-divide-border-color);
-              }
-              .el-button-group .el-button--primary:not(:first-child):not(:last-child) {
-                border-top-color: var(--el-button-divide-border-color);
-                border-bottom-color: var(--el-button-divide-border-color);
-              }
-              .el-button-group > .el-button:not(:last-child) {
-                margin-bottom: -1px;
-                margin-right: 0;
+              /* 右侧：组件操作工具栏 */
+              .component-toolbar {
+                position: absolute;
+                top: 0;
+                right: -57px;
+                /* 左侧小三角 */
+                &:before {
+                  position: absolute;
+                  top: 10px;
+                  left: -10px;
+                  content: ' ';
+                  height: 0;
+                  width: 0;
+                  border: 5px solid transparent;
+                  border-right-color: #2d8cf0;
+                }
+
+                /* 重写 Element 按钮组的样式（官方只支持水平显示，增加垂直显示的样式） */
+                .el-button-group {
+                  display: inline-flex;
+                  flex-direction: column;
+                }
+                .el-button-group > .el-button:first-child {
+                  border-bottom-left-radius: 0;
+                  border-bottom-right-radius: 0;
+                  border-top-right-radius: var(--el-border-radius-base);
+                  border-bottom-color: var(--el-button-divide-border-color);
+                }
+                .el-button-group > .el-button:last-child {
+                  border-top-left-radius: 0;
+                  border-top-right-radius: 0;
+                  border-bottom-left-radius: var(--el-border-radius-base);
+                  border-top-color: var(--el-button-divide-border-color);
+                }
+                .el-button-group .el-button--primary:not(:first-child):not(:last-child) {
+                  border-top-color: var(--el-button-divide-border-color);
+                  border-bottom-color: var(--el-button-divide-border-color);
+                }
+                .el-button-group > .el-button:not(:last-child) {
+                  margin-bottom: -1px;
+                  margin-right: 0;
+                }
               }
             }
           }

From 3d54ad3a6aec15c56a2732d11b4fa35eefc0c4e9 Mon Sep 17 00:00:00 2001
From: liuhongfeng <291117974@qq.com>
Date: Tue, 31 Oct 2023 23:32:35 +0800
Subject: [PATCH 10/77] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91?=
 =?UTF-8?q?=E8=B4=9F=E8=B4=A3=E4=BA=BA=20=E3=80=90=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E3=80=91=E8=A7=84=E8=8C=83=E5=91=BD=E5=90=8D=EF=BC=9A=E6=9C=9F?=
 =?UTF-8?q?=E6=95=B0=EF=BC=9AindexNo-=E3=80=8Bperiod?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/receivable/ReceivableForm.vue | 14 +++----
 src/views/crm/receivable/index.vue          |  8 ++--
 src/views/crm/receivablePlan/index.vue      | 45 +++++++++------------
 3 files changed, 29 insertions(+), 38 deletions(-)

diff --git a/src/views/crm/receivable/ReceivableForm.vue b/src/views/crm/receivable/ReceivableForm.vue
index 4ac9136a..c338fe97 100644
--- a/src/views/crm/receivable/ReceivableForm.vue
+++ b/src/views/crm/receivable/ReceivableForm.vue
@@ -10,14 +10,14 @@
       <el-form-item label="回款编号" prop="no">
         <el-input v-model="formData.no" placeholder="请输入回款编号" />
       </el-form-item>
-      <!--<el-form-item label="回款计划ID" prop="planId">
-        <el-input v-model="formData.planId" placeholder="请输入回款计划ID" />
-      </el-form-item>-->
-      <el-form-item label="客户ID" prop="customerId">
-        <el-input v-model="formData.customerId" placeholder="请输入客户ID" />
+      <el-form-item label="回款计划" prop="planId">
+        <el-input v-model="formData.planId" placeholder="请输入回款计划" />
       </el-form-item>
-      <el-form-item label="合同ID" prop="contractId">
-        <el-input v-model="formData.contractId" placeholder="请输入合同ID" />
+      <el-form-item label="客户名称" prop="customerId">
+        <el-input v-model="formData.customerId" placeholder="请输入客户名称" />
+      </el-form-item>
+      <el-form-item label="合同名称" prop="contractId">
+        <el-input v-model="formData.contractId" placeholder="请输入合同名称" />
       </el-form-item>
       <!--<el-form-item label="审批状态" prop="checkStatus">
         <el-select v-model="formData.checkStatus" placeholder="请选择审批状态">
diff --git a/src/views/crm/receivable/index.vue b/src/views/crm/receivable/index.vue
index ae483015..dc2b2f64 100644
--- a/src/views/crm/receivable/index.vue
+++ b/src/views/crm/receivable/index.vue
@@ -103,7 +103,7 @@
           class="!w-240px"
         />
       </el-form-item>-->
-      <el-form-item label="负责人" prop="ownerUserId">
+      <!--<el-form-item label="负责人" prop="ownerUserId">
         <el-input
           v-model="queryParams.ownerUserId"
           placeholder="请输入负责人"
@@ -112,7 +112,7 @@
           class="!w-240px"
         />
       </el-form-item>
-      <!--<el-form-item label="批次" prop="batchId">
+      <el-form-item label="批次" prop="batchId">
         <el-input
           v-model="queryParams.batchId"
           placeholder="请输入批次"
@@ -229,9 +229,9 @@
       />
       <el-table-column label="操作" align="center" width="180px">
         <template #default="scope">
-          <router-link :to="'/crm/receivable-plan?receivableId=' + scope.row.receivableId">
+          <!--<router-link :to="'/crm/receivable-plan?receivableId=' + scope.row.receivableId">
             <el-button link type="primary">详情</el-button>
-          </router-link>
+          </router-link>-->
           <el-button
             link
             type="primary"
diff --git a/src/views/crm/receivablePlan/index.vue b/src/views/crm/receivablePlan/index.vue
index 290e1cd8..2a18b931 100644
--- a/src/views/crm/receivablePlan/index.vue
+++ b/src/views/crm/receivablePlan/index.vue
@@ -8,10 +8,19 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="期数" prop="period">
+      <el-form-item label="客户" prop="customerId">
         <el-input
-          v-model="queryParams.period"
-          placeholder="请输入期数"
+          v-model="queryParams.customerId"
+          placeholder="请输入客户"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="合同" prop="contractId">
+        <el-input
+          v-model="queryParams.contractId"
+          placeholder="请输入合同"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
@@ -67,7 +76,7 @@
           class="!w-240px"
         />
       </el-form-item>-->
-      <el-form-item label="提醒日期" prop="remindTime">
+      <!--<el-form-item label="提醒日期" prop="remindTime">
         <el-date-picker
           v-model="queryParams.remindTime"
           value-format="YYYY-MM-DD HH:mm:ss"
@@ -77,26 +86,8 @@
           :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
           class="!w-240px"
         />
-      </el-form-item>
-      <el-form-item label="客户" prop="customerId">
-        <el-input
-          v-model="queryParams.customerId"
-          placeholder="请输入客户"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="合同" prop="contractId">
-        <el-input
-          v-model="queryParams.contractId"
-          placeholder="请输入合同"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="负责人" prop="ownerUserId">
+      </el-form-item>-->
+      <!--<el-form-item label="负责人" prop="ownerUserId">
         <el-input
           v-model="queryParams.ownerUserId"
           placeholder="请输入负责人"
@@ -105,7 +96,7 @@
           class="!w-240px"
         />
       </el-form-item>
-      <!--<el-form-item label="备注" prop="remark">
+      <el-form-item label="备注" prop="remark">
         <el-input
           v-model="queryParams.remark"
           placeholder="请输入备注"
@@ -165,13 +156,13 @@
         width="180px"
       />
       <el-table-column label="提前几天提醒" align="center" prop="remindDays" />
-      <el-table-column
+      <!--<el-table-column
         label="提醒日期"
         align="center"
         prop="remindTime"
         :formatter="dateFormatter"
         width="180px"
-      />
+      />-->
       <!--<el-table-column label="回款ID" align="center" prop="receivableId" />-->
       <el-table-column label="完成状态" align="center" prop="status">
         <template #default="scope">

From 3c0f3ceed5f5e3c32d92fc7e4a6970990bc83358 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Fri, 3 Nov 2023 06:47:46 +0800
Subject: [PATCH 11/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E8=A3=85?=
 =?UTF-8?q?=E4=BF=AE=E6=A8=A1=E6=9D=BF=EF=BC=8C=E5=BA=95=E9=83=A8=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E9=80=82=E9=85=8DAPP?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/TabBar/config.ts        | 40 +++++++++++--------
 .../components/mobile/TabBar/index.vue        |  8 ++--
 .../components/mobile/TabBar/property.vue     | 36 +++++------------
 3 files changed, 37 insertions(+), 47 deletions(-)

diff --git a/src/components/DiyEditor/components/mobile/TabBar/config.ts b/src/components/DiyEditor/components/mobile/TabBar/config.ts
index 4a570a8e..88d706fe 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/TabBar/config.ts
@@ -12,18 +12,24 @@ export interface TabBarProperty {
 
 // 选项属性
 export interface TabBarItemProperty {
-  name: string // 标签名称
-  link: string // 链接
-  iconUrl: string // 默认图标链接
-  activeIconUrl: string // 选中的图标链接
+  // 标签文字
+  text: string
+  // 链接
+  url: string
+  // 默认图标链接
+  iconUrl: string
+  // 选中的图标链接
+  activeIconUrl: string
 }
 
 // 样式
 export interface TabBarStyle {
   // 背景类型
-  backgroundType: 'color' | 'img'
-  // 背景颜色 或 图片链接
-  background: string
+  bgType: 'color' | 'img'
+  // 背景颜色
+  bgColor: string
+  // 图片链接
+  bgImg: string
   // 默认颜色
   color: string
   // 选中的颜色
@@ -38,33 +44,33 @@ export const component = {
   property: {
     theme: 'red',
     style: {
-      backgroundType: 'color',
-      background: '#fff',
+      bgType: 'color',
+      bgColor: '#fff',
       color: '#282828',
       activeColor: '#fc4141'
     },
     items: [
       {
-        name: '首页',
-        link: '/',
+        text: '首页',
+        url: '/pages/index/index',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png'
       },
       {
-        name: '分类',
-        link: '/pages/goods_cate/goods_cate',
+        text: '分类',
+        url: '/pages/index/category?id=3',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png'
       },
       {
-        name: '购物车',
-        link: '/pages/order_addcart/order_addcart',
+        text: '购物车',
+        url: '/pages/index/cart',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png'
       },
       {
-        name: '我的',
-        link: '/pages/user/index',
+        text: '我的',
+        url: '/pages/index/user',
         iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
         activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png'
       }
diff --git a/src/components/DiyEditor/components/mobile/TabBar/index.vue b/src/components/DiyEditor/components/mobile/TabBar/index.vue
index 266a20c5..647e3369 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/TabBar/index.vue
@@ -4,9 +4,9 @@
       class="tab-bar-bg"
       :style="{
         background:
-          property.style.backgroundType === 'color'
-            ? property.style.background
-            : `url(${property.style.background})`,
+          property.style.bgType === 'color'
+            ? property.style.bgColor
+            : `url(${property.style.bgImg})`,
         backgroundSize: '100% 100%',
         backgroundRepeat: 'no-repeat'
       }"
@@ -14,7 +14,7 @@
       <div v-for="(item, index) in property.items" :key="index" class="tab-bar-item">
         <img :src="index === 0 ? item.activeIconUrl : item.iconUrl" alt="" />
         <span :style="{ color: index === 0 ? property.style.activeColor : property.style.color }">
-          {{ item.name }}
+          {{ item.text }}
         </span>
       </div>
     </div>
diff --git a/src/components/DiyEditor/components/mobile/TabBar/property.vue b/src/components/DiyEditor/components/mobile/TabBar/property.vue
index 512bb5a8..eefdf54a 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/property.vue
+++ b/src/components/DiyEditor/components/mobile/TabBar/property.vue
@@ -2,7 +2,7 @@
   <div class="tab-bar">
     <!-- 表单 -->
     <el-form :model="formData" label-width="80px">
-      <el-form-item label="主题">
+      <el-form-item label="主题" prop="theme">
         <el-select v-model="formData!.theme" @change="handleThemeChange">
           <el-option
             v-for="(theme, index) in THEME_LIST"
@@ -26,24 +26,16 @@
         <ColorInput v-model="formData!.style.activeColor" />
       </el-form-item>
       <el-form-item label="导航背景">
-        <el-radio-group
-          v-model="formData!.style.backgroundType"
-          @change="handleBackgroundTypeChange"
-        >
+        <el-radio-group v-model="formData!.style.bgType">
           <el-radio-button label="color">纯色</el-radio-button>
           <el-radio-button label="img">图片</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="选择颜色" v-if="formData!.style.backgroundType === 'color'">
-        <ColorInput v-model="formData!.style.background" />
+      <el-form-item label="选择颜色" v-if="formData!.style.bgType === 'color'">
+        <ColorInput v-model="formData!.style.bgColor" />
       </el-form-item>
-      <el-form-item label="选择图片" v-if="formData!.style.backgroundType === 'img'">
-        <UploadImg
-          v-model="formData!.style.background"
-          width="100%"
-          height="50px"
-          class="min-w-200px"
-        >
+      <el-form-item label="选择图片" v-if="formData!.style.bgType === 'img'">
+        <UploadImg v-model="formData!.style.bgImg" width="100%" height="50px" class="min-w-200px">
           <template #tip> 建议尺寸 375 * 50 </template>
         </UploadImg>
       </el-form-item>
@@ -92,11 +84,11 @@
                   <el-text>选中图片</el-text>
                 </div>
               </div>
-              <el-form-item draggable="false" label-width="0" class="m-b-8px!">
-                <el-input v-model="element.name" placeholder="请输入文字" />
+              <el-form-item prop="text" label-width="0" class="m-b-8px!">
+                <el-input v-model="element.text" placeholder="请输入文字" />
               </el-form-item>
-              <el-form-item draggable="false" label-width="0" class="m-b-0!">
-                <el-input v-model="element.link" placeholder="请选择链接" />
+              <el-form-item prop="url" label-width="0" class="m-b-0!">
+                <el-input v-model="element.url" placeholder="请选择链接" />
               </el-form-item>
             </div>
           </div>
@@ -132,14 +124,6 @@ const props = defineProps<{ modelValue: TabBarProperty }>()
 const emit = defineEmits(['update:modelValue'])
 const { formData } = usePropertyForm(props.modelValue, emit)
 
-// 缓存背景：当背景类型切换时，防止参数丢失
-const backgroundCache = ref('')
-const handleBackgroundTypeChange = () => {
-  const background = formData.value!.style.background
-  formData.value!.style.background = backgroundCache.value
-  backgroundCache.value = background
-}
-
 /** 添加导航项 */
 const handleAddItem = () => {
   formData?.value?.items?.push({} as TabBarItemProperty)

From 753f5de81e6d49cba07f99532f4e8dd4511e432e Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 3 Nov 2023 08:46:53 +0800
Subject: [PATCH 12/77] =?UTF-8?q?=E8=BD=AC=E8=B4=A6=20-=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E8=BD=AC=E8=B4=A6=E8=AE=A2=E5=8D=95=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/pay/transfer/index.ts                |   9 +
 src/views/pay/demo/transfer/index.vue        |  11 +-
 src/views/pay/order/OrderDetail.vue          |   2 +-
 src/views/pay/transfer/CreatePayTransfer.vue |  14 +-
 src/views/pay/transfer/TransferDetail.vue    |  80 ++++++
 src/views/pay/transfer/index.vue             | 267 +++++++++++++++++++
 6 files changed, 370 insertions(+), 13 deletions(-)
 create mode 100644 src/views/pay/transfer/TransferDetail.vue
 create mode 100644 src/views/pay/transfer/index.vue

diff --git a/src/api/pay/transfer/index.ts b/src/api/pay/transfer/index.ts
index 4b2f3154..7a58abf4 100644
--- a/src/api/pay/transfer/index.ts
+++ b/src/api/pay/transfer/index.ts
@@ -16,3 +16,12 @@ export interface TransferVO {
 export const createTransfer = async (data: TransferVO) => {
   return await request.post({ url: `/pay/transfer/create`, data })
 }
+
+// 查询转账单列表
+export const getTransferPage = async (params) => {
+  return await request.get({ url: `/pay/transfer/page`, params })
+}
+
+export const getTransfer = async (id: number) => {
+  return await request.get({ url: '/pay/transfer/get?id=' + id })
+}
diff --git a/src/views/pay/demo/transfer/index.vue b/src/views/pay/demo/transfer/index.vue
index 7d0d8bad..44d07b12 100644
--- a/src/views/pay/demo/transfer/index.vue
+++ b/src/views/pay/demo/transfer/index.vue
@@ -49,13 +49,20 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+        width="100"
+        fixed="right"
+      >
         <template #default="scope">
           <el-button
             link
             type="primary"
             @click="handleTransfer(scope.row)"
             v-if="scope.row.transferStatus === 0"
+            v-hasPermi="['pay:transfer:create']"
           >
             发起转账
           </el-button>
@@ -73,7 +80,7 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <DemoTransferForm ref="demoFormRef" @success="getList" />
-  <CreatePayTransfer ref="payTransferRef" :payTransfer="payTransfer" @success="getList" />
+  <CreatePayTransfer ref="payTransferRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/pay/order/OrderDetail.vue b/src/views/pay/order/OrderDetail.vue
index 5f2a496c..4f05c14a 100644
--- a/src/views/pay/order/OrderDetail.vue
+++ b/src/views/pay/order/OrderDetail.vue
@@ -62,7 +62,7 @@
     <el-divider />
     <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
       <el-descriptions-item label="支付通道异步回调内容">
-        {{ detailData.extension.channelNotifyData }}
+        <el-text>{{ detailData.extension.channelNotifyData }}</el-text>
       </el-descriptions-item>
     </el-descriptions>
   </Dialog>
diff --git a/src/views/pay/transfer/CreatePayTransfer.vue b/src/views/pay/transfer/CreatePayTransfer.vue
index 5f0ea166..31706504 100644
--- a/src/views/pay/transfer/CreatePayTransfer.vue
+++ b/src/views/pay/transfer/CreatePayTransfer.vue
@@ -64,14 +64,10 @@ const formLoading = ref(false) // 提交的按钮禁用
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 defineOptions({ name: 'CreatePayTransfer' })
 
-const props = defineProps({
-  payTransfer: {
-    type: Object as PropType<PayTransferApi.TransferVO>,
-    required: true
-  }
-})
 // 提交数据
-let submitTransferData = {
+let submitTransferData: PayTransferApi.TransferVO
+
+const transfer = reactive({
   appId: undefined,
   channelCode: undefined,
   merchantTransferId: undefined,
@@ -81,9 +77,7 @@ let submitTransferData = {
   userName: undefined,
   alipayLogonId: undefined,
   openid: undefined
-} as PayTransferApi.TransferVO
-
-const transfer = reactive(props.payTransfer)
+})
 const dialogVisible = ref(false)
 const typeName = computed(() => {
   return getDictLabel(DICT_TYPE.PAY_TRANSFER_TYPE, transfer.type)
diff --git a/src/views/pay/transfer/TransferDetail.vue b/src/views/pay/transfer/TransferDetail.vue
new file mode 100644
index 00000000..ad769d2b
--- /dev/null
+++ b/src/views/pay/transfer/TransferDetail.vue
@@ -0,0 +1,80 @@
+<template>
+  <Dialog v-model="dialogVisible" title="转账单详情" width="700px">
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="商户单号">
+        <el-tag size="small">{{ detailData.merchantTransferId }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="转账单号">
+        <el-tag type="warning" size="small" v-if="detailData.no">{{ detailData.no }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="应用编号">{{ detailData.appId }}</el-descriptions-item>
+      <el-descriptions-item label="转账状态">
+        <dict-tag :type="DICT_TYPE.PAY_TRANSFER_STATUS" :value="detailData.status" size="small" />
+      </el-descriptions-item>
+      <el-descriptions-item label="转账金额">
+        <el-tag type="success" size="small">￥{{ (detailData.price / 100.0).toFixed(2) }}</el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="转账时间">
+        {{ formatDate(detailData.successTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(detailData.createTime) }}
+      </el-descriptions-item>
+    </el-descriptions>
+    <!-- 分割线 -->
+    <el-divider />
+    <el-descriptions :column="2" label-class-name="desc-label">
+      <el-descriptions-item label="收款人姓名">{{ detailData.userName }}</el-descriptions-item>
+      <el-descriptions-item label="支付宝登录账号" v-if="detailData.type === 1">
+        {{ detailData.alipayLogonId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="微信 openid" v-if="detailData.type === 2">
+        {{ detailData.openid }}
+      </el-descriptions-item>
+      <el-descriptions-item label="支付渠道">
+        <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="detailData.channelCode" />
+      </el-descriptions-item>
+      <el-descriptions-item label="支付 IP">{{ detailData.userIp }}</el-descriptions-item>
+      <el-descriptions-item label="渠道单号">
+        <el-tag size="mini" type="success" v-if="detailData.channelTransferNo">
+          {{ detailData.channelTransferNo }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="通知 URL">{{ detailData.notifyUrl }}</el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
+      <el-descriptions-item label="转账渠道通知内容">
+        <el-text>{{ detailData.channelNotifyData }}</el-text>
+      </el-descriptions-item>
+    </el-descriptions>
+    <el-divider />
+    <div style="text-align: right">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE } from '@/utils/dict'
+import * as TransferApi from '@/api/pay/transfer'
+import { formatDate } from '@/utils/formatTime'
+defineOptions({ name: 'PayTransferDetail' })
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref({})
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = await TransferApi.getTransfer(id)
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
+
+<style scoped></style>
diff --git a/src/views/pay/transfer/index.vue b/src/views/pay/transfer/index.vue
new file mode 100644
index 00000000..b901f34b
--- /dev/null
+++ b/src/views/pay/transfer/index.vue
@@ -0,0 +1,267 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="100px"
+    >
+      <el-form-item label="转账单号" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          placeholder="请输入转账单号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="转账渠道" prop="channelCode">
+        <el-select
+          v-model="queryParams.channelCode"
+          placeholder="请选择支付渠道"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.PAY_CHANNEL_CODE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商户单号" prop="merchantTransferId">
+        <el-input
+          v-model="queryParams.merchantTransferId"
+          placeholder="请输入商户单号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="类型" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择类型" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="转账状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择转账状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="收款人姓名" prop="userName">
+        <el-input
+          v-model="queryParams.userName"
+          placeholder="请输入收款人姓名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="渠道单号" prop="channelTransferNo">
+        <el-input
+          v-model="queryParams.channelTransferNo"
+          placeholder="渠道单号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="应用编号" align="center" prop="appId" />
+      <el-table-column label="类型" align="center" prop="type" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_TRANSFER_TYPE" :value="scope.row.type" />
+        </template>
+      </el-table-column>
+      <el-table-column label="转账金额" align="center" prop="price">
+        <template #default="scope">
+          <span>￥{{ (scope.row.price / 100.0).toFixed(2) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="转账状态" align="center" prop="status" width="120">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_TRANSFER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="订单号" align="left" width="300">
+        <template #default="scope">
+          <p class="transfer-font">
+            <el-tag size="small"> 商户</el-tag>
+            {{ scope.row.merchantTransferId }}
+          </p>
+          <p class="transfer-font" v-if="scope.row.no">
+            <el-tag size="small" type="warning">转账</el-tag>
+            {{ scope.row.no }}
+          </p>
+          <p class="transfer-font" v-if="scope.row.channelTransferNo">
+            <el-tag size="small" type="success">渠道</el-tag>
+            {{ scope.row.channelTransferNo }}
+          </p>
+        </template>
+      </el-table-column>
+      <el-table-column label="收款人姓名" align="center" prop="userName" width="120" />
+      <el-table-column label="收款账号" align="left" width="200">
+        <template #default="scope">
+          <p class="transfer-font" v-if="scope.row.alipayLogonId">
+            <el-tag size="small">支付宝登录号</el-tag>
+            {{ scope.row.alipayLogonId }}
+          </p>
+          <p class="transfer-font" v-if="scope.row.openid">
+            <el-tag size="small">微信 openId</el-tag>
+            {{ scope.row.openid }}
+          </p>
+        </template>
+      </el-table-column>
+      <el-table-column label="转账标题" align="center" prop="subject" width="120" />
+      <el-table-column label="转账渠道" align="center" prop="channelCode">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PAY_CHANNEL_CODE" :value="scope.row.channelCode" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="转账成功时间"
+        align="center"
+        prop="successTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" fixed="right">
+        <template #default="scope">
+          <el-button link type="primary" @click="openDetail(scope.row.id)"> 详情 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+    <TransferDetail ref="detailRef" />
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as TransferApi from '@/api/pay/transfer'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+import TransferDetail from './TransferDetail.vue'
+defineOptions({ name: 'PayTransfer' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  no: null,
+  appId: null,
+  channelId: null,
+  channelCode: null,
+  merchantTransferId: null,
+  type: null,
+  status: null,
+  successTime: [],
+  price: null,
+  subject: null,
+  userName: null,
+  alipayLogonId: null,
+  openid: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await TransferApi.getTransferPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const detailRef = ref()
+const openDetail = (id: number) => {
+  detailRef.value.open(id)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style scoped>
+.transfer-font {
+  padding: 2px 0;
+  font-size: 12px;
+}
+</style>

From 23f483ac452c6f140b399351918caaffb54c7129 Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Sat, 4 Nov 2023 03:21:01 +0800
Subject: [PATCH 13/77] =?UTF-8?q?feat:=20=E5=AE=A2=E6=88=B7=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=20+=20review=20=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/customer/index.ts                 |  24 +-
 src/router/modules/remaining.ts               |  18 ++
 src/views/crm/clue/ClueForm.vue               |   5 +-
 src/views/crm/clue/index.vue                  |   2 +-
 src/views/crm/customer/CustomerForm.vue       | 233 +++++++++++-------
 .../crm/customer/detail/CustomerBasicInfo.vue |  18 ++
 .../crm/customer/detail/CustomerDetails.vue   |  91 +++++++
 src/views/crm/customer/detail/index.vue       | 154 ++++++++++++
 src/views/crm/customer/index.vue              |  70 +++++-
 9 files changed, 508 insertions(+), 107 deletions(-)
 create mode 100644 src/views/crm/customer/detail/CustomerBasicInfo.vue
 create mode 100644 src/views/crm/customer/detail/CustomerDetails.vue
 create mode 100644 src/views/crm/customer/detail/index.vue

diff --git a/src/api/crm/customer/index.ts b/src/api/crm/customer/index.ts
index 0cbba590..59260cbc 100644
--- a/src/api/crm/customer/index.ts
+++ b/src/api/crm/customer/index.ts
@@ -1,13 +1,14 @@
 import request from '@/config/axios'
 
 export interface CustomerVO {
-  id: number
+  id?: number
   name: string
   industryId: number
   level: number
   source: number
-  followUpStatus: boolean
-  lockStatus: boolean
+  followUpStatus?: boolean
+  lockStatus?: boolean
+  dealStatus?: boolean
   mobile: string
   telephone: string
   website: string
@@ -16,13 +17,20 @@ export interface CustomerVO {
   email: string
   description: string
   remark: string
-  ownerUserId: number
-  roUserIds: string
-  rwUserIds: string
-  areaId: number
+  ownerUserId?: number
+  ownerUserName?: string
+  ownerUserDept?: string
+  roUserIds?: string
+  rwUserIds?: string
+  areaId?: number
+  areaName?: string
   detailAddress: string
-  contactLastTime: Date
+  contactLastTime?: Date
   contactNextTime: Date
+  createTime?: Date
+  updateTime?: Date
+  creator?: string
+  creatorName?: string
 }
 
 // 查询客户列表
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 70dc5b2f..58eb1733 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -487,6 +487,24 @@ const remainingRouter: AppRouteRecordRaw[] = [
         component: () => import('@/views/mall/promotion/diy/page/decorate.vue')
       }
     ]
+  },
+  {
+    path: '/crm',
+    component: Layout,
+    name: 'CrmCenter',
+    meta: { hidden: true },
+    children: [
+      {
+        path: 'customer/detail/:id',
+        name: 'CrmCustomerDetail',
+        meta: {
+          title: '客户详情',
+          noCache: true,
+          hidden: true
+        },
+        component: () => import('@/views/crm/customer/detail/index.vue')
+      }
+    ]
   }
 ]
 
diff --git a/src/views/crm/clue/ClueForm.vue b/src/views/crm/clue/ClueForm.vue
index 877b26d9..4321f952 100644
--- a/src/views/crm/clue/ClueForm.vue
+++ b/src/views/crm/clue/ClueForm.vue
@@ -10,7 +10,7 @@
       <el-form-item label="线索名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入线索名称" />
       </el-form-item>
-      <!-- TODO 客户选择 -->
+      <!-- TODO wanwan 客户选择 -->
       <el-form-item label="客户" prop="customerId">
         <el-input v-model="formData.customerId" placeholder="请选择客户" />
       </el-form-item>
@@ -31,7 +31,7 @@
       <el-form-item label="地址" prop="address">
         <el-input v-model="formData.address" placeholder="请输入地址" />
       </el-form-item>
-      <!-- TODO 负责人选择 -->
+      <!-- TODO wanwan 负责人选择 -->
       <el-form-item label="负责人" prop="ownerUserId">
         <el-input v-model="formData.ownerUserId" placeholder="请输入负责人" />
       </el-form-item>
@@ -46,7 +46,6 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
 import * as ClueApi from '@/api/crm/clue'
 
 const { t } = useI18n() // 国际化
diff --git a/src/views/crm/clue/index.vue b/src/views/crm/clue/index.vue
index e866a725..cf742276 100644
--- a/src/views/crm/clue/index.vue
+++ b/src/views/crm/clue/index.vue
@@ -96,7 +96,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center">
+      <el-table-column label="操作" align="center" min-width="110" fixed="right">
         <template #default="scope">
           <el-button
             link
diff --git a/src/views/crm/customer/CustomerForm.vue b/src/views/crm/customer/CustomerForm.vue
index 6e5cd62e..99f7e858 100644
--- a/src/views/crm/customer/CustomerForm.vue
+++ b/src/views/crm/customer/CustomerForm.vue
@@ -8,93 +8,135 @@
       v-loading="formLoading"
     >
       <el-row>
-        <!-- TODO @wanwan：name 参数校验，必填 -->
-        <el-form-item label="客户名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入客户名称" />
-        </el-form-item>
-        <el-form-item label="所属行业" prop="industryId">
-          <el-select v-model="formData.industryId" placeholder="请选择所属行业">
-            <el-option
-              v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
+        <el-col :span="12">
+          <el-form-item label="客户名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入客户名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属行业" prop="industryId">
+            <el-select v-model="formData.industryId" placeholder="请选择所属行业">
+              <el-option
+                v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="客户来源" prop="source">
+            <el-select v-model="formData.source" placeholder="请选择客户来源">
+              <el-option
+                v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="客户等级" prop="level">
+            <el-select v-model="formData.level" placeholder="请选择客户等级">
+              <el-option
+                v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="手机" prop="mobile">
+            <el-input v-model="formData.mobile" placeholder="请输入手机" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="电话" prop="telephone">
+            <el-input v-model="formData.telephone" placeholder="请输入电话" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="formData.email" placeholder="请输入邮箱" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="QQ" prop="qq">
+            <el-input v-model="formData.qq" placeholder="请输入QQ" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="微信" prop="wechat">
+            <el-input v-model="formData.wechat" placeholder="请输入微信" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="网址" prop="website">
+            <el-input v-model="formData.website" placeholder="请输入网址" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="所在地" prop="areaId">
+            <el-tree-select
+              v-model="formData.areaId"
+              :data="areaList"
+              :props="defaultProps"
+              :render-after-expand="true"
             />
-          </el-select>
-        </el-form-item>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="详细地址" prop="detailAddress">
+            <el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
+          </el-form-item>
+        </el-col>
       </el-row>
-      <el-row>
-        <el-form-item label="客户来源" prop="source">
-          <el-select v-model="formData.source" placeholder="请选择客户来源">
-            <el-option
-              v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="客户等级" prop="level">
-          <el-select v-model="formData.level" placeholder="请选择客户等级">
-            <el-option
-              v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="手机" prop="mobile">
-          <el-input v-model="formData.mobile" placeholder="请输入手机" />
-        </el-form-item>
-        <el-form-item label="电话" prop="telephone">
-          <el-input v-model="formData.telephone" placeholder="请输入电话" />
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="邮箱" prop="email">
-          <el-input v-model="formData.email" placeholder="请输入邮箱" />
-        </el-form-item>
-        <el-form-item label="QQ" prop="qq">
-          <el-input v-model="formData.qq" placeholder="请输入QQ" />
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <el-form-item label="微信" prop="wechat">
-          <el-input v-model="formData.wechat" placeholder="请输入微信" />
-        </el-form-item>
-        <el-form-item label="网址" prop="website">
-          <el-input v-model="formData.website" placeholder="请输入网址" />
-        </el-form-item>
-      </el-row>
-      <el-row>
-        <!-- TODO @wanwan：地区的多级选择，可以参考 UserForm.vue 的 所在地 areaId -->
-        <el-form-item label="地区编号" prop="areaId">
-          <el-input v-model="formData.areaId" placeholder="请输入地区编号" />
-        </el-form-item>
-        <el-form-item label="详细地址" prop="detailAddress">
-          <el-input v-model="formData.detailAddress" placeholder="请输入详细地址" />
-        </el-form-item>
-      </el-row>
-      <!-- TODO @wanwan： 少一个负责人字段，默认先选中自己；可以先参考 TaskAssignRuleForm.vue 的 formData.userIds；注意，新增的时候，可以选择；修改的时候，只展示 -->
-      <el-row>
-        <el-form-item label="下次联系时间" prop="contactNextTime">
-          <el-date-picker
-            v-model="formData.contactNextTime"
-            type="date"
-            value-format="x"
-            placeholder="选择下次联系时间"
+      <el-form-item v-if="formType === 'create'" label="负责人" prop="userIds" span="24">
+        <el-select v-model="formData.ownerUserId">
+          <el-option
+            v-for="item in userOptions"
+            :key="parseInt(item.id)"
+            :label="item.nickname"
+            :value="parseInt(item.id)"
           />
-        </el-form-item>
+        </el-select>
+      </el-form-item>
+      <el-row>
+        <el-col :span="12">
+          <el-form-item label="下次联系时间" prop="contactNextTime">
+            <el-date-picker
+              v-model="formData.contactNextTime"
+              type="date"
+              value-format="x"
+              placeholder="选择下次联系时间"
+            />
+          </el-form-item>
+        </el-col>
       </el-row>
-      <el-form-item label="客户描述" prop="description">
-        <el-input v-model="formData.description" placeholder="请输入客户描述" />
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model="formData.remark" placeholder="请输入备注" />
-      </el-form-item>
+      <el-col :span="24">
+        <el-form-item label="客户描述" prop="description">
+          <el-input v-model="formData.description" placeholder="请输入客户描述" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="24">
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="formData.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-col>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -105,6 +147,10 @@
 <script setup lang="ts">
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import * as CustomerApi from '@/api/crm/customer'
+import * as AreaApi from '@/api/system/area'
+import { defaultProps } from '@/utils/tree'
+import * as UserApi from '@/api/system/user'
+import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -113,6 +159,8 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const areaList = ref([]) // 地区列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const formData = ref({
   id: undefined,
   name: undefined,
@@ -129,10 +177,12 @@ const formData = ref({
   remark: undefined,
   areaId: undefined,
   detailAddress: undefined,
-  contactNextTime: undefined
+  contactNextTime: undefined,
+  ownerUserId: undefined
 })
 const formRules = reactive({
-  name: [{ require: true, message: '客户名称不能为空', trigger: 'blur' }]
+  name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
+  ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
@@ -151,6 +201,16 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  // 获得地区列表
+  areaList.value = await AreaApi.getAreaTree()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 默认新建时选中自己
+  if (formType.value === 'create') {
+    const { wsCache } = useCache()
+    const user = wsCache.get(CACHE_KEY.USER).user
+    formData.value.ownerUserId = user.id
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -198,7 +258,8 @@ const resetForm = () => {
     remark: undefined,
     areaId: undefined,
     detailAddress: undefined,
-    contactNextTime: undefined
+    contactNextTime: undefined,
+    ownerUserId: undefined
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/crm/customer/detail/CustomerBasicInfo.vue b/src/views/crm/customer/detail/CustomerBasicInfo.vue
new file mode 100644
index 00000000..0329db8f
--- /dev/null
+++ b/src/views/crm/customer/detail/CustomerBasicInfo.vue
@@ -0,0 +1,18 @@
+<template>
+  <el-col> 客户 </el-col>
+  <el-col>
+    <el-row>
+      <span class="text-xl font-bold">{{ customer.name }}</span>
+    </el-row>
+  </el-col>
+  <el-col class="mt-10px">
+    <Icon icon="ant-design:tag-filled" />
+    <!-- TODO 标签 -->
+  </el-col>
+</template>
+<script setup lang="ts">
+import * as CustomerApi from '@/api/crm/customer'
+
+const { customer } = defineProps<{ customer: CustomerApi.CustomerVO }>()
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/crm/customer/detail/CustomerDetails.vue b/src/views/crm/customer/detail/CustomerDetails.vue
new file mode 100644
index 00000000..f6215224
--- /dev/null
+++ b/src/views/crm/customer/detail/CustomerDetails.vue
@@ -0,0 +1,91 @@
+<template>
+  <el-collapse v-model="activeNames">
+    <el-collapse-item name="basicInfo">
+      <template #title>
+        <span class="text-base font-bold">基本信息</span>
+      </template>
+      <el-descriptions :column="2">
+        <el-descriptions-item label="客户名称">
+          {{ customer.name }}
+        </el-descriptions-item>
+        <el-descriptions-item label="所属行业">
+          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
+        </el-descriptions-item>
+        <el-descriptions-item label="客户来源">
+          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="customer.source" />
+        </el-descriptions-item>
+        <el-descriptions-item label="客户等级">
+          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
+        </el-descriptions-item>
+        <el-descriptions-item label="手机">
+          {{ customer.mobile }}
+        </el-descriptions-item>
+        <el-descriptions-item label="电话">
+          {{ customer.telephone }}
+        </el-descriptions-item>
+        <el-descriptions-item label="邮箱">
+          {{ customer.email }}
+        </el-descriptions-item>
+        <el-descriptions-item label="QQ">
+          {{ customer.qq }}
+        </el-descriptions-item>
+        <el-descriptions-item label="微信">
+          {{ customer.wechat }}
+        </el-descriptions-item>
+        <el-descriptions-item label="网址">
+          {{ customer.website }}
+        </el-descriptions-item>
+        <el-descriptions-item label="所在地">
+          {{ customer.areaName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="详细地址">
+          {{ customer.detailAddress }}
+        </el-descriptions-item>
+        <el-descriptions-item label="下次联系时间">
+          {{ customer.contactNextTime ? formatDate(customer.contactNextTime, 'YYYY-MM-DD') : '空' }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions :column="1">
+        <el-descriptions-item label="客户描述">
+          {{ customer.description }}
+        </el-descriptions-item>
+        <el-descriptions-item label="备注">
+          {{ customer.remark }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-collapse-item>
+    <el-collapse-item name="systemInfo">
+      <template #title>
+        <span class="text-base font-bold">系统信息</span>
+      </template>
+      <el-descriptions :column="2">
+        <el-descriptions-item label="负责人">
+          {{ customer.ownerUserName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建人">
+          {{ customer.creatorName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ customer.createTime ? formatDate(customer.createTime) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="更新时间">
+          {{ customer.updateTime ? formatDate(customer.updateTime) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="最后跟进时间">
+          {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+<script setup lang="ts">
+import * as CustomerApi from '@/api/crm/customer'
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+
+const { customer } = defineProps<{ customer: CustomerApi.CustomerVO }>()
+
+// 展示的折叠面板
+const activeNames = ref(['basicInfo', 'systemInfo'])
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/crm/customer/detail/index.vue b/src/views/crm/customer/detail/index.vue
new file mode 100644
index 00000000..e5c8ef43
--- /dev/null
+++ b/src/views/crm/customer/detail/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div v-loading="loading">
+    <div class="flex items-start justify-between">
+      <div>
+        <!-- 左上：客户基本信息 -->
+        <CustomerBasicInfo :customer="customer" />
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <el-button @click="openForm('update', customer.id)" v-hasPermi="['crm:customer:update']">
+          编辑
+        </el-button>
+        <el-button>更改成交状态</el-button>
+      </div>
+    </div>
+    <el-row class="mt-10px">
+      <el-button>
+        <Icon icon="ph:calendar-fill" class="mr-5px" />
+        创建任务
+      </el-button>
+      <el-button>
+        <Icon icon="carbon:email" class="mr-5px" />
+        发送邮件
+      </el-button>
+      <el-button>
+        <Icon icon="system-uicons:contacts" class="mr-5px" />
+        创建联系人
+      </el-button>
+      <el-button>
+        <Icon icon="ep:opportunity" class="mr-5px" />
+        创建商机
+      </el-button>
+      <el-button>
+        <Icon icon="clarity:contract-line" class="mr-5px" />
+        创建合同
+      </el-button>
+      <el-button>
+        <Icon icon="icon-park:income-one" class="mr-5px" />
+        创建回款
+      </el-button>
+      <el-button>
+        <Icon icon="fluent:people-team-add-20-filled" class="mr-5px" />
+        添加团队成员
+      </el-button>
+    </el-row>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="vertical">
+      <el-descriptions-item label="客户级别">
+        <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
+      </el-descriptions-item>
+      <el-descriptions-item label="成交状态">
+        {{ customer.dealStatus ? '已成交' : '未成交' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="负责人">
+        {{ customer.ownerUserName }}
+      </el-descriptions-item>
+      <!-- TODO wanwan 首要联系人? -->
+      <el-descriptions-item label="首要联系人" />
+      <!-- TODO wanwan 首要联系人电话? -->
+      <el-descriptions-item label="首要联系人电话">
+        {{ customer.mobile }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+  <el-col :span="18">
+    <el-tabs>
+      <el-tab-pane label="详细资料">
+        <CustomerDetails class="ml-2" :customer="customer" />
+      </el-tab-pane>
+      <el-tab-pane label="活动" lazy> 活动</el-tab-pane>
+      <el-tab-pane label="邮件" lazy> 邮件</el-tab-pane>
+      <el-tab-pane label="工商信息" lazy> 工商信息</el-tab-pane>
+      <el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
+      <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
+      <el-tab-pane label="联系人" lazy>
+        <template #label> 联系人<el-badge :value="12" class="item" type="primary" /> </template>
+        联系人
+      </el-tab-pane>
+      <el-tab-pane label="团队成员" lazy>
+        <template #label> 团队成员<el-badge :value="2" class="item" type="primary" /> </template>
+        团队成员
+      </el-tab-pane>
+      <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
+      <el-tab-pane label="合同" lazy>
+        <template #label> 合同<el-badge :value="3" class="item" type="primary" /> </template>
+        合同
+      </el-tab-pane>
+      <el-tab-pane label="回款" lazy>
+        <template #label> 回款<el-badge :value="4" class="item" type="primary" /> </template>
+        回款
+      </el-tab-pane>
+      <el-tab-pane label="回访" lazy> 回访</el-tab-pane>
+      <el-tab-pane label="发票" lazy> 发票</el-tab-pane>
+    </el-tabs>
+  </el-col>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CustomerForm ref="formRef" @success="getCustomerData(id)" />
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as CustomerApi from '@/api/crm/customer'
+import CustomerBasicInfo from '@/views/crm/customer/detail/CustomerBasicInfo.vue'
+import { DICT_TYPE } from '@/utils/dict'
+import CustomerDetails from '@/views/crm/customer/detail/CustomerDetails.vue'
+import CustomerForm from '@/views/crm/customer/CustomerForm.vue'
+
+defineOptions({ name: 'CustomerDetail' })
+
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+const { currentRoute } = useRouter() // 路由
+const id = Number(route.params.id)
+const loading = ref(true) // 加载中
+
+// 客户详情
+const customer = ref<CustomerApi.CustomerVO>({} as CustomerApi.CustomerVO)
+
+/**
+ * 获取详情
+ *
+ * @param id
+ */
+const getCustomerData = async (id: number) => {
+  loading.value = true
+  try {
+    customer.value = await CustomerApi.getCustomer(id)
+  } finally {
+    loading.value = false
+  }
+}
+
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/**
+ * 初始化
+ */
+onMounted(() => {
+  if (!id) {
+    ElMessage.warning('参数错误，客户不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  getCustomerData(id)
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/crm/customer/index.vue b/src/views/crm/customer/index.vue
index ace56dac..073bf8cb 100644
--- a/src/views/crm/customer/index.vue
+++ b/src/views/crm/customer/index.vue
@@ -1,7 +1,6 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
-    <!-- TODO @wanwan：看看怎么表单可以对齐一点； -->
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -27,7 +26,51 @@
           class="!w-240px"
         />
       </el-form-item>
-      <!-- TODO @wanwan：筛选字段，加所属行业、客户等级、客户来源 -->
+      <el-form-item label="所属行业" prop="industryId">
+        <el-select
+          v-model="queryParams.industryId"
+          placeholder="请选择所属行业"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户等级" prop="level">
+        <el-select
+          v-model="queryParams.level"
+          placeholder="请选择客户等级"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户来源" prop="source">
+        <el-select
+          v-model="queryParams.source"
+          placeholder="请选择客户来源"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -48,7 +91,6 @@
   </ContentWrap>
 
   <!-- 列表 -->
-  <!-- TODO @wanwan：列表，按照 docs 的再改下 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
@@ -70,8 +112,9 @@
       </el-table-column>
       <el-table-column label="手机" align="center" prop="mobile" width="120" />
       <el-table-column label="详细地址" align="center" prop="detailAddress" width="200" />
-      <!--  TODO @Wanwan 负责人回显，所属部门，创建人    -->
-      <el-table-column label="负责人" align="center" prop="ownerUserId" />
+      <el-table-column label="负责人" align="center" prop="ownerUserName" />
+      <el-table-column label="所属部门" align="center" prop="ownerUserDept" />
+      <el-table-column label="创建人" align="center" prop="creatorName" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -104,9 +147,9 @@
         </template>
       </el-table-column>
       <!--  TODO @wanwan 距进入公海天数    -->
-      <!-- TODO @wanwan：操作要 fixed 再右侧哈； -->
-      <el-table-column label="操作" align="center" width="160">
+      <el-table-column label="操作" align="center" min-width="150" fixed="right">
         <template #default="scope">
+          <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
           <el-button
             link
             type="primary"
@@ -140,7 +183,7 @@
 </template>
 
 <script setup lang="ts">
-import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
+import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CustomerApi from '@/api/crm/customer'
@@ -158,7 +201,10 @@ const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: null,
-  mobile: null
+  mobile: null,
+  industryId: null,
+  level: null,
+  source: null
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -187,6 +233,12 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 打开客户详情 */
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'CrmCustomerDetail', params: { id } })
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {

From a9faeb1bdb58334b7446b776dcfba79e7ea75a8c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 4 Nov 2023 10:12:40 +0800
Subject: [PATCH 14/77] =?UTF-8?q?code=20review=EF=BC=9A=E5=AE=A2=E6=88=B7?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/customer/detail/CustomerBasicInfo.vue | 4 +---
 src/views/crm/customer/detail/CustomerDetails.vue   | 3 ++-
 src/views/crm/customer/detail/index.vue             | 4 ++--
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/views/crm/customer/detail/CustomerBasicInfo.vue b/src/views/crm/customer/detail/CustomerBasicInfo.vue
index 0329db8f..86f9c9d7 100644
--- a/src/views/crm/customer/detail/CustomerBasicInfo.vue
+++ b/src/views/crm/customer/detail/CustomerBasicInfo.vue
@@ -1,13 +1,12 @@
 <template>
-  <el-col> 客户 </el-col>
   <el-col>
     <el-row>
       <span class="text-xl font-bold">{{ customer.name }}</span>
     </el-row>
   </el-col>
   <el-col class="mt-10px">
-    <Icon icon="ant-design:tag-filled" />
     <!-- TODO 标签 -->
+    <!--    <Icon icon="ant-design:tag-filled" />-->
   </el-col>
 </template>
 <script setup lang="ts">
@@ -15,4 +14,3 @@ import * as CustomerApi from '@/api/crm/customer'
 
 const { customer } = defineProps<{ customer: CustomerApi.CustomerVO }>()
 </script>
-<style scoped lang="scss"></style>
diff --git a/src/views/crm/customer/detail/CustomerDetails.vue b/src/views/crm/customer/detail/CustomerDetails.vue
index f6215224..1065b22c 100644
--- a/src/views/crm/customer/detail/CustomerDetails.vue
+++ b/src/views/crm/customer/detail/CustomerDetails.vue
@@ -4,7 +4,7 @@
       <template #title>
         <span class="text-base font-bold">基本信息</span>
       </template>
-      <el-descriptions :column="2">
+      <el-descriptions :column="4">
         <el-descriptions-item label="客户名称">
           {{ customer.name }}
         </el-descriptions-item>
@@ -71,6 +71,7 @@
         <el-descriptions-item label="更新时间">
           {{ customer.updateTime ? formatDate(customer.updateTime) : '空' }}
         </el-descriptions-item>
+        <!-- TODO wanwan：要不把“最后跟进时间”放到“下次联系时间”后面 -->
         <el-descriptions-item label="最后跟进时间">
           {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
         </el-descriptions-item>
diff --git a/src/views/crm/customer/detail/index.vue b/src/views/crm/customer/detail/index.vue
index e5c8ef43..1caeadef 100644
--- a/src/views/crm/customer/detail/index.vue
+++ b/src/views/crm/customer/detail/index.vue
@@ -63,9 +63,11 @@
       </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
+  <!-- TODO wanwan：这个 tab 拉满哈，可以更好看； -->
   <el-col :span="18">
     <el-tabs>
       <el-tab-pane label="详细资料">
+        <!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->
         <CustomerDetails class="ml-2" :customer="customer" />
       </el-tab-pane>
       <el-tab-pane label="活动" lazy> 活动</el-tab-pane>
@@ -150,5 +152,3 @@ onMounted(() => {
   getCustomerData(id)
 })
 </script>
-
-<style scoped lang="scss"></style>

From ff6f05df84c223f6df7676f1ffd2a5da09813c18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?ZanGe=E4=B8=B6?= <385454831@qq.com>
Date: Sat, 4 Nov 2023 18:28:59 +0800
Subject: [PATCH 15/77] =?UTF-8?q?=E3=80=90crm:=E4=BA=A7=E5=93=81=E5=8F=8A?=
 =?UTF-8?q?=E4=BA=A7=E5=93=81=E5=88=86=E7=B1=BB=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/product/index.ts                  |  43 +++
 src/api/crm/productCategory/index.ts          |  32 +++
 src/utils/dict.ts                             |   3 +-
 src/views/crm/product/ProductDetail.vue       |  70 +++++
 src/views/crm/product/ProductForm.vue         | 184 ++++++++++++
 src/views/crm/product/index.vue               | 269 ++++++++++++++++++
 .../productCategory/ProductCategoryForm.vue   | 110 +++++++
 src/views/crm/productCategory/index.vue       | 137 +++++++++
 8 files changed, 847 insertions(+), 1 deletion(-)
 create mode 100644 src/api/crm/product/index.ts
 create mode 100644 src/api/crm/productCategory/index.ts
 create mode 100644 src/views/crm/product/ProductDetail.vue
 create mode 100644 src/views/crm/product/ProductForm.vue
 create mode 100644 src/views/crm/product/index.vue
 create mode 100644 src/views/crm/productCategory/ProductCategoryForm.vue
 create mode 100644 src/views/crm/productCategory/index.vue

diff --git a/src/api/crm/product/index.ts b/src/api/crm/product/index.ts
new file mode 100644
index 00000000..cb1ddcda
--- /dev/null
+++ b/src/api/crm/product/index.ts
@@ -0,0 +1,43 @@
+import request from '@/config/axios'
+
+export interface ProductVO {
+  id: number
+  name: string
+  no: string
+  unit: string
+  price: number
+  status: number
+  categoryId: number
+  description: string
+  ownerUserId: number
+}
+
+// 查询产品列表
+export const getProductPage = async (params) => {
+  return await request.get({ url: `/crm/product/page`, params })
+}
+
+// 查询产品详情
+export const getProduct = async (id: number) => {
+  return await request.get({ url: `/crm/product/get?id=` + id })
+}
+
+// 新增产品
+export const createProduct = async (data: ProductVO) => {
+  return await request.post({ url: `/crm/product/create`, data })
+}
+
+// 修改产品
+export const updateProduct = async (data: ProductVO) => {
+  return await request.put({ url: `/crm/product/update`, data })
+}
+
+// 删除产品
+export const deleteProduct = async (id: number) => {
+  return await request.delete({ url: `/crm/product/delete?id=` + id })
+}
+
+// 导出产品 Excel
+export const exportProduct = async (params) => {
+  return await request.download({ url: `/crm/product/export-excel`, params })
+}
diff --git a/src/api/crm/productCategory/index.ts b/src/api/crm/productCategory/index.ts
new file mode 100644
index 00000000..cdf8a966
--- /dev/null
+++ b/src/api/crm/productCategory/index.ts
@@ -0,0 +1,32 @@
+import request from '@/config/axios'
+
+export interface ProductCategoryVO {
+  id: number
+  name: string
+  parentId: number
+}
+
+// 查询产品分类详情
+export const getProductCategory = async (id: number) => {
+  return await request.get({ url: `/crm/product-category/get?id=` + id })
+}
+
+// 新增产品分类
+export const createProductCategory = async (data: ProductCategoryVO) => {
+  return await request.post({ url: `/crm/product-category/create`, data })
+}
+
+// 修改产品分类
+export const updateProductCategory = async (data: ProductCategoryVO) => {
+  return await request.put({ url: `/crm/product-category/update`, data })
+}
+
+// 删除产品分类
+export const deleteProductCategory = async (id: number) => {
+  return await request.delete({ url: `/crm/product-category/delete?id=` + id })
+}
+
+// 产品分类列表
+export const getProductCategoryList = async (params) => {
+  return await request.get({ url: `/crm/product-category/list`, params })
+}
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index 85e08e67..c059612a 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -191,5 +191,6 @@ export enum DICT_TYPE {
   CRM_RETURN_TYPE = 'crm_return_type',
   CRM_CUSTOMER_INDUSTRY = 'crm_customer_industry',
   CRM_CUSTOMER_LEVEL = 'crm_customer_level',
-  CRM_CUSTOMER_SOURCE = 'crm_customer_source'
+  CRM_CUSTOMER_SOURCE = 'crm_customer_source',
+  CRM_PRODUCT_STATUS = 'crm_product_status'
 }
diff --git a/src/views/crm/product/ProductDetail.vue b/src/views/crm/product/ProductDetail.vue
new file mode 100644
index 00000000..f14e571a
--- /dev/null
+++ b/src/views/crm/product/ProductDetail.vue
@@ -0,0 +1,70 @@
+<template>
+  <Dialog v-model="dialogVisible" :max-height="500" :scroll="true" title="产品详情">
+    <el-descriptions :column="1" border>
+      <el-descriptions-item label="产品名称">
+        {{ detailData.name }}
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ formatDate(detailData.createTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item label="状态">
+        <dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="detailData.status" />
+      </el-descriptions-item>
+      <el-descriptions-item label="产品分类">
+        {{ productCategoryList?.find((c) => c.id === detailData.categoryId)?.name }}
+      </el-descriptions-item>
+      <el-descriptions-item label="产品编码">
+        {{ detailData.no }}
+      </el-descriptions-item>
+      <el-descriptions-item label="产品描述">
+        {{ detailData.description }}
+      </el-descriptions-item>
+      <el-descriptions-item label="负责人">
+        {{ detailData.ownerUserId }}
+      </el-descriptions-item>
+      <el-descriptions-item label="单位">
+        <dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="detailData.unit" />
+      </el-descriptions-item>
+      <el-descriptions-item label="价格">
+        {{ fenToYuan(detailData.price) }}元
+      </el-descriptions-item>
+    </el-descriptions>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import * as ProductCategoryApi from '@/api/crm/productCategory'
+import * as ProductApi from '@/api/crm/product'
+import { formatDate } from '@/utils/formatTime'
+import { fenToYuan } from '@/utils'
+import { getSimpleUserList, UserVO } from '@/api/system/user'
+
+defineOptions({ name: 'CrmProductDetail' })
+
+const { t } = useI18n() // 国际化
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const detailLoading = ref(false) // 表单的加载中
+const detailData = ref() // 详情数据
+
+/** 打开弹窗 */
+const open = async (data: ProductApi.ProductVO) => {
+  dialogVisible.value = true
+  // 设置数据
+  detailLoading.value = true
+  try {
+    detailData.value = data
+  } finally {
+    detailLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const productCategoryList = ref([]) // 产品分类树
+const userList = ref<UserVO[]>([]) // 系统用户
+
+onMounted(async () => {
+  productCategoryList.value = await ProductCategoryApi.getProductCategoryList({})
+  userList.value = await getSimpleUserList()
+})
+</script>
diff --git a/src/views/crm/product/ProductForm.vue b/src/views/crm/product/ProductForm.vue
new file mode 100644
index 00000000..78d2a7c1
--- /dev/null
+++ b/src/views/crm/product/ProductForm.vue
@@ -0,0 +1,184 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入产品名称" />
+      </el-form-item>
+      <el-form-item label="产品编码" prop="no">
+        <el-input v-model="formData.no" placeholder="请输入产品编码" />
+      </el-form-item>
+      <el-form-item label="单位" prop="unit">
+        <el-select v-model="formData.unit" class="w-1/1" placeholder="请选择单位">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.PRODUCT_UNIT)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="价格" prop="price">
+        <el-input type="number" v-model="formData.price" placeholder="请输入价格" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="formData.status" placeholder="请选择状态">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="产品分类" prop="categoryId">
+        <el-cascader
+          v-model="formData.categoryId"
+          :options="productCategoryList"
+          :props="defaultProps"
+          class="w-1/1"
+          clearable
+          placeholder="请选择产品分类"
+          filterable
+        />
+      </el-form-item>
+      <el-form-item label="产品描述" prop="description">
+        <el-input v-model="formData.description" placeholder="请输入产品描述" />
+      </el-form-item>
+      <el-form-item label="负责人" prop="ownerUserId">
+        <el-select
+          v-model="formData.ownerUserId"
+          placeholder="请选择负责人"
+          :disabled="formData.id"
+        >
+          <el-option
+            v-for="user in userList"
+            :key="user.id"
+            :label="user.nickname"
+            :value="user.id"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as ProductApi from '@/api/crm/product'
+import * as ProductCategoryApi from '@/api/crm/productCategory'
+import { defaultProps, handleTree } from '@/utils/tree'
+import { getSimpleUserList, UserVO } from '@/api/system/user'
+import { useUserStore } from '@/store/modules/user'
+
+defineOptions({ name: 'CrmProductForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const userId = useUserStore().getUser.id // 当前登录的编号
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  no: undefined,
+  unit: undefined,
+  price: undefined,
+  status: undefined,
+  categoryId: undefined,
+  description: undefined,
+  ownerUserId: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
+  no: [{ required: true, message: '产品编码不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
+  categoryId: [{ required: true, message: '产品分类ID不能为空', trigger: 'blur' }],
+  ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
+  unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
+  price: [{ required: true, message: '价格不能为空', trigger: 'blur' }]
+})
+
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  formData.value.ownerUserId = userId
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ProductApi.getProduct(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ProductApi.ProductVO
+    if (formType.value === 'create') {
+      await ProductApi.createProduct(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProductApi.updateProduct(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    no: undefined,
+    unit: undefined,
+    price: undefined,
+    status: undefined,
+    categoryId: undefined,
+    description: undefined,
+    ownerUserId: undefined
+  }
+  formRef.value?.resetFields()
+}
+const productCategoryList = ref<any[]>([]) // 产品分类树
+const userList = ref<UserVO[]>([]) // 系统用户
+
+onMounted(async () => {
+  const data = await ProductCategoryApi.getProductCategoryList({})
+  productCategoryList.value = handleTree(data, 'id', 'parentId')
+  userList.value = await getSimpleUserList()
+})
+</script>
diff --git a/src/views/crm/product/index.vue b/src/views/crm/product/index.vue
new file mode 100644
index 00000000..122f964d
--- /dev/null
+++ b/src/views/crm/product/index.vue
@@ -0,0 +1,269 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="产品名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入产品名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="产品编码" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          placeholder="请输入产品编码"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable class="!w-240px">
+          <el-option
+            v-for="dict in getBoolDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="产品分类" prop="categoryId">
+        <el-input
+          v-model="queryParams.categoryId"
+          placeholder="请选择产品分类"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" @click="openForm('create')" v-hasPermi="['crm:product:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['crm:product:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <!--<el-table-column label="主键id" align="center" prop="id" />-->
+      <el-table-column label="产品名称" align="center" prop="name" />
+      <el-table-column label="产品编码" align="center" prop="no" />
+      <el-table-column label="单位" align="center" prop="unit">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.PRODUCT_UNIT" :value="scope.row.unit" />
+        </template>
+      </el-table-column>
+      <el-table-column label="价格" align="center" prop="price">
+        <template #default="{ row }">
+          {{ fenToYuan(row.price) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="产品分类" align="center" prop="categoryId">
+        <template #default="{ row }">
+          <span>{{ productCategoryList?.find((c) => c.id === row.categoryId)?.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="产品描述" align="center" prop="description" />
+      <el-table-column label="负责人" align="center" prop="ownerUserId">
+        <template #default="{ row }">
+          <span>{{ userList?.find((c) => c.id === row.ownerUserId)?.nickname }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" width="160">
+        <template #default="scope">
+          <el-button
+            v-hasPermi="['crm:product:query']"
+            link
+            type="primary"
+            @click="openDetail(scope.row)"
+          >
+            详情
+          </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['crm:product:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['crm:product:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ProductForm ref="formRef" @success="getList" />
+
+  <!-- 表单弹窗：详情 -->
+  <ProductDetail ref="detailRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE, getBoolDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as ProductApi from '@/api/crm/product'
+import ProductForm from './ProductForm.vue'
+import ProductDetail from './ProductDetail.vue'
+import { fenToYuan } from '@/utils'
+import * as ProductCategoryApi from '@/api/crm/productCategory'
+import { getSimpleUserList, UserVO } from '@/api/system/user'
+
+defineOptions({ name: 'CrmProduct' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  no: null,
+  unit: null,
+  price: null,
+  status: null,
+  categoryId: null,
+  description: null,
+  ownerUserId: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductApi.getProductPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+/** 详情操作 */
+const detailRef = ref()
+const openDetail = (data: ProductApi.ProductVO) => {
+  detailRef.value.open(data)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ProductApi.deleteProduct(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ProductApi.exportProduct(queryParams)
+    download.excel(data, '产品.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+const productCategoryList = ref([]) // 产品分类树
+const userList = ref<UserVO[]>([]) // 系统用户
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  productCategoryList.value = await ProductCategoryApi.getProductCategoryList({})
+  userList.value = await getSimpleUserList()
+})
+</script>
diff --git a/src/views/crm/productCategory/ProductCategoryForm.vue b/src/views/crm/productCategory/ProductCategoryForm.vue
new file mode 100644
index 00000000..22cd09a8
--- /dev/null
+++ b/src/views/crm/productCategory/ProductCategoryForm.vue
@@ -0,0 +1,110 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="父级id" prop="parentId">
+        <el-select v-model="formData.parentId" placeholder="请选择上级分类">
+          <el-option :key="0" label="顶级分类" :value="0" />
+          <el-option
+            v-for="item in productCategoryList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名称" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as ProductCategoryApi from '@/api/crm/productCategory'
+
+defineOptions({ name: 'CrmProductCategoryForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  parentId: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  parentId: [{ required: true, message: '父级分类不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const productCategoryList = ref<any[]>([]) // 产品分类树
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ProductCategoryApi.getProductCategory(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+  // 获得分类树
+  productCategoryList.value = await ProductCategoryApi.getProductCategoryList({ parentId: 0 })
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ProductCategoryApi.ProductCategoryVO
+    if (formType.value === 'create') {
+      await ProductCategoryApi.createProductCategory(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ProductCategoryApi.updateProductCategory(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    parentId: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/crm/productCategory/index.vue b/src/views/crm/productCategory/index.vue
new file mode 100644
index 00000000..3cf7c5f0
--- /dev/null
+++ b/src/views/crm/productCategory/index.vue
@@ -0,0 +1,137 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['crm:product-category:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" row-key="id" default-expand-all>
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['crm:product-category:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['crm:product-category:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ProductCategoryForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as ProductCategoryApi from '@/api/crm/productCategory'
+import ProductCategoryForm from './ProductCategoryForm.vue'
+import { handleTree } from '@/utils/tree'
+
+defineOptions({ name: 'CrmProductCategory' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<any[]>([]) // 列表的数据
+const queryParams = reactive({
+  name: null
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductCategoryApi.getProductCategoryList(queryParams)
+    list.value = handleTree(data, 'id', 'parentId')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ProductCategoryApi.deleteProductCategory(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From aedf0144072ddd2696a0c29e32e59dc9a2a643eb Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sat, 4 Nov 2023 22:06:40 +0800
Subject: [PATCH 16/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E8=A3=85?=
 =?UTF-8?q?=E4=BF=AE=E9=A1=B5=E9=9D=A2=E9=80=82=E9=85=8D=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComponentContainer.vue         |  45 +++++
 .../components/ComponentContainerProperty.vue | 164 ++++++++++++++++++
 .../DiyEditor/components/ComponentLibrary.vue |   2 +-
 .../components/mobile/NavigationBar/config.ts |   2 +-
 .../components/mobile/SearchBar/config.ts     |  20 ++-
 .../components/mobile/SearchBar/index.vue     |   8 +-
 .../components/mobile/SearchBar/property.vue  | 145 ++++++++--------
 src/components/DiyEditor/index.vue            |   8 +-
 src/components/DiyEditor/util.ts              |  28 +++
 9 files changed, 332 insertions(+), 90 deletions(-)
 create mode 100644 src/components/DiyEditor/components/ComponentContainer.vue
 create mode 100644 src/components/DiyEditor/components/ComponentContainerProperty.vue

diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue
new file mode 100644
index 00000000..95eb647a
--- /dev/null
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    :style="{
+      ...style,
+      background: property.bgType === 'color' ? property.bgColor : `url(${property.bgImg})`
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComponentStyle } from '@/components/DiyEditor/util'
+
+/**
+ * 组件容器
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer' })
+
+const props = defineProps<{ property: ComponentStyle }>()
+
+const style = computed(() => {
+  if (!props.property) {
+    return {}
+  }
+  return {
+    marginTop: `${props.property.marginTop || 0}px`,
+    marginBottom: `${props.property.marginBottom || 0}px`,
+    marginLeft: `${props.property.marginLeft || 0}px`,
+    marginRight: `${props.property.marginRight || 0}px`,
+    paddingTop: `${props.property.paddingTop || 0}px`,
+    paddingRight: `${props.property.paddingRight || 0}px`,
+    paddingBottom: `${props.property.paddingBottom || 0}px`,
+    paddingLeft: `${props.property.paddingLeft || 0}px`,
+    borderTopLeftRadius: `${props.property.borderTopLeftRadius || 0}px`,
+    borderTopRightRadius: `${props.property.borderTopRightRadius || 0}px`,
+    borderBottomRightRadius: `${props.property.borderBottomRightRadius || 0}px`,
+    borderBottomLeftRadius: `${props.property.borderBottomLeftRadius || 0}px`,
+    overflow: 'hidden'
+  }
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/ComponentContainerProperty.vue b/src/components/DiyEditor/components/ComponentContainerProperty.vue
new file mode 100644
index 00000000..0cfbbe1e
--- /dev/null
+++ b/src/components/DiyEditor/components/ComponentContainerProperty.vue
@@ -0,0 +1,164 @@
+<template>
+  <el-tabs stretch>
+    <el-tab-pane label="内容">
+      <slot></slot>
+    </el-tab-pane>
+    <el-tab-pane label="样式" lazy>
+      <el-card header="组件样式" class="property-group">
+        <el-form :model="formData" label-width="80px">
+          <el-form-item label="组件背景" prop="bgType">
+            <el-radio-group v-model="formData.bgType">
+              <el-radio label="color">纯色</el-radio>
+              <el-radio label="img">图片</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="选择颜色" prop="bgColor" v-if="formData.bgType === 'color'">
+            <ColorInput v-model="formData.bgColor" />
+          </el-form-item>
+          <el-form-item label="上传图片" prop="bgImg" v-else>
+            <UploadImg v-model="formData.bgImg" :limit="1">
+              <template #tip>建议宽度 750px</template>
+            </UploadImg>
+          </el-form-item>
+          <el-tree :data="treeData" :expand-on-click-node="false">
+            <template #default="{ node, data }">
+              <el-form-item
+                :label="data.label"
+                :prop="data.prop"
+                :label-width="node.level === 1 ? '80px' : '62px'"
+                class="tree-form-item w-full m-b-0!"
+              >
+                <el-slider
+                  v-model="formData[data.prop]"
+                  :max="100"
+                  :min="0"
+                  show-input
+                  input-size="small"
+                  :show-input-controls="false"
+                  @input="handleSliderChange(data.prop)"
+                />
+              </el-form-item>
+            </template>
+          </el-tree>
+        </el-form>
+      </el-card>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+import { ComponentStyle, usePropertyForm } from '@/components/DiyEditor/util'
+
+/**
+ * 组件容器属性
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer' })
+
+const props = defineProps<{ modelValue: ComponentStyle }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+const treeData = [
+  {
+    label: '外部边距',
+    prop: 'margin',
+    children: [
+      {
+        label: '上',
+        prop: 'marginTop'
+      },
+      {
+        label: '右',
+        prop: 'marginRight'
+      },
+      {
+        label: '下',
+        prop: 'marginBottom'
+      },
+      {
+        label: '左',
+        prop: 'marginLeft'
+      }
+    ]
+  },
+  {
+    label: '内部边距',
+    prop: 'padding',
+    children: [
+      {
+        label: '上',
+        prop: 'paddingTop'
+      },
+      {
+        label: '右',
+        prop: 'paddingRight'
+      },
+      {
+        label: '下',
+        prop: 'paddingBottom'
+      },
+      {
+        label: '左',
+        prop: 'paddingLeft'
+      }
+    ]
+  },
+  {
+    label: '边框圆角',
+    prop: 'borderRadius',
+    children: [
+      {
+        label: '上左',
+        prop: 'borderTopLeftRadius'
+      },
+      {
+        label: '上右',
+        prop: 'borderTopRightRadius'
+      },
+      {
+        label: '下右',
+        prop: 'borderBottomRightRadius'
+      },
+      {
+        label: '下左',
+        prop: 'borderBottomLeftRadius'
+      }
+    ]
+  }
+]
+
+const handleSliderChange = (prop: string) => {
+  switch (prop) {
+    case 'margin':
+      formData.value.marginTop = formData.value.margin
+      formData.value.marginRight = formData.value.margin
+      formData.value.marginBottom = formData.value.margin
+      formData.value.marginLeft = formData.value.margin
+      break
+    case 'padding':
+      formData.value.paddingTop = formData.value.padding
+      formData.value.paddingRight = formData.value.padding
+      formData.value.paddingBottom = formData.value.padding
+      formData.value.paddingLeft = formData.value.padding
+      break
+    case 'borderRadius':
+      formData.value.borderTopLeftRadius = formData.value.borderRadius
+      formData.value.borderTopRightRadius = formData.value.borderRadius
+      formData.value.borderBottomRightRadius = formData.value.borderRadius
+      formData.value.borderBottomLeftRadius = formData.value.borderRadius
+      break
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.tree-form-item {
+  :deep(.el-slider__runway) {
+    margin-right: 16px;
+  }
+  :deep(.el-input-number) {
+    width: 50px;
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/ComponentLibrary.vue b/src/components/DiyEditor/components/ComponentLibrary.vue
index 8e918fa9..abeb40b5 100644
--- a/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-aside class="editor-left" width="260px">
+  <el-aside class="editor-left" width="261px">
     <el-scrollbar>
       <el-collapse v-model="extendGroups">
         <el-collapse-item
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
index b250f5f1..f722d525 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/config.ts
@@ -29,7 +29,7 @@ export const component = {
     title: '页面标题',
     description: '',
     navBarHeight: 35,
-    backgroundColor: '#f5f5f5',
+    backgroundColor: '#fff',
     backgroundImage: '',
     styleType: 'default',
     alwaysShow: true,
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/config.ts b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
index 1241748d..ef47b27c 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/config.ts
+++ b/src/components/DiyEditor/components/mobile/SearchBar/config.ts
@@ -1,4 +1,4 @@
-import { DiyComponent } from '@/components/DiyEditor/util'
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 
 /** 搜索框属性 */
 export interface SearchProperty {
@@ -7,10 +7,10 @@ export interface SearchProperty {
   borderRadius: number // 框体样式
   placeholder: string // 占位文字
   placeholderPosition: PlaceholderPosition // 占位文字位置
-  backgroundColor: string // 背景颜色
-  borderColor: string // 框体颜色
+  backgroundColor: string // 框体颜色
   textColor: string // 字体颜色
   hotKeywords: string[] // 热词
+  style: ComponentStyle
 }
 
 // 文字位置
@@ -27,9 +27,17 @@ export const component = {
     borderRadius: 0,
     placeholder: '搜索商品',
     placeholderPosition: 'left',
-    backgroundColor: 'rgb(249, 249, 249)',
-    borderColor: 'rgb(255, 255, 255)',
+    backgroundColor: 'rgb(238, 238, 238)',
     textColor: 'rgb(150, 151, 153)',
-    hotKeywords: []
+    hotKeywords: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8
+    } as ComponentStyle
   }
 } as DiyComponent<SearchProperty>
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
index e120405a..27db1c51 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -2,8 +2,6 @@
   <div
     class="search-bar"
     :style="{
-      background: property.backgroundColor,
-      border: `1px solid ${property.backgroundColor}`,
       color: property.textColor
     }"
   >
@@ -12,7 +10,7 @@
       class="inner"
       :style="{
         height: `${property.height}px`,
-        background: property.borderColor,
+        background: property.backgroundColor,
         borderRadius: `${property.borderRadius}px`
       }"
     >
@@ -44,13 +42,11 @@ defineProps<{ property: SearchProperty }>()
 
 <style scoped lang="scss">
 .search-bar {
-  position: relative;
+  width: 375px;
   /* 搜索框 */
   .inner {
     position: relative;
-    width: calc(100% - 16px);
     min-height: 28px;
-    margin: 5px auto;
     display: flex;
     align-items: center;
     font-size: 14px;
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/property.vue b/src/components/DiyEditor/components/mobile/SearchBar/property.vue
index 9123ebe5..d121a1e3 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/property.vue
+++ b/src/components/DiyEditor/components/mobile/SearchBar/property.vue
@@ -1,78 +1,77 @@
 <template>
-  <el-text tag="p"> 搜索热词 </el-text>
-  <el-text type="info" size="small"> 拖动左侧的小圆点可以调整热词顺序 </el-text>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-text tag="p"> 搜索热词 </el-text>
+    <el-text type="info" size="small"> 拖动左侧的小圆点可以调整热词顺序 </el-text>
 
-  <!-- 表单 -->
-  <el-form label-width="80px" :model="formData" class="m-t-8px">
-    <div v-if="formData.hotKeywords.length">
-      <VueDraggable
-        :list="formData.hotKeywords"
-        item-key="index"
-        handle=".drag-icon"
-        :forceFallback="true"
-        :animation="200"
-      >
-        <template #item="{ index }">
-          <div class="mb-4px flex flex-row items-center gap-4px rounded bg-gray-100 p-8px">
-            <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
-            <el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
-            <Icon icon="ep:delete" class="text-red-500" @click="deleteHotWord(index)" />
-          </div>
-        </template>
-      </VueDraggable>
-    </div>
-    <el-form-item label-width="0">
-      <el-button @click="handleAddHotWord" type="primary" plain class="m-t-8px w-full">
-        添加热词
-      </el-button>
-    </el-form-item>
-    <el-form-item label="框体样式">
-      <el-radio-group v-model="formData!.borderRadius">
-        <el-tooltip content="方形" placement="top">
-          <el-radio-button :label="0">
-            <Icon icon="tabler:input-search" />
-          </el-radio-button>
-        </el-tooltip>
-        <el-tooltip content="圆形" placement="top">
-          <el-radio-button :label="10">
-            <Icon icon="iconoir:input-search" />
-          </el-radio-button>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="提示文字" prop="placeholder">
-      <el-input v-model="formData.placeholder" />
-    </el-form-item>
-    <el-form-item label="文本位置" prop="placeholderPosition">
-      <el-radio-group v-model="formData!.placeholderPosition">
-        <el-tooltip content="居左" placement="top">
-          <el-radio-button label="left">
-            <Icon icon="ant-design:align-left-outlined" />
-          </el-radio-button>
-        </el-tooltip>
-        <el-tooltip content="居中" placement="top">
-          <el-radio-button label="center">
-            <Icon icon="ant-design:align-center-outlined" />
-          </el-radio-button>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="扫一扫" prop="showScan">
-      <el-switch v-model="formData!.showScan" />
-    </el-form-item>
-    <el-form-item label="框体高度" prop="height">
-      <el-slider v-model="formData!.height" :max="50" :min="28" show-input input-size="small" />
-    </el-form-item>
-    <el-form-item label="背景颜色" prop="backgroundColor">
-      <ColorInput v-model="formData.backgroundColor" />
-    </el-form-item>
-    <el-form-item label="框体颜色" prop="borderColor">
-      <ColorInput v-model="formData.borderColor" />
-    </el-form-item>
-    <el-form-item class="lef" label="文本颜色" prop="textColor">
-      <ColorInput v-model="formData.textColor" />
-    </el-form-item>
-  </el-form>
+    <!-- 表单 -->
+    <el-form label-width="80px" :model="formData" class="m-t-8px">
+      <div v-if="formData.hotKeywords.length">
+        <VueDraggable
+          :list="formData.hotKeywords"
+          item-key="index"
+          handle=".drag-icon"
+          :forceFallback="true"
+          :animation="200"
+        >
+          <template #item="{ index }">
+            <div class="mb-4px flex flex-row items-center gap-4px rounded bg-gray-100 p-8px">
+              <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+              <el-input v-model="formData.hotKeywords[index]" placeholder="请输入热词" />
+              <Icon icon="ep:delete" class="text-red-500" @click="deleteHotWord(index)" />
+            </div>
+          </template>
+        </VueDraggable>
+      </div>
+      <el-form-item label-width="0">
+        <el-button @click="handleAddHotWord" type="primary" plain class="m-t-8px w-full">
+          添加热词
+        </el-button>
+      </el-form-item>
+      <el-form-item label="框体样式">
+        <el-radio-group v-model="formData!.borderRadius">
+          <el-tooltip content="方形" placement="top">
+            <el-radio-button :label="0">
+              <Icon icon="tabler:input-search" />
+            </el-radio-button>
+          </el-tooltip>
+          <el-tooltip content="圆形" placement="top">
+            <el-radio-button :label="10">
+              <Icon icon="iconoir:input-search" />
+            </el-radio-button>
+          </el-tooltip>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="提示文字" prop="placeholder">
+        <el-input v-model="formData.placeholder" />
+      </el-form-item>
+      <el-form-item label="文本位置" prop="placeholderPosition">
+        <el-radio-group v-model="formData!.placeholderPosition">
+          <el-tooltip content="居左" placement="top">
+            <el-radio-button label="left">
+              <Icon icon="ant-design:align-left-outlined" />
+            </el-radio-button>
+          </el-tooltip>
+          <el-tooltip content="居中" placement="top">
+            <el-radio-button label="center">
+              <Icon icon="ant-design:align-center-outlined" />
+            </el-radio-button>
+          </el-tooltip>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="扫一扫" prop="showScan">
+        <el-switch v-model="formData!.showScan" />
+      </el-form-item>
+      <el-form-item label="框体高度" prop="height">
+        <el-slider v-model="formData!.height" :max="50" :min="28" show-input input-size="small" />
+      </el-form-item>
+      <el-form-item label="框体颜色" prop="backgroundColor">
+        <ColorInput v-model="formData.backgroundColor" />
+      </el-form-item>
+      <el-form-item class="lef" label="文本颜色" prop="textColor">
+        <ColorInput v-model="formData.textColor" />
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index d0d49812..e45dc9d3 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -427,11 +427,13 @@ $phone-width: 375px;
         padding: 8px 16px;
       }
       /* 属性面板分组 */
-      .property-group {
-        /* 属性分组 */
-        :deep(.el-card__header) {
+      :deep(.property-group) {
+        margin: 0 -20px;
+        /* 属性分组名称 */
+        .el-card__header {
           border: none;
           background: var(--el-bg-color-page);
+          padding: 8px 32px;
         }
       }
     }
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index 407efa30..b781fe3c 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -16,6 +16,34 @@ export interface DiyComponentLibrary {
   components: string[]
 }
 
+// 组件样式
+export interface ComponentStyle {
+  // 背景类型
+  bgType: 'color' | 'img'
+  // 背景颜色
+  bgColor: string
+  // 背景图片
+  bgImg: string
+  // 外边距
+  margin: number
+  marginTop: number
+  marginRight: number
+  marginBottom: number
+  marginLeft: number
+  // 内边距
+  padding: number
+  paddingTop: number
+  paddingRight: number
+  paddingBottom: number
+  paddingLeft: number
+  // 边框圆角
+  borderRadius: number
+  borderTopLeftRadius: number
+  borderTopRightRadius: number
+  borderBottomRightRadius: number
+  borderBottomLeftRadius: number
+}
+
 // 页面配置
 export interface PageConfig {
   // 页面属性

From 984351fbf0ac217f2dc622ee6a1b811316b0e550 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sun, 5 Nov 2023 09:47:54 +0800
Subject: [PATCH 17/77] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=86=85=E5=AE=B9=E5=8C=BA=E4=BC=9A=E5=87=BA?=
 =?UTF-8?q?=E7=8E=B0=E6=BB=9A=E5=8A=A8=E6=9D=A1=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?:=20=E5=BA=95=E9=83=A8=E7=89=88=E6=9D=83=E6=A0=8F=E7=9A=84P?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E6=9C=89=E9=BB=98=E8=AE=A4=E7=9A=84margin?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/Footer/src/Footer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/components/Footer/src/Footer.vue b/src/layout/components/Footer/src/Footer.vue
index c350e38a..3eede386 100644
--- a/src/layout/components/Footer/src/Footer.vue
+++ b/src/layout/components/Footer/src/Footer.vue
@@ -19,6 +19,6 @@ const title = computed(() => appStore.getTitle)
     :class="prefixCls"
     class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)]"
   >
-    <p style="font-size: 14px">Copyright ©2022-{{ title }}</p>
+    <span class="text-14px">Copyright ©2022-{{ title }}</span>
   </div>
 </template>

From 0b0ba1f31367011c18fbb47e939bc6b4d7f30e61 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sun, 5 Nov 2023 10:08:03 +0800
Subject: [PATCH 18/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=A3=85=E4=BF=AE=E7=BC=96=E8=BE=91=E5=99=A8=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComponentContainer.vue         |   9 +-
 .../DiyEditor/components/ComponentLibrary.vue |   1 +
 .../components/mobile/SearchBar/index.vue     |   1 -
 src/components/DiyEditor/index.vue            | 328 +++++++++---------
 4 files changed, 174 insertions(+), 165 deletions(-)

diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue
index 95eb647a..ecd7cb48 100644
--- a/src/components/DiyEditor/components/ComponentContainer.vue
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
@@ -1,8 +1,7 @@
 <template>
   <div
     :style="{
-      ...style,
-      background: property.bgType === 'color' ? property.bgColor : `url(${property.bgImg})`
+      ...style
     }"
   >
     <slot></slot>
@@ -18,7 +17,7 @@ import { ComponentStyle } from '@/components/DiyEditor/util'
  */
 defineOptions({ name: 'ComponentContainer' })
 
-const props = defineProps<{ property: ComponentStyle }>()
+const props = defineProps<{ property: ComponentStyle | undefined }>()
 
 const style = computed(() => {
   if (!props.property) {
@@ -37,7 +36,9 @@ const style = computed(() => {
     borderTopRightRadius: `${props.property.borderTopRightRadius || 0}px`,
     borderBottomRightRadius: `${props.property.borderBottomRightRadius || 0}px`,
     borderBottomLeftRadius: `${props.property.borderBottomLeftRadius || 0}px`,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    background:
+      props.property.bgType === 'color' ? props.property.bgColor : `url(${props.property.bgImg})`
   }
 })
 </script>
diff --git a/src/components/DiyEditor/components/ComponentLibrary.vue b/src/components/DiyEditor/components/ComponentLibrary.vue
index abeb40b5..2bcd81fd 100644
--- a/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -11,6 +11,7 @@
           <draggable
             class="component-container"
             ghost-class="draggable-ghost"
+            item-key="index"
             :list="group.components"
             :sort="false"
             :group="{ name: 'component', pull: 'clone', put: false }"
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
index 27db1c51..618c918b 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -42,7 +42,6 @@ defineProps<{ property: SearchProperty }>()
 
 <style scoped lang="scss">
 .search-bar {
-  width: 375px;
   /* 搜索框 */
   .inner {
     position: relative;
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index e45dc9d3..004d97d1 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -33,111 +33,111 @@
       <ComponentLibrary ref="componentLibrary" :list="libs" v-if="libs && libs.length > 0" />
       <!-- 中心设计区域 -->
       <div class="editor-center page-prop-area" @click="handlePageSelected">
-        <div class="editor-design">
-          <!-- 手机顶部 -->
-          <div class="editor-design-top">
-            <!-- 手机顶部状态栏 -->
-            <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
-            <!-- 手机顶部导航栏 -->
-            <NavigationBar
-              v-if="showNavigationBar"
-              :property="navigationBarComponent.property"
-              @click="handleNavigationBarSelected"
-              :class="[
-                'component',
-                'cursor-pointer!',
-                { active: selectedComponent?.id === navigationBarComponent.id }
-              ]"
-            />
-          </div>
-          <!-- 手机页面编辑区域 -->
-          <el-scrollbar class="editor-design-center" height="100%" view-class="page-prop-area">
-            <div
-              class="phone-container"
-              :style="{
-                backgroundColor: pageConfigComponent.property.backgroundColor,
-                backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
-              }"
-            >
-              <draggable
-                class="page-prop-area drag-area"
-                v-model="pageComponents"
-                item-key="index"
-                :animation="200"
-                filter=".component-toolbar"
-                ghost-class="draggable-ghost"
-                :force-fallback="true"
-                group="component"
-                @change="handleComponentChange"
-              >
-                <template #item="{ element, index }">
-                  <div class="component-container" @click="handleComponentSelected(element, index)">
-                    <!-- 左侧组件名 -->
-                    <div
-                      :class="['component-name', { active: selectedComponentIndex === index }]"
-                      v-if="element.name"
-                    >
-                      {{ element.name }}
-                    </div>
-                    <!-- 组件内容区 -->
-                    <div :class="['component', { active: selectedComponentIndex === index }]">
-                      <component
-                        :is="element.id"
-                        :property="element.property"
-                        :data-type="element.id"
-                      />
-                    </div>
-                    <!-- 左侧：组件操作工具栏 -->
-                    <div
-                      class="component-toolbar"
-                      v-if="element.name && selectedComponentIndex === index"
-                    >
-                      <el-button-group type="primary">
-                        <el-tooltip content="上移" placement="right">
-                          <el-button
-                            :disabled="index === 0"
-                            @click.stop="handleMoveComponent(index, -1)"
-                          >
-                            <Icon icon="ep:arrow-up" />
-                          </el-button>
-                        </el-tooltip>
-                        <el-tooltip content="下移" placement="right">
-                          <el-button
-                            :disabled="index === pageComponents.length - 1"
-                            @click.stop="handleMoveComponent(index, 1)"
-                          >
-                            <Icon icon="ep:arrow-down" />
-                          </el-button>
-                        </el-tooltip>
-                        <el-tooltip content="复制" placement="right">
-                          <el-button @click.stop="handleCopyComponent(index)">
-                            <Icon icon="ep:copy-document" />
-                          </el-button>
-                        </el-tooltip>
-                        <el-tooltip content="删除" placement="right">
-                          <el-button @click.stop="handleDeleteComponent(index)">
-                            <Icon icon="ep:delete" />
-                          </el-button>
-                        </el-tooltip>
-                      </el-button-group>
-                    </div>
-                  </div>
-                </template>
-              </draggable>
-            </div>
-          </el-scrollbar>
-          <!-- 手机底部导航 -->
-          <div
-            v-if="showTabBar"
+        <!-- 手机顶部 -->
+        <div class="editor-design-top">
+          <!-- 手机顶部状态栏 -->
+          <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
+          <!-- 手机顶部导航栏 -->
+          <NavigationBar
+            v-if="showNavigationBar"
+            :property="navigationBarComponent.property"
+            @click="handleNavigationBarSelected"
             :class="[
-              'editor-design-bottom',
               'component',
               'cursor-pointer!',
-              { active: selectedComponent?.id === tabBarComponent.id }
+              { active: selectedComponent?.id === navigationBarComponent.id }
             ]"
+          />
+        </div>
+        <!-- 手机页面编辑区域 -->
+        <el-scrollbar
+          height="100%"
+          wrap-class="editor-design-center page-prop-area"
+          view-class="phone-container"
+          :view-style="{
+            backgroundColor: pageConfigComponent.property.backgroundColor,
+            backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`
+          }"
+        >
+          <draggable
+            class="page-prop-area drag-area"
+            v-model="pageComponents"
+            item-key="index"
+            :animation="200"
+            filter=".component-toolbar"
+            ghost-class="draggable-ghost"
+            :force-fallback="true"
+            group="component"
+            @change="handleComponentChange"
           >
-            <TabBar :property="tabBarComponent.property" @click="handleTabBarSelected" />
-          </div>
+            <template #item="{ element, index }">
+              <div class="component" @click="handleComponentSelected(element, index)">
+                <!-- 组件内容区 -->
+                <ComponentContainer :property="element.property.style">
+                  <component
+                    :is="element.id"
+                    :property="element.property"
+                    :data-type="element.id"
+                  />
+                </ComponentContainer>
+                <div :class="['component-wrap', { active: selectedComponentIndex === index }]">
+                  <!-- 左侧组件名 -->
+                  <div
+                    :class="['component-name', { active: selectedComponentIndex === index }]"
+                    v-if="element.name"
+                  >
+                    {{ element.name }}
+                  </div>
+                  <!-- 左侧：组件操作工具栏 -->
+                  <div
+                    class="component-toolbar"
+                    v-if="element.name && selectedComponentIndex === index"
+                  >
+                    <el-button-group type="primary">
+                      <el-tooltip content="上移" placement="right">
+                        <el-button
+                          :disabled="index === 0"
+                          @click.stop="handleMoveComponent(index, -1)"
+                        >
+                          <Icon icon="ep:arrow-up" />
+                        </el-button>
+                      </el-tooltip>
+                      <el-tooltip content="下移" placement="right">
+                        <el-button
+                          :disabled="index === pageComponents.length - 1"
+                          @click.stop="handleMoveComponent(index, 1)"
+                        >
+                          <Icon icon="ep:arrow-down" />
+                        </el-button>
+                      </el-tooltip>
+                      <el-tooltip content="复制" placement="right">
+                        <el-button @click.stop="handleCopyComponent(index)">
+                          <Icon icon="ep:copy-document" />
+                        </el-button>
+                      </el-tooltip>
+                      <el-tooltip content="删除" placement="right">
+                        <el-button @click.stop="handleDeleteComponent(index)">
+                          <Icon icon="ep:delete" />
+                        </el-button>
+                      </el-tooltip>
+                    </el-button-group>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </el-scrollbar>
+        <!-- 手机底部导航 -->
+        <div
+          v-if="showTabBar"
+          :class="[
+            'editor-design-bottom',
+            'component',
+            'cursor-pointer!',
+            { active: selectedComponent?.id === tabBarComponent.id }
+          ]"
+        >
+          <TabBar :property="tabBarComponent.property" @click="handleTabBarSelected" />
         </div>
       </div>
       <!-- 右侧属性面板 -->
@@ -383,6 +383,7 @@ onMounted(() => setDefaultSelectedComponent())
 <style lang="scss" scoped>
 /* 手机宽度 */
 $phone-width: 375px;
+$toolbar-height: 42px;
 /* 根节点样式 */
 .editor {
   height: 100%;
@@ -394,7 +395,7 @@ $phone-width: 375px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: auto;
+    height: $toolbar-height;
     padding: 0;
     border-bottom: solid 1px var(--el-border-color);
     background-color: var(--el-bg-color);
@@ -416,12 +417,14 @@ $phone-width: 375px;
   /* 中心操作区 */
   .editor-container {
     height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 42px
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
+        $toolbar-height
     );
     /* 右侧属性面板 */
     .editor-right {
       flex-shrink: 0;
       box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
+      overflow: hidden;
       /* 属性面板顶部：减少内边距 */
       :deep(.el-card__header) {
         padding: 8px 16px;
@@ -440,75 +443,80 @@ $phone-width: 375px;
 
     /* 中心区域 */
     .editor-center {
+      position: relative;
       flex: 1 1 0;
-      padding: 16px 0;
       background-color: var(--app-content-bg-color);
       display: flex;
+      flex-direction: column;
       justify-content: center;
-      /* 中心设计区域 */
-      .editor-design {
-        position: relative;
-        height: 100%;
+      margin: 16px 0 0 0;
+      overflow: hidden;
+      width: 100%;
+
+      /* 组件 */
+      .component {
+        width: $phone-width;
+        cursor: move;
+        /* 鼠标放到组件上时 */
+        &:hover {
+          border: 1px dashed var(--el-color-primary);
+          box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
+        }
+      }
+      /* 组件选中 */
+      .component.active {
+        border: 2px solid var(--el-color-primary);
+      }
+      /* 手机顶部 */
+      .editor-design-top {
+        width: $phone-width;
+        margin: 0 auto;
+        /* 手机顶部状态栏 */
+        .status-bar {
+          height: 20px;
+          width: $phone-width;
+          background-color: #fff;
+        }
+      }
+      /* 手机底部导航 */
+      .editor-design-bottom {
+        width: $phone-width;
+        margin: 0 auto;
+      }
+      /* 手机页面编辑区域 */
+      :deep(.editor-design-center) {
         width: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        overflow: hidden;
 
-        /* 组件 */
-        .component {
-          border: 1px solid #fff;
+        /* 主体内容 */
+        .phone-container {
+          position: relative;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          height: 100%;
           width: $phone-width;
-          cursor: move;
-          /* 鼠标放到组件上时 */
-          &:hover {
-            border: 1px dashed var(--el-color-primary);
-          }
-        }
-        /* 组件选中 */
-        .component.active {
-          border: 2px solid var(--el-color-primary);
-        }
-        /* 手机顶部 */
-        .editor-design-top {
-          width: $phone-width;
-          /* 手机顶部状态栏 */
-          .status-bar {
-            height: 20px;
-            width: $phone-width;
-            background-color: #fff;
-          }
-        }
-        /* 手机底部导航 */
-        .editor-design-bottom {
-          width: $phone-width;
-        }
-        /* 手机页面编辑区域 */
-        .editor-design-center {
-          width: 100%;
-          flex: 1 1 0;
-
-          :deep(.el-scrollbar__view) {
+          margin: 0 auto;
+          .drag-area {
             height: 100%;
+            width: 100%;
           }
 
-          /* 主体内容 */
-          .phone-container {
-            height: 100%;
-            box-sizing: border-box;
+          .component {
             position: relative;
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            width: $phone-width;
-            margin: 0 auto;
-            .drag-area {
-              height: 100%;
-            }
+            cursor: move;
 
-            /* 组件容器（左侧：组件名称，中间：组件，右侧：操作工具栏） */
-            .component-container {
+            .component-wrap {
+              display: none;
+              position: absolute;
+              left: -2px;
+              top: 0;
               width: 100%;
-              position: relative;
+              height: 100%;
+
+              &.active {
+                display: block;
+                border: 2px solid var(--el-color-primary);
+                box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
+              }
               /* 左侧：组件名称 */
               .component-name {
                 position: absolute;
@@ -518,7 +526,7 @@ $phone-width: 375px;
                 height: 25px;
                 background: #fff;
                 font-size: 12px;
-                left: -85px;
+                left: -88px;
                 top: 0;
                 box-shadow:
                   0 0 4px #00000014,
@@ -548,7 +556,7 @@ $phone-width: 375px;
               .component-toolbar {
                 position: absolute;
                 top: 0;
-                right: -57px;
+                right: -55px;
                 /* 左侧小三角 */
                 &:before {
                   position: absolute;

From 434aa864da30e4a35a093099e09fb620302ab944 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sun, 5 Nov 2023 12:40:32 +0800
Subject: [PATCH 19/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=A3=85=E4=BF=AE=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComponentContainer.vue         | 222 ++++++++++++++++--
 src/components/DiyEditor/index.vue            | 211 +++--------------
 src/components/DiyEditor/util.ts              |   2 +-
 src/components/VerticalButtonGroup/index.vue  |  40 ++++
 4 files changed, 267 insertions(+), 208 deletions(-)
 create mode 100644 src/components/VerticalButtonGroup/index.vue

diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue
index ecd7cb48..c013362f 100644
--- a/src/components/DiyEditor/components/ComponentContainer.vue
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
@@ -1,15 +1,57 @@
 <template>
-  <div
-    :style="{
-      ...style
-    }"
-  >
-    <slot></slot>
+  <div :class="['component', { active: active }]">
+    <div
+      :style="{
+        ...style
+      }"
+    >
+      <component :is="component.id" :property="component.property" />
+    </div>
+    <div class="component-wrap">
+      <!-- 左侧组件名 -->
+      <div class="component-name" v-if="component.name">
+        {{ component.name }}
+      </div>
+      <!-- 左侧：组件操作工具栏 -->
+      <div class="component-toolbar" v-if="showToolbar && component.name && active">
+        <VerticalButtonGroup type="primary">
+          <el-tooltip content="上移" placement="right">
+            <el-button :disabled="!canMoveUp" @click.stop="handleMoveComponent(-1)">
+              <Icon icon="ep:arrow-up" />
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="下移" placement="right">
+            <el-button :disabled="!canMoveDown" @click.stop="handleMoveComponent(1)">
+              <Icon icon="ep:arrow-down" />
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="复制" placement="right">
+            <el-button @click.stop="handleCopyComponent()">
+              <Icon icon="ep:copy-document" />
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="删除" placement="right">
+            <el-button @click.stop="handleDeleteComponent()">
+              <Icon icon="ep:delete" />
+            </el-button>
+          </el-tooltip>
+        </VerticalButtonGroup>
+      </div>
+    </div>
   </div>
 </template>
 
+<script lang="ts">
+// 注册所有的组件
+import { components } from '../components/mobile/index'
+export default {
+  components: { ...components }
+}
+</script>
 <script setup lang="ts">
-import { ComponentStyle } from '@/components/DiyEditor/util'
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+import { propTypes } from '@/utils/propTypes'
+import { object } from 'vue-types'
 
 /**
  * 组件容器
@@ -17,30 +59,164 @@ import { ComponentStyle } from '@/components/DiyEditor/util'
  */
 defineOptions({ name: 'ComponentContainer' })
 
-const props = defineProps<{ property: ComponentStyle | undefined }>()
+type DiyComponentWithStyle = DiyComponent<any> & { property: { style?: ComponentStyle } }
+const props = defineProps({
+  component: object<DiyComponentWithStyle>().isRequired,
+  active: propTypes.bool.def(false),
+  canMoveUp: propTypes.bool.def(false),
+  canMoveDown: propTypes.bool.def(false),
+  showToolbar: propTypes.bool.def(true)
+})
 
+/**
+ * 组件样式
+ */
 const style = computed(() => {
-  if (!props.property) {
+  let componentStyle = props.component.property.style
+  if (!componentStyle) {
     return {}
   }
   return {
-    marginTop: `${props.property.marginTop || 0}px`,
-    marginBottom: `${props.property.marginBottom || 0}px`,
-    marginLeft: `${props.property.marginLeft || 0}px`,
-    marginRight: `${props.property.marginRight || 0}px`,
-    paddingTop: `${props.property.paddingTop || 0}px`,
-    paddingRight: `${props.property.paddingRight || 0}px`,
-    paddingBottom: `${props.property.paddingBottom || 0}px`,
-    paddingLeft: `${props.property.paddingLeft || 0}px`,
-    borderTopLeftRadius: `${props.property.borderTopLeftRadius || 0}px`,
-    borderTopRightRadius: `${props.property.borderTopRightRadius || 0}px`,
-    borderBottomRightRadius: `${props.property.borderBottomRightRadius || 0}px`,
-    borderBottomLeftRadius: `${props.property.borderBottomLeftRadius || 0}px`,
+    marginTop: `${componentStyle.marginTop || 0}px`,
+    marginBottom: `${componentStyle.marginBottom || 0}px`,
+    marginLeft: `${componentStyle.marginLeft || 0}px`,
+    marginRight: `${componentStyle.marginRight || 0}px`,
+    paddingTop: `${componentStyle.paddingTop || 0}px`,
+    paddingRight: `${componentStyle.paddingRight || 0}px`,
+    paddingBottom: `${componentStyle.paddingBottom || 0}px`,
+    paddingLeft: `${componentStyle.paddingLeft || 0}px`,
+    borderTopLeftRadius: `${componentStyle.borderTopLeftRadius || 0}px`,
+    borderTopRightRadius: `${componentStyle.borderTopRightRadius || 0}px`,
+    borderBottomRightRadius: `${componentStyle.borderBottomRightRadius || 0}px`,
+    borderBottomLeftRadius: `${componentStyle.borderBottomLeftRadius || 0}px`,
     overflow: 'hidden',
     background:
-      props.property.bgType === 'color' ? props.property.bgColor : `url(${props.property.bgImg})`
+      componentStyle.bgType === 'color' ? componentStyle.bgColor : `url(${componentStyle.bgImg})`
   }
 })
+
+const emits = defineEmits<{
+  (e: 'move', direction: number): void
+  (e: 'copy'): void
+  (e: 'delete'): void
+}>()
+/**
+ * 移动组件
+ * @param direction 移动方向
+ */
+const handleMoveComponent = (direction: number) => {
+  emits('move', direction)
+}
+/**
+ * 复制组件
+ */
+const handleCopyComponent = () => {
+  emits('copy')
+}
+/**
+ * 删除组件
+ */
+const handleDeleteComponent = () => {
+  emits('delete')
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+$active-border-width: 2px;
+$hover-border-width: 1px;
+$name-position: -85px;
+$toolbar-position: -55px;
+/* 组件 */
+.component {
+  position: relative;
+  cursor: move;
+  .component-wrap {
+    display: block;
+    position: absolute;
+    left: -$active-border-width;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    /* 鼠标放到组件上时 */
+    &:hover {
+      border: $hover-border-width dashed var(--el-color-primary);
+      box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
+      .component-name {
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $hover-border-width;
+        top: $hover-border-width;
+      }
+    }
+    /* 左侧：组件名称 */
+    .component-name {
+      display: block;
+      position: absolute;
+      width: 80px;
+      text-align: center;
+      line-height: 25px;
+      height: 25px;
+      background: #fff;
+      font-size: 12px;
+      left: $name-position;
+      top: $active-border-width;
+      box-shadow:
+        0 0 4px #00000014,
+        0 2px 6px #0000000f,
+        0 4px 8px 2px #0000000a;
+      /* 右侧小三角 */
+      &:after {
+        position: absolute;
+        top: 7.5px;
+        right: -10px;
+        content: ' ';
+        height: 0;
+        width: 0;
+        border: 5px solid transparent;
+        border-left-color: #fff;
+      }
+    }
+    /* 右侧：组件操作工具栏 */
+    .component-toolbar {
+      display: none;
+      position: absolute;
+      top: 0;
+      right: $toolbar-position;
+      /* 左侧小三角 */
+      &:before {
+        position: absolute;
+        top: 10px;
+        left: -10px;
+        content: ' ';
+        height: 0;
+        width: 0;
+        border: 5px solid transparent;
+        border-right-color: #2d8cf0;
+      }
+    }
+  }
+  /* 组件选中时 */
+  &.active {
+    margin-bottom: 4px;
+
+    .component-wrap {
+      border: $active-border-width solid var(--el-color-primary) !important;
+      box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
+      margin-bottom: $active-border-width + $active-border-width;
+
+      .component-name {
+        background: var(--el-color-primary);
+        color: #fff;
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $active-border-width !important;
+        top: 0 !important;
+        &:after {
+          border-left-color: var(--el-color-primary);
+        }
+      }
+      .component-toolbar {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index 004d97d1..6c30f461 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -38,15 +38,13 @@
           <!-- 手机顶部状态栏 -->
           <img src="@/assets/imgs/diy/statusBar.png" alt="" class="status-bar" />
           <!-- 手机顶部导航栏 -->
-          <NavigationBar
+          <ComponentContainer
             v-if="showNavigationBar"
-            :property="navigationBarComponent.property"
+            :component="navigationBarComponent"
+            :show-toolbar="false"
+            :active="selectedComponent?.id === navigationBarComponent.id"
             @click="handleNavigationBarSelected"
-            :class="[
-              'component',
-              'cursor-pointer!',
-              { active: selectedComponent?.id === navigationBarComponent.id }
-            ]"
+            class="cursor-pointer!"
           />
         </div>
         <!-- 手机页面编辑区域 -->
@@ -71,73 +69,27 @@
             @change="handleComponentChange"
           >
             <template #item="{ element, index }">
-              <div class="component" @click="handleComponentSelected(element, index)">
-                <!-- 组件内容区 -->
-                <ComponentContainer :property="element.property.style">
-                  <component
-                    :is="element.id"
-                    :property="element.property"
-                    :data-type="element.id"
-                  />
-                </ComponentContainer>
-                <div :class="['component-wrap', { active: selectedComponentIndex === index }]">
-                  <!-- 左侧组件名 -->
-                  <div
-                    :class="['component-name', { active: selectedComponentIndex === index }]"
-                    v-if="element.name"
-                  >
-                    {{ element.name }}
-                  </div>
-                  <!-- 左侧：组件操作工具栏 -->
-                  <div
-                    class="component-toolbar"
-                    v-if="element.name && selectedComponentIndex === index"
-                  >
-                    <el-button-group type="primary">
-                      <el-tooltip content="上移" placement="right">
-                        <el-button
-                          :disabled="index === 0"
-                          @click.stop="handleMoveComponent(index, -1)"
-                        >
-                          <Icon icon="ep:arrow-up" />
-                        </el-button>
-                      </el-tooltip>
-                      <el-tooltip content="下移" placement="right">
-                        <el-button
-                          :disabled="index === pageComponents.length - 1"
-                          @click.stop="handleMoveComponent(index, 1)"
-                        >
-                          <Icon icon="ep:arrow-down" />
-                        </el-button>
-                      </el-tooltip>
-                      <el-tooltip content="复制" placement="right">
-                        <el-button @click.stop="handleCopyComponent(index)">
-                          <Icon icon="ep:copy-document" />
-                        </el-button>
-                      </el-tooltip>
-                      <el-tooltip content="删除" placement="right">
-                        <el-button @click.stop="handleDeleteComponent(index)">
-                          <Icon icon="ep:delete" />
-                        </el-button>
-                      </el-tooltip>
-                    </el-button-group>
-                  </div>
-                </div>
-              </div>
+              <ComponentContainer
+                :component="element"
+                :active="selectedComponentIndex === index"
+                :can-move-up="index > 0"
+                :can-move-down="index < pageComponents.length - 1"
+                @move="(direction) => handleMoveComponent(index, direction)"
+                @copy="handleCopyComponent(index)"
+                @delete="handleDeleteComponent(index)"
+                @click="handleComponentSelected(element, index)"
+              />
             </template>
           </draggable>
         </el-scrollbar>
         <!-- 手机底部导航 -->
-        <div
-          v-if="showTabBar"
-          :class="[
-            'editor-design-bottom',
-            'component',
-            'cursor-pointer!',
-            { active: selectedComponent?.id === tabBarComponent.id }
-          ]"
-        >
-          <TabBar :property="tabBarComponent.property" @click="handleTabBarSelected" />
+        <div v-if="showTabBar" :class="['editor-design-bottom', 'component', 'cursor-pointer!']">
+          <ComponentContainer
+            :component="tabBarComponent"
+            :show-toolbar="false"
+            :active="selectedComponent?.id === tabBarComponent.id"
+            @click="handleTabBarSelected"
+          />
         </div>
       </div>
       <!-- 右侧属性面板 -->
@@ -178,8 +130,6 @@ export default {
 <script lang="ts" setup>
 import draggable from 'vuedraggable'
 import ComponentLibrary from './components/ComponentLibrary.vue'
-import NavigationBar from './components/mobile/NavigationBar/index.vue'
-import TabBar from './components/mobile/TabBar/index.vue'
 import { cloneDeep, includes } from 'lodash-es'
 import { component as PAGE_CONFIG_COMPONENT } from '@/components/DiyEditor/components/mobile/PageConfig/config'
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/NavigationBar/config'
@@ -256,6 +206,9 @@ const handleSave = () => {
       return { id: component.id, property: component.property }
     })
   } as PageConfig
+  if (!props.showTabBar) {
+    delete pageConfig.tabBar
+  }
   // 发送数据更新通知
   const modelValue = isString(props.modelValue) ? JSON.stringify(pageConfig) : pageConfig
   emits('update:modelValue', modelValue)
@@ -453,24 +406,12 @@ $toolbar-height: 42px;
       overflow: hidden;
       width: 100%;
 
-      /* 组件 */
-      .component {
-        width: $phone-width;
-        cursor: move;
-        /* 鼠标放到组件上时 */
-        &:hover {
-          border: 1px dashed var(--el-color-primary);
-          box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
-        }
-      }
-      /* 组件选中 */
-      .component.active {
-        border: 2px solid var(--el-color-primary);
-      }
       /* 手机顶部 */
       .editor-design-top {
         width: $phone-width;
         margin: 0 auto;
+        display: flex;
+        flex-direction: column;
         /* 手机顶部状态栏 */
         .status-bar {
           height: 20px;
@@ -499,104 +440,6 @@ $toolbar-height: 42px;
             height: 100%;
             width: 100%;
           }
-
-          .component {
-            position: relative;
-            cursor: move;
-
-            .component-wrap {
-              display: none;
-              position: absolute;
-              left: -2px;
-              top: 0;
-              width: 100%;
-              height: 100%;
-
-              &.active {
-                display: block;
-                border: 2px solid var(--el-color-primary);
-                box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
-              }
-              /* 左侧：组件名称 */
-              .component-name {
-                position: absolute;
-                width: 80px;
-                text-align: center;
-                line-height: 25px;
-                height: 25px;
-                background: #fff;
-                font-size: 12px;
-                left: -88px;
-                top: 0;
-                box-shadow:
-                  0 0 4px #00000014,
-                  0 2px 6px #0000000f,
-                  0 4px 8px 2px #0000000a;
-                /* 右侧小三角 */
-                &:after {
-                  position: absolute;
-                  top: 7.5px;
-                  right: -10px;
-                  content: ' ';
-                  height: 0;
-                  width: 0;
-                  border: 5px solid transparent;
-                  border-left-color: #fff;
-                }
-              }
-              /* 组件选中按钮 */
-              .component-name.active {
-                background: var(--el-color-primary);
-                color: #fff;
-                &:after {
-                  border-left-color: var(--el-color-primary);
-                }
-              }
-              /* 右侧：组件操作工具栏 */
-              .component-toolbar {
-                position: absolute;
-                top: 0;
-                right: -55px;
-                /* 左侧小三角 */
-                &:before {
-                  position: absolute;
-                  top: 10px;
-                  left: -10px;
-                  content: ' ';
-                  height: 0;
-                  width: 0;
-                  border: 5px solid transparent;
-                  border-right-color: #2d8cf0;
-                }
-
-                /* 重写 Element 按钮组的样式（官方只支持水平显示，增加垂直显示的样式） */
-                .el-button-group {
-                  display: inline-flex;
-                  flex-direction: column;
-                }
-                .el-button-group > .el-button:first-child {
-                  border-bottom-left-radius: 0;
-                  border-bottom-right-radius: 0;
-                  border-top-right-radius: var(--el-border-radius-base);
-                  border-bottom-color: var(--el-button-divide-border-color);
-                }
-                .el-button-group > .el-button:last-child {
-                  border-top-left-radius: 0;
-                  border-top-right-radius: 0;
-                  border-bottom-left-radius: var(--el-border-radius-base);
-                  border-top-color: var(--el-button-divide-border-color);
-                }
-                .el-button-group .el-button--primary:not(:first-child):not(:last-child) {
-                  border-top-color: var(--el-button-divide-border-color);
-                  border-bottom-color: var(--el-button-divide-border-color);
-                }
-                .el-button-group > .el-button:not(:last-child) {
-                  margin-bottom: -1px;
-                  margin-right: 0;
-                }
-              }
-            }
-          }
         }
       }
     }
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index b781fe3c..f3461007 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -51,7 +51,7 @@ export interface PageConfig {
   // 顶部导航栏属性
   navigationBar: NavigationBarProperty
   // 底部导航菜单属性
-  tabBar: TabBarProperty
+  tabBar?: TabBarProperty
   // 页面组件列表
   components: PageComponent[]
 }
diff --git a/src/components/VerticalButtonGroup/index.vue b/src/components/VerticalButtonGroup/index.vue
new file mode 100644
index 00000000..479ed559
--- /dev/null
+++ b/src/components/VerticalButtonGroup/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-button-group v-bind="$attrs">
+    <slot></slot>
+  </el-button-group>
+</template>
+
+<script setup lang="ts">
+/**
+ * 垂直按钮组
+ * Element官方的按钮组只支持水平显示，通过重写样式实现垂直布局
+ */
+defineOptions({ name: 'VerticalButtonGroup' })
+</script>
+
+<style scoped lang="scss">
+.el-button-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+.el-button-group > :deep(.el-button:first-child) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-color: var(--el-button-divide-border-color);
+}
+.el-button-group > :deep(.el-button:last-child) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--el-border-radius-base);
+  border-top-color: var(--el-button-divide-border-color);
+}
+.el-button-group :deep(.el-button--primary:not(:first-child):not(:last-child)) {
+  border-top-color: var(--el-button-divide-border-color);
+  border-bottom-color: var(--el-button-divide-border-color);
+}
+.el-button-group > :deep(.el-button:not(:last-child)) {
+  margin-bottom: -1px;
+  margin-right: 0;
+}
+</style>

From 17742988c9607b4dab3bbb05f4a5896aa3488746 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 5 Nov 2023 20:25:52 +0800
Subject: [PATCH 20/77] =?UTF-8?q?code=20review=EF=BC=9A=E5=9B=9E=E6=AC=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/receivable/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/crm/receivable/index.vue b/src/views/crm/receivable/index.vue
index dc2b2f64..ac1def09 100644
--- a/src/views/crm/receivable/index.vue
+++ b/src/views/crm/receivable/index.vue
@@ -229,6 +229,7 @@
       />
       <el-table-column label="操作" align="center" width="180px">
         <template #default="scope">
+          <!-- todo @liuhongfeng：用路径参数哈，receivableId -->
           <!--<router-link :to="'/crm/receivable-plan?receivableId=' + scope.row.receivableId">
             <el-button link type="primary">详情</el-button>
           </router-link>-->

From fa710b560d9a146c49bfc5f24dff7df3d6373c8c Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sun, 5 Nov 2023 20:42:50 +0800
Subject: [PATCH 21/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E5=9B=BE=E7=89=87=E5=B1=95=E7=A4=BA=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/ImageBar/config.ts      | 27 +++++++++++++++
 .../components/mobile/ImageBar/index.vue      | 24 +++++++++++++
 .../components/mobile/ImageBar/property.vue   | 34 +++++++++++++++++++
 src/components/DiyEditor/util.ts              | 33 ++++++++++++++++++
 .../mall/promotion/diy/page/decorate.vue      | 28 ++-------------
 .../mall/promotion/diy/template/decorate.vue  | 27 ++-------------
 6 files changed, 122 insertions(+), 51 deletions(-)
 create mode 100644 src/components/DiyEditor/components/mobile/ImageBar/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/ImageBar/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/ImageBar/property.vue

diff --git a/src/components/DiyEditor/components/mobile/ImageBar/config.ts b/src/components/DiyEditor/components/mobile/ImageBar/config.ts
new file mode 100644
index 00000000..68edf728
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ImageBar/config.ts
@@ -0,0 +1,27 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 图片展示属性 */
+export interface ImageBarProperty {
+  // 图片链接
+  imgUrl: string
+  // 跳转链接
+  url: string
+  // 组件样式
+  style: ComponentStyle
+}
+
+// 定义组件
+export const component = {
+  id: 'ImageBar',
+  name: '图片展示',
+  icon: 'ep:picture',
+  property: {
+    imgUrl: '',
+    url: '',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<ImageBarProperty>
diff --git a/src/components/DiyEditor/components/mobile/ImageBar/index.vue b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
new file mode 100644
index 00000000..6f70c52d
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <!-- 无图片 -->
+  <div class="h-50px flex items-center justify-center bg-gray-3" v-if="!property.imgUrl">
+    <Icon icon="ep:picture" class="text-gray-8 text-30px!" />
+  </div>
+  <el-image class="min-h-30px" v-else :src="property.imgUrl" />
+</template>
+<script setup lang="ts">
+import { ImageBarProperty } from './config'
+
+/** 图片展示 */
+defineOptions({ name: 'ImageBar' })
+
+defineProps<{ property: ImageBarProperty }>()
+</script>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/ImageBar/property.vue b/src/components/DiyEditor/components/mobile/ImageBar/property.vue
new file mode 100644
index 00000000..58af1bc8
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ImageBar/property.vue
@@ -0,0 +1,34 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-form-item label="上传图片" prop="imgUrl">
+        <UploadImg
+          v-model="formData.imgUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-80px"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </el-form-item>
+      <el-form-item label="链接" prop="url">
+        <el-input placeholder="链接" v-model="formData.url" />
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { ImageBarProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 图片展示属性面板
+defineOptions({ name: 'ImageBarProperty' })
+
+const props = defineProps<{ modelValue: ImageBarProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index f3461007..0f246ac1 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -3,16 +3,25 @@ import { PageConfigProperty } from '@/components/DiyEditor/components/mobile/Pag
 import { NavigationBarProperty } from '@/components/DiyEditor/components/mobile/NavigationBar/config'
 import { TabBarProperty } from '@/components/DiyEditor/components/mobile/TabBar/config'
 
+// 页面装修组件
 export interface DiyComponent<T> {
+  // 组件唯一标识
   id: string
+  // 组件名称
   name: string
+  // 组件图标
   icon: string
+  // 组件属性
   property: T
 }
 
+// 页面装修组件库
 export interface DiyComponentLibrary {
+  // 组件库名称
   name: string
+  // 是否展开
   extended: boolean
+  // 组件列表
   components: string[]
 }
 
@@ -85,3 +94,27 @@ export function usePropertyForm<T>(modelValue: T, emit: Function): { formData: R
 
   return { formData }
 }
+
+// 页面组件库
+export const PAGE_LIBS = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'GridNavigation',
+      'ListNavigation',
+      'Divider',
+      'TitleBar'
+    ]
+  },
+  { name: '图文组件', extended: true, components: ['ImageBar', 'Carousel'] },
+  { name: '商品组件', extended: true, components: ['ProductCard'] },
+  {
+    name: '会员组件',
+    extended: true,
+    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
+  },
+  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
+] as DiyComponentLibrary[]
diff --git a/src/views/mall/promotion/diy/page/decorate.vue b/src/views/mall/promotion/diy/page/decorate.vue
index 54e7206c..c5e90311 100644
--- a/src/views/mall/promotion/diy/page/decorate.vue
+++ b/src/views/mall/promotion/diy/page/decorate.vue
@@ -3,7 +3,7 @@
     v-if="formData && !formLoading"
     v-model="formData.property"
     :title="formData.name"
-    :libs="componentLibs"
+    :libs="PAGE_LIBS"
     :show-page-config="true"
     :show-navigation-bar="true"
     :show-tab-bar="false"
@@ -13,35 +13,11 @@
 <script setup lang="ts">
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+import { PAGE_LIBS } from '@/components/DiyEditor/util'
 
 /** 装修页面表单 */
 defineOptions({ name: 'DiyPageDecorate' })
 
-// 组件库
-const componentLibs = [
-  {
-    name: '基础组件',
-    extended: true,
-    components: [
-      'SearchBar',
-      'NoticeBar',
-      'GridNavigation',
-      'ListNavigation',
-      'Divider',
-      'TitleBar'
-    ]
-  },
-  { name: '图文组件', extended: true, components: ['Carousel'] },
-  { name: '商品组件', extended: true, components: ['ProductCard'] },
-  {
-    name: '会员组件',
-    extended: true,
-    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
-  },
-  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
-] as DiyComponentLibrary[]
-
 const message = useMessage() // 消息弹窗
 
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue
index 7a3cff2f..8304088a 100644
--- a/src/views/mall/promotion/diy/template/decorate.vue
+++ b/src/views/mall/promotion/diy/template/decorate.vue
@@ -28,7 +28,7 @@
 import * as DiyTemplateApi from '@/api/mall/promotion/diy/template'
 import * as DiyPageApi from '@/api/mall/promotion/diy/page'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { DiyComponentLibrary } from '@/components/DiyEditor/util'
+import { DiyComponentLibrary, PAGE_LIBS } from '@/components/DiyEditor/util'
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' })
@@ -62,29 +62,6 @@ const getPageDetail = async (id: any) => {
 
 // 模板组件库
 const templateLibs = [] as DiyComponentLibrary[]
-// 页面组件库
-const pageLibs = [
-  {
-    name: '基础组件',
-    extended: true,
-    components: [
-      'SearchBar',
-      'NoticeBar',
-      'GridNavigation',
-      'ListNavigation',
-      'Divider',
-      'TitleBar'
-    ]
-  },
-  { name: '图文组件', extended: true, components: ['Carousel'] },
-  { name: '商品组件', extended: true, components: ['ProductCard'] },
-  {
-    name: '会员组件',
-    extended: true,
-    components: ['UserCard', 'OrderCard', 'WalletCard', 'CouponCard']
-  },
-  { name: '营销组件', extended: true, components: ['Combination', 'Seckill', 'Point', 'Coupon'] }
-] as DiyComponentLibrary[]
 // 当前组件库
 const libs = ref<DiyComponentLibrary[]>(templateLibs)
 // 模板选项切换
@@ -97,7 +74,7 @@ const handleTemplateItemChange = () => {
   }
 
   // 编辑页面
-  libs.value = pageLibs
+  libs.value = PAGE_LIBS
   currentFormData.value = formData.value!.pages.find(
     (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
   )

From 47bb88d8924543f00900f594b8eabfb37813fb0d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 5 Nov 2023 20:50:13 +0800
Subject: [PATCH 22/77] =?UTF-8?q?code=20review=EF=BC=9A=E4=BA=A7=E5=93=81?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/productCategory/index.ts    | 1 +
 src/views/crm/product/ProductForm.vue   | 1 +
 src/views/crm/productCategory/index.vue | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/api/crm/productCategory/index.ts b/src/api/crm/productCategory/index.ts
index cdf8a966..6341d1bc 100644
--- a/src/api/crm/productCategory/index.ts
+++ b/src/api/crm/productCategory/index.ts
@@ -1,5 +1,6 @@
 import request from '@/config/axios'
 
+// TODO @zange：挪到 product 下，建个 category 包，挪进去哈；
 export interface ProductCategoryVO {
   id: number
   name: string
diff --git a/src/views/crm/product/ProductForm.vue b/src/views/crm/product/ProductForm.vue
index 78d2a7c1..13d0e402 100644
--- a/src/views/crm/product/ProductForm.vue
+++ b/src/views/crm/product/ProductForm.vue
@@ -1,5 +1,6 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <!-- TODO @zange：改成每行两个哈； -->
     <el-form
       ref="formRef"
       :model="formData"
diff --git a/src/views/crm/productCategory/index.vue b/src/views/crm/productCategory/index.vue
index 3cf7c5f0..897a08c0 100644
--- a/src/views/crm/productCategory/index.vue
+++ b/src/views/crm/productCategory/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO @zange：挪到 product 下，建个 category 包，挪进去哈； -->
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form

From 3f803767c43afca73a8e456282129a0aea4e8285 Mon Sep 17 00:00:00 2001
From: VicoHu <vicohu@163.com>
Date: Sun, 5 Nov 2023 13:59:28 +0000
Subject: [PATCH 23/77] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=85=B3?=
 =?UTF-8?q?=E9=97=AD=E6=8B=BC=E5=9B=A2=E6=B4=BB=E5=8A=A8=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?URL=E9=94=99=E8=AF=AF=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: VicoHu <vicohu@163.com>
---
 src/api/mall/promotion/combination/combinationActivity.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/mall/promotion/combination/combinationActivity.ts b/src/api/mall/promotion/combination/combinationActivity.ts
index 15b7eef3..062db5c2 100644
--- a/src/api/mall/promotion/combination/combinationActivity.ts
+++ b/src/api/mall/promotion/combination/combinationActivity.ts
@@ -57,7 +57,7 @@ export const updateCombinationActivity = async (data: CombinationActivityVO) =>
 
 // 关闭拼团活动
 export const closeCombinationActivity = async (id: number) => {
-  return await request.put({ url: '/promotion/bargain-combination/close?id=' + id })
+  return await request.put({ url: '/promotion/combination-activity/close?id=' + id })
 }
 
 // 删除拼团活动

From bb2b7ffd034fc8abab9041be02f35d6284ebebc4 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sun, 5 Nov 2023 22:53:30 +0800
Subject: [PATCH 24/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComponentContainerProperty.vue | 15 +++--
 .../components/mobile/VideoPlayer/config.ts   | 37 +++++++++++++
 .../components/mobile/VideoPlayer/index.vue   | 30 ++++++++++
 .../mobile/VideoPlayer/property.vue           | 55 +++++++++++++++++++
 src/components/DiyEditor/util.ts              |  2 +-
 src/components/UploadFile/src/UploadFile.vue  | 55 +++++++++++++------
 6 files changed, 169 insertions(+), 25 deletions(-)
 create mode 100644 src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/VideoPlayer/property.vue

diff --git a/src/components/DiyEditor/components/ComponentContainerProperty.vue b/src/components/DiyEditor/components/ComponentContainerProperty.vue
index 0cfbbe1e..5c5ed9a0 100644
--- a/src/components/DiyEditor/components/ComponentContainerProperty.vue
+++ b/src/components/DiyEditor/components/ComponentContainerProperty.vue
@@ -26,7 +26,7 @@
                 :label="data.label"
                 :prop="data.prop"
                 :label-width="node.level === 1 ? '80px' : '62px'"
-                class="tree-form-item w-full m-b-0!"
+                class="w-full m-b-0!"
               >
                 <el-slider
                   v-model="formData[data.prop]"
@@ -40,6 +40,7 @@
               </el-form-item>
             </template>
           </el-tree>
+          <slot name="style" :formData="formData"></slot>
         </el-form>
       </el-card>
     </el-tab-pane>
@@ -153,12 +154,10 @@ const handleSliderChange = (prop: string) => {
 </script>
 
 <style scoped lang="scss">
-.tree-form-item {
-  :deep(.el-slider__runway) {
-    margin-right: 16px;
-  }
-  :deep(.el-input-number) {
-    width: 50px;
-  }
+:deep(.el-slider__runway) {
+  margin-right: 16px;
+}
+:deep(.el-input-number) {
+  width: 50px;
 }
 </style>
diff --git a/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts b/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
new file mode 100644
index 00000000..30501cb8
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/VideoPlayer/config.ts
@@ -0,0 +1,37 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 视频播放属性 */
+export interface VideoPlayerProperty {
+  // 视频链接
+  videoUrl: string
+  // 封面链接
+  posterUrl: string
+  // 是否自动播放
+  autoplay: boolean
+  // 组件样式
+  style: VideoPlayerStyle
+}
+
+// 视频播放样式
+export interface VideoPlayerStyle extends ComponentStyle {
+  // 视频高度
+  height: number
+}
+
+// 定义组件
+export const component = {
+  id: 'VideoPlayer',
+  name: '视频播放',
+  icon: 'ep:video-play',
+  property: {
+    videoUrl: '',
+    posterUrl: '',
+    autoplay: false,
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      height: 300
+    } as ComponentStyle
+  }
+} as DiyComponent<VideoPlayerProperty>
diff --git a/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue b/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
new file mode 100644
index 00000000..a62dea08
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="w-full" :style="{ height: `${property.style.height}px` }">
+    <el-image class="w-full w-full" :src="property.posterUrl" v-if="property.posterUrl" />
+    <video
+      v-else
+      class="w-full w-full"
+      :src="property.videoUrl"
+      :poster="property.posterUrl"
+      :autoplay="property.autoplay"
+      controls
+    ></video>
+  </div>
+</template>
+<script setup lang="ts">
+import { VideoPlayerProperty } from './config'
+
+/** 视频播放 */
+defineOptions({ name: 'VideoPlayer' })
+
+defineProps<{ property: VideoPlayerProperty }>()
+</script>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue b/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue
new file mode 100644
index 00000000..96f317d6
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/VideoPlayer/property.vue
@@ -0,0 +1,55 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <template #style="{ formData }">
+      <el-form-item label="高度" prop="height">
+        <el-slider
+          v-model="formData.height"
+          :max="500"
+          :min="100"
+          show-input
+          input-size="small"
+          :show-input-controls="false"
+        />
+      </el-form-item>
+    </template>
+    <el-form label-width="80px" :model="formData">
+      <el-form-item label="上传视频" prop="videoUrl">
+        <UploadFile
+          v-model="formData.videoUrl"
+          :file-type="['mp4']"
+          :limit="1"
+          :file-size="100"
+          class="min-w-80px"
+        />
+      </el-form-item>
+      <el-form-item label="上传封面" prop="posterUrl">
+        <UploadImg
+          v-model="formData.posterUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-80px"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </el-form-item>
+      <el-form-item label="自动播放" prop="autoplay">
+        <el-switch v-model="formData.autoplay" />
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { VideoPlayerProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+
+// 视频播放属性面板
+defineOptions({ name: 'VideoPlayerProperty' })
+
+const props = defineProps<{ modelValue: VideoPlayerProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index 0f246ac1..29b44cf6 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -109,7 +109,7 @@ export const PAGE_LIBS = [
       'TitleBar'
     ]
   },
-  { name: '图文组件', extended: true, components: ['ImageBar', 'Carousel'] },
+  { name: '图文组件', extended: true, components: ['ImageBar', 'Carousel', 'VideoPlayer'] },
   { name: '商品组件', extended: true, components: ['ProductCard'] },
   {
     name: '会员组件',
diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index c8a3b972..42ed4f1d 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -33,11 +33,10 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { PropType } from 'vue'
-
 import { propTypes } from '@/utils/propTypes'
 import { getAccessToken, getTenantId } from '@/utils/auth'
 import type { UploadInstance, UploadUserFile, UploadProps, UploadRawFile } from 'element-plus'
+import { isArray, isString } from '@/utils/is'
 
 defineOptions({ name: 'UploadFile' })
 
@@ -45,10 +44,7 @@ const message = useMessage() // 消息弹窗
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-  modelValue: {
-    type: Array as PropType<UploadUserFile[]>,
-    required: true
-  },
+  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
   title: propTypes.string.def('文件上传'),
   updateUrl: propTypes.string.def(import.meta.env.VITE_UPLOAD_URL),
   fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
@@ -62,7 +58,7 @@ const props = defineProps({
 const valueRef = ref(props.modelValue)
 const uploadRef = ref<UploadInstance>()
 const uploadList = ref<UploadUserFile[]>([])
-const fileList = ref<UploadUserFile[]>(props.modelValue)
+const fileList = ref<UploadUserFile[]>([])
 const uploadNumber = ref<number>(0)
 const uploadHeaders = ref({
   Authorization: 'Bearer ' + getAccessToken(),
@@ -109,7 +105,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
     fileList.value = fileList.value.concat(uploadList.value)
     uploadList.value = []
     uploadNumber.value = 0
-    emit('update:modelValue', listToString(fileList.value))
+    emitUpdateModelValue()
   }
 }
 // 文件数超出提示
@@ -125,20 +121,47 @@ const handleRemove = (file) => {
   const findex = fileList.value.map((f) => f.name).indexOf(file.name)
   if (findex > -1) {
     fileList.value.splice(findex, 1)
-    emit('update:modelValue', listToString(fileList.value))
+    emitUpdateModelValue()
   }
 }
 const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
   console.log(uploadFile)
 }
-// 对象转成指定字符串分隔
-const listToString = (list: UploadUserFile[], separator?: string) => {
-  let strs = ''
-  separator = separator || ','
-  for (let i in list) {
-    strs += list[i].url + separator
+
+// 监听模型绑定值变动
+watch(
+  () => props.modelValue,
+  () => {
+    const files: string[] = []
+    // 情况1：字符串
+    if (isString(props.modelValue)) {
+      // 情况1.1：逗号分隔的多值
+      if (props.modelValue.includes(',')) {
+        files.concat(props.modelValue.split(','))
+      } else {
+        files.push(props.modelValue)
+      }
+    } else if (isArray(props.modelValue)) {
+      // 情况2：字符串
+      files.concat(props.modelValue)
+    } else {
+      throw new Error('不支持的 modelValue 类型')
+    }
+    fileList.value = files.map((url: string) => {
+      return { url, name: url.substring(url.lastIndexOf('/') + 1) } as UploadUserFile
+    })
+  },
+  { immediate: true }
+)
+// 发送文件链接列表更新
+const emitUpdateModelValue = () => {
+  // 情况1：数组结果
+  let result: string | string[] = fileList.value.map((file) => file.url!)
+  // 情况2：逗号分隔的字符串
+  if (isString(props.modelValue)) {
+    result = result.join(',')
   }
-  return strs != '' ? strs.substr(0, strs.length - 1) : ''
+  emit('update:modelValue', result)
 }
 </script>
 <style scoped lang="scss">

From 4253173a2a9c9e716c7ebfcfb9ac25e93bbd1171 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Mon, 6 Nov 2023 09:31:42 +0800
Subject: [PATCH 25/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E8=BD=AE=E6=92=AD=E5=9B=BE=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/Carousel/config.ts      |  58 ++---
 .../components/mobile/Carousel/index.vue      |  86 +++----
 .../components/mobile/Carousel/property.vue   | 215 ++++++++++--------
 src/components/DiyEditor/index.vue            |   6 +
 src/components/UploadFile/src/UploadFile.vue  |   2 +-
 5 files changed, 182 insertions(+), 185 deletions(-)

diff --git a/src/components/DiyEditor/components/mobile/Carousel/config.ts b/src/components/DiyEditor/components/mobile/Carousel/config.ts
index 6c790186..3e74a511 100644
--- a/src/components/DiyEditor/components/mobile/Carousel/config.ts
+++ b/src/components/DiyEditor/components/mobile/Carousel/config.ts
@@ -1,27 +1,30 @@
-import { DiyComponent } from '@/components/DiyEditor/util'
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
 
 /** 轮播图属性 */
 export interface CarouselProperty {
-  // 选择模板
-  swiperType: number
-  // 图片圆角
-  borderRadius: number
-  // 页面边距
-  pageMargin: number
-  // 图片边距
-  imageMargin: number
-  // 分页类型
-  pagingType: 'bullets' | 'fraction' | 'progressbar'
-  // 一行个数
-  rowIndividual: number
-  // 添加图片
+  // 类型：默认 | 卡片
+  type: 'default' | 'card'
+  // 指示器样式：点 | 数字
+  indicator: 'dot' | 'number'
+  // 是否自动播放
+  autoplay: boolean
+  // 播放间隔
+  interval: number
+  // 轮播内容
   items: CarouselItemProperty[]
+  // 组件样式
+  style: ComponentStyle
 }
-
+// 轮播内容属性
 export interface CarouselItemProperty {
-  title: string
+  // 类型：图片 | 视频
+  type: 'img' | 'video'
+  // 图片链接
   imgUrl: string
-  link: string
+  // 视频链接
+  videoUrl: string
+  // 跳转链接
+  url: string
 }
 
 // 定义组件
@@ -30,15 +33,18 @@ export const component = {
   name: '轮播图',
   icon: 'system-uicons:carousel',
   property: {
-    swiperType: 0, // 选择模板
-    borderRadius: 0, // 图片圆角
-    pageMargin: 0, // 页面边距
-    imageMargin: 0, // 图片边距
-    pagingType: 'bullets', // 分页类型
-    rowIndividual: 2, // 一行个数
+    type: 'default',
+    indicator: 'dot',
+    autoplay: false,
+    interval: 3,
     items: [
-      { imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg' },
-      { imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg' }
-    ] as CarouselItemProperty[]
+      { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg', videoUrl: '' },
+      { type: 'img', imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg', videoUrl: '' }
+    ] as CarouselItemProperty[],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
   }
 } as DiyComponent<CarouselProperty>
diff --git a/src/components/DiyEditor/components/mobile/Carousel/index.vue b/src/components/DiyEditor/components/mobile/Carousel/index.vue
index e9a0ab39..940a9a56 100644
--- a/src/components/DiyEditor/components/mobile/Carousel/index.vue
+++ b/src/components/DiyEditor/components/mobile/Carousel/index.vue
@@ -6,70 +6,38 @@
   >
     <Icon icon="tdesign:image" class="text-gray-8 text-120px!" />
   </div>
-  <!-- 一行一个 -->
-  <div
-    v-if="property.swiperType === 0"
-    class="flex flex-col"
-    :style="{
-      paddingLeft: property.pageMargin + 'px',
-      paddingRight: property.pageMargin + 'px'
-    }"
-  >
-    <div v-for="(item, index) in property.items" :key="index">
-      <div
-        class="img-item"
-        :style="{
-          marginBottom: property.imageMargin + 'px',
-          borderRadius: property.borderRadius + 'px'
-        }"
-      >
-        <img alt="" :src="item.imgUrl" />
-        <div v-if="item.title" class="title">{{ item.title }}</div>
-      </div>
-    </div>
+  <div v-else class="relative">
+    <el-carousel
+      height="174px"
+      :type="property.type === 'card' ? 'card' : ''"
+      :autoplay="property.autoplay"
+      :interval="property.interval * 1000"
+      :indicator-position="property.indicator === 'number' ? 'none' : undefined"
+      @change="handleIndexChange"
+    >
+      <el-carousel-item v-for="(item, index) in property.items" :key="index">
+        <el-image class="h-full w-full" :src="item.imgUrl" />
+      </el-carousel-item>
+    </el-carousel>
+    <div
+      v-if="property.indicator === 'number'"
+      class="absolute p-y-2px bottom-10px right-10px rounded-xl bg-black p-x-8px text-10px text-white opacity-40"
+      >{{ currentIndex }} / {{ property.items.length }}</div
+    >
   </div>
-  <el-carousel height="174px" v-else :type="property.swiperType === 3 ? 'card' : ''">
-    <el-carousel-item v-for="(item, index) in property.items" :key="index">
-      <div class="img-item" :style="{ borderRadius: property.borderRadius + 'px' }">
-        <img alt="" :src="item.imgUrl" />
-        <div v-if="item.title" class="title">{{ item.title }}</div>
-      </div>
-    </el-carousel-item>
-  </el-carousel>
 </template>
 <script setup lang="ts">
 import { CarouselProperty } from './config'
 
-/** 页面顶部导航栏 */
-defineOptions({ name: 'NavigationBar' })
+/** 轮播图 */
+defineOptions({ name: 'Carousel' })
 
-const props = defineProps<{ property: CarouselProperty }>()
+defineProps<{ property: CarouselProperty }>()
+
+const currentIndex = ref(0)
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1
+}
 </script>
 
-<style scoped lang="scss">
-.img-item {
-  width: 100%;
-  position: relative;
-  overflow: hidden;
-  &:last-child {
-    margin: 0 !important;
-  }
-  /* 图片 */
-  img {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-  .title {
-    height: 36px;
-    width: 100%;
-    background-color: rgba(51, 51, 51, 0.8);
-    text-align: center;
-    line-height: 36px;
-    color: #fff;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/Carousel/property.vue b/src/components/DiyEditor/components/mobile/Carousel/property.vue
index acaee35f..700e0005 100644
--- a/src/components/DiyEditor/components/mobile/Carousel/property.vue
+++ b/src/components/DiyEditor/components/mobile/Carousel/property.vue
@@ -1,103 +1,120 @@
 <template>
-  <el-form label-width="80px" :model="formData">
-    <el-form-item label="选择模板" prop="swiperType">
-      <el-radio-group v-model="formData.swiperType">
-        <el-tooltip class="item" content="一行一个" placement="bottom">
-          <el-radio-button :label="0">
-            <Icon icon="icon-park-twotone:multi-picture-carousel" />
-          </el-radio-button>
-        </el-tooltip>
-        <el-tooltip class="item" content="轮播海报" placement="bottom">
-          <el-radio-button :label="1">
-            <Icon icon="system-uicons:carousel" />
-          </el-radio-button>
-        </el-tooltip>
-        <el-tooltip class="item" content="多图单行" placement="bottom">
-          <el-radio-button :label="2">
-            <Icon icon="icon-park-twotone:carousel" />
-          </el-radio-button>
-        </el-tooltip>
-        <el-tooltip class="item" content="立体轮播" placement="bottom">
-          <el-radio-button :label="3">
-            <Icon icon="ic:round-view-carousel" />
-          </el-radio-button>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-
-    <el-text tag="p">添加图片</el-text>
-    <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
-
-    <!-- 图片广告 -->
-    <div v-if="formData.items[0]">
-      <draggable
-        :list="formData.items"
-        :force-fallback="true"
-        :animation="200"
-        handle=".drag-icon"
-        class="m-t-8px"
-      >
-        <template #item="{ element, index }">
-          <div class="mb-4px flex flex-row gap-4px rounded bg-gray-100 p-8px">
-            <div class="flex flex-col items-start justify-between">
-              <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
-              <Icon
-                icon="ep:delete"
-                class="cursor-pointer text-red-5"
-                @click="handleDeleteImage(index)"
-                v-if="formData.items.length > 1"
-              />
-            </div>
-            <div class="flex flex-1 flex-col items-center justify-between gap-8px">
-              <UploadImg
-                v-model="element.imgUrl"
-                draggable="false"
-                height="80px"
-                width="100%"
-                class="min-w-80px"
-              />
-              <!-- 标题 -->
-              <el-input v-model="element.title" placeholder="标题，选填" />
-              <!-- 输入链接 -->
-              <el-input placeholder="链接，选填" v-model="element.link" />
-            </div>
-          </div>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-card header="样式设置" class="property-group" shadow="never">
+        <el-form-item label="样式" prop="type">
+          <el-radio-group v-model="formData.type">
+            <el-tooltip class="item" content="默认" placement="bottom">
+              <el-radio-button label="default">
+                <Icon icon="system-uicons:carousel" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="卡片" placement="bottom">
+              <el-radio-button label="card">
+                <Icon icon="ic:round-view-carousel" />
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="指示器" prop="indicator">
+          <el-radio-group v-model="formData.indicator">
+            <el-radio label="dot">小圆点</el-radio>
+            <el-radio label="number">数字</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否轮播" prop="autoplay">
+          <el-switch v-model="formData.autoplay" />
+        </el-form-item>
+        <el-form-item label="播放间隔" prop="interval" v-if="formData.autoplay">
+          <el-slider
+            v-model="formData.interval"
+            :max="10"
+            :min="0.5"
+            :step="0.5"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+          <el-text type="info">单位：秒</el-text>
+        </el-form-item>
+      </el-card>
+      <el-card header="内容设置" class="property-group" shadow="never">
+        <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
+        <template v-if="formData.items[0]">
+          <draggable
+            :list="formData.items"
+            :force-fallback="true"
+            :animation="200"
+            handle=".drag-icon"
+            class="m-t-8px"
+            item-key="index"
+          >
+            <template #item="{ element, index }">
+              <div class="content mb-4px flex flex-col gap-4px rounded bg-gray-50 p-8px">
+                <div
+                  class="m--8px m-b-8px flex flex-row items-center justify-between bg-gray-100 p-8px"
+                >
+                  <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+                  <Icon
+                    icon="ep:delete"
+                    class="cursor-pointer text-red-5"
+                    @click="handleDeleteImage(index)"
+                    v-if="formData.items.length > 1"
+                  />
+                </div>
+                <el-form-item label="类型" prop="type" class="m-b-8px!" label-width="50px">
+                  <el-radio-group v-model="element.type">
+                    <el-radio label="img">图片</el-radio>
+                    <el-radio label="video">视频</el-radio>
+                  </el-radio-group>
+                </el-form-item>
+                <el-form-item
+                  label="图片"
+                  class="m-b-8px!"
+                  label-width="50px"
+                  v-if="element.type === 'img'"
+                >
+                  <UploadImg
+                    v-model="element.imgUrl"
+                    draggable="false"
+                    height="80px"
+                    width="100%"
+                    class="min-w-80px"
+                  />
+                </el-form-item>
+                <template v-else>
+                  <el-form-item label="封面" class="m-b-8px!" label-width="50px">
+                    <UploadImg
+                      v-model="element.imgUrl"
+                      draggable="false"
+                      height="80px"
+                      width="100%"
+                      class="min-w-80px"
+                    />
+                  </el-form-item>
+                  <el-form-item label="视频" class="m-b-8px!" label-width="50px">
+                    <UploadFile
+                      v-model="element.videoUrl"
+                      :file-type="['mp4']"
+                      :limit="1"
+                      :file-size="100"
+                      class="min-w-80px"
+                    />
+                  </el-form-item>
+                </template>
+                <el-form-item label="链接" class="m-b-8px!" label-width="50px">
+                  <el-input placeholder="链接" v-model="element.url" />
+                </el-form-item>
+              </div>
+            </template>
+          </draggable>
         </template>
-      </draggable>
-    </div>
-    <el-button @click="handleAddImage" type="primary" plain class="w-full"> 添加图片 </el-button>
-    <el-form-item label="一行个数" prop="rowIndividual" v-show="formData.swiperType === 2">
-      <!-- 单选框 -->
-      <el-radio-group v-model="formData.rowIndividual">
-        <el-radio :label="2">2个</el-radio>
-        <el-radio :label="3">3个</el-radio>
-        <el-radio :label="4">4个</el-radio>
-        <el-radio :label="5">5个</el-radio>
-        <el-radio :label="6">6个</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="分页类型" prop="pagingType">
-      <el-radio-group v-model="formData.pagingType">
-        <el-radio :label="0">不显示</el-radio>
-        <el-radio label="bullets">样式一</el-radio>
-        <el-radio label="fraction">样式二</el-radio>
-        <el-radio label="progressbar">样式三</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="图片圆角" prop="borderRadius">
-      <el-slider v-model="formData.borderRadius" :max="30" />
-    </el-form-item>
-    <el-form-item label="页面边距" prop="pageMargin" v-show="formData.swiperType === 0">
-      <el-slider v-model="formData.pageMargin" :max="20" />
-    </el-form-item>
-    <el-form-item
-      label="图片边距"
-      prop="imageMargin"
-      v-show="formData.swiperType === 0 || formData.swiperType === 2"
-    >
-      <el-slider v-model="formData.imageMargin" :max="20" />
-    </el-form-item>
-  </el-form>
+        <el-button @click="handleAddImage" type="primary" plain class="w-full">
+          添加图片
+        </el-button>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
 </template>
 
 <script setup lang="ts">
@@ -117,7 +134,7 @@ const handleAddImage = () => {
   formData.value.items.push({} as CarouselItemProperty)
 }
 // 删除图片
-const handleDeleteImage = (index) => {
+const handleDeleteImage = (index: number) => {
   formData.value.items.splice(index, 1)
 }
 </script>
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index 6c30f461..fbb7e103 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -385,12 +385,18 @@ $toolbar-height: 42px;
       /* 属性面板分组 */
       :deep(.property-group) {
         margin: 0 -20px;
+        &.el-card {
+          border: none;
+        }
         /* 属性分组名称 */
         .el-card__header {
           border: none;
           background: var(--el-bg-color-page);
           padding: 8px 32px;
         }
+        .el-card__body {
+          border: none;
+        }
       }
     }
 
diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index 42ed4f1d..6895440b 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -138,7 +138,7 @@ watch(
       // 情况1.1：逗号分隔的多值
       if (props.modelValue.includes(',')) {
         files.concat(props.modelValue.split(','))
-      } else {
+      } else if (props.modelValue.length > 0) {
         files.push(props.modelValue)
       }
     } else if (isArray(props.modelValue)) {

From c0d5c76a0614823f90fbf09f4d734ec0c1a54798 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 6 Nov 2023 19:09:20 +0800
Subject: [PATCH 26/77] =?UTF-8?q?=E5=A4=9A=E7=A7=9F=E6=88=B7=EF=BC=9A?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20tenant=20=E8=A1=A8=E7=9A=84=20domain=20?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E4=B8=BA=20website=EF=BC=8C=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=20dm=20=E6=95=B0=E6=8D=AE=E5=BA=93=E7=9A=84=E5=85=B3?=
 =?UTF-8?q?=E9=94=AE=E5=AD=97=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/tenant/TenantForm.vue | 10 +++++-----
 src/views/system/tenant/index.vue      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/system/tenant/TenantForm.vue b/src/views/system/tenant/TenantForm.vue
index a6085363..f6cdd075 100644
--- a/src/views/system/tenant/TenantForm.vue
+++ b/src/views/system/tenant/TenantForm.vue
@@ -54,8 +54,8 @@
           value-format="x"
         />
       </el-form-item>
-      <el-form-item label="绑定域名" prop="domain">
-        <el-input v-model="formData.domain" placeholder="请输入绑定域名" />
+      <el-form-item label="绑定域名" prop="website">
+        <el-input v-model="formData.website" placeholder="请输入绑定域名" />
       </el-form-item>
       <el-form-item label="租户状态" prop="status">
         <el-radio-group v-model="formData.status">
@@ -97,7 +97,7 @@ const formData = ref({
   contactMobile: undefined,
   accountCount: undefined,
   expireTime: undefined,
-  domain: undefined,
+  website: undefined,
   status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive({
@@ -107,7 +107,7 @@ const formRules = reactive({
   status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
   accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
   expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
-  domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }],
+  website: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }],
   username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
   password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }]
 })
@@ -170,7 +170,7 @@ const resetForm = () => {
     contactMobile: undefined,
     accountCount: undefined,
     expireTime: undefined,
-    domain: undefined,
+    website: undefined,
     status: CommonStatusEnum.ENABLE
   }
   formRef.value?.resetFields()
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index e357b6b4..703e01e4 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -125,7 +125,7 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column label="绑定域名" align="center" prop="domain" width="180" />
+      <el-table-column label="绑定域名" align="center" prop="website" width="180" />
       <el-table-column label="租户状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />

From 85ee558bef3937554deb7ab208b4c160590f6d2d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 6 Nov 2023 19:42:28 +0800
Subject: [PATCH 27/77] =?UTF-8?q?=E5=A4=9A=E7=A7=9F=E6=88=B7=EF=BC=9A?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=95=8C=E9=9D=A2=EF=BC=8C=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=20host=20=E5=9F=9F=E5=90=8D=E8=8E=B7=E5=8F=96=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E7=9A=84=E7=A7=9F=E6=88=B7=E7=BC=96=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login/index.ts                   |  5 ++++
 src/views/Login/components/LoginForm.vue | 31 ++++++++++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/api/login/index.ts b/src/api/login/index.ts
index 1ffb38d6..ef86563b 100644
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@@ -27,6 +27,11 @@ export const getTenantIdByName = (name: string) => {
   return request.get({ url: '/system/tenant/get-id-by-name?name=' + name })
 }
 
+// 使用租户域名，获得租户信息
+export const getTenantByWebsite = (website: string) => {
+  return request.get({ url: '/system/tenant/get-by-website?website=' + website })
+}
+
 // 登出
 export const loginOut = () => {
   return request.post({ url: '/system/auth/logout' })
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 9bee2523..ef212505 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -193,10 +193,10 @@ const loginData = reactive({
 })
 
 const socialList = [
-  { icon: 'ant-design:github-filled', type: 0 },
   { icon: 'ant-design:wechat-filled', type: 30 },
-  { icon: 'ant-design:alipay-circle-filled', type: 0 },
-  { icon: 'ant-design:dingtalk-circle-filled', type: 20 }
+  { icon: 'ant-design:dingtalk-circle-filled', type: 20 },
+  { icon: 'ant-design:github-filled', type: 0 },
+  { icon: 'ant-design:alipay-circle-filled', type: 0 }
 ]
 
 // 获取验证码
@@ -210,7 +210,7 @@ const getCode = async () => {
     verify.value.show()
   }
 }
-//获取租户ID
+// 获取租户 ID
 const getTenantId = async () => {
   if (loginData.tenantEnable === 'true') {
     const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
@@ -230,6 +230,15 @@ const getCookie = () => {
     }
   }
 }
+// 根据域名，获得租户信息
+const getTenantByWebsite = async () => {
+  const website = location.host
+  const res = await LoginApi.getTenantByWebsite(website)
+  if (res) {
+    loginData.loginForm.tenantName = res.name
+    authUtil.setTenantId(res.id)
+  }
+}
 const loading = ref() // ElLoading.service 返回的实例
 // 登录
 const handleLogin = async (params) => {
@@ -278,10 +287,15 @@ const doSocialLogin = async (type: number) => {
   } else {
     loginLoading.value = true
     if (loginData.tenantEnable === 'true') {
-      await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
-        const res = await LoginApi.getTenantIdByName(value)
-        authUtil.setTenantId(res)
-      })
+      // 尝试先通过 tenantName 获取租户
+      await getTenantId()
+      // 如果获取不到，则需要弹出提示，进行处理
+      if (!authUtil.getTenantId()) {
+        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
+          const res = await LoginApi.getTenantIdByName(value)
+          authUtil.setTenantId(res)
+        })
+      }
     }
     // 计算 redirectUri
     // tricky: type、redirect需要先encode一次，否则钉钉回调会丢失。
@@ -307,6 +321,7 @@ watch(
 )
 onMounted(() => {
   getCookie()
+  getTenantByWebsite()
 })
 </script>
 

From 7146fdc9b9640c140d39e676453c09fe6a5248a2 Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Mon, 6 Nov 2023 22:00:40 +0800
Subject: [PATCH 28/77] =?UTF-8?q?style:=20=E5=AE=A2=E6=88=B7=20review=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/customer/detail/CustomerDetails.vue | 7 +++----
 src/views/crm/customer/detail/index.vue           | 3 +--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/views/crm/customer/detail/CustomerDetails.vue b/src/views/crm/customer/detail/CustomerDetails.vue
index 1065b22c..2e584bd9 100644
--- a/src/views/crm/customer/detail/CustomerDetails.vue
+++ b/src/views/crm/customer/detail/CustomerDetails.vue
@@ -44,6 +44,9 @@
         <el-descriptions-item label="下次联系时间">
           {{ customer.contactNextTime ? formatDate(customer.contactNextTime, 'YYYY-MM-DD') : '空' }}
         </el-descriptions-item>
+        <el-descriptions-item label="最后跟进时间">
+          {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
+        </el-descriptions-item>
       </el-descriptions>
       <el-descriptions :column="1">
         <el-descriptions-item label="客户描述">
@@ -71,10 +74,6 @@
         <el-descriptions-item label="更新时间">
           {{ customer.updateTime ? formatDate(customer.updateTime) : '空' }}
         </el-descriptions-item>
-        <!-- TODO wanwan：要不把“最后跟进时间”放到“下次联系时间”后面 -->
-        <el-descriptions-item label="最后跟进时间">
-          {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
-        </el-descriptions-item>
       </el-descriptions>
     </el-collapse-item>
   </el-collapse>
diff --git a/src/views/crm/customer/detail/index.vue b/src/views/crm/customer/detail/index.vue
index 1caeadef..f250bc28 100644
--- a/src/views/crm/customer/detail/index.vue
+++ b/src/views/crm/customer/detail/index.vue
@@ -63,8 +63,7 @@
       </el-descriptions-item>
     </el-descriptions>
   </ContentWrap>
-  <!-- TODO wanwan：这个 tab 拉满哈，可以更好看； -->
-  <el-col :span="18">
+  <el-col>
     <el-tabs>
       <el-tab-pane label="详细资料">
         <!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->

From f2c71d5836895b7d4ff6520388709f5426d88559 Mon Sep 17 00:00:00 2001
From: niou233 <2922564446@qq.com>
Date: Wed, 8 Nov 2023 17:29:57 +0800
Subject: [PATCH 29/77] =?UTF-8?q?refactor:=20=E4=BC=9A=E5=91=98=E5=95=86?=
 =?UTF-8?q?=E5=93=81=E6=94=B6=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/favorite.ts              | 16 ---
 .../member/user/detail/UserFavoriteList.vue   | 99 -------------------
 2 files changed, 115 deletions(-)

diff --git a/src/api/mall/product/favorite.ts b/src/api/mall/product/favorite.ts
index 2e54ec78..3834eed0 100644
--- a/src/api/mall/product/favorite.ts
+++ b/src/api/mall/product/favorite.ts
@@ -8,21 +8,5 @@ export interface Favorite {
 
 // 获得 ProductFavorite 列表
 export const getFavoritePage = (params: PageParam) => {
-  params.keyword = params.name
   return request.get({ url: '/product/favorite/page', params })
 }
-
-// 收藏商品 Favorite
-export const createFavorite = (data: Favorite) => {
-  return request.post({ url: '/product/favorite/create', data })
-}
-
-// 取消商品收藏 Favorite
-export const delFavorite = (data: Favorite) => {
-  return request.delete({ url: '/product/favorite/delete', data })
-}
-
-// 是否收藏过商品 Favorite
-export const exitsFavorite = (data: Favorite) => {
-  return request.post({ url: '/product/favorite/exits', data })
-}
diff --git a/src/views/member/user/detail/UserFavoriteList.vue b/src/views/member/user/detail/UserFavoriteList.vue
index 009a8b10..afab9a08 100644
--- a/src/views/member/user/detail/UserFavoriteList.vue
+++ b/src/views/member/user/detail/UserFavoriteList.vue
@@ -1,46 +1,4 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="商品名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入商品名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="收藏时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery">
-          <Icon icon="ep:search" class="mr-5px" />
-          搜索
-        </el-button>
-        <el-button @click="resetQuery">
-          <Icon icon="ep:refresh" class="mr-5px" />
-          重置
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
@@ -67,28 +25,6 @@
           <dict-tag :type="DICT_TYPE.PRODUCT_SPU_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column align="center" fixed="right" label="操作" min-width="200">
-        <template #default="{ row }">
-          <el-button
-            v-if="row.favoriteStatus === 0"
-            v-hasPermi="['product:spu:delete']"
-            link
-            type="danger"
-            @click="handleAdd(row)"
-          >
-            收藏
-          </el-button>
-          <el-button
-            v-if="row.favoriteStatus === 1"
-            v-hasPermi="['product:spu:delete']"
-            link
-            type="danger"
-            @click="handleDelete(row)"
-          >
-            取消收藏
-          </el-button>
-        </template>
-      </el-table-column>
     </el-table>
     <!-- 分页 -->
     <Pagination
@@ -145,41 +81,6 @@ const resetQuery = () => {
   handleQuery()
 }
 
-/** 取消收藏按钮操作 */
-const handleDelete = async (row: object) => {
-  try {
-    console.log(row)
-    // 取消的二次确认
-    await message.delStarConfirm()
-    // 发起取消
-    await FavoriteApi.delFavorite({ userId: queryParams.userId, spuId: row.spuId })
-    message.success(t('common.delStarSuccess'))
-    row.favoriteStatus = 0
-    // 刷新列表
-    // await getList()
-  } catch {}
-}
-
-/** 收藏按钮操作 */
-const handleAdd = async (row: object) => {
-  try {
-    const data = { userId: queryParams.userId, spuId: row.spuId }
-    // 发起收藏
-    const result = await FavoriteApi.exitsFavorite(data)
-    if (result === false) {
-      // 发起收藏
-      await FavoriteApi.createFavorite(data)
-      message.success(t('common.starSuccess'))
-      row.favoriteStatus = 1
-      // 刷新列表
-      // await getList()
-    } else {
-      message.warning(t('common.existStar'))
-      row.favoriteStatus = 1
-    }
-  } catch {}
-}
-
 const { userId } = defineProps({
   userId: {
     type: Number,

From 325e2e4ff20b23d8b1a64902bb19bb24c4f0190f Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Wed, 8 Nov 2023 21:10:05 +0800
Subject: [PATCH 30/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E5=88=97=E8=A1=A8=E5=AF=BC=E8=88=AA=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/MenuList/config.ts      | 39 ++++++++++
 .../components/mobile/MenuList/index.vue      | 31 ++++++++
 .../components/mobile/MenuList/property.vue   | 74 +++++++++++++++++++
 src/components/DiyEditor/util.ts              |  5 +-
 src/components/InputWithColor/index.vue       | 58 +++++++++++++++
 5 files changed, 205 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DiyEditor/components/mobile/MenuList/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/MenuList/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/MenuList/property.vue
 create mode 100644 src/components/InputWithColor/index.vue

diff --git a/src/components/DiyEditor/components/mobile/MenuList/config.ts b/src/components/DiyEditor/components/mobile/MenuList/config.ts
new file mode 100644
index 00000000..f06adfae
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuList/config.ts
@@ -0,0 +1,39 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 列表导航属性 */
+export interface MenuListProperty {
+  // 导航菜单列表
+  list: MenuListItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+/** 列表导航项目属性 */
+export interface MenuListItemProperty {
+  // 图标链接
+  iconUrl: string
+  // 标题
+  title: string
+  // 标题颜色
+  titleColor: string
+  // 副标题
+  subtitle: string
+  // 副标题颜色
+  subtitleColor: string
+  // 链接
+  url: string
+}
+
+// 定义组件
+export const component = {
+  id: 'MenuList',
+  name: '列表导航',
+  icon: 'fa-solid:list',
+  property: {
+    list: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MenuListProperty>
diff --git a/src/components/DiyEditor/components/mobile/MenuList/index.vue b/src/components/DiyEditor/components/mobile/MenuList/index.vue
new file mode 100644
index 00000000..9a56fd94
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuList/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="min-h-42px flex flex-col">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="item h-42px flex flex-row items-center justify-between gap-4px p-x-12px"
+    >
+      <div class="flex flex-1 flex-row items-center gap-8px">
+        <el-image v-if="item.iconUrl" class="h-16px w-16px" :src="item.iconUrl" />
+        <span class="text-16px" :style="{ color: item.titleColor }">{{ item.title }}</span>
+      </div>
+      <div class="item-center flex flex-row justify-center gap-4px">
+        <span class="text-12px" :style="{ color: item.subtitleColor }">{{ item.subtitle }}</span>
+        <Icon icon="ep-arrow-right" color="#000" :size="16" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuListProperty } from './config'
+/** 列表导航 */
+defineOptions({ name: 'MenuList' })
+defineProps<{ property: MenuListProperty }>()
+</script>
+
+<style scoped lang="scss">
+.item + .item {
+  border-top: 1px solid #eee;
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/MenuList/property.vue b/src/components/DiyEditor/components/mobile/MenuList/property.vue
new file mode 100644
index 00000000..51652b6e
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuList/property.vue
@@ -0,0 +1,74 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-text tag="p"> 菜单设置 </el-text>
+    <el-text type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </el-text>
+
+    <!-- 表单 -->
+    <el-form label-width="60px" :model="formData" class="m-t-8px">
+      <div v-if="formData.list.length">
+        <VueDraggable
+          :list="formData.list"
+          item-key="index"
+          handle=".drag-icon"
+          :forceFallback="true"
+          :animation="200"
+        >
+          <template #item="{ element, index }">
+            <div class="mb-4px flex flex-col gap-4px rounded bg-gray-100 p-8px">
+              <div class="flex flex-row justify-between">
+                <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+                <Icon icon="ep:delete" class="text-red-500" @click="handleDeleteMenu(index)" />
+              </div>
+              <el-form-item label="图标" prop="iconUrl">
+                <UploadImg v-model="element.iconUrl" height="80px" width="80px">
+                  <template #tip> 建议尺寸：44 * 44 </template>
+                </UploadImg>
+              </el-form-item>
+              <el-form-item label="标题" prop="title">
+                <InputWithColor v-model="element.title" v-model:color="element.titleColor" />
+              </el-form-item>
+              <el-form-item label="副标题" prop="subtitle">
+                <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
+              </el-form-item>
+              <el-form-item label="链接" prop="url">
+                <el-input v-model="element.url" />
+              </el-form-item>
+            </div>
+          </template>
+        </VueDraggable>
+      </div>
+      <el-form-item label-width="0">
+        <el-button @click="handleAddMenu" type="primary" plain class="m-t-8px w-full">
+          <Icon icon="ep:plus" class="mr-5px" /> 添加菜单
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import VueDraggable from 'vuedraggable'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import { MenuListProperty } from '@/components/DiyEditor/components/mobile/MenuList/config'
+
+/** 列表导航属性面板 */
+defineOptions({ name: 'MenuListProperty' })
+
+const props = defineProps<{ modelValue: MenuListProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+/* 添加菜单 */
+const handleAddMenu = () => {
+  formData.value.list.push({
+    titleColor: '#333',
+    subtitleColor: '#bbb'
+  })
+}
+/* 删除菜单 */
+const handleDeleteMenu = (index: number) => {
+  formData.value.list.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index 29b44cf6..96dd4dbb 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -103,8 +103,9 @@ export const PAGE_LIBS = [
     components: [
       'SearchBar',
       'NoticeBar',
-      'GridNavigation',
-      'ListNavigation',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
       'Divider',
       'TitleBar'
     ]
diff --git a/src/components/InputWithColor/index.vue b/src/components/InputWithColor/index.vue
new file mode 100644
index 00000000..1932fd58
--- /dev/null
+++ b/src/components/InputWithColor/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-input v-model="valueRef" v-bind="$attrs">
+    <template #append>
+      <el-color-picker v-model="colorRef" :predefine="COLORS" />
+    </template>
+  </el-input>
+</template>
+
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+
+/**
+ * 带颜色选择器输入框
+ */
+defineOptions({ name: 'InputWithColor' })
+
+const props = defineProps({
+  modelValue: propTypes.string.def('').isRequired,
+  color: propTypes.string.def('').isRequired
+})
+
+watch(
+  () => props.modelValue,
+  (val: string) => {
+    if (val === unref(valueRef)) return
+    valueRef.value = val
+  }
+)
+
+const emit = defineEmits(['update:modelValue', 'update:color'])
+
+// 输入框的值
+const valueRef = ref(props.modelValue)
+watch(
+  () => valueRef.value,
+  (val: string) => {
+    emit('update:modelValue', val)
+  }
+)
+// 颜色
+const colorRef = ref(props.color)
+watch(
+  () => colorRef.value,
+  (val: string) => {
+    emit('update:color', val)
+  }
+)
+</script>
+<style scoped lang="scss">
+:deep(.el-input-group__append) {
+  padding: 0;
+  .el-color-picker__trigger {
+    padding: 0;
+    border-left: none;
+    border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius) 0;
+  }
+}
+</style>

From ac42493659cd79b4ae7b451386b229dc293221fa Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Wed, 8 Nov 2023 22:22:35 +0800
Subject: [PATCH 31/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E5=AE=AB=E6=A0=BC=E5=AF=BC=E8=88=AA=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/MenuGrid/config.ts      | 78 +++++++++++++++
 .../components/mobile/MenuGrid/index.vue      | 35 +++++++
 .../components/mobile/MenuGrid/property.vue   | 96 +++++++++++++++++++
 .../components/mobile/MenuList/config.ts      | 10 +-
 .../components/mobile/MenuList/property.vue   | 11 ++-
 5 files changed, 224 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DiyEditor/components/mobile/MenuGrid/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/MenuGrid/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/MenuGrid/property.vue

diff --git a/src/components/DiyEditor/components/mobile/MenuGrid/config.ts b/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
new file mode 100644
index 00000000..ccf09b2e
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
@@ -0,0 +1,78 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+import { cloneDeep } from 'lodash-es'
+
+/** 宫格导航属性 */
+export interface MenuGridProperty {
+  // 列数
+  column: number
+  // 导航菜单列表
+  list: MenuGridItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+/** 宫格导航项目属性 */
+export interface MenuGridItemProperty {
+  // 图标链接
+  iconUrl: string
+  // 标题
+  title: string
+  // 标题颜色
+  titleColor: string
+  // 副标题
+  subtitle: string
+  // 副标题颜色
+  subtitleColor: string
+  // 链接
+  url: string
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标文字
+    text: string
+    // 角标文字颜色
+    textColor: string
+    // 角标背景颜色
+    bgColor: string
+  }
+}
+
+export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  subtitle: '副标题',
+  subtitleColor: '#bbb',
+  badge: {
+    show: false,
+    textColor: '#fff',
+    bgColor: '#FF6000'
+  }
+} as MenuGridItemProperty
+
+// 定义组件
+export const component = {
+  id: 'MenuGrid',
+  name: '宫格导航',
+  icon: 'fa-solid:list',
+  property: {
+    column: 3,
+    list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      marginLeft: 8,
+      marginRight: 8,
+      padding: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8,
+      borderRadius: 8,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MenuGridProperty>
diff --git a/src/components/DiyEditor/components/mobile/MenuGrid/index.vue b/src/components/DiyEditor/components/mobile/MenuGrid/index.vue
new file mode 100644
index 00000000..1c5ef1dc
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuGrid/index.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-row flex-wrap">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="relative flex flex-col items-center p-b-14px p-t-20px"
+      :style="{ width: `${100 * (1 / property.column)}%` }"
+    >
+      <!-- 右上角角标 -->
+      <span
+        v-if="item.badge?.show"
+        class="absolute left-50% top-10px z-1 h-20px rounded-50% p-x-6px text-center text-12px leading-20px"
+        :style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
+      >
+        {{ item.badge.text }}
+      </span>
+      <el-image v-if="item.iconUrl" class="h-28px w-28px" :src="item.iconUrl" />
+      <span class="m-t-8px h-16px text-12px leading-16px" :style="{ color: item.titleColor }">
+        {{ item.title }}
+      </span>
+      <span class="m-t-6px h-12px text-10px leading-12px" :style="{ color: item.subtitleColor }">
+        {{ item.subtitle }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MenuGridProperty } from './config'
+/** 宫格导航 */
+defineOptions({ name: 'MenuGrid' })
+defineProps<{ property: MenuGridProperty }>()
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/MenuGrid/property.vue b/src/components/DiyEditor/components/mobile/MenuGrid/property.vue
new file mode 100644
index 00000000..e09dd318
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuGrid/property.vue
@@ -0,0 +1,96 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <el-form label-width="80px" :model="formData" class="m-t-8px">
+      <el-form-item label="每行数量" prop="column">
+        <el-radio-group v-model="formData.column">
+          <el-radio :label="3">3个</el-radio>
+          <el-radio :label="4">4个</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-text tag="p"> 菜单设置 </el-text>
+      <el-text type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </el-text>
+      <template v-if="formData.list.length">
+        <VueDraggable
+          class="m-t-8px"
+          :list="formData.list"
+          item-key="index"
+          handle=".drag-icon"
+          :forceFallback="true"
+          :animation="200"
+        >
+          <template #item="{ element, index }">
+            <div class="mb-4px flex flex-col gap-4px rounded bg-gray-100 p-8px">
+              <div class="flex flex-row justify-between">
+                <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+                <Icon icon="ep:delete" class="text-red-500" @click="handleDeleteMenu(index)" />
+              </div>
+              <el-form-item label="图标" prop="iconUrl">
+                <UploadImg v-model="element.iconUrl" height="80px" width="80px">
+                  <template #tip> 建议尺寸：44 * 44 </template>
+                </UploadImg>
+              </el-form-item>
+              <el-form-item label="标题" prop="title">
+                <InputWithColor v-model="element.title" v-model:color="element.titleColor" />
+              </el-form-item>
+              <el-form-item label="副标题" prop="subtitle">
+                <InputWithColor v-model="element.subtitle" v-model:color="element.subtitleColor" />
+              </el-form-item>
+              <el-form-item label="链接" prop="url">
+                <el-input v-model="element.url" />
+              </el-form-item>
+              <el-form-item label="显示角标" prop="badge.show">
+                <el-switch v-model="element.badge.show" />
+              </el-form-item>
+              <template v-if="element.badge.show">
+                <el-form-item label="角标内容" prop="badge.text">
+                  <InputWithColor
+                    v-model="element.badge.text"
+                    v-model:color="element.badge.textColor"
+                  />
+                </el-form-item>
+                <el-form-item label="背景颜色" prop="badge.bgColor">
+                  <ColorInput v-model="element.badge.bgColor" />
+                </el-form-item>
+              </template>
+            </div>
+          </template>
+        </VueDraggable>
+      </template>
+      <el-form-item label-width="0">
+        <el-button @click="handleAddMenu" type="primary" plain class="m-t-8px w-full">
+          <Icon icon="ep:plus" class="mr-5px" /> 添加菜单
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import VueDraggable from 'vuedraggable'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import {
+  EMPTY_MENU_GRID_ITEM_PROPERTY,
+  MenuGridProperty
+} from '@/components/DiyEditor/components/mobile/MenuGrid/config'
+import { cloneDeep } from 'lodash-es'
+
+/** 宫格导航属性面板 */
+defineOptions({ name: 'MenuGridProperty' })
+
+const props = defineProps<{ modelValue: MenuGridProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+/* 添加菜单 */
+const handleAddMenu = () => {
+  formData.value.list.push(cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY))
+}
+/* 删除菜单 */
+const handleDeleteMenu = (index: number) => {
+  formData.value.list.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/MenuList/config.ts b/src/components/DiyEditor/components/mobile/MenuList/config.ts
index f06adfae..c42674f3 100644
--- a/src/components/DiyEditor/components/mobile/MenuList/config.ts
+++ b/src/components/DiyEditor/components/mobile/MenuList/config.ts
@@ -1,4 +1,5 @@
 import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+import { cloneDeep } from 'lodash-es'
 
 /** 列表导航属性 */
 export interface MenuListProperty {
@@ -23,13 +24,20 @@ export interface MenuListItemProperty {
   url: string
 }
 
+export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  subtitle: '副标题',
+  subtitleColor: '#bbb'
+}
+
 // 定义组件
 export const component = {
   id: 'MenuList',
   name: '列表导航',
   icon: 'fa-solid:list',
   property: {
-    list: [],
+    list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
     style: {
       bgType: 'color',
       bgColor: '#fff',
diff --git a/src/components/DiyEditor/components/mobile/MenuList/property.vue b/src/components/DiyEditor/components/mobile/MenuList/property.vue
index 51652b6e..270ca261 100644
--- a/src/components/DiyEditor/components/mobile/MenuList/property.vue
+++ b/src/components/DiyEditor/components/mobile/MenuList/property.vue
@@ -49,7 +49,11 @@
 <script setup lang="ts">
 import VueDraggable from 'vuedraggable'
 import { usePropertyForm } from '@/components/DiyEditor/util'
-import { MenuListProperty } from '@/components/DiyEditor/components/mobile/MenuList/config'
+import {
+  EMPTY_MENU_LIST_ITEM_PROPERTY,
+  MenuListProperty
+} from '@/components/DiyEditor/components/mobile/MenuList/config'
+import { cloneDeep } from 'lodash-es'
 
 /** 列表导航属性面板 */
 defineOptions({ name: 'MenuListProperty' })
@@ -60,10 +64,7 @@ const { formData } = usePropertyForm(props.modelValue, emit)
 
 /* 添加菜单 */
 const handleAddMenu = () => {
-  formData.value.list.push({
-    titleColor: '#333',
-    subtitleColor: '#bbb'
-  })
+  formData.value.list.push(cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY))
 }
 /* 删除菜单 */
 const handleDeleteMenu = (index: number) => {

From 288aa72cdd3ebd889118d02f8e66ca606ddc4d09 Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Thu, 9 Nov 2023 00:05:10 +0800
Subject: [PATCH 32/77] =?UTF-8?q?feat:=20CRM=20=E5=AE=A2=E6=88=B7=E5=85=AC?=
 =?UTF-8?q?=E6=B5=B7=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/customerPoolConf/index.ts    |  19 ++++
 src/views/crm/customerPoolConf/index.vue | 134 +++++++++++++++++++++++
 2 files changed, 153 insertions(+)
 create mode 100644 src/api/crm/customerPoolConf/index.ts
 create mode 100644 src/views/crm/customerPoolConf/index.vue

diff --git a/src/api/crm/customerPoolConf/index.ts b/src/api/crm/customerPoolConf/index.ts
new file mode 100644
index 00000000..8234ba36
--- /dev/null
+++ b/src/api/crm/customerPoolConf/index.ts
@@ -0,0 +1,19 @@
+import request from '@/config/axios'
+
+export interface CustomerPoolConfigVO {
+  enabled?: boolean
+  contactExpireDays?: number
+  dealExpireDays?: number
+  notifyEnabled?: boolean
+  notifyDays: number
+}
+
+// 获取客户公海规则设置
+export const getCustomerPoolConfig = async () => {
+  return await request.get({ url: `/crm/customer-pool-config/get` })
+}
+
+// 更新客户公海规则设置
+export const updateCustomerPoolConfig = async (data: ConfigVO) => {
+  return await request.put({ url: `/crm/customer-pool-config/update`, data })
+}
diff --git a/src/views/crm/customerPoolConf/index.vue b/src/views/crm/customerPoolConf/index.vue
new file mode 100644
index 00000000..518c6f3d
--- /dev/null
+++ b/src/views/crm/customerPoolConf/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <ContentWrap>
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="160px"
+      v-loading="formLoading"
+    >
+      <el-card shadow="never">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <CardTitle title="客户公海规则设置" />
+            <el-button type="primary" @click="onSubmit">保存</el-button>
+          </div>
+        </template>
+
+        <el-form-item label="客户公海规则设置" prop="enabled">
+          <el-radio-group v-model="formData.enabled" class="ml-4">
+            <el-radio :label="false" size="large">不启用</el-radio>
+            <el-radio :label="true" size="large">启用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="formData.enabled">
+          <el-form-item>
+            <el-input-number class="mr-2" v-model="formData.contactExpireDays" />
+            天不跟进或
+            <el-input-number class="mx-2" v-model="formData.dealExpireDays" />
+            天未成交
+          </el-form-item>
+          <el-form-item label="提前提醒设置" prop="notifyEnabled">
+            <el-radio-group v-model="formData.notifyEnabled" class="ml-4">
+              <el-radio :label="false" size="large">不提醒</el-radio>
+              <el-radio :label="true" size="large">提醒</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <div v-if="formData.notifyEnabled">
+            <el-form-item>
+              提前
+              <el-input-number class="mx-2" v-model="formData.notifyDays" />
+              天提醒
+            </el-form-item>
+          </div>
+        </div>
+      </el-card>
+    </el-form>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import * as CustomerPoolConfApi from '@/api/crm/customerPoolConf'
+import { CardTitle } from '@/components/Card'
+import { CustomerPoolConfigVO } from '@/api/crm/customerPoolConf'
+
+defineOptions({ name: 'CustomerPoolConf' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const formLoading = ref(false)
+const formData = ref({
+  enabled: false,
+  contactExpireDays: 0,
+  dealExpireDays: 0,
+  notifyEnabled: false,
+  notifyDays: 0
+})
+
+const formRules = reactive({
+  enabled: [{ required: true, message: '是否启用客户公海不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/**
+ * 获取配置
+ */
+const getConfig = async () => {
+  try {
+    formLoading.value = true
+    const data = await CustomerPoolConfApi.getCustomerPoolConfig()
+    if (data === null) {
+      return
+    }
+    formData.value = data
+    console.log(formData.value)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/**
+ * 提交配置
+ */
+const onSubmit = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CustomerPoolConfApi.CustomerPoolConfigVO
+    await CustomerPoolConfApi.updateCustomerPoolConfig(data)
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+watch(
+  () => formData.value.enabled,
+  (val: boolean) => {
+    if (!val) {
+      formData.value.contactExpireDays = undefined
+      formData.value.dealExpireDays = undefined
+      formData.value.notifyEnabled = false
+      formData.value.notifyDays = undefined
+    }
+  }
+)
+watch(
+  () => formData.value.notifyEnabled,
+  (val: boolean) => {
+    if (!val) {
+      formData.value.notifyDays = undefined
+    }
+  }
+)
+
+onMounted(() => {
+  getConfig()
+})
+</script>

From 59b2d89a18855091851270d6c1cebcc1fb6b0178 Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Thu, 9 Nov 2023 00:08:09 +0800
Subject: [PATCH 33/77] =?UTF-8?q?feat:=20CRM=20=E5=AE=A2=E6=88=B7=E5=85=AC?=
 =?UTF-8?q?=E6=B5=B7=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/customerPoolConf/index.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/views/crm/customerPoolConf/index.vue b/src/views/crm/customerPoolConf/index.vue
index 518c6f3d..1ea61f94 100644
--- a/src/views/crm/customerPoolConf/index.vue
+++ b/src/views/crm/customerPoolConf/index.vue
@@ -11,7 +11,12 @@
         <template #header>
           <div class="flex items-center justify-between">
             <CardTitle title="客户公海规则设置" />
-            <el-button type="primary" @click="onSubmit">保存</el-button>
+            <el-button
+              type="primary"
+              @click="onSubmit"
+              v-hasPermi="['crm:customer-pool-config:update']"
+              >保存</el-button
+            >
           </div>
         </template>
 

From 82aed175ab31296666a317e81e0e2bb7744b4f5d Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Thu, 9 Nov 2023 09:18:46 +0800
Subject: [PATCH 34/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E8=8F=9C=E5=8D=95=E5=AF=BC=E8=88=AA=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorInput/index.vue           |  24 +---
 .../components/ComponentContainer.vue         |  31 +++--
 .../components/mobile/MenuGrid/config.ts      |   2 +-
 .../components/mobile/MenuSwiper/config.ts    |  66 ++++++++++
 .../components/mobile/MenuSwiper/index.vue    | 119 ++++++++++++++++++
 .../components/mobile/MenuSwiper/property.vue | 106 ++++++++++++++++
 src/components/DiyEditor/util.ts              |  16 +--
 src/components/InputWithColor/index.vue       |   3 +-
 src/utils/color.ts                            |  21 ++++
 9 files changed, 344 insertions(+), 44 deletions(-)
 create mode 100644 src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/MenuSwiper/property.vue

diff --git a/src/components/ColorInput/index.vue b/src/components/ColorInput/index.vue
index abd083a1..63ff73cf 100644
--- a/src/components/ColorInput/index.vue
+++ b/src/components/ColorInput/index.vue
@@ -1,38 +1,18 @@
 <template>
   <el-input v-model="color">
     <template #prepend>
-      <el-color-picker v-model="color" :predefine="COLORS" />
+      <el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
     </template>
   </el-input>
 </template>
 
 <script setup lang="ts">
 import { propTypes } from '@/utils/propTypes'
+import { PREDEFINE_COLORS } from '@/utils/color'
 
 // 颜色输入框
 defineOptions({ name: 'ColorInput' })
 
-// 预设颜色
-const COLORS = [
-  '#ff4500',
-  '#ff8c00',
-  '#ffd700',
-  '#90ee90',
-  '#00ced1',
-  '#1e90ff',
-  '#c71585',
-  '#409EFF',
-  '#909399',
-  '#C0C4CC',
-  '#b7390b',
-  '#ff7800',
-  '#fad400',
-  '#5b8c5f',
-  '#00babd',
-  '#1f73c3',
-  '#711f57'
-]
-
 const props = defineProps({
   modelValue: propTypes.string.def('')
 })
diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue
index c013362f..6c6463f2 100644
--- a/src/components/DiyEditor/components/ComponentContainer.vue
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
@@ -1,6 +1,7 @@
 <template>
   <div :class="['component', { active: active }]">
     <div
+      class="component-inner"
       :style="{
         ...style
       }"
@@ -130,23 +131,19 @@ $toolbar-position: -55px;
 .component {
   position: relative;
   cursor: move;
+  .component-inner {
+    position: relative;
+    z-index: 1;
+  }
   .component-wrap {
+    z-index: 0;
+    pointer-events: none;
     display: block;
     position: absolute;
     left: -$active-border-width;
     top: 0;
     width: 100%;
     height: 100%;
-    /* 鼠标放到组件上时 */
-    &:hover {
-      border: $hover-border-width dashed var(--el-color-primary);
-      box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
-      .component-name {
-        /* 防止加了边框之后，位置移动 */
-        left: $name-position - $hover-border-width;
-        top: $hover-border-width;
-      }
-    }
     /* 左侧：组件名称 */
     .component-name {
       display: block;
@@ -199,6 +196,7 @@ $toolbar-position: -55px;
     margin-bottom: 4px;
 
     .component-wrap {
+      z-index: 2;
       border: $active-border-width solid var(--el-color-primary) !important;
       box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
       margin-bottom: $active-border-width + $active-border-width;
@@ -218,5 +216,18 @@ $toolbar-position: -55px;
       }
     }
   }
+  /* 鼠标放到组件上时 */
+  &:hover {
+    .component-wrap {
+      z-index: 2;
+      border: $hover-border-width dashed var(--el-color-primary);
+      box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
+      .component-name {
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $hover-border-width;
+        top: $hover-border-width;
+      }
+    }
+  }
 }
 </style>
diff --git a/src/components/DiyEditor/components/mobile/MenuGrid/config.ts b/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
index ccf09b2e..b5a5d97d 100644
--- a/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
+++ b/src/components/DiyEditor/components/mobile/MenuGrid/config.ts
@@ -53,7 +53,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',
-  icon: 'fa-solid:list',
+  icon: 'bi:grid-3x3-gap',
   property: {
     column: 3,
     list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
diff --git a/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts b/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
new file mode 100644
index 00000000..fe5f4e87
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuSwiper/config.ts
@@ -0,0 +1,66 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+import { cloneDeep } from 'lodash-es'
+
+/** 菜单导航属性 */
+export interface MenuSwiperProperty {
+  // 布局： 图标+文字 | 图标
+  layout: 'iconText' | 'icon'
+  // 行数
+  row: number
+  // 列数
+  column: number
+  // 导航菜单列表
+  list: MenuSwiperItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+/** 菜单导航项目属性 */
+export interface MenuSwiperItemProperty {
+  // 图标链接
+  iconUrl: string
+  // 标题
+  title: string
+  // 标题颜色
+  titleColor: string
+  // 链接
+  url: string
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标文字
+    text: string
+    // 角标文字颜色
+    textColor: string
+    // 角标背景颜色
+    bgColor: string
+  }
+}
+
+export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  badge: {
+    show: false,
+    textColor: '#fff',
+    bgColor: '#FF6000'
+  }
+} as MenuSwiperItemProperty
+
+// 定义组件
+export const component = {
+  id: 'MenuSwiper',
+  name: '菜单导航',
+  icon: 'bi:grid-3x2-gap',
+  property: {
+    layout: 'iconText',
+    row: 1,
+    column: 3,
+    list: [cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MenuSwiperProperty>
diff --git a/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue b/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
new file mode 100644
index 00000000..6ae6439c
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuSwiper/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <el-carousel
+    :height="`${carouselHeight}px`"
+    :autoplay="false"
+    arrow="hover"
+    indicator-position="outside"
+  >
+    <el-carousel-item v-for="(page, pageIndex) in pages" :key="pageIndex">
+      <div class="flex flex-row flex-wrap">
+        <div
+          v-for="(item, index) in page"
+          :key="index"
+          class="relative flex flex-col items-center justify-center"
+          :style="{ width: columnWidth, height: `${rowHeight}px` }"
+        >
+          <!-- 图标 + 角标 -->
+          <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
+            <!-- 右上角角标 -->
+            <span
+              v-if="item.badge?.show"
+              class="absolute right--10px top--10px z-1 h-20px rounded-10px p-x-6px text-center text-12px leading-20px"
+              :style="{ color: item.badge.textColor, backgroundColor: item.badge.bgColor }"
+            >
+              {{ item.badge.text }}
+            </span>
+            <el-image v-if="item.iconUrl" :src="item.iconUrl" class="h-full w-full" />
+          </div>
+          <!-- 标题 -->
+          <span
+            v-if="property.layout === 'iconText'"
+            class="text-14px"
+            :style="{
+              color: item.titleColor,
+              height: `${TITLE_HEIGHT}px`,
+              lineHeight: `${TITLE_HEIGHT}px`
+            }"
+          >
+            {{ item.title }}
+          </span>
+        </div>
+      </div>
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<script setup lang="ts">
+import { MenuSwiperProperty, MenuSwiperItemProperty } from './config'
+/** 菜单导航 */
+defineOptions({ name: 'MenuSwiper' })
+const props = defineProps<{ property: MenuSwiperProperty }>()
+// 标题的高度
+const TITLE_HEIGHT = 20
+// 图标的高度
+const ICON_SIZE = 50
+// 垂直间距：一行上下的间距
+const SPACE_Y = 16
+
+// 分页
+const pages = ref<MenuSwiperItemProperty[][]>([])
+// 轮播图高度
+const carouselHeight = ref(0)
+// 行高
+const rowHeight = ref(0)
+// 列宽
+const columnWidth = ref('')
+watch(
+  () => props.property,
+  () => {
+    // 计算列宽：每一列的百分比
+    columnWidth.value = `${100 * (1 / props.property.column)}%`
+    // 计算行高：图标 + 文字（仅显示图片时为0） + 垂直间距 * 2
+    rowHeight.value =
+      (props.property.layout === 'iconText' ? ICON_SIZE + TITLE_HEIGHT : ICON_SIZE) + SPACE_Y * 2
+    // 计算轮播的高度：行数 * 行高
+    carouselHeight.value = props.property.row * rowHeight.value
+
+    // 每页数量：行数 * 列数
+    const pageSize = props.property.row * props.property.column
+    // 清空分页
+    pages.value = []
+    // 每一页的菜单
+    let pageItems: MenuSwiperItemProperty[] = []
+    for (const item of props.property.list) {
+      // 本页满员，新建下一页
+      if (pageItems.length === pageSize) {
+        pageItems = []
+      }
+      // 增加一页
+      if (pageItems.length === 0) {
+        pages.value.push(pageItems)
+      }
+      // 本页增加一个
+      pageItems.push(item)
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style lang="scss">
+// 重写指示器样式，与 APP 保持一致
+:root {
+  .el-carousel__indicator {
+    padding-top: 0;
+    padding-bottom: 0;
+    .el-carousel__button {
+      --el-carousel-indicator-height: 6px;
+      --el-carousel-indicator-width: 6px;
+      --el-carousel-indicator-out-color: #ff6000;
+      border-radius: 6px;
+    }
+  }
+  .el-carousel__indicator.is-active {
+    .el-carousel__button {
+      --el-carousel-indicator-width: 12px;
+    }
+  }
+}
+</style>
diff --git a/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue b/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue
new file mode 100644
index 00000000..2175d57e
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MenuSwiper/property.vue
@@ -0,0 +1,106 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <el-form label-width="80px" :model="formData" class="m-t-8px">
+      <el-form-item label="布局" prop="layout">
+        <el-radio-group v-model="formData.layout">
+          <el-radio label="iconText">图标+文字</el-radio>
+          <el-radio label="icon">仅图标</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="行数" prop="row">
+        <el-radio-group v-model="formData.row">
+          <el-radio :label="1">1行</el-radio>
+          <el-radio :label="2">2行</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="列数" prop="column">
+        <el-radio-group v-model="formData.column">
+          <el-radio :label="3">3列</el-radio>
+          <el-radio :label="4">4列</el-radio>
+          <el-radio :label="5">5列</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-text tag="p"> 菜单设置 </el-text>
+      <el-text type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </el-text>
+      <template v-if="formData.list.length">
+        <VueDraggable
+          class="m-t-8px"
+          :list="formData.list"
+          item-key="index"
+          handle=".drag-icon"
+          :forceFallback="true"
+          :animation="200"
+        >
+          <template #item="{ element, index }">
+            <div class="mb-4px flex flex-col gap-4px rounded bg-gray-100 p-8px">
+              <div class="flex flex-row justify-between">
+                <Icon icon="ic:round-drag-indicator" class="drag-icon cursor-move" />
+                <Icon icon="ep:delete" class="text-red-500" @click="handleDeleteMenu(index)" />
+              </div>
+              <el-form-item label="图标" prop="iconUrl">
+                <UploadImg v-model="element.iconUrl" height="80px" width="80px">
+                  <template #tip> 建议尺寸：98 * 98 </template>
+                </UploadImg>
+              </el-form-item>
+              <el-form-item label="标题" prop="title">
+                <InputWithColor v-model="element.title" v-model:color="element.titleColor" />
+              </el-form-item>
+              <el-form-item label="链接" prop="url">
+                <el-input v-model="element.url" />
+              </el-form-item>
+              <el-form-item label="显示角标" prop="badge.show">
+                <el-switch v-model="element.badge.show" />
+              </el-form-item>
+              <template v-if="element.badge.show">
+                <el-form-item label="角标内容" prop="badge.text">
+                  <InputWithColor
+                    v-model="element.badge.text"
+                    v-model:color="element.badge.textColor"
+                  />
+                </el-form-item>
+                <el-form-item label="背景颜色" prop="badge.bgColor">
+                  <ColorInput v-model="element.badge.bgColor" />
+                </el-form-item>
+              </template>
+            </div>
+          </template>
+        </VueDraggable>
+      </template>
+      <el-form-item label-width="0">
+        <el-button @click="handleAddMenu" type="primary" plain class="m-t-8px w-full">
+          <Icon icon="ep:plus" class="mr-5px" /> 添加菜单
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import VueDraggable from 'vuedraggable'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import {
+  EMPTY_MENU_SWIPER_ITEM_PROPERTY,
+  MenuSwiperProperty
+} from '@/components/DiyEditor/components/mobile/MenuSwiper/config'
+import { cloneDeep } from 'lodash-es'
+
+/** 菜单导航属性面板 */
+defineOptions({ name: 'MenuSwiperProperty' })
+
+const props = defineProps<{ modelValue: MenuSwiperProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+/* 添加菜单 */
+const handleAddMenu = () => {
+  formData.value.list.push(cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY))
+}
+/* 删除菜单 */
+const handleDeleteMenu = (index: number) => {
+  formData.value.list.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index 96dd4dbb..5ae0a93f 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -100,17 +100,13 @@ export const PAGE_LIBS = [
   {
     name: '基础组件',
     extended: true,
-    components: [
-      'SearchBar',
-      'NoticeBar',
-      'MenuSwiper',
-      'MenuGrid',
-      'MenuList',
-      'Divider',
-      'TitleBar'
-    ]
+    components: ['SearchBar', 'NoticeBar', 'MenuSwiper', 'MenuGrid', 'MenuList']
+  },
+  {
+    name: '图文组件',
+    extended: true,
+    components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider']
   },
-  { name: '图文组件', extended: true, components: ['ImageBar', 'Carousel', 'VideoPlayer'] },
   { name: '商品组件', extended: true, components: ['ProductCard'] },
   {
     name: '会员组件',
diff --git a/src/components/InputWithColor/index.vue b/src/components/InputWithColor/index.vue
index 1932fd58..2bc53172 100644
--- a/src/components/InputWithColor/index.vue
+++ b/src/components/InputWithColor/index.vue
@@ -1,13 +1,14 @@
 <template>
   <el-input v-model="valueRef" v-bind="$attrs">
     <template #append>
-      <el-color-picker v-model="colorRef" :predefine="COLORS" />
+      <el-color-picker v-model="colorRef" :predefine="PREDEFINE_COLORS" />
     </template>
   </el-input>
 </template>
 
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
+import { PREDEFINE_COLORS } from '@/utils/color'
 
 /**
  * 带颜色选择器输入框
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 6888583a..13424e57 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -151,3 +151,24 @@ const subtractLight = (color: string, amount: number) => {
   const c = cc < 0 ? 0 : cc
   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
 }
+
+// 预设颜色
+export const PREDEFINE_COLORS = [
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  '#409EFF',
+  '#909399',
+  '#C0C4CC',
+  '#b7390b',
+  '#ff7800',
+  '#fad400',
+  '#5b8c5f',
+  '#00babd',
+  '#1f73c3',
+  '#711f57'
+]

From a08e9bea7c3f3551be8234d550fc38d500f856f2 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 6 Nov 2023 19:09:20 +0800
Subject: [PATCH 35/77] =?UTF-8?q?=E5=A4=9A=E7=A7=9F=E6=88=B7=EF=BC=9A?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20tenant=20=E8=A1=A8=E7=9A=84=20domain=20?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5=E4=B8=BA=20website=EF=BC=8C=E9=81=BF?=
 =?UTF-8?q?=E5=85=8D=20dm=20=E6=95=B0=E6=8D=AE=E5=BA=93=E7=9A=84=E5=85=B3?=
 =?UTF-8?q?=E9=94=AE=E5=AD=97=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/tenant/TenantForm.vue | 10 +++++-----
 src/views/system/tenant/index.vue      |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/system/tenant/TenantForm.vue b/src/views/system/tenant/TenantForm.vue
index a6085363..f6cdd075 100644
--- a/src/views/system/tenant/TenantForm.vue
+++ b/src/views/system/tenant/TenantForm.vue
@@ -54,8 +54,8 @@
           value-format="x"
         />
       </el-form-item>
-      <el-form-item label="绑定域名" prop="domain">
-        <el-input v-model="formData.domain" placeholder="请输入绑定域名" />
+      <el-form-item label="绑定域名" prop="website">
+        <el-input v-model="formData.website" placeholder="请输入绑定域名" />
       </el-form-item>
       <el-form-item label="租户状态" prop="status">
         <el-radio-group v-model="formData.status">
@@ -97,7 +97,7 @@ const formData = ref({
   contactMobile: undefined,
   accountCount: undefined,
   expireTime: undefined,
-  domain: undefined,
+  website: undefined,
   status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive({
@@ -107,7 +107,7 @@ const formRules = reactive({
   status: [{ required: true, message: '租户状态不能为空', trigger: 'blur' }],
   accountCount: [{ required: true, message: '账号额度不能为空', trigger: 'blur' }],
   expireTime: [{ required: true, message: '过期时间不能为空', trigger: 'blur' }],
-  domain: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }],
+  website: [{ required: true, message: '绑定域名不能为空', trigger: 'blur' }],
   username: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
   password: [{ required: true, message: '用户密码不能为空', trigger: 'blur' }]
 })
@@ -170,7 +170,7 @@ const resetForm = () => {
     contactMobile: undefined,
     accountCount: undefined,
     expireTime: undefined,
-    domain: undefined,
+    website: undefined,
     status: CommonStatusEnum.ENABLE
   }
   formRef.value?.resetFields()
diff --git a/src/views/system/tenant/index.vue b/src/views/system/tenant/index.vue
index e357b6b4..703e01e4 100644
--- a/src/views/system/tenant/index.vue
+++ b/src/views/system/tenant/index.vue
@@ -125,7 +125,7 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column label="绑定域名" align="center" prop="domain" width="180" />
+      <el-table-column label="绑定域名" align="center" prop="website" width="180" />
       <el-table-column label="租户状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />

From e9299c671063a8f8581d61d09c21eb7205f7a2e1 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 6 Nov 2023 19:42:28 +0800
Subject: [PATCH 36/77] =?UTF-8?q?=E5=A4=9A=E7=A7=9F=E6=88=B7=EF=BC=9A?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=95=8C=E9=9D=A2=EF=BC=8C=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=20host=20=E5=9F=9F=E5=90=8D=E8=8E=B7=E5=8F=96=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E7=9A=84=E7=A7=9F=E6=88=B7=E7=BC=96=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login/index.ts                   |  5 ++++
 src/views/Login/components/LoginForm.vue | 31 ++++++++++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/api/login/index.ts b/src/api/login/index.ts
index 1ffb38d6..ef86563b 100644
--- a/src/api/login/index.ts
+++ b/src/api/login/index.ts
@@ -27,6 +27,11 @@ export const getTenantIdByName = (name: string) => {
   return request.get({ url: '/system/tenant/get-id-by-name?name=' + name })
 }
 
+// 使用租户域名，获得租户信息
+export const getTenantByWebsite = (website: string) => {
+  return request.get({ url: '/system/tenant/get-by-website?website=' + website })
+}
+
 // 登出
 export const loginOut = () => {
   return request.post({ url: '/system/auth/logout' })
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index 9bee2523..ef212505 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -193,10 +193,10 @@ const loginData = reactive({
 })
 
 const socialList = [
-  { icon: 'ant-design:github-filled', type: 0 },
   { icon: 'ant-design:wechat-filled', type: 30 },
-  { icon: 'ant-design:alipay-circle-filled', type: 0 },
-  { icon: 'ant-design:dingtalk-circle-filled', type: 20 }
+  { icon: 'ant-design:dingtalk-circle-filled', type: 20 },
+  { icon: 'ant-design:github-filled', type: 0 },
+  { icon: 'ant-design:alipay-circle-filled', type: 0 }
 ]
 
 // 获取验证码
@@ -210,7 +210,7 @@ const getCode = async () => {
     verify.value.show()
   }
 }
-//获取租户ID
+// 获取租户 ID
 const getTenantId = async () => {
   if (loginData.tenantEnable === 'true') {
     const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
@@ -230,6 +230,15 @@ const getCookie = () => {
     }
   }
 }
+// 根据域名，获得租户信息
+const getTenantByWebsite = async () => {
+  const website = location.host
+  const res = await LoginApi.getTenantByWebsite(website)
+  if (res) {
+    loginData.loginForm.tenantName = res.name
+    authUtil.setTenantId(res.id)
+  }
+}
 const loading = ref() // ElLoading.service 返回的实例
 // 登录
 const handleLogin = async (params) => {
@@ -278,10 +287,15 @@ const doSocialLogin = async (type: number) => {
   } else {
     loginLoading.value = true
     if (loginData.tenantEnable === 'true') {
-      await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
-        const res = await LoginApi.getTenantIdByName(value)
-        authUtil.setTenantId(res)
-      })
+      // 尝试先通过 tenantName 获取租户
+      await getTenantId()
+      // 如果获取不到，则需要弹出提示，进行处理
+      if (!authUtil.getTenantId()) {
+        await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
+          const res = await LoginApi.getTenantIdByName(value)
+          authUtil.setTenantId(res)
+        })
+      }
     }
     // 计算 redirectUri
     // tricky: type、redirect需要先encode一次，否则钉钉回调会丢失。
@@ -307,6 +321,7 @@ watch(
 )
 onMounted(() => {
   getCookie()
+  getTenantByWebsite()
 })
 </script>
 

From 55b477acdb4e4246648ab6198440cfc0649efc04 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Thu, 9 Nov 2023 15:48:20 +0800
Subject: [PATCH 37/77] =?UTF-8?q?unplugin-auto-import=EF=BC=9A=E6=8E=92?=
 =?UTF-8?q?=E9=99=A4=E8=87=AA=E5=8A=A8=E5=AF=BC=E5=85=A5=E5=BA=97=E9=93=BA?=
 =?UTF-8?q?=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/vite/index.ts | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/build/vite/index.ts b/build/vite/index.ts
index 02067107..585759f5 100644
--- a/build/vite/index.ts
+++ b/build/vite/index.ts
@@ -60,18 +60,11 @@ export function createVitePlugins() {
       }
     }),
     Components({
-      // 要搜索组件的目录的相对路径
-      dirs: ['src/components'],
-      // 组件的有效文件扩展名
-      extensions: ['vue', 'md'],
-      // 搜索子目录
-      deep: true,
-      include: [/\.vue$/, /\.vue\?vue/],
       // 生成自定义 `auto-components.d.ts` 全局声明
       dts: 'src/types/auto-components.d.ts',
       // 自定义组件的解析器
       resolvers: [ElementPlusResolver()],
-      exclude: [/[\\/]node_modules[\\/]/]
+      globs: ["src/components/**/**.{vue, md}", '!src/components/DiyEditor/components/mobile/**']
     }),
     EslintPlugin({
       cache: false,

From 4e413a10e621a34235a6f520f8b97cd77cc00c95 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 9 Nov 2023 23:10:54 +0800
Subject: [PATCH 38/77] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=9A?=
 =?UTF-8?q?=E6=9A=82=E6=97=B6=E5=AD=98=E5=82=A8=EF=BC=8C=E5=87=86=E5=A4=87?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo02/index.ts                 |  35 ++++
 .../infra/demo02/DemoStudentContactForm.vue   |  71 ++++++++
 src/views/infra/demo02/DemoStudentForm.vue    |  97 +++++++++++
 src/views/infra/demo02/index.vue              | 159 ++++++++++++++++++
 4 files changed, 362 insertions(+)
 create mode 100644 src/api/infra/demo02/index.ts
 create mode 100644 src/views/infra/demo02/DemoStudentContactForm.vue
 create mode 100644 src/views/infra/demo02/DemoStudentForm.vue
 create mode 100644 src/views/infra/demo02/index.vue

diff --git a/src/api/infra/demo02/index.ts b/src/api/infra/demo02/index.ts
new file mode 100644
index 00000000..b575dba4
--- /dev/null
+++ b/src/api/infra/demo02/index.ts
@@ -0,0 +1,35 @@
+import request from '@/config/axios'
+
+export interface DemoStudentVO {
+  id: number
+}
+
+// 查询学生列表
+export const getDemoStudentPage = async (params) => {
+  return await request.get({ url: `/infra/demo-student/page`, params })
+}
+
+// 查询学生详情
+export const getDemoStudent = async (id: number) => {
+  return await request.get({ url: `/infra/demo-student/get?id=` + id })
+}
+
+// 新增学生
+export const createDemoStudent = async (data: DemoStudentVO) => {
+  return await request.post({ url: `/infra/demo-student/create`, data })
+}
+
+// 修改学生
+export const updateDemoStudent = async (data: DemoStudentVO) => {
+  return await request.put({ url: `/infra/demo-student/update`, data })
+}
+
+// 删除学生
+export const deleteDemoStudent = async (id: number) => {
+  return await request.delete({ url: `/infra/demo-student/delete?id=` + id })
+}
+
+// 导出学生 Excel
+export const exportDemoStudent = async (params) => {
+  return await request.download({ url: `/infra/demo-student/export-excel`, params })
+}
diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
new file mode 100644
index 00000000..98c97fab
--- /dev/null
+++ b/src/views/infra/demo02/DemoStudentContactForm.vue
@@ -0,0 +1,71 @@
+<template>
+  <!--  <el-row :gutter="10" class="mb2">-->
+  <!--    <el-col :span="1.5">-->
+  <!--      <el-button type="primary" @click="handleAdd">添加</el-button>-->
+  <!--    </el-col>-->
+  <!--    <el-col :span="1.5">-->
+  <!--      <el-button type="danger">删除</el-button>-->
+  <!--    </el-col>-->
+  <!--  </el-row>-->
+  <el-table
+    :data="formData"
+    @selection-change="handleDemoStudentContactSelectionChange"
+    ref="demoStudentContactRef"
+    :stripe="true"
+  >
+    <el-table-column label="序号" type="index" width="100" />
+    <el-table-column label="名字" prop="name" width="300">
+      <template #default="scope">
+        <el-form-item label-width="0px" :inline-message="true">
+          <el-input v-model="scope.row.name" placeholder="请输入名字" />
+        </el-form-item>
+      </template>
+    </el-table-column>
+    <el-table-column label="手机号码">
+      <template #default="{ row, $index }">
+        <el-form-item
+          label-width="0px"
+          :prop="`formData.${$index}.mobile`"
+          :rules="formRules.mobile"
+          :inline-message="true"
+        >
+          <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
+        </el-form-item>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-button @click="handleAdd" class="w-1/1">+ 添加客户信息</el-button>
+</template>
+<script setup lang="ts">
+const formData = ref([
+  {
+    name: '芋艿'
+  },
+  {
+    name: '土豆'
+  }
+])
+const formRules = reactive({
+  mobile: [required]
+})
+
+const handleDemoStudentContactSelectionChange = (val) => {
+  demoStudentContactList.value = val
+}
+
+const demoStudentContactRef = ref()
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  formData.value.push({
+    name: '测试'
+  })
+}
+
+/** 删除按钮操作 */
+const handleRemove = () => {
+  formData.value.push({
+    name: '测试'
+  })
+}
+</script>
diff --git a/src/views/infra/demo02/DemoStudentForm.vue b/src/views/infra/demo02/DemoStudentForm.vue
new file mode 100644
index 00000000..62303dc0
--- /dev/null
+++ b/src/views/infra/demo02/DemoStudentForm.vue
@@ -0,0 +1,97 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="表描述" prop="tableComment">
+        <el-input v-model="formData.tableComment" placeholder="请输入" />
+      </el-form-item>
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="User" name="first">
+          <DemoStudentContactForm />
+        </el-tab-pane>
+        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
+        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+      </el-tabs>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DemoStudentApi from '@/api/infra/demo02'
+import DemoStudentContactForm from './DemoStudentContactForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  demoStudentContactList: []
+})
+const formRules = reactive({})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  // resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await DemoStudentApi.getDemoStudent(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
+    if (formType.value === 'create') {
+      await DemoStudentApi.createDemoStudent(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DemoStudentApi.updateDemoStudent(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/demo02/index.vue b/src/views/infra/demo02/index.vue
new file mode 100644
index 00000000..ae46f8b4
--- /dev/null
+++ b/src/views/infra/demo02/index.vue
@@ -0,0 +1,159 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:demo-student:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo-student:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.id" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DemoStudentForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import download from '@/utils/download'
+import * as DemoStudentApi from '@/api/infra/demo02'
+import DemoStudentForm from './DemoStudentForm.vue'
+
+defineOptions({ name: 'InfraDemoStudent' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DemoStudentApi.deleteDemoStudent(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DemoStudentApi.exportDemoStudent(queryParams)
+    download.excel(data, '学生.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From d45ebd4fcfb0bac96a575b5f594248e5b85f8778 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 10 Nov 2023 00:20:00 +0800
Subject: [PATCH 39/77] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=9A?=
 =?UTF-8?q?=E6=9A=82=E6=97=B6=E5=AD=98=E5=82=A8=EF=BC=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B7=91=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infra/demo02/DemoStudentContactForm.vue   | 54 +++++++++++--------
 src/views/infra/demo02/DemoStudentForm.vue    | 26 ++++++---
 2 files changed, 49 insertions(+), 31 deletions(-)

diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
index 98c97fab..145b4889 100644
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ b/src/views/infra/demo02/DemoStudentContactForm.vue
@@ -1,22 +1,15 @@
 <template>
-  <!--  <el-row :gutter="10" class="mb2">-->
-  <!--    <el-col :span="1.5">-->
-  <!--      <el-button type="primary" @click="handleAdd">添加</el-button>-->
-  <!--    </el-col>-->
-  <!--    <el-col :span="1.5">-->
-  <!--      <el-button type="danger">删除</el-button>-->
-  <!--    </el-col>-->
-  <!--  </el-row>-->
   <el-table
     :data="formData"
     @selection-change="handleDemoStudentContactSelectionChange"
     ref="demoStudentContactRef"
     :stripe="true"
+    class="-mt-10px"
   >
     <el-table-column label="序号" type="index" width="100" />
     <el-table-column label="名字" prop="name" width="300">
       <template #default="scope">
-        <el-form-item label-width="0px" :inline-message="true">
+        <el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
           <el-input v-model="scope.row.name" placeholder="请输入名字" />
         </el-form-item>
       </template>
@@ -25,26 +18,37 @@
       <template #default="{ row, $index }">
         <el-form-item
           label-width="0px"
-          :prop="`formData.${$index}.mobile`"
+          :prop="`demoStudentContactList.${$index}.mobile`"
           :rules="formRules.mobile"
           :inline-message="true"
+          class="mb-0px!"
         >
           <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
         </el-form-item>
       </template>
     </el-table-column>
+    <el-table-column align="center" fixed="right" label="操作" width="60">
+      <el-button @click="handleAdd" link>—</el-button>
+    </el-table-column>
   </el-table>
-  <el-button @click="handleAdd" class="w-1/1">+ 添加客户信息</el-button>
+  <el-row justify="center" class="mt-3">
+    <el-button @click="handleAdd" round>+ 添加联系人</el-button>
+  </el-row>
 </template>
 <script setup lang="ts">
-const formData = ref([
-  {
-    name: '芋艿'
-  },
-  {
-    name: '土豆'
-  }
-])
+const props = defineProps<{
+  formData: any[]
+}>()
+// const formData = ref([
+//   {
+//     name: '芋艿',
+//     mobile: '15601691300'
+//   },
+//   {
+//     name: '土豆',
+//     mobile: '15601691234'
+//   }
+// ])
 const formRules = reactive({
   mobile: [required]
 })
@@ -56,15 +60,19 @@ const handleDemoStudentContactSelectionChange = (val) => {
 const demoStudentContactRef = ref()
 
 /** 新增按钮操作 */
+const emit = defineEmits(['update:formData'])
 const handleAdd = () => {
-  formData.value.push({
-    name: '测试'
-  })
+  emit('update:formData', [
+    ...props.formData,
+    {
+      name: '土豆'
+    }
+  ])
 }
 
 /** 删除按钮操作 */
 const handleRemove = () => {
-  formData.value.push({
+  formData.push({
     name: '测试'
   })
 }
diff --git a/src/views/infra/demo02/DemoStudentForm.vue b/src/views/infra/demo02/DemoStudentForm.vue
index 62303dc0..884788dc 100644
--- a/src/views/infra/demo02/DemoStudentForm.vue
+++ b/src/views/infra/demo02/DemoStudentForm.vue
@@ -7,16 +7,21 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="表描述" prop="tableComment">
-        <el-input v-model="formData.tableComment" placeholder="请输入" />
+      <el-form-item label="字段 1" prop="field1">
+        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+      </el-form-item>
+      <el-form-item label="字段 2" prop="field2">
+        <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+      </el-form-item>
+      <el-form-item label="字段 3" prop="field3">
+        <el-input v-model="formData.field3" placeholder="请输入字段 3" />
       </el-form-item>
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="User" name="first">
-          <DemoStudentContactForm />
+        <el-tab-pane label="联系人信息" name="first">
+          <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
         </el-tab-pane>
-        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
-        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
-        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+        <el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
+        <el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
       </el-tabs>
     </el-form>
     <template #footer>
@@ -38,7 +43,12 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  demoStudentContactList: []
+  demoStudentContactList: [
+    {
+      name: '芋艿',
+      mobile: '15601691300'
+    }
+  ]
 })
 const formRules = reactive({})
 const formRef = ref() // 表单 Ref

From 86d9a97ccb08bec766ada95d5860deb28588e2b4 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 10 Nov 2023 08:51:01 +0800
Subject: [PATCH 40/77] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=9A?=
 =?UTF-8?q?=E6=9A=82=E6=97=B6=E5=AD=98=E5=82=A8=EF=BC=8C=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E6=A0=A1=E9=AA=8C-=E8=A1=A8=E5=8D=95=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=B7=91=E9=80=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infra/demo02/DemoStudentContactForm.vue   | 27 ++++++-------------
 src/views/infra/demo02/DemoStudentForm.vue    | 14 +++++-----
 2 files changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
index 145b4889..0cd9d106 100644
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ b/src/views/infra/demo02/DemoStudentContactForm.vue
@@ -1,12 +1,6 @@
 <template>
-  <el-table
-    :data="formData"
-    @selection-change="handleDemoStudentContactSelectionChange"
-    ref="demoStudentContactRef"
-    :stripe="true"
-    class="-mt-10px"
-  >
-    <el-table-column label="序号" type="index" width="100" />
+  <el-table :data="formData" :stripe="true" class="-mt-10px">
+    <el-table-column label="序号" type="index" width="60" />
     <el-table-column label="名字" prop="name" width="300">
       <template #default="scope">
         <el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
@@ -28,7 +22,9 @@
       </template>
     </el-table-column>
     <el-table-column align="center" fixed="right" label="操作" width="60">
-      <el-button @click="handleAdd" link>—</el-button>
+      <template #default="{ $index }">
+        <el-button @click="handleRemove($index)" link>—</el-button>
+      </template>
     </el-table-column>
   </el-table>
   <el-row justify="center" class="mt-3">
@@ -53,12 +49,6 @@ const formRules = reactive({
   mobile: [required]
 })
 
-const handleDemoStudentContactSelectionChange = (val) => {
-  demoStudentContactList.value = val
-}
-
-const demoStudentContactRef = ref()
-
 /** 新增按钮操作 */
 const emit = defineEmits(['update:formData'])
 const handleAdd = () => {
@@ -71,9 +61,8 @@ const handleAdd = () => {
 }
 
 /** 删除按钮操作 */
-const handleRemove = () => {
-  formData.push({
-    name: '测试'
-  })
+const handleRemove = (index) => {
+  const formData = props.formData.filter((_, i) => i !== index)
+  emit('update:formData', formData)
 }
 </script>
diff --git a/src/views/infra/demo02/DemoStudentForm.vue b/src/views/infra/demo02/DemoStudentForm.vue
index 884788dc..1bb6d7ea 100644
--- a/src/views/infra/demo02/DemoStudentForm.vue
+++ b/src/views/infra/demo02/DemoStudentForm.vue
@@ -16,14 +16,14 @@
       <el-form-item label="字段 3" prop="field3">
         <el-input v-model="formData.field3" placeholder="请输入字段 3" />
       </el-form-item>
-      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-        <el-tab-pane label="联系人信息" name="first">
-          <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
-        </el-tab-pane>
-        <el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
-        <el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
-      </el-tabs>
     </el-form>
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <el-tab-pane label="联系人信息" name="first">
+        <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
+      </el-tab-pane>
+      <el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
+      <el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
+    </el-tabs>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>

From 2ff97758fd720b281e2b76afa56f2fc637476916 Mon Sep 17 00:00:00 2001
From: niou233 <2922564446@qq.com>
Date: Fri, 10 Nov 2023 11:34:32 +0000
Subject: [PATCH 41/77] update src/hooks/web/useMessage.ts.

Signed-off-by: niou233 <2922564446@qq.com>
---
 src/hooks/web/useMessage.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/hooks/web/useMessage.ts b/src/hooks/web/useMessage.ts
index 9bfb7a3a..ac2b552e 100644
--- a/src/hooks/web/useMessage.ts
+++ b/src/hooks/web/useMessage.ts
@@ -90,18 +90,6 @@ export const useMessage = () => {
         cancelButtonText: t('common.cancel'),
         type: 'warning'
       })
-    },
-    // 取消收藏窗体
-    delStarConfirm(content?: string, tip?: string) {
-      return ElMessageBox.confirm(
-        content ? content : t('common.confirmDelStar'),
-        tip ? tip : t('common.confirmTitle'),
-        {
-          confirmButtonText: t('common.ok'),
-          cancelButtonText: t('common.cancel'),
-          type: 'warning'
-        }
-      )
     }
   }
 }

From 1ab5b44254415e050615d91128df0afb703ccc1d Mon Sep 17 00:00:00 2001
From: niou233 <2922564446@qq.com>
Date: Fri, 10 Nov 2023 11:35:54 +0000
Subject: [PATCH 42/77] update src/locales/en.ts.

Signed-off-by: niou233 <2922564446@qq.com>
---
 src/locales/en.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/locales/en.ts b/src/locales/en.ts
index d82e616e..4f4d4895 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -54,13 +54,7 @@ export default {
     updateTime: 'Update Time',
     copy: 'Copy',
     copySuccess: 'Copy Success',
-    copyError: 'Copy Error',
-    confirmDelStar: 'Delete the Star?',
-    starSuccess: 'Star Success',
-    starFail: 'Star Error',
-    delStarSuccess: 'Del Star Success',
-    delStarFail: 'Del Star Error',
-    existStar: 'exist Star'
+    copyError: 'Copy Error'
   },
   error: {
     noPermission: `Sorry, you don't have permission to access this page.`,

From af5d1cf25ee8898cab5e1d1b520b288021d982bc Mon Sep 17 00:00:00 2001
From: niou233 <2922564446@qq.com>
Date: Fri, 10 Nov 2023 11:36:11 +0000
Subject: [PATCH 43/77] update src/locales/zh-CN.ts.

Signed-off-by: niou233 <2922564446@qq.com>
---
 src/locales/zh-CN.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 49a3f895..4f95852f 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -54,13 +54,7 @@ export default {
     updateTime: '更新时间',
     copy: '复制',
     copySuccess: '复制成功',
-    copyError: '复制失败',
-    confirmDelStar: '是否取消收藏？',
-    starSuccess: '收藏成功',
-    starFail: '收藏失败',
-    delStarSuccess: '取消收藏成功',
-    delStarFail: '取消收藏失败',
-    existStar: '收藏已存在'
+    copyError: '复制失败'
   },
   error: {
     noPermission: `抱歉，您无权访问此页面。`,

From 9f9e0f8bda0c19afbd6bc1d1290062d8f5ed9d3c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 10 Nov 2023 19:54:55 +0800
Subject: [PATCH 44/77] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=9A?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=E4=B8=89=E7=A7=8D=E6=A8=A1=E5=BC=8F=E7=9A=84?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../infra/demo02/DemoStudentAddressForm.vue   |  58 ++++++
 .../infra/demo02/DemoStudentContactForm.vue   | 119 ++++++-----
 src/views/infra/demo02/DemoStudentForm.vue    |  61 ++++--
 src/views/infra/demo02/index.vue              |  33 ++--
 .../infra/demo03/DemoStudentAddressForm.vue   |  58 ++++++
 .../infra/demo03/DemoStudentAddressList.vue   |  38 ++++
 .../infra/demo03/DemoStudentContactForm.vue   |  89 +++++++++
 .../infra/demo03/DemoStudentContactList.vue   |  38 ++++
 src/views/infra/demo03/DemoStudentForm.vue    | 132 +++++++++++++
 src/views/infra/demo03/index.vue              | 176 +++++++++++++++++
 .../infra/demo04/DemoStudentAddressForm.vue   |  58 ++++++
 .../infra/demo04/DemoStudentAddressList.vue   |  39 ++++
 .../infra/demo04/DemoStudentContactForm.vue   |  96 +++++++++
 .../infra/demo04/DemoStudentContactList.vue   |  70 +++++++
 src/views/infra/demo04/DemoStudentForm.vue    | 132 +++++++++++++
 src/views/infra/demo04/index.vue              | 184 ++++++++++++++++++
 16 files changed, 1294 insertions(+), 87 deletions(-)
 create mode 100644 src/views/infra/demo02/DemoStudentAddressForm.vue
 create mode 100644 src/views/infra/demo03/DemoStudentAddressForm.vue
 create mode 100644 src/views/infra/demo03/DemoStudentAddressList.vue
 create mode 100644 src/views/infra/demo03/DemoStudentContactForm.vue
 create mode 100644 src/views/infra/demo03/DemoStudentContactList.vue
 create mode 100644 src/views/infra/demo03/DemoStudentForm.vue
 create mode 100644 src/views/infra/demo03/index.vue
 create mode 100644 src/views/infra/demo04/DemoStudentAddressForm.vue
 create mode 100644 src/views/infra/demo04/DemoStudentAddressList.vue
 create mode 100644 src/views/infra/demo04/DemoStudentContactForm.vue
 create mode 100644 src/views/infra/demo04/DemoStudentContactList.vue
 create mode 100644 src/views/infra/demo04/DemoStudentForm.vue
 create mode 100644 src/views/infra/demo04/index.vue

diff --git a/src/views/infra/demo02/DemoStudentAddressForm.vue b/src/views/infra/demo02/DemoStudentAddressForm.vue
new file mode 100644
index 00000000..af4cd8f1
--- /dev/null
+++ b/src/views/infra/demo02/DemoStudentAddressForm.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+    <el-form-item label="子字段 1" prop="field1">
+      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+    </el-form-item>
+    <el-form-item label="子字段 2" prop="field2">
+      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+    </el-form-item>
+    <el-form-item label="子字段 3" prop="field3">
+      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({})
+const formRules = reactive({
+  field1: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = {
+        field2: '番茄',
+        field3: '西瓜'
+      }
+    } else {
+      formData.value = {}
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
index 0cd9d106..50c44263 100644
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ b/src/views/infra/demo02/DemoStudentContactForm.vue
@@ -1,68 +1,89 @@
 <template>
-  <el-table :data="formData" :stripe="true" class="-mt-10px">
-    <el-table-column label="序号" type="index" width="60" />
-    <el-table-column label="名字" prop="name" width="300">
-      <template #default="scope">
-        <el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
-          <el-input v-model="scope.row.name" placeholder="请输入名字" />
-        </el-form-item>
-      </template>
-    </el-table-column>
-    <el-table-column label="手机号码">
-      <template #default="{ row, $index }">
-        <el-form-item
-          label-width="0px"
-          :prop="`demoStudentContactList.${$index}.mobile`"
-          :rules="formRules.mobile"
-          :inline-message="true"
-          class="mb-0px!"
-        >
-          <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
-        </el-form-item>
-      </template>
-    </el-table-column>
-    <el-table-column align="center" fixed="right" label="操作" width="60">
-      <template #default="{ $index }">
-        <el-button @click="handleRemove($index)" link>—</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="0px"
+    v-loading="formLoading"
+    :inline-message="true"
+  >
+    <el-table :data="formData" class="-mt-10px">
+      <el-table-column label="序号" type="index" width="100" />
+      <el-table-column label="名字" prop="name" width="300">
+        <template #default="row">
+          <el-form-item class="mb-0px!">
+            <el-input v-model="row.name" placeholder="请输入名字" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号码">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
+            <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="60">
+        <template #default="{ $index }">
+          <el-button @click="handleDelete($index)" link>—</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-form>
   <el-row justify="center" class="mt-3">
     <el-button @click="handleAdd" round>+ 添加联系人</el-button>
   </el-row>
 </template>
 <script setup lang="ts">
 const props = defineProps<{
-  formData: any[]
+  studentId: undefined // 学生编号
 }>()
-// const formData = ref([
-//   {
-//     name: '芋艿',
-//     mobile: '15601691300'
-//   },
-//   {
-//     name: '土豆',
-//     mobile: '15601691234'
-//   }
-// ])
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
 const formRules = reactive({
   mobile: [required]
 })
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = [
+        {
+          name: '芋艿',
+          mobile: '15601691300'
+        }
+      ]
+    } else {
+      formData.value = []
+    }
+  },
+  { immediate: true }
+)
 
 /** 新增按钮操作 */
-const emit = defineEmits(['update:formData'])
 const handleAdd = () => {
-  emit('update:formData', [
-    ...props.formData,
-    {
-      name: '土豆'
-    }
-  ])
+  formData.value.push({
+    name: '土豆'
+  })
 }
 
 /** 删除按钮操作 */
-const handleRemove = (index) => {
-  const formData = props.formData.filter((_, i) => i !== index)
-  emit('update:formData', formData)
+const handleDelete = (index) => {
+  formData.value.splice(index, 1)
 }
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
 </script>
diff --git a/src/views/infra/demo02/DemoStudentForm.vue b/src/views/infra/demo02/DemoStudentForm.vue
index 1bb6d7ea..fe0788c4 100644
--- a/src/views/infra/demo02/DemoStudentForm.vue
+++ b/src/views/infra/demo02/DemoStudentForm.vue
@@ -17,12 +17,14 @@
         <el-input v-model="formData.field3" placeholder="请输入字段 3" />
       </el-form-item>
     </el-form>
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="联系人信息" name="first">
-        <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="联系人信息" name="DemoStudentContact">
+        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="地址信息" name="DemoStudentAddress">
+        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
       </el-tab-pane>
-      <el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
-      <el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
     </el-tabs>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -33,6 +35,7 @@
 <script setup lang="ts">
 import * as DemoStudentApi from '@/api/infra/demo02'
 import DemoStudentContactForm from './DemoStudentContactForm.vue'
+import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -42,28 +45,36 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  id: undefined,
-  demoStudentContactList: [
-    {
-      name: '芋艿',
-      mobile: '15601691300'
-    }
-  ]
+  id: undefined
+})
+const formRules = reactive({
+  field2: [required]
 })
-const formRules = reactive({})
 const formRef = ref() // 表单 Ref
 
+/** 子表的表单 */
+const demoStudentContactFormRef = ref()
+const demoStudentAddressFormRef = ref()
+const subTabsName = ref('DemoStudentContact')
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
-  // resetForm()
+  resetForm()
   // 修改时，设置数据
   if (id) {
+    // debugger
     formLoading.value = true
     try {
-      formData.value = await DemoStudentApi.getDemoStudent(id)
+      // formData.value = await DemoStudentApi.getDemoStudent(id)
+      formData.value = {
+        id: id,
+        field1: '1',
+        field2: '22',
+        field3: '333'
+      }
     } finally {
       formLoading.value = false
     }
@@ -75,13 +86,27 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
+  await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demoStudentContactFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentContact'
+    return
+  }
+  try {
+    await demoStudentAddressFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentAddress'
+    return
+  }
   // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
+    // 拼接子表的数据
+    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
+    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
     if (formType.value === 'create') {
       await DemoStudentApi.createDemoStudent(data)
       message.success(t('common.createSuccess'))
diff --git a/src/views/infra/demo02/index.vue b/src/views/infra/demo02/index.vue
index ae46f8b4..89fd656b 100644
--- a/src/views/infra/demo02/index.vue
+++ b/src/views/infra/demo02/index.vue
@@ -11,12 +11,7 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['infra:demo-student:create']"
-        >
+        <el-button type="primary" plain @click="openForm('create')">
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
         <el-button
@@ -35,19 +30,10 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.id" />
-        </template>
-      </el-table-column>
+      <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo-student:update']"
-          >
+          <el-button link type="primary" @click="openForm('update', scope.row.id)">
             编辑
           </el-button>
           <el-button
@@ -98,9 +84,13 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
   loading.value = true
   try {
-    const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = data.list
-    total.value = data.total
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: 1
+      }
+    ]
+    total.value = 10
   } finally {
     loading.value = false
   }
@@ -120,7 +110,10 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
+// const demoStudentContactFormRef = ref()
 const openForm = (type: string, id?: number) => {
+  // console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
+  // demoStudentContactFormRef.value.validate()
   formRef.value.open(type, id)
 }
 
diff --git a/src/views/infra/demo03/DemoStudentAddressForm.vue b/src/views/infra/demo03/DemoStudentAddressForm.vue
new file mode 100644
index 00000000..af4cd8f1
--- /dev/null
+++ b/src/views/infra/demo03/DemoStudentAddressForm.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+    <el-form-item label="子字段 1" prop="field1">
+      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+    </el-form-item>
+    <el-form-item label="子字段 2" prop="field2">
+      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+    </el-form-item>
+    <el-form-item label="子字段 3" prop="field3">
+      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({})
+const formRules = reactive({
+  field1: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = {
+        field2: '番茄',
+        field3: '西瓜'
+      }
+    } else {
+      formData.value = {}
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
diff --git a/src/views/infra/demo03/DemoStudentAddressList.vue b/src/views/infra/demo03/DemoStudentAddressList.vue
new file mode 100644
index 00000000..2354db56
--- /dev/null
+++ b/src/views/infra/demo03/DemoStudentAddressList.vue
@@ -0,0 +1,38 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="手机" align="center" prop="mobile" />
+    </el-table>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: props.studentId,
+        mobile: '88888'
+      }
+    ]
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/infra/demo03/DemoStudentContactForm.vue b/src/views/infra/demo03/DemoStudentContactForm.vue
new file mode 100644
index 00000000..50c44263
--- /dev/null
+++ b/src/views/infra/demo03/DemoStudentContactForm.vue
@@ -0,0 +1,89 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="0px"
+    v-loading="formLoading"
+    :inline-message="true"
+  >
+    <el-table :data="formData" class="-mt-10px">
+      <el-table-column label="序号" type="index" width="100" />
+      <el-table-column label="名字" prop="name" width="300">
+        <template #default="row">
+          <el-form-item class="mb-0px!">
+            <el-input v-model="row.name" placeholder="请输入名字" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号码">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
+            <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="60">
+        <template #default="{ $index }">
+          <el-button @click="handleDelete($index)" link>—</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-form>
+  <el-row justify="center" class="mt-3">
+    <el-button @click="handleAdd" round>+ 添加联系人</el-button>
+  </el-row>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
+const formRules = reactive({
+  mobile: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = [
+        {
+          name: '芋艿',
+          mobile: '15601691300'
+        }
+      ]
+    } else {
+      formData.value = []
+    }
+  },
+  { immediate: true }
+)
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  formData.value.push({
+    name: '土豆'
+  })
+}
+
+/** 删除按钮操作 */
+const handleDelete = (index) => {
+  formData.value.splice(index, 1)
+}
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
diff --git a/src/views/infra/demo03/DemoStudentContactList.vue b/src/views/infra/demo03/DemoStudentContactList.vue
new file mode 100644
index 00000000..76d46116
--- /dev/null
+++ b/src/views/infra/demo03/DemoStudentContactList.vue
@@ -0,0 +1,38 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="手机" align="center" prop="mobile" />
+    </el-table>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: props.studentId,
+        mobile: '15601691300'
+      }
+    ]
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/infra/demo03/DemoStudentForm.vue b/src/views/infra/demo03/DemoStudentForm.vue
new file mode 100644
index 00000000..fe0788c4
--- /dev/null
+++ b/src/views/infra/demo03/DemoStudentForm.vue
@@ -0,0 +1,132 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="字段 1" prop="field1">
+        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+      </el-form-item>
+      <el-form-item label="字段 2" prop="field2">
+        <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+      </el-form-item>
+      <el-form-item label="字段 3" prop="field3">
+        <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+      </el-form-item>
+    </el-form>
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="联系人信息" name="DemoStudentContact">
+        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="地址信息" name="DemoStudentAddress">
+        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DemoStudentApi from '@/api/infra/demo02'
+import DemoStudentContactForm from './DemoStudentContactForm.vue'
+import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined
+})
+const formRules = reactive({
+  field2: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 子表的表单 */
+const demoStudentContactFormRef = ref()
+const demoStudentAddressFormRef = ref()
+const subTabsName = ref('DemoStudentContact')
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    // debugger
+    formLoading.value = true
+    try {
+      // formData.value = await DemoStudentApi.getDemoStudent(id)
+      formData.value = {
+        id: id,
+        field1: '1',
+        field2: '22',
+        field3: '333'
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demoStudentContactFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentContact'
+    return
+  }
+  try {
+    await demoStudentAddressFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentAddress'
+    return
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
+    // 拼接子表的数据
+    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
+    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
+    if (formType.value === 'create') {
+      await DemoStudentApi.createDemoStudent(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DemoStudentApi.updateDemoStudent(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/demo03/index.vue b/src/views/infra/demo03/index.vue
new file mode 100644
index 00000000..afd5cbfc
--- /dev/null
+++ b/src/views/infra/demo03/index.vue
@@ -0,0 +1,176 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" plain @click="openForm('create')">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo-student:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      row-key="id"
+    >
+      <el-table-column type="expand">
+        <template #default="scope">
+          <!-- 子表的表单 -->
+          <el-tabs model-value="DemoStudentContact">
+            <el-tab-pane label="联系人信息" name="DemoStudentContact">
+              <DemoStudentContactList :student-id="scope.row.id" />
+            </el-tab-pane>
+            <el-tab-pane label="地址信息" name="DemoStudentAddress">
+              <DemoStudentAddressList :student-id="scope.row.id" />
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+      </el-table-column>
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('update', scope.row.id)">
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DemoStudentForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import download from '@/utils/download'
+import * as DemoStudentApi from '@/api/infra/demo02'
+import DemoStudentForm from './DemoStudentForm.vue'
+import DemoStudentContactList from './DemoStudentContactList.vue'
+import DemoStudentAddressList from './DemoStudentAddressList.vue'
+
+defineOptions({ name: 'InfraDemoStudent' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: 1
+      },
+      {
+        id: 10
+      }
+    ]
+    total.value = 10
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+// const demoStudentContactFormRef = ref()
+const openForm = (type: string, id?: number) => {
+  // console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
+  // demoStudentContactFormRef.value.validate()
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DemoStudentApi.deleteDemoStudent(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DemoStudentApi.exportDemoStudent(queryParams)
+    download.excel(data, '学生.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/infra/demo04/DemoStudentAddressForm.vue b/src/views/infra/demo04/DemoStudentAddressForm.vue
new file mode 100644
index 00000000..af4cd8f1
--- /dev/null
+++ b/src/views/infra/demo04/DemoStudentAddressForm.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+    <el-form-item label="子字段 1" prop="field1">
+      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+    </el-form-item>
+    <el-form-item label="子字段 2" prop="field2">
+      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+    </el-form-item>
+    <el-form-item label="子字段 3" prop="field3">
+      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({})
+const formRules = reactive({
+  field1: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = {
+        field2: '番茄',
+        field3: '西瓜'
+      }
+    } else {
+      formData.value = {}
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
diff --git a/src/views/infra/demo04/DemoStudentAddressList.vue b/src/views/infra/demo04/DemoStudentAddressList.vue
new file mode 100644
index 00000000..92143456
--- /dev/null
+++ b/src/views/infra/demo04/DemoStudentAddressList.vue
@@ -0,0 +1,39 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="手机" align="center" prop="mobile" />
+    </el-table>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+// TODO 芋艿：暂时没改
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: props.studentId,
+        mobile: '88888'
+      }
+    ]
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/infra/demo04/DemoStudentContactForm.vue b/src/views/infra/demo04/DemoStudentContactForm.vue
new file mode 100644
index 00000000..c8744eb0
--- /dev/null
+++ b/src/views/infra/demo04/DemoStudentContactForm.vue
@@ -0,0 +1,96 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="字段 1" prop="field1">
+        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DemoStudentApi from '@/api/infra/demo02'
+import DemoStudentContactForm from './DemoStudentContactForm.vue'
+import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined
+})
+const formRules = reactive({
+  field2: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    // debugger
+    formLoading.value = true
+    try {
+      // formData.value = await DemoStudentApi.getDemoStudent(id)
+      formData.value = {
+        id: id,
+        field1: '1',
+        field2: '22',
+        field3: '333'
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
+    if (formType.value === 'create') {
+      // await DemoStudentApi.createDemoStudent(data) // TODO 芋艿：临时去掉
+      message.success(t('common.createSuccess'))
+    } else {
+      await DemoStudentApi.updateDemoStudent(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/demo04/DemoStudentContactList.vue b/src/views/infra/demo04/DemoStudentContactList.vue
new file mode 100644
index 00000000..b944c407
--- /dev/null
+++ b/src/views/infra/demo04/DemoStudentContactList.vue
@@ -0,0 +1,70 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-button type="primary" plain @click="openForm('create')">
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="手机" align="center" prop="mobile" />
+    </el-table>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DemoStudentContactForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import DemoStudentContactForm from './DemoStudentContactForm.vue'
+
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const loading = ref(false) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    queryParams.studentId = val
+    handleQuery()
+  },
+  { immediate: false }
+)
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: props.studentId,
+        mobile: '15601691300'
+      }
+    ]
+    total.value = 10
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+</script>
diff --git a/src/views/infra/demo04/DemoStudentForm.vue b/src/views/infra/demo04/DemoStudentForm.vue
new file mode 100644
index 00000000..fe0788c4
--- /dev/null
+++ b/src/views/infra/demo04/DemoStudentForm.vue
@@ -0,0 +1,132 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="字段 1" prop="field1">
+        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+      </el-form-item>
+      <el-form-item label="字段 2" prop="field2">
+        <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+      </el-form-item>
+      <el-form-item label="字段 3" prop="field3">
+        <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+      </el-form-item>
+    </el-form>
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="联系人信息" name="DemoStudentContact">
+        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="地址信息" name="DemoStudentAddress">
+        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as DemoStudentApi from '@/api/infra/demo02'
+import DemoStudentContactForm from './DemoStudentContactForm.vue'
+import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined
+})
+const formRules = reactive({
+  field2: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 子表的表单 */
+const demoStudentContactFormRef = ref()
+const demoStudentAddressFormRef = ref()
+const subTabsName = ref('DemoStudentContact')
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    // debugger
+    formLoading.value = true
+    try {
+      // formData.value = await DemoStudentApi.getDemoStudent(id)
+      formData.value = {
+        id: id,
+        field1: '1',
+        field2: '22',
+        field3: '333'
+      }
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demoStudentContactFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentContact'
+    return
+  }
+  try {
+    await demoStudentAddressFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentAddress'
+    return
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
+    // 拼接子表的数据
+    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
+    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
+    if (formType.value === 'create') {
+      await DemoStudentApi.createDemoStudent(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await DemoStudentApi.updateDemoStudent(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/demo04/index.vue b/src/views/infra/demo04/index.vue
new file mode 100644
index 00000000..9a6b8bfe
--- /dev/null
+++ b/src/views/infra/demo04/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" plain @click="openForm('create')">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo-student:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button link type="primary" @click="openForm('update', scope.row.id)">
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 子列表 -->
+  <ContentWrap>
+    <el-tabs model-value="DemoStudentContact">
+      <el-tab-pane label="联系人信息" name="DemoStudentContact">
+        <DemoStudentContactList :student-id="currentRow.id" />
+      </el-tab-pane>
+      <el-tab-pane label="地址信息" name="DemoStudentAddress">
+        <DemoStudentAddressList :student-id="currentRow.id" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <DemoStudentForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import download from '@/utils/download'
+import * as DemoStudentApi from '@/api/infra/demo02'
+import DemoStudentForm from './DemoStudentForm.vue'
+import DemoStudentContactList from './DemoStudentContactList.vue'
+import DemoStudentAddressList from './DemoStudentAddressList.vue'
+
+defineOptions({ name: 'InfraDemoStudent' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const currentRow = ref({}) // 选中行
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: 1
+      },
+      {
+        id: 10
+      }
+    ]
+    total.value = 10
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+// const demoStudentContactFormRef = ref()
+const openForm = (type: string, id?: number) => {
+  // console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
+  // demoStudentContactFormRef.value.validate()
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await DemoStudentApi.deleteDemoStudent(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await DemoStudentApi.exportDemoStudent(queryParams)
+    download.excel(data, '学生.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 选中行操作 */
+const handleCurrentChange = (row) => {
+  console.log(currentRow.value, '==== currentRow.value ====')
+  console.log(row, '==== row ====')
+  currentRow.value = row
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

From 55f6e4ca25eb246d6c49327e0b23b6839d187c19 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 10 Nov 2023 23:01:36 +0800
Subject: [PATCH 45/77] =?UTF-8?q?=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=9A?=
 =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E5=88=97=E8=A1=A8=E7=BC=96=E8=BE=91=E7=9A=84?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E7=BB=84=E4=BB=B6=E6=83=85=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UploadFile/src/UploadFile.vue  |  2 +
 .../infra/demo02/DemoStudentContactForm.vue   | 68 +++++++++++++++++--
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index 6895440b..bba466a7 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -144,6 +144,8 @@ watch(
     } else if (isArray(props.modelValue)) {
       // 情况2：字符串
       files.concat(props.modelValue)
+    } else if (props.modelValue === undefined) {
+      // 情况3：undefined 不处理
     } else {
       throw new Error('不支持的 modelValue 类型')
     }
diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
index 50c44263..694aadac 100644
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ b/src/views/infra/demo02/DemoStudentContactForm.vue
@@ -9,20 +9,73 @@
   >
     <el-table :data="formData" class="-mt-10px">
       <el-table-column label="序号" type="index" width="100" />
-      <el-table-column label="名字" prop="name" width="300">
+      <el-table-column label="名字" prop="name" width="50">
         <template #default="row">
           <el-form-item class="mb-0px!">
             <el-input v-model="row.name" placeholder="请输入名字" />
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="手机号码">
+      <el-table-column label="手机号码" width="150">
         <template #default="{ row, $index }">
           <el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
             <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
           </el-form-item>
         </template>
       </el-table-column>
+      <el-table-column label="类型" width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.javaType`" :rules="formRules.javaType" class="mb-0px!">
+            <el-select v-model="row.javaType">
+              <el-option label="Long" value="Long" />
+              <el-option label="String" value="String" />
+              <el-option label="Integer" value="Integer" />
+              <el-option label="Double" value="Double" />
+              <el-option label="BigDecimal" value="BigDecimal" />
+              <el-option label="LocalDateTime" value="LocalDateTime" />
+              <el-option label="Boolean" value="Boolean" />
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="多选" width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.sex`" :rules="formRules.sex" class="mb-0px!">
+            <el-checkbox-group v-model="row.sex">
+              <el-checkbox key="Long" label="Long">Long</el-checkbox>
+              <el-checkbox key="String" label="String">String</el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="图片上传" width="200">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.pic`" :rules="formRules.pic" class="mb-0px!">
+            <UploadImg v-model="row.pic" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="文件上传" width="200">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.file`" :rules="formRules.file" class="mb-0px!">
+            <UploadFile v-model="row.file" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="大输入框" width="200">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.content`" :rules="formRules.content" class="mb-0px!">
+            <el-input v-model="row.content" type="textarea" placeholder="请输入 content" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="HTML" width="1024">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.html`" :rules="formRules.html" class="mb-0px!">
+            <Editor v-model="row.html" height="150px" />
+          </el-form-item>
+        </template>
+      </el-table-column>
       <el-table-column align="center" fixed="right" label="操作" width="60">
         <template #default="{ $index }">
           <el-button @click="handleDelete($index)" link>—</el-button>
@@ -41,7 +94,10 @@ const props = defineProps<{
 const formLoading = ref(false) // 表单的加载中
 const formData = ref([])
 const formRules = reactive({
-  mobile: [required]
+  mobile: [required],
+  javaType: [required],
+  sex: [required],
+  pic: [required]
 })
 const formRef = ref() // 表单 Ref
 
@@ -53,7 +109,11 @@ watch(
       formData.value = [
         {
           name: '芋艿',
-          mobile: '15601691300'
+          mobile: '15601691300',
+          javaType: undefined,
+          sex: [],
+          pic: undefined,
+          file: undefined
         }
       ]
     } else {

From 6369b334e311f5cc402685d230df8d453d4c5007 Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Sat, 11 Nov 2023 20:50:33 +0800
Subject: [PATCH 46/77] =?UTF-8?q?feat:=20CRM=20=E5=AE=A2=E6=88=B7=E9=99=90?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/customerLimitConfig/index.ts      |  35 +++
 src/api/system/user/index.ts                  |   5 +
 .../CustomerLimitConfigForm.vue               | 222 ++++++++++++++++++
 .../CustomerQuantityLimit.vue                 | 130 ++++++++++
 .../customerLimitConfig/customerLimitConf.ts  |  13 +
 src/views/crm/customerLimitConfig/index.vue   |  20 ++
 src/views/crm/customerPoolConf/index.vue      |   4 +-
 7 files changed, 427 insertions(+), 2 deletions(-)
 create mode 100644 src/api/crm/customerLimitConfig/index.ts
 create mode 100644 src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue
 create mode 100644 src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
 create mode 100644 src/views/crm/customerLimitConfig/customerLimitConf.ts
 create mode 100644 src/views/crm/customerLimitConfig/index.vue

diff --git a/src/api/crm/customerLimitConfig/index.ts b/src/api/crm/customerLimitConfig/index.ts
new file mode 100644
index 00000000..22fde3ea
--- /dev/null
+++ b/src/api/crm/customerLimitConfig/index.ts
@@ -0,0 +1,35 @@
+import request from '@/config/axios'
+
+export interface CustomerLimitConfigVO {
+  id?: number
+  type?: number
+  userIds?: string
+  deptIds?: string
+  maxCount?: number
+  dealCountEnabled?: boolean
+}
+
+// 查询客户限制配置列表
+export const getCustomerLimitConfigPage = async (params) => {
+  return await request.get({ url: `/crm/customer-limit-config/page`, params })
+}
+
+// 查询客户限制配置详情
+export const getCustomerLimitConfig = async (id: number) => {
+  return await request.get({ url: `/crm/customer-limit-config/get?id=` + id })
+}
+
+// 新增客户限制配置
+export const createCustomerLimitConfig = async (data: CustomerLimitConfigVO) => {
+  return await request.post({ url: `/crm/customer-limit-config/create`, data })
+}
+
+// 修改客户限制配置
+export const updateCustomerLimitConfig = async (data: CustomerLimitConfigVO) => {
+  return await request.put({ url: `/crm/customer-limit-config/update`, data })
+}
+
+// 删除客户限制配置
+export const deleteCustomerLimitConfig = async (id: number) => {
+  return await request.delete({ url: `/crm/customer-limit-config/delete?id=` + id })
+}
diff --git a/src/api/system/user/index.ts b/src/api/system/user/index.ts
index 6224f0e8..689fec0d 100644
--- a/src/api/system/user/index.ts
+++ b/src/api/system/user/index.ts
@@ -22,6 +22,11 @@ export const getUserPage = (params: PageParam) => {
   return request.get({ url: '/system/user/page', params })
 }
 
+// 查询所有用户列表
+export const getAllUser = () => {
+  return request.get({ url: '/system/user/all' })
+}
+
 // 查询用户详情
 export const getUser = (id: number) => {
   return request.get({ url: '/system/user/get?id=' + id })
diff --git a/src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue b/src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue
new file mode 100644
index 00000000..006c1349
--- /dev/null
+++ b/src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue
@@ -0,0 +1,222 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="200px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="规则适用人群" prop="userIds">
+        <el-tree-select
+          v-model="formData.userIds"
+          :data="userTree"
+          :props="defaultProps"
+          check-on-click-node
+          multiple
+          filterable
+          node-key="id"
+          placeholder="请选择规则适用人群"
+        />
+      </el-form-item>
+      <el-form-item label="规则适用部门" prop="deptIds">
+        <el-tree-select
+          v-model="formData.deptIds"
+          :data="deptTree"
+          :props="defaultProps"
+          multiple
+          check-strictly
+          filterable
+          node-key="id"
+          placeholder="请选择规则适用部门"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="
+          formData.type === LimitConfType.CUSTOMER_QUANTITY_LIMIT
+            ? '拥有客户数上限'
+            : '锁定客户数上限'
+        "
+        prop="maxCount"
+      >
+        <el-input-number v-model="formData.maxCount" placeholder="请输入数量上限" />
+      </el-form-item>
+      <el-form-item
+        label="成交客户是否占用拥有客户数"
+        v-if="formData.type === LimitConfType.CUSTOMER_QUANTITY_LIMIT"
+        prop="dealCountEnabled"
+      >
+        <el-switch v-model="formData.dealCountEnabled" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as CustomerLimitConfigApi from '@/api/crm/customerLimitConfig'
+import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
+import * as DeptApi from '@/api/system/dept'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as UserApi from '@/api/system/user'
+import { cloneDeep } from 'lodash-es'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  type: undefined,
+  userIds: undefined,
+  deptIds: undefined,
+  maxCount: undefined,
+  dealCountEnabled: false
+})
+const formRules = reactive({
+  type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
+  maxCount: [{ required: true, message: '数量上限不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const deptTree = ref() // 部门树形结构
+const userTree = ref() // 用户树形结构
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, limitConfType?: LimitConfType) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 获得部门树
+  await getDeptTree()
+  // 获得用户
+  await getUserTree()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await CustomerLimitConfigApi.getCustomerLimitConfig(id)
+    } finally {
+      formLoading.value = false
+    }
+  } else {
+    formData.value.type = limitConfType
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as CustomerLimitConfigApi.CustomerLimitConfigVO
+    if (formType.value === 'create') {
+      await CustomerLimitConfigApi.createCustomerLimitConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await CustomerLimitConfigApi.updateCustomerLimitConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    type: undefined,
+    userIds: undefined,
+    deptIds: undefined,
+    maxCount: undefined,
+    dealCountEnabled: false
+  }
+  formRef.value?.resetFields()
+}
+
+/**
+ * 获取部门树
+ */
+const getDeptTree = async () => {
+  const res = await DeptApi.getSimpleDeptList()
+  deptTree.value = []
+  deptTree.value.push(...handleTree(res))
+}
+
+/**
+ * 获取用户树
+ */
+const getUserTree = async () => {
+  const res = await UserApi.getAllUser()
+  userTree.value = []
+  userTree.value = cloneDeep(unref(deptTree))
+
+  const deptUserMap = {}
+  res.forEach((user) => {
+    if (user.dept) {
+      if (!deptUserMap[user.deptId]) {
+        deptUserMap[user.deptId] = []
+      }
+      deptUserMap[user.deptId].push(user)
+    }
+  })
+
+  handleUserData(userTree.value, deptUserMap)
+}
+
+/**
+ * 处理用户树
+ *
+ * @param deptTree
+ * @param deptUserMap
+ */
+const handleUserData = (deptTree, deptUserMap) => {
+  for (let i = 0; i < deptTree.length; i++) {
+    // 如果是用户，就不用继续找部门下的用户
+    if (deptTree[i].isUser) {
+      continue
+    }
+    const users = deptUserMap[deptTree[i].id]
+    if (users) {
+      if (!deptTree[i].children) {
+        deptTree[i].children = []
+      }
+      deptTree[i].children.push(
+        ...users.map((user) => {
+          return {
+            id: user.id,
+            name: user.username + '-' + user.nickname,
+            isUser: true,
+            // 用户状态为关闭
+            disabled: user.status === 1
+          }
+        })
+      )
+    }
+
+    if (deptTree[i].children && deptTree[i].children.length !== 0) {
+      handleUserData(deptTree[i].children, deptUserMap)
+    }
+
+    // 非人员选项禁用
+    deptTree[i].disabled = true
+    // 将非人员的 id 置为空
+    deptTree[i].id = 'null'
+  }
+}
+</script>
diff --git a/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue b/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
new file mode 100644
index 00000000..fec9acb4
--- /dev/null
+++ b/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
@@ -0,0 +1,130 @@
+<template>
+  <el-button
+    type="primary"
+    plain
+    @click="openForm('create')"
+    v-hasPermi="['crm:customer-limit-config:create']"
+  >
+    <Icon icon="ep:plus" class="mr-5px" /> 新增
+  </el-button>
+  <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table-column label="编号" align="center" prop="id" />
+    <el-table-column label="规则类型" align="center" prop="type" />
+    <el-table-column label="规则适用人群" align="center" prop="userNames" />
+    <el-table-column label="规则适用部门" align="center" prop="deptNames" />
+    <el-table-column
+      :label="
+        confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT ? '拥有客户数上限' : '锁定客户数上限'
+      "
+      align="center"
+      prop="maxCount"
+    />
+    <el-table-column
+      v-if="confType === LimitConfType.CUSTOMER_QUANTITY_LIMIT"
+      label="成交客户是否占用拥有客户数"
+      align="center"
+      prop="dealCountEnabled"
+    >
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.dealCountEnabled" />
+      </template>
+    </el-table-column>
+    <el-table-column
+      label="创建时间"
+      align="center"
+      prop="createTime"
+      :formatter="dateFormatter"
+      width="180px"
+    />
+    <el-table-column label="操作" align="center" min-width="110" fixed="right">
+      <template #default="scope">
+        <el-button
+          link
+          type="primary"
+          @click="openForm('update', scope.row.id)"
+          v-hasPermi="['crm:customer-limit-config:update']"
+        >
+          编辑
+        </el-button>
+        <el-button
+          link
+          type="danger"
+          @click="handleDelete(scope.row.id)"
+          v-hasPermi="['crm:customer-limit-config:delete']"
+        >
+          删除
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <!-- 分页 -->
+  <Pagination
+    :total="total"
+    v-model:page="queryParams.pageNo"
+    v-model:limit="queryParams.pageSize"
+    @pagination="getList"
+  />
+
+  <!-- 表单弹窗：添加/修改 -->
+  <CustomerLimitConfigForm ref="formRef" @success="getList" />
+</template>
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as CustomerLimitConfigApi from '@/api/crm/customerLimitConfig'
+import CustomerLimitConfigForm from '@/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue'
+import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
+import { DICT_TYPE } from '@/utils/dict'
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  type: confType
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CustomerLimitConfigApi.getCustomerLimitConfigPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id, confType)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await CustomerLimitConfigApi.deleteCustomerLimitConfig(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+const { confType } = defineProps<{ confType: LimitConfType }>()
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/crm/customerLimitConfig/customerLimitConf.ts b/src/views/crm/customerLimitConfig/customerLimitConf.ts
new file mode 100644
index 00000000..188e6ef4
--- /dev/null
+++ b/src/views/crm/customerLimitConfig/customerLimitConf.ts
@@ -0,0 +1,13 @@
+/**
+ * 客户限制配置类型
+ */
+export enum LimitConfType {
+  /**
+   * 拥有客户数限制
+   */
+  CUSTOMER_QUANTITY_LIMIT = 1,
+  /**
+   * 锁定客户数限制
+   */
+  CUSTOMER_LOCK_LIMIT = 2
+}
diff --git a/src/views/crm/customerLimitConfig/index.vue b/src/views/crm/customerLimitConfig/index.vue
new file mode 100644
index 00000000..49582ca1
--- /dev/null
+++ b/src/views/crm/customerLimitConfig/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-tabs tab-position="left" style="height: 200px">
+      <el-tab-pane label="拥有客户数限制">
+        <CustomerQuantityLimit :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
+      </el-tab-pane>
+      <el-tab-pane label="锁定客户数限制">
+        <CustomerQuantityLimit :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import CustomerQuantityLimit from '@/views/crm/customerLimitConfig/CustomerQuantityLimit.vue'
+import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
+
+defineOptions({ name: 'CrmCustomerLimitConfig' })
+</script>
diff --git a/src/views/crm/customerPoolConf/index.vue b/src/views/crm/customerPoolConf/index.vue
index 1ea61f94..92467fee 100644
--- a/src/views/crm/customerPoolConf/index.vue
+++ b/src/views/crm/customerPoolConf/index.vue
@@ -87,7 +87,6 @@ const getConfig = async () => {
       return
     }
     formData.value = data
-    console.log(formData.value)
   } finally {
     formLoading.value = false
   }
@@ -107,7 +106,8 @@ const onSubmit = async () => {
     const data = formData.value as unknown as CustomerPoolConfApi.CustomerPoolConfigVO
     await CustomerPoolConfApi.updateCustomerPoolConfig(data)
     message.success(t('common.updateSuccess'))
-    dialogVisible.value = false
+    await getConfig()
+    formLoading.value = false
   } finally {
     formLoading.value = false
   }

From a7f86dfd8bdc2813263d8a449d1b0efeec8fd490 Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Sat, 11 Nov 2023 21:06:11 +0800
Subject: [PATCH 47/77] =?UTF-8?q?feat:=20CRM=20=E5=AE=A2=E6=88=B7=E9=99=90?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../crm/customer/detail/CustomerDetails.vue   | 160 +++++++++---------
 src/views/crm/customer/detail/index.vue       |   3 +-
 .../CustomerQuantityLimit.vue                 |  17 +-
 src/views/crm/customerLimitConfig/index.vue   |   2 +-
 4 files changed, 100 insertions(+), 82 deletions(-)

diff --git a/src/views/crm/customer/detail/CustomerDetails.vue b/src/views/crm/customer/detail/CustomerDetails.vue
index 2e584bd9..67beae94 100644
--- a/src/views/crm/customer/detail/CustomerDetails.vue
+++ b/src/views/crm/customer/detail/CustomerDetails.vue
@@ -1,82 +1,86 @@
 <template>
-  <el-collapse v-model="activeNames">
-    <el-collapse-item name="basicInfo">
-      <template #title>
-        <span class="text-base font-bold">基本信息</span>
-      </template>
-      <el-descriptions :column="4">
-        <el-descriptions-item label="客户名称">
-          {{ customer.name }}
-        </el-descriptions-item>
-        <el-descriptions-item label="所属行业">
-          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
-        </el-descriptions-item>
-        <el-descriptions-item label="客户来源">
-          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="customer.source" />
-        </el-descriptions-item>
-        <el-descriptions-item label="客户等级">
-          <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
-        </el-descriptions-item>
-        <el-descriptions-item label="手机">
-          {{ customer.mobile }}
-        </el-descriptions-item>
-        <el-descriptions-item label="电话">
-          {{ customer.telephone }}
-        </el-descriptions-item>
-        <el-descriptions-item label="邮箱">
-          {{ customer.email }}
-        </el-descriptions-item>
-        <el-descriptions-item label="QQ">
-          {{ customer.qq }}
-        </el-descriptions-item>
-        <el-descriptions-item label="微信">
-          {{ customer.wechat }}
-        </el-descriptions-item>
-        <el-descriptions-item label="网址">
-          {{ customer.website }}
-        </el-descriptions-item>
-        <el-descriptions-item label="所在地">
-          {{ customer.areaName }}
-        </el-descriptions-item>
-        <el-descriptions-item label="详细地址">
-          {{ customer.detailAddress }}
-        </el-descriptions-item>
-        <el-descriptions-item label="下次联系时间">
-          {{ customer.contactNextTime ? formatDate(customer.contactNextTime, 'YYYY-MM-DD') : '空' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="最后跟进时间">
-          {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
-        </el-descriptions-item>
-      </el-descriptions>
-      <el-descriptions :column="1">
-        <el-descriptions-item label="客户描述">
-          {{ customer.description }}
-        </el-descriptions-item>
-        <el-descriptions-item label="备注">
-          {{ customer.remark }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-collapse-item>
-    <el-collapse-item name="systemInfo">
-      <template #title>
-        <span class="text-base font-bold">系统信息</span>
-      </template>
-      <el-descriptions :column="2">
-        <el-descriptions-item label="负责人">
-          {{ customer.ownerUserName }}
-        </el-descriptions-item>
-        <el-descriptions-item label="创建人">
-          {{ customer.creatorName }}
-        </el-descriptions-item>
-        <el-descriptions-item label="创建时间">
-          {{ customer.createTime ? formatDate(customer.createTime) : '空' }}
-        </el-descriptions-item>
-        <el-descriptions-item label="更新时间">
-          {{ customer.updateTime ? formatDate(customer.updateTime) : '空' }}
-        </el-descriptions-item>
-      </el-descriptions>
-    </el-collapse-item>
-  </el-collapse>
+  <ContentWrap>
+    <el-collapse class="" v-model="activeNames">
+      <el-collapse-item name="basicInfo">
+        <template #title>
+          <span class="text-base font-bold">基本信息</span>
+        </template>
+        <el-descriptions :column="4">
+          <el-descriptions-item label="客户名称">
+            {{ customer.name }}
+          </el-descriptions-item>
+          <el-descriptions-item label="所属行业">
+            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="customer.industryId" />
+          </el-descriptions-item>
+          <el-descriptions-item label="客户来源">
+            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="customer.source" />
+          </el-descriptions-item>
+          <el-descriptions-item label="客户等级">
+            <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="customer.level" />
+          </el-descriptions-item>
+          <el-descriptions-item label="手机">
+            {{ customer.mobile }}
+          </el-descriptions-item>
+          <el-descriptions-item label="电话">
+            {{ customer.telephone }}
+          </el-descriptions-item>
+          <el-descriptions-item label="邮箱">
+            {{ customer.email }}
+          </el-descriptions-item>
+          <el-descriptions-item label="QQ">
+            {{ customer.qq }}
+          </el-descriptions-item>
+          <el-descriptions-item label="微信">
+            {{ customer.wechat }}
+          </el-descriptions-item>
+          <el-descriptions-item label="网址">
+            {{ customer.website }}
+          </el-descriptions-item>
+          <el-descriptions-item label="所在地">
+            {{ customer.areaName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="详细地址">
+            {{ customer.detailAddress }}
+          </el-descriptions-item>
+          <el-descriptions-item label="下次联系时间">
+            {{
+              customer.contactNextTime ? formatDate(customer.contactNextTime, 'YYYY-MM-DD') : '空'
+            }}
+          </el-descriptions-item>
+          <el-descriptions-item label="最后跟进时间">
+            {{ customer.contactLastTime ? formatDate(customer.contactLastTime) : '空' }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-descriptions :column="1">
+          <el-descriptions-item label="客户描述">
+            {{ customer.description }}
+          </el-descriptions-item>
+          <el-descriptions-item label="备注">
+            {{ customer.remark }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+      <el-collapse-item name="systemInfo">
+        <template #title>
+          <span class="text-base font-bold">系统信息</span>
+        </template>
+        <el-descriptions :column="2">
+          <el-descriptions-item label="负责人">
+            {{ customer.ownerUserName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建人">
+            {{ customer.creatorName }}
+          </el-descriptions-item>
+          <el-descriptions-item label="创建时间">
+            {{ customer.createTime ? formatDate(customer.createTime) : '空' }}
+          </el-descriptions-item>
+          <el-descriptions-item label="更新时间">
+            {{ customer.updateTime ? formatDate(customer.updateTime) : '空' }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-collapse-item>
+    </el-collapse>
+  </ContentWrap>
 </template>
 <script setup lang="ts">
 import * as CustomerApi from '@/api/crm/customer'
diff --git a/src/views/crm/customer/detail/index.vue b/src/views/crm/customer/detail/index.vue
index f250bc28..dffc49dd 100644
--- a/src/views/crm/customer/detail/index.vue
+++ b/src/views/crm/customer/detail/index.vue
@@ -66,8 +66,7 @@
   <el-col>
     <el-tabs>
       <el-tab-pane label="详细资料">
-        <!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->
-        <CustomerDetails class="ml-2" :customer="customer" />
+        <CustomerDetails :customer="customer" />
       </el-tab-pane>
       <el-tab-pane label="活动" lazy> 活动</el-tab-pane>
       <el-tab-pane label="邮件" lazy> 邮件</el-tab-pane>
diff --git a/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue b/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
index fec9acb4..d796f481 100644
--- a/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
+++ b/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
@@ -1,4 +1,7 @@
 <template>
+  <el-button type="primary" plain @click="handleQuery">
+    <Icon icon="ep:refresh" class="mr-5px" /> 刷新
+  </el-button>
   <el-button
     type="primary"
     plain
@@ -7,7 +10,13 @@
   >
     <Icon icon="ep:plus" class="mr-5px" /> 新增
   </el-button>
-  <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+  <el-table
+    v-loading="loading"
+    :data="list"
+    :stripe="true"
+    :show-overflow-tooltip="true"
+    class="mt-4"
+  >
     <el-table-column label="编号" align="center" prop="id" />
     <el-table-column label="规则类型" align="center" prop="type" />
     <el-table-column label="规则适用人群" align="center" prop="userNames" />
@@ -122,6 +131,12 @@ const handleDelete = async (id: number) => {
 
 const { confType } = defineProps<{ confType: LimitConfType }>()
 
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()
diff --git a/src/views/crm/customerLimitConfig/index.vue b/src/views/crm/customerLimitConfig/index.vue
index 49582ca1..d69543b9 100644
--- a/src/views/crm/customerLimitConfig/index.vue
+++ b/src/views/crm/customerLimitConfig/index.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 列表 -->
   <ContentWrap>
-    <el-tabs tab-position="left" style="height: 200px">
+    <el-tabs tab-position="left">
       <el-tab-pane label="拥有客户数限制">
         <CustomerQuantityLimit :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
       </el-tab-pane>

From ed26142bb0d928af1727de1bf1bf6a5fd4a7c140 Mon Sep 17 00:00:00 2001
From: zyna <chenjidemenglin20@126.com>
Date: Sat, 11 Nov 2023 23:35:18 +0800
Subject: [PATCH 48/77] =?UTF-8?q?crm=E8=81=94=E7=B3=BB=E4=BA=BAinit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/contact/index.ts                  |  65 ++++
 src/router/modules/remaining.ts               |  10 +
 src/views/crm/contact/ContactForm.vue         | 348 ++++++++++++++++++
 src/views/crm/contact/OwerSelect.vue          |  71 ++++
 .../crm/contact/detail/ContactBasicInfo.vue   |  23 ++
 .../crm/contact/detail/ContactDetails.vue     |  93 +++++
 src/views/crm/contact/detail/index.vue        | 147 ++++++++
 src/views/crm/contact/index.vue               | 333 +++++++++++++++++
 8 files changed, 1090 insertions(+)
 create mode 100644 src/api/crm/contact/index.ts
 create mode 100644 src/views/crm/contact/ContactForm.vue
 create mode 100644 src/views/crm/contact/OwerSelect.vue
 create mode 100644 src/views/crm/contact/detail/ContactBasicInfo.vue
 create mode 100644 src/views/crm/contact/detail/ContactDetails.vue
 create mode 100644 src/views/crm/contact/detail/index.vue
 create mode 100644 src/views/crm/contact/index.vue

diff --git a/src/api/crm/contact/index.ts b/src/api/crm/contact/index.ts
new file mode 100644
index 00000000..6ac5a01d
--- /dev/null
+++ b/src/api/crm/contact/index.ts
@@ -0,0 +1,65 @@
+/*
+ * @Author: zyna
+ * @Date: 2023-11-05 13:34:41
+ * @LastEditTime: 2023-11-11 16:20:19
+ * @FilePath: \yudao-ui-admin-vue3\src\api\crm\contact\index.ts
+ * @Description:
+ */
+import request from '@/config/axios'
+
+export interface ContactVO {
+  name: string
+  nextTime: Date
+  mobile: string
+  telephone: string
+  email: string
+  post: string
+  customerId: number
+  address: string
+  remark: string
+  ownerUserId: string
+  lastTime: Date
+  id: number
+  parentId: number
+  qq: number
+  webchat: string
+  sex: number
+  policyMakers: boolean
+  creatorName: string
+  updateTime?: Date
+  createTime?: Date
+  customerName: string
+}
+
+// 查询crm联系人列表
+export const getContactPage = async (params) => {
+  return await request.get({ url: `/crm/contact/page`, params })
+}
+
+// 查询crm联系人详情
+export const getContact = async (id: number) => {
+  return await request.get({ url: `/crm/contact/get?id=` + id })
+}
+
+// 新增crm联系人
+export const createContact = async (data: ContactVO) => {
+  return await request.post({ url: `/crm/contact/create`, data })
+}
+
+// 修改crm联系人
+export const updateContact = async (data: ContactVO) => {
+  return await request.put({ url: `/crm/contact/update`, data })
+}
+
+// 删除crm联系人
+export const deleteContact = async (id: number) => {
+  return await request.delete({ url: `/crm/contact/delete?id=` + id })
+}
+
+// 导出crm联系人 Excel
+export const exportContact = async (params) => {
+  return await request.download({ url: `/crm/contact/export-excel`, params })
+}
+export const simpleAlllist = async () => {
+  return await request.get({ url: `/crm/contact/simpleAlllist` })
+}
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 58eb1733..ae564fe6 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -503,6 +503,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
           hidden: true
         },
         component: () => import('@/views/crm/customer/detail/index.vue')
+      },
+      {
+        path: 'contact/detail/:id',
+        name: 'CrmContactDetail',
+        meta: {
+          title: '联系人详情',
+          noCache: true,
+          hidden: true
+        },
+        component: () => import('@/views/crm/contact/detail/index.vue')
       }
     ]
   }
diff --git a/src/views/crm/contact/ContactForm.vue b/src/views/crm/contact/ContactForm.vue
new file mode 100644
index 00000000..94d50299
--- /dev/null
+++ b/src/views/crm/contact/ContactForm.vue
@@ -0,0 +1,348 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="800">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="130px"
+      v-loading="formLoading"
+      :inline="true"
+    >
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="负责人" prop="ownerUserId">
+        <el-select
+          v-model="ownerUserList"
+          placeholder="请选择负责人"
+          multiple
+          value-key="id"
+          lable-key="nickname"
+          @click="openOwerForm('open')"
+        >
+          <el-option
+            v-for="item in ownerUserList"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户名称" prop="customerName">
+        <el-popover
+          placement="bottom"
+          :width="600"
+          trigger="click"
+          :teleported="false"
+          :visible="showCustomer"
+          :offset="10"
+        >
+          <template #reference>
+            <el-input
+              placeholder="请选择"
+              @click="openCustomerSelect"
+              v-model="formData.customerName"
+            />
+          </template>
+          <el-table :data="list" ref="multipleTableRef" @select="handleSelectionChange">
+            <el-table-column label="选择" type="selection" width="55" />
+            <el-table-column width="100" property="id" label="编号" />
+            <el-table-column width="150" property="name" label="客户名称" />
+            <el-table-column label="客户来源" align="center" prop="source" width="100">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
+              </template>
+            </el-table-column>
+            <el-table-column label="客户等级" align="center" prop="level" width="120">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- 分页 -->
+          <el-row :gutter="20">
+            <el-col>
+              <Pagination
+                :total="total"
+                v-model:page="queryParams.pageNo"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getList"
+                layout="sizes, prev, pager, next"
+              />
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="10" :offset="13">
+              <el-button @click="selectCustomer">确认</el-button>
+              <el-button @click="showCustomer = false">取消</el-button>
+            </el-col>
+          </el-row>
+        </el-popover>
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="formData.sex" placeholder="请选择">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="手机号" prop="mobile">
+        <el-input v-model="formData.mobile" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="座机" prop="telephone">
+        <el-input v-model="formData.telephone" placeholder="请输入座机" style="width: 215px" />
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="formData.email" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="QQ" prop="qq">
+        <el-input v-model="formData.qq" placeholder="请输入QQ" style="width: 215px" />
+      </el-form-item>
+      <el-form-item label="微信" prop="webchat">
+        <el-input v-model="formData.webchat" placeholder="请输入微信" />
+      </el-form-item>
+      <el-form-item label="下次联系时间" prop="nextTime">
+        <el-date-picker
+          v-model="formData.nextTime"
+          type="date"
+          value-format="x"
+          placeholder="选择下次联系时间"
+        />
+      </el-form-item>
+      <el-form-item label="地址" prop="address">
+        <el-input v-model="formData.address" placeholder="请输入地址" />
+      </el-form-item>
+      <el-form-item label="直属上级" prop="parentId">
+        <el-select v-model="formData.parentId" placeholder="请选择">
+          <el-option
+            v-for="item in allContactList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+            :disabled="item.id == formData.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="职位" prop="post">
+        <el-input v-model="formData.post" placeholder="请输入职位" />
+      </el-form-item>
+
+      <el-form-item label="是否关键决策人" prop="policyMakers" style="width: 400px">
+        <el-radio-group v-model="formData.policyMakers">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <OwerSelect
+    ref="owerRef"
+    @confirmOwerSelect="owerSelectValue"
+    :initOwerUser="formData.ownerUserId"
+  />
+</template>
+<script setup lang="ts">
+import * as ContactApi from '@/api/crm/contact'
+import { DICT_TYPE, getIntDictOptions, getBoolDictOptions } from '@/utils/dict'
+import OwerSelect from './OwerSelect.vue'
+import * as UserApi from '@/api/system/user'
+import * as CustomerApi from '@/api/crm/customer'
+import { ElTable } from 'element-plus'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  nextTime: undefined,
+  mobile: undefined,
+  telephone: undefined,
+  email: undefined,
+  customerId: undefined,
+  customerName: undefined,
+  address: undefined,
+  remark: undefined,
+  ownerUserId: undefined,
+  lastTime: undefined,
+  id: undefined,
+  parentId: undefined,
+  name: undefined,
+  post: undefined,
+  qq: undefined,
+  webchat: undefined,
+  sex: undefined,
+  policyMakers: undefined
+})
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  mobile: null,
+  industryId: null,
+  level: null,
+  source: null
+})
+const formRules = reactive({
+  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
+  customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }],
+  ownerUserId: [{ required: true, message: '负责人不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const ownerUserList = ref<any[]>([])
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  allContactList.value = await ContactApi.simpleAlllist()
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ContactApi.getContact(id)
+      userList.value = await UserApi.getSimpleUserList()
+      await gotOwnerUser(formData.value.ownerUserId)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await CustomerApi.getCustomerPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const gotOwnerUser = (owerUserId: any) => {
+  if (owerUserId !== null) {
+    owerUserId.split(',').forEach((item: string) => {
+      userList.value.find((user: { id: any }) => {
+        if (user.id == item) {
+          ownerUserList.value.push(user)
+        }
+      })
+    })
+  }
+}
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  owerSelectValue(ownerUserList)
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ContactApi.ContactVO
+    if (formType.value === 'create') {
+      await ContactApi.createContact(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ContactApi.updateContact(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    nextTime: undefined,
+    mobile: undefined,
+    telephone: undefined,
+    email: undefined,
+    customerId: undefined,
+    address: undefined,
+    remark: undefined,
+    ownerUserId: undefined,
+    lastTime: undefined,
+    id: undefined,
+    parentId: undefined,
+    name: undefined,
+    post: undefined,
+    qq: undefined,
+    webchat: undefined,
+    sex: undefined,
+    policyMakers: undefined
+  }
+  formRef.value?.resetFields()
+  ownerUserList.value = []
+}
+/** 添加/修改操作 */
+const owerRef = ref()
+const openOwerForm = (type: string) => {
+  owerRef.value.open(type, ownerUserList.value)
+}
+
+const owerSelectValue = (value) => {
+  ownerUserList.value = value.value
+  formData.value.ownerUserId = undefined
+  value.value.forEach((item, index) => {
+    if (index != 0) {
+      formData.value.ownerUserId = formData.value.ownerUserId + ',' + item.id
+    } else {
+      formData.value.ownerUserId = item.id
+    }
+  })
+}
+//选择客户
+const showCustomer = ref(false)
+const openCustomerSelect = () => {
+  showCustomer.value = !showCustomer.value
+  queryParams.pageNo = 1
+  getList()
+}
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref()
+const handleSelectionChange = ({}, row) => {
+  multipleSelection.value = row
+  multipleTableRef.value!.clearSelection()
+  multipleTableRef.value!.toggleRowSelection(row, undefined)
+}
+const selectCustomer = () => {
+  formData.value.customerId = multipleSelection.value.id
+  formData.value.customerName = multipleSelection.value.name
+  showCustomer.value = !showCustomer.value
+}
+const allContactList = ref([]) //所有联系人列表
+onMounted(async () => {
+  allContactList.value = await ContactApi.simpleAlllist()
+})
+</script>
diff --git a/src/views/crm/contact/OwerSelect.vue b/src/views/crm/contact/OwerSelect.vue
new file mode 100644
index 00000000..83dd143b
--- /dev/null
+++ b/src/views/crm/contact/OwerSelect.vue
@@ -0,0 +1,71 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
+    <el-transfer
+      v-model="value"
+      :data="data"
+      :titles="transferTitles"
+      :props="transferDataProp"
+      :right-default-checked="[1]"
+    />
+    <el-row justify="end">
+      <el-col :span="4">
+        <el-button type="primary" @click="confirmOwerSelect">确认</el-button>
+      </el-col>
+      <el-col :span="4">
+        <el-button type="primary" @click="confirmOwerSelect">取消</el-button>
+      </el-col>
+    </el-row>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as UserApi from '@/api/system/user'
+import { parseBigInt } from 'jsencrypt/lib/lib/jsbn/jsbn'
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('选择') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('')
+const transferTitles = ref(['待选择', '已选择'])
+const transferDataProp = ref({
+  key: 'id',
+  label: 'nickname'
+})
+const emit = defineEmits(['confirmOwerSelect'])
+const data = ref<UserApi.UserVO[]>([])
+const value = ref<any[]>([])
+const rightDefaultChecked = ref<any[]>([])
+/** 打开弹窗 */
+const open = async (type: string, ownerUserList: any[]) => {
+  dialogVisible.value = true
+  formType.value = type
+  // 修改时，设置数据
+  if (ownerUserList) {
+    formLoading.value = true
+    try {
+      ownerUserList.forEach((item) => {
+        value.value.push(item.id)
+      })
+    } finally {
+      formLoading.value = false
+    }
+  }
+  rightDefaultChecked.value = []
+  data.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+const confirmOwerSelect = () => {
+  const returnData = ref<any[]>([])
+  data.value.forEach((item) => {
+    if (value.value.indexOf(item.id) > -1) {
+      returnData.value.push(item)
+    }
+  })
+  emit('confirmOwerSelect', returnData)
+  dialogVisible.value = false
+  value.value = []
+}
+</script>
+<style>
+.el-row {
+  margin-top: 20px;
+}
+</style>
diff --git a/src/views/crm/contact/detail/ContactBasicInfo.vue b/src/views/crm/contact/detail/ContactBasicInfo.vue
new file mode 100644
index 00000000..68e37d28
--- /dev/null
+++ b/src/views/crm/contact/detail/ContactBasicInfo.vue
@@ -0,0 +1,23 @@
+<!--
+ * @Author: zyna
+ * @Date: 2023-11-11 14:50:11
+ * @LastEditTime: 2023-11-11 14:52:47
+ * @FilePath: \yudao-ui-admin-vue3\src\views\crm\contact\detail\ContactBasicInfo.vue
+ * @Description: 
+-->
+<template>
+  <el-col>
+    <el-row>
+      <span class="text-xl font-bold">{{ contact.name }}</span>
+    </el-row>
+  </el-col>
+  <el-col class="mt-10px">
+    <!-- TODO 标签 -->
+    <!--    <Icon icon="ant-design:tag-filled" />-->
+  </el-col>
+</template>
+<script setup lang="ts">
+import * as ContactApi from '@/api/crm/contact'
+
+const { contact } = defineProps<{ contact: ContactApi.ContactVO }>()
+</script>
diff --git a/src/views/crm/contact/detail/ContactDetails.vue b/src/views/crm/contact/detail/ContactDetails.vue
new file mode 100644
index 00000000..5091b691
--- /dev/null
+++ b/src/views/crm/contact/detail/ContactDetails.vue
@@ -0,0 +1,93 @@
+<template>
+  <el-collapse v-model="activeNames">
+    <el-collapse-item name="basicInfo">
+      <template #title>
+        <span class="text-base font-bold">基本信息</span>
+      </template>
+      <el-descriptions :column="4">
+        <el-descriptions-item label="姓名">
+          {{ contact.name }}
+        </el-descriptions-item>
+        <el-descriptions-item label="客户名称">
+          {{ contact.customerName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="手机">
+          {{ contact.mobile }}
+        </el-descriptions-item>
+        <el-descriptions-item label="座机">
+          {{ contact.telephone }}
+        </el-descriptions-item>
+        <el-descriptions-item label="邮箱">
+          {{ contact.email }}
+        </el-descriptions-item>
+        <el-descriptions-item label="QQ">
+          {{ contact.qq }}
+        </el-descriptions-item>
+        <el-descriptions-item label="微信">
+          {{ contact.webchat }}
+        </el-descriptions-item>
+        <el-descriptions-item label="详细地址">
+          {{ contact.address }}
+        </el-descriptions-item>
+        <el-descriptions-item label="下次联系时间">
+          {{ contact.nextTime ? formatDate(contact.nextTime) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="性别">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="contact.sex" />
+        </el-descriptions-item>
+        <el-descriptions-item label="备注">
+          {{ contact.remark }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-collapse-item>
+    <el-collapse-item name="systemInfo">
+      <template #title>
+        <span class="text-base font-bold">系统信息</span>
+      </template>
+      <el-descriptions :column="2">
+        <el-descriptions-item label="负责人">
+          {{ gotOwnerUser(contact.ownerUserId) }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建人">
+          {{ contact.creatorName }}
+        </el-descriptions-item>
+        <el-descriptions-item label="创建时间">
+          {{ contact.createTime ? formatDate(contact.createTime) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="更新时间">
+          {{ contact.updateTime ? formatDate(contact.updateTime) : '空' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+<script setup lang="ts">
+import * as ContactApi from '@/api/crm/contact'
+import { DICT_TYPE } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import * as UserApi from '@/api/system/user'
+const { contact } = defineProps<{ contact: ContactApi.ContactVO }>()
+
+// 展示的折叠面板
+const activeNames = ref(['basicInfo', 'systemInfo'])
+const gotOwnerUser = (owerUserId: string) => {
+  let ownerName = ''
+  if (owerUserId !== null && owerUserId != undefined) {
+    owerUserId.split(',').forEach((item: string, index: number) => {
+      if (index != 0) {
+        ownerName =
+          ownerName + ',' + userList.value.find((user: { id: any }) => user.id == item)?.nickname
+      } else {
+        ownerName = userList.value.find((user: { id: any }) => user.id == item)?.nickname || ''
+      }
+    })
+  }
+  return ownerName
+}
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+/** 初始化 **/
+onMounted(async () => {
+  userList.value = await UserApi.getSimpleUserList()
+})
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/crm/contact/detail/index.vue b/src/views/crm/contact/detail/index.vue
new file mode 100644
index 00000000..3ab5778b
--- /dev/null
+++ b/src/views/crm/contact/detail/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div v-loading="loading">
+    <div class="flex items-start justify-between">
+      <div>
+        <!-- 左上：客户基本信息 -->
+        <ContactBasicInfo :contact="contact" />
+      </div>
+      <div>
+        <!-- 右上：按钮 -->
+        <el-button @click="openForm('update', contact.id)" v-hasPermi="['crm:contact:update']">
+          编辑
+        </el-button>
+      </div>
+    </div>
+    <el-row class="mt-10px">
+      <el-button>
+        <Icon icon="ph:calendar-fill" class="mr-5px" />
+        创建任务
+      </el-button>
+      <el-button>
+        <Icon icon="carbon:email" class="mr-5px" />
+        发送邮件
+      </el-button>
+      <el-button>
+        <Icon icon="system-uicons:contacts" class="mr-5px" />
+        创建联系人
+      </el-button>
+      <el-button>
+        <Icon icon="ep:opportunity" class="mr-5px" />
+        创建商机
+      </el-button>
+      <el-button>
+        <Icon icon="clarity:contract-line" class="mr-5px" />
+        创建合同
+      </el-button>
+      <el-button>
+        <Icon icon="icon-park:income-one" class="mr-5px" />
+        创建回款
+      </el-button>
+      <el-button>
+        <Icon icon="fluent:people-team-add-20-filled" class="mr-5px" />
+        添加团队成员
+      </el-button>
+    </el-row>
+  </div>
+  <ContentWrap class="mt-10px">
+    <el-descriptions :column="5" direction="vertical">
+      <el-descriptions-item label="客户名称">
+        {{ contact.customerName }}
+      </el-descriptions-item>
+      <el-descriptions-item label="职务">
+        {{ contact.post }}
+      </el-descriptions-item>
+      <el-descriptions-item label="手机">
+        {{ contact.mobile }}
+      </el-descriptions-item>
+      <el-descriptions-item label="创建时间">
+        {{ contact.createTime ? formatDate(contact.createTime) : '空' }}
+      </el-descriptions-item>
+    </el-descriptions>
+  </ContentWrap>
+  <!-- TODO wanwan：这个 tab 拉满哈，可以更好看； -->
+  <el-col :span="18">
+    <el-tabs>
+      <el-tab-pane label="详细资料">
+        <!-- TODO wanwan：这个 ml-2 是不是可以优化下，不要整个左移，而是里面的内容有个几 px 的偏移，不顶在框里 -->
+        <ContactDetails class="ml-2" :contact="contact" />
+      </el-tab-pane>
+      <el-tab-pane label="活动" lazy> 活动</el-tab-pane>
+      <el-tab-pane label="邮件" lazy> 邮件</el-tab-pane>
+      <el-tab-pane label="工商信息" lazy> 工商信息</el-tab-pane>
+      <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
+      <el-tab-pane label="客户" lazy>
+        <template #label> 客户<el-badge :value="12" class="item" type="primary" /> </template>
+        客户
+      </el-tab-pane>
+      <el-tab-pane label="团队成员" lazy>
+        <template #label> 团队成员<el-badge :value="2" class="item" type="primary" /> </template>
+        团队成员
+      </el-tab-pane>
+      <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
+      <el-tab-pane label="合同" lazy>
+        <template #label> 合同<el-badge :value="3" class="item" type="primary" /> </template>
+        合同
+      </el-tab-pane>
+      <el-tab-pane label="回款" lazy>
+        <template #label> 回款<el-badge :value="4" class="item" type="primary" /> </template>
+        回款
+      </el-tab-pane>
+      <el-tab-pane label="回访" lazy> 回访</el-tab-pane>
+      <el-tab-pane label="发票" lazy> 发票</el-tab-pane>
+    </el-tabs>
+  </el-col>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ContactForm ref="formRef" @success="getContactData(id)" />
+</template>
+
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as ContactApi from '@/api/crm/contact'
+import ContactBasicInfo from '@/views/crm/contact/detail/ContactBasicInfo.vue'
+import ContactDetails from '@/views/crm/contact/detail/ContactDetails.vue'
+import ContactForm from '@/views/crm/contact/ContactForm.vue'
+import { formatDate } from '@/utils/formatTime'
+import * as CustomerApi from '@/api/crm/customer'
+
+defineOptions({ name: 'ContactDetail' })
+const { delView } = useTagsViewStore() // 视图操作
+const route = useRoute()
+const { currentRoute } = useRouter() // 路由
+const id = Number(route.params.id)
+const loading = ref(true) // 加载中
+// 联系人详情
+const contact = ref<ContactApi.ContactVO>({} as ContactApi.ContactVO)
+/**
+ * 获取详情
+ *
+ * @param id
+ */
+const getContactData = async (id: number) => {
+  loading.value = true
+  try {
+    contact.value = await ContactApi.getContact(id)
+  } finally {
+    loading.value = false
+  }
+}
+
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/**
+ * 初始化
+ */
+onMounted(async () => {
+  if (!id) {
+    ElMessage.warning('参数错误，联系人不能为空！')
+    delView(unref(currentRoute))
+    return
+  }
+  await getContactData(id)
+})
+</script>
diff --git a/src/views/crm/contact/index.vue b/src/views/crm/contact/index.vue
new file mode 100644
index 00000000..3e0b3526
--- /dev/null
+++ b/src/views/crm/contact/index.vue
@@ -0,0 +1,333 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="客户编号" prop="customerId">
+        <el-input
+          v-model="queryParams.customerId"
+          placeholder="请输入客户编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="姓名" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入姓名"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="手机号" prop="mobile">
+        <el-input
+          v-model="queryParams.mobile"
+          placeholder="请输入手机号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="座机" prop="telephone">
+        <el-input
+          v-model="queryParams.telephone"
+          placeholder="请输入电话"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+
+      <el-form-item label="QQ" prop="qq">
+        <el-input
+          v-model="queryParams.qq"
+          placeholder="请输入QQ"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="微信" prop="webchat">
+        <el-input
+          v-model="queryParams.webchat"
+          placeholder="请输入微信"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="电子邮箱" prop="email">
+        <el-input
+          v-model="queryParams.email"
+          placeholder="请输入电子邮箱"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button type="primary" @click="openForm('create')" v-hasPermi="['crm:contact:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['crm:contact:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="姓名" fixed="left" align="center" prop="name">
+        <template #default="scope">
+          <el-link type="primary" :underline="false" @click="openDetail(scope.row.id)">{{
+            scope.row.name
+          }}</el-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="客户名称" fixed="left" align="center" prop="customerName" />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="职位" align="center" prop="post" />
+      <el-table-column label="是否关键决策人" align="center" prop="policyMakers">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.policyMakers" />
+        </template>
+      </el-table-column>
+      <el-table-column label="直属上级" align="center" prop="parentId">
+        <template #default="scope">
+          {{ allContactList.find((contact) => contact.id === scope.row.parentId)?.name }}
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号" align="center" prop="mobile" />
+      <el-table-column label="座机" align="center" prop="telephone" />
+      <el-table-column label="QQ" align="center" prop="qq" />
+      <el-table-column label="微信" align="center" prop="webchat" />
+      <el-table-column label="邮箱" align="center" prop="email" />
+      <el-table-column label="地址" align="center" prop="address" />
+      <el-table-column
+        label="下次联系时间"
+        align="center"
+        prop="nextTime"
+        width="180px"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column
+        label="最后跟进时间"
+        align="center"
+        prop="lastTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="负责人" align="center" prop="ownerUserId">
+        <template #default="scope">
+          {{ gotOwnerUser(scope.row.ownerUserId) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="所属部门" align="center" prop="ownerUserId" /> -->
+      <el-table-column
+        label="更新时间"
+        align="center"
+        prop="updateTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <!-- <el-table-column
+        label="创建人"
+        align="center"
+        prop="creator"
+        :formatter="dateFormatter"
+        width="180px"
+      >
+        <template #default="scope">
+          {{ userList.find((user) => user.id === scope.row.creator)?.nickname }}
+        </template>
+      </el-table-column> -->
+      <el-table-column label="操作" align="center" fixed="right" width="200">
+        <template #default="scope">
+          <el-button
+            plain
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['crm:contact:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            plain
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['crm:contact:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ContactForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as ContactApi from '@/api/crm/contact'
+import ContactForm from './ContactForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+import * as UserApi from '@/api/system/user'
+import * as CustomerApi from '@/api/crm/customer'
+
+defineOptions({ name: 'CrmContact' })
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  nextTime: [],
+  mobile: null,
+  telephone: null,
+  email: null,
+  customerId: null,
+  address: null,
+  remark: null,
+  ownerUserId: null,
+  createTime: [],
+  lastTime: [],
+  parentId: null,
+  name: null,
+  post: null,
+  qq: null,
+  webchat: null,
+  sex: null,
+  policyMakers: null
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ContactApi.getContactPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ContactApi.deleteContact(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ContactApi.exportContact(queryParams)
+    download.excel(data, '联系人.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+const gotOwnerUser = (owerUserId: string) => {
+  let ownerName = ''
+  if (owerUserId !== null) {
+    owerUserId.split(',').forEach((item: string, index: number) => {
+      if (index != 0) {
+        ownerName =
+          ownerName + ',' + userList.value.find((user: { id: any }) => user.id == item)?.nickname
+      } else {
+        ownerName = userList.value.find((user: { id: any }) => user.id == item)?.nickname || ''
+      }
+    })
+  }
+  return ownerName
+}
+/** 详情页面 */
+/** 打开客户详情 */
+const { push } = useRouter()
+const openDetail = (id: number) => {
+  push({ name: 'CrmContactDetail', params: { id } })
+}
+
+const allContactList = ref([]) //所有联系人列表
+const allCustomerList = ref([]) //客户列表
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  userList.value = await UserApi.getSimpleUserList()
+  allContactList.value = await ContactApi.simpleAlllist()
+})
+</script>

From 702f23e6727f57340f5f0e3840fee0a59db3bcbf Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Sun, 12 Nov 2023 14:34:25 +0800
Subject: [PATCH 49/77] =?UTF-8?q?feat:=20CRM=20=E5=AE=A2=E6=88=B7=E9=99=90?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...stomerQuantityLimit.vue => CustomerLimitConfDetails.vue} | 2 ++
 src/views/crm/customerLimitConfig/index.vue                 | 6 +++---
 2 files changed, 5 insertions(+), 3 deletions(-)
 rename src/views/crm/customerLimitConfig/{CustomerQuantityLimit.vue => CustomerLimitConfDetails.vue} (98%)

diff --git a/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue b/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
similarity index 98%
rename from src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
rename to src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
index d796f481..dd31961e 100644
--- a/src/views/crm/customerLimitConfig/CustomerQuantityLimit.vue
+++ b/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
@@ -84,6 +84,8 @@ import CustomerLimitConfigForm from '@/views/crm/customerLimitConfig/CustomerLim
 import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
 import { DICT_TYPE } from '@/utils/dict'
 
+defineOptions({ name: 'CustomerLimitConfDetails' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
diff --git a/src/views/crm/customerLimitConfig/index.vue b/src/views/crm/customerLimitConfig/index.vue
index d69543b9..48f2eac2 100644
--- a/src/views/crm/customerLimitConfig/index.vue
+++ b/src/views/crm/customerLimitConfig/index.vue
@@ -3,17 +3,17 @@
   <ContentWrap>
     <el-tabs tab-position="left">
       <el-tab-pane label="拥有客户数限制">
-        <CustomerQuantityLimit :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
+        <CustomerLimitConfDetails :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
       </el-tab-pane>
       <el-tab-pane label="锁定客户数限制">
-        <CustomerQuantityLimit :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
+        <CustomerLimitConfDetails :confType="LimitConfType.CUSTOMER_LOCK_LIMIT" />
       </el-tab-pane>
     </el-tabs>
   </ContentWrap>
 </template>
 
 <script setup lang="ts">
-import CustomerQuantityLimit from '@/views/crm/customerLimitConfig/CustomerQuantityLimit.vue'
+import CustomerLimitConfDetails from '@/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue'
 import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
 
 defineOptions({ name: 'CrmCustomerLimitConfig' })

From 49ebadd748157cb814a7a203f449a0feb2ed23c3 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Sun, 12 Nov 2023 19:29:24 +0800
Subject: [PATCH 50/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E5=B9=BF=E5=91=8A=E9=AD=94=E6=96=B9=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ComponentContainer.vue         |   7 +
 .../components/mobile/Carousel/index.vue      |   2 +-
 .../components/mobile/MagicCube/config.ts     |  48 ++++
 .../components/mobile/MagicCube/index.vue     |  73 +++++
 .../components/mobile/MagicCube/property.vue  |  76 +++++
 src/components/DiyEditor/util.ts              |   2 +-
 src/components/MagicCubeEditor/index.vue      | 270 ++++++++++++++++++
 src/components/MagicCubeEditor/util.ts        |  72 +++++
 .../mall/promotion/diy/template/decorate.vue  |   1 -
 9 files changed, 548 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DiyEditor/components/mobile/MagicCube/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/MagicCube/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/MagicCube/property.vue
 create mode 100644 src/components/MagicCubeEditor/index.vue
 create mode 100644 src/components/MagicCubeEditor/util.ts

diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue
index 6c6463f2..2d8c2f13 100644
--- a/src/components/DiyEditor/components/ComponentContainer.vue
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
@@ -135,8 +135,11 @@ $toolbar-position: -55px;
     position: relative;
     z-index: 1;
   }
+  /* 用于包裹组件，为组件提供 组件名称、工具栏、边框等样式 */
   .component-wrap {
     z-index: 0;
+    // 不可以被点击
+    // component-wrap会遮挡组件，导致组件不能触发鼠标事件，所以这里要先禁用，然后在组件名称、工具栏上开启。
     pointer-events: none;
     display: block;
     position: absolute;
@@ -146,6 +149,8 @@ $toolbar-position: -55px;
     height: 100%;
     /* 左侧：组件名称 */
     .component-name {
+      // 可以被点击
+      pointer-events: auto;
       display: block;
       position: absolute;
       width: 80px;
@@ -174,6 +179,8 @@ $toolbar-position: -55px;
     }
     /* 右侧：组件操作工具栏 */
     .component-toolbar {
+      // 可以被点击
+      pointer-events: auto;
       display: none;
       position: absolute;
       top: 0;
diff --git a/src/components/DiyEditor/components/mobile/Carousel/index.vue b/src/components/DiyEditor/components/mobile/Carousel/index.vue
index 940a9a56..360b4a49 100644
--- a/src/components/DiyEditor/components/mobile/Carousel/index.vue
+++ b/src/components/DiyEditor/components/mobile/Carousel/index.vue
@@ -21,7 +21,7 @@
     </el-carousel>
     <div
       v-if="property.indicator === 'number'"
-      class="absolute p-y-2px bottom-10px right-10px rounded-xl bg-black p-x-8px text-10px text-white opacity-40"
+      class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40"
       >{{ currentIndex }} / {{ property.items.length }}</div
     >
   </div>
diff --git a/src/components/DiyEditor/components/mobile/MagicCube/config.ts b/src/components/DiyEditor/components/mobile/MagicCube/config.ts
new file mode 100644
index 00000000..ce5d21a3
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MagicCube/config.ts
@@ -0,0 +1,48 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 广告魔方属性 */
+export interface MagicCubeProperty {
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间隔
+  space: number
+  // 导航菜单列表
+  list: MagicCubeItemProperty[]
+  // 组件样式
+  style: ComponentStyle
+}
+/** 广告魔方项目属性 */
+export interface MagicCubeItemProperty {
+  // 图标链接
+  imgUrl: string
+  // 链接
+  url: string
+  // 宽
+  width: number
+  // 高
+  height: number
+  // 上
+  top: number
+  // 左
+  left: number
+}
+
+// 定义组件
+export const component = {
+  id: 'MagicCube',
+  name: '广告魔方',
+  icon: 'fluent:puzzle-cube-piece-20-filled',
+  property: {
+    borderRadiusTop: 0,
+    borderRadiusBottom: 0,
+    space: 0,
+    list: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<MagicCubeProperty>
diff --git a/src/components/DiyEditor/components/mobile/MagicCube/index.vue b/src/components/DiyEditor/components/mobile/MagicCube/index.vue
new file mode 100644
index 00000000..48fb6c75
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MagicCube/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div
+    class="relative"
+    :style="{ height: `${rowCount * CUBE_SIZE}px`, width: `${4 * CUBE_SIZE}px` }"
+  >
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="absolute"
+      :style="{
+        width: `${item.width * CUBE_SIZE - property.space * 2}px`,
+        height: `${item.height * CUBE_SIZE - property.space * 2}px`,
+        margin: `${property.space}px`,
+        top: `${item.top * CUBE_SIZE}px`,
+        left: `${item.left * CUBE_SIZE}px`
+      }"
+    >
+      <el-image
+        class="h-full w-full"
+        fit="cover"
+        :src="item.imgUrl"
+        :style="{
+          borderTopLeftRadius: `${property.borderRadiusTop}px`,
+          borderTopRightRadius: `${property.borderRadiusTop}px`,
+          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+          borderBottomRightRadius: `${property.borderRadiusBottom}px`
+        }"
+      >
+        <template #error>
+          <div class="image-slot">
+            <div
+              class="flex items-center justify-center"
+              :style="{
+                width: `${item.width * CUBE_SIZE}px`,
+                height: `${item.height * CUBE_SIZE}px`
+              }"
+            >
+              <Icon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
+            </div>
+          </div>
+        </template>
+      </el-image>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MagicCubeProperty } from './config'
+
+/** 广告魔方 */
+defineOptions({ name: 'MagicCube' })
+const props = defineProps<{ property: MagicCubeProperty }>()
+// 一个方块的大小
+const CUBE_SIZE = 93.75
+/**
+ * 计算方块的行数
+ * 行数用于计算魔方的总体高度，存在以下情况：
+ * 1. 没有数据时，默认就只显示一行的高度
+ * 2. 底部的空白不算高度，例如只有第一行有数据，那么就只显示一行的高度
+ * 3. 顶部及中间的空白算高度，例如一共有四行，只有最后一行有数据，那么也显示四行的高度
+ */
+const rowCount = computed(() => {
+  let count = 0
+  if (props.property.list.length > 0) {
+    // 最大行号
+    count = Math.max(...props.property.list.map((item) => item.bottom))
+  }
+  // 行号从 0 开始，所以加 1
+  return count + 1
+})
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/MagicCube/property.vue b/src/components/DiyEditor/components/mobile/MagicCube/property.vue
new file mode 100644
index 00000000..57c0af79
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/MagicCube/property.vue
@@ -0,0 +1,76 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <el-form label-width="80px" :model="formData" class="m-t-8px">
+      <el-text tag="p"> 魔方设置 </el-text>
+      <el-text type="info" size="small"> 每格尺寸187 * 187 </el-text>
+      <MagicCubeEditor
+        class="m-y-16px"
+        v-model="formData.list"
+        :rows="4"
+        :cols="4"
+        @hot-area-selected="handleHotAreaSelected"
+      />
+      <template v-for="(hotArea, index) in formData.list" :key="index">
+        <template v-if="selectedHotAreaIndex === index">
+          <el-form-item label="上传图片" :prop="`list[${index}].imgUrl`">
+            <UploadImg v-model="hotArea.imgUrl" height="80px" width="80px" />
+          </el-form-item>
+          <el-form-item label="链接" :prop="`list[${index}].url`">
+            <el-input v-model="hotArea.url" placeholder="请输入链接" />
+          </el-form-item>
+        </template>
+      </template>
+      <el-form-item label="上圆角" prop="borderRadiusTop">
+        <el-slider
+          v-model="formData.borderRadiusTop"
+          :max="100"
+          :min="0"
+          show-input
+          input-size="small"
+          :show-input-controls="false"
+        />
+      </el-form-item>
+      <el-form-item label="下圆角" prop="borderRadiusBottom">
+        <el-slider
+          v-model="formData.borderRadiusBottom"
+          :max="100"
+          :min="0"
+          show-input
+          input-size="small"
+          :show-input-controls="false"
+        />
+      </el-form-item>
+      <el-form-item label="间隔" prop="space">
+        <el-slider
+          v-model="formData.space"
+          :max="100"
+          :min="0"
+          show-input
+          input-size="small"
+          :show-input-controls="false"
+        />
+      </el-form-item>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import { MagicCubeProperty } from '@/components/DiyEditor/components/mobile/MagicCube/config'
+
+/** 广告魔方属性面板 */
+defineOptions({ name: 'MagicCubeProperty' })
+
+const props = defineProps<{ modelValue: MagicCubeProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+
+// 选中的热区
+const selectedHotAreaIndex = ref(-1)
+const handleHotAreaSelected = (_: any, index: number) => {
+  selectedHotAreaIndex.value = index
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/util.ts b/src/components/DiyEditor/util.ts
index 5ae0a93f..8f8c2c0c 100644
--- a/src/components/DiyEditor/util.ts
+++ b/src/components/DiyEditor/util.ts
@@ -105,7 +105,7 @@ export const PAGE_LIBS = [
   {
     name: '图文组件',
     extended: true,
-    components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider']
+    components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider', 'MagicCube']
   },
   { name: '商品组件', extended: true, components: ['ProductCard'] },
   {
diff --git a/src/components/MagicCubeEditor/index.vue b/src/components/MagicCubeEditor/index.vue
new file mode 100644
index 00000000..26ea179d
--- /dev/null
+++ b/src/components/MagicCubeEditor/index.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="relative">
+    <table class="cube-table">
+      <!-- 底层：魔方矩阵 -->
+      <tbody>
+        <tr v-for="(rowCubes, row) in cubes" :key="row">
+          <td
+            v-for="(cube, col) in rowCubes"
+            :key="col"
+            :class="['cube', { active: cube.active }]"
+            :style="{
+              width: `${cubeSize}px`,
+              height: `${cubeSize}px`
+            }"
+            @click="handleCubeClick(row, col)"
+            @mouseenter="handleCellHover(row, col)"
+          >
+            <Icon icon="ep-plus" />
+          </td>
+        </tr>
+      </tbody>
+      <!-- 顶层：热区 -->
+      <div
+        v-for="(hotArea, index) in hotAreas"
+        :key="index"
+        class="hot-area"
+        :style="{
+          top: `${cubeSize * hotArea.top}px`,
+          left: `${cubeSize * hotArea.left}px`,
+          height: `${cubeSize * hotArea.height}px`,
+          width: `${cubeSize * hotArea.width}px`
+        }"
+        @click="handleHotAreaSelected(hotArea, index)"
+        @mouseover="exitHotAreaSelectMode"
+      >
+        <!-- 右上角热区删除按钮 -->
+        <div
+          v-if="selectedHotAreaIndex === index"
+          class="btn-delete"
+          @click="handleDeleteHotArea(index)"
+        >
+          <Icon icon="ep:circle-close-filled" />
+        </div>
+        {{ `${hotArea.width}×${hotArea.height}` }}
+      </div>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import * as vueTypes from 'vue-types'
+import { Point, Rect, isContains, isOverlap, createRect } from './util'
+
+// 魔方编辑器
+// 有两部分组成：
+// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+//    操作方法：
+//    1.1 点击其中一个方块就会进入热区选择模式
+//    1.2 再次点击另外一个方块时，结束热区选择模式
+//    1.3 在两个方块中间的区域创建热区
+//    如果两次点击的都是同一方块，就只创建一个格子的热区
+// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+defineOptions({ name: 'MagicCubeEditor' })
+
+/**
+ * 方块
+ * @property active 是否激活
+ */
+type Cube = Point & { active: boolean }
+
+// 定义属性
+const props = defineProps({
+  // 热区列表
+  modelValue: vueTypes.array<any>().isRequired,
+  // 行数，默认 4 行
+  rows: propTypes.number.def(4),
+  // 列数，默认 4 列
+  cols: propTypes.number.def(4),
+  // 方块大小，单位px，默认75px
+  cubeSize: propTypes.number.def(75)
+})
+
+// 魔方矩阵：所有的方块
+const cubes = ref<Cube[][]>([])
+// 监听行数、列数变化
+watch(
+  () => [props.rows, props.cols],
+  () => {
+    // 清空魔方
+    cubes.value = []
+    if (!props.rows || !props.cols) return
+
+    // 初始化魔方
+    for (let row = 0; row < props.rows; row++) {
+      cubes.value[row] = []
+      for (let col = 0; col < props.cols; col++) {
+        cubes.value[row].push({ x: col, y: row, active: false })
+      }
+    }
+  },
+  { immediate: true }
+)
+
+// 热区列表
+const hotAreas = ref<Rect[]>([])
+// 初始化热区
+watch(
+  () => props.modelValue,
+  () => (hotAreas.value = props.modelValue || []),
+  { immediate: true }
+)
+
+// 热区起始方块
+const hotAreaBeginCube = ref<Cube>()
+// 是否开启了热区选择模式
+const isHotAreaSelectMode = () => !!hotAreaBeginCube.value
+/**
+ * 处理鼠标点击方块
+ *
+ * @param currentRow 当前行号
+ * @param currentCol 当前列号
+ */
+const handleCubeClick = (currentRow: number, currentCol: number) => {
+  const currentCube = cubes.value[currentRow][currentCol]
+  // 情况1：进入热区选择模式
+  if (!isHotAreaSelectMode()) {
+    hotAreaBeginCube.value = currentCube
+    hotAreaBeginCube.value.active = true
+    return
+  }
+
+  // 情况2：结束热区选择模式
+  hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube))
+  // 结束热区选择模式
+  exitHotAreaSelectMode()
+  // 创建后就选中热区
+  let hotAreaIndex = hotAreas.value.length - 1
+  handleHotAreaSelected(hotAreas.value[hotAreaIndex], hotAreaIndex)
+  // 发送热区变动通知
+  emitUpdateModelValue()
+}
+/**
+ * 处理鼠标经过方块
+ *
+ * @param currentRow 当前行号
+ * @param currentCol 当前列号
+ */
+const handleCellHover = (currentRow: number, currentCol: number) => {
+  // 当前没有进入热区选择模式
+  if (!isHotAreaSelectMode()) return
+
+  // 当前已选的区域
+  const currentSelectedArea = createRect(
+    hotAreaBeginCube.value!,
+    cubes.value[currentRow][currentCol]
+  )
+  // 热区不允许重叠
+  for (const hotArea of hotAreas.value) {
+    // 检查是否重叠
+    if (isOverlap(hotArea, currentSelectedArea)) {
+      // 结束热区选择模式
+      exitHotAreaSelectMode()
+
+      return
+    }
+  }
+
+  // 激活选中区域内部的方块
+  eachCube((_, __, cube) => {
+    cube.active = isContains(currentSelectedArea, cube)
+  })
+}
+/**
+ * 处理热区删除
+ *
+ * @param index 热区索引
+ */
+const handleDeleteHotArea = (index: number) => {
+  hotAreas.value.splice(index, 1)
+  // 结束热区选择模式
+  exitHotAreaSelectMode()
+  // 发送热区变动通知
+  emitUpdateModelValue()
+}
+
+// 发送模型更新
+const emit = defineEmits(['update:modelValue', 'hotAreaSelected'])
+// 发送热区变动通知
+const emitUpdateModelValue = () => emit('update:modelValue', hotAreas)
+
+// 热区选中
+const selectedHotAreaIndex = ref(-1)
+const handleHotAreaSelected = (hotArea: Rect, index: number) => {
+  selectedHotAreaIndex.value = index
+  emit('hotAreaSelected', hotArea, index)
+}
+
+/**
+ * 结束热区选择模式
+ */
+function exitHotAreaSelectMode() {
+  // 移除方块激活标记
+  eachCube((_, __, cube) => {
+    if (cube.active) {
+      cube.active = false
+    }
+  })
+
+  // 清除起点
+  hotAreaBeginCube.value = undefined
+}
+
+/**
+ * 迭代魔方矩阵
+ * @param callback 回调
+ */
+const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+  for (let x = 0; x < cubes.value.length; x++) {
+    for (let y = 0; y < cubes.value[x].length; y++) {
+      callback(x, y, cubes.value[x][y])
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.cube-table {
+  position: relative;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  .cube {
+    border: 1px solid var(--el-border-color);
+    text-align: center;
+    color: var(--el-text-color-secondary);
+    cursor: pointer;
+    box-sizing: border-box;
+    &.active {
+      background: var(--el-color-primary-light-9);
+    }
+  }
+
+  .hot-area {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--el-color-primary);
+    background: var(--el-color-primary-light-8);
+    color: var(--el-color-primary);
+    box-sizing: border-box;
+    border-spacing: 0;
+    border-collapse: collapse;
+    cursor: pointer;
+
+    .btn-delete {
+      z-index: 1;
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      height: 16px;
+      width: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background-color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/components/MagicCubeEditor/util.ts b/src/components/MagicCubeEditor/util.ts
new file mode 100644
index 00000000..e7c64658
--- /dev/null
+++ b/src/components/MagicCubeEditor/util.ts
@@ -0,0 +1,72 @@
+// 坐标点
+export interface Point {
+  x: number
+  y: number
+}
+
+// 矩形
+export interface Rect {
+  // 左上角 X 轴坐标
+  left: number
+  // 左上角 Y 轴坐标
+  top: number
+  // 右下角 X 轴坐标
+  right: number
+  // 右下角 Y 轴坐标
+  bottom: number
+  // 矩形宽度
+  width: number
+  // 矩形高度
+  height: number
+}
+
+/**
+ * 判断两个矩形是否重叠
+ * @param a 矩形 A
+ * @param b 矩形 B
+ */
+export const isOverlap = (a: Rect, b: Rect): boolean => {
+  return (
+    a.left < b.left + b.width &&
+    a.left + a.width > b.left &&
+    a.top < b.top + b.height &&
+    a.height + a.top > b.top
+  )
+}
+/**
+ * 检查坐标点是否在矩形内
+ * @param hotArea 矩形
+ * @param point 坐标
+ */
+export const isContains = (hotArea: Rect, point: Point): boolean => {
+  return (
+    point.x >= hotArea.left &&
+    point.x < hotArea.right &&
+    point.y >= hotArea.top &&
+    point.y < hotArea.bottom
+  )
+}
+
+/**
+ * 在两个坐标点中间，创建一个矩形
+ *
+ * 存在以下情况：
+ * 1. 两个坐标点是同一个位置，只占一个位置的正方形，宽高都为 1
+ * 2. X 轴坐标相同，只占一行的矩形，高度为 1
+ * 3. Y 轴坐标相同，只占一列的矩形，宽度为 1
+ * 4. 多行多列的矩形
+ *
+ * @param a 坐标点一
+ * @param b 坐标点二
+ */
+export const createRect = (a: Point, b: Point): Rect => {
+  // 计算矩形的范围
+  const [left, left2] = [a.x, b.x].sort()
+  const [top, top2] = [a.y, b.y].sort()
+  const right = left2 + 1
+  const bottom = top2 + 1
+  const height = bottom - top
+  const width = right - left
+
+  return { left, right, top, bottom, height, width }
+}
diff --git a/src/views/mall/promotion/diy/template/decorate.vue b/src/views/mall/promotion/diy/template/decorate.vue
index 8304088a..f2ae7bc0 100644
--- a/src/views/mall/promotion/diy/template/decorate.vue
+++ b/src/views/mall/promotion/diy/template/decorate.vue
@@ -78,7 +78,6 @@ const handleTemplateItemChange = () => {
   currentFormData.value = formData.value!.pages.find(
     (page: DiyPageApi.DiyPageVO) => page.name === templateItems[selectedTemplateItem.value].name
   )
-  console.log(currentFormData.value)
 }
 
 // 提交表单

From 72c5eaae31fd37dcfcd016224351237a9e2004d7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 12 Nov 2023 19:50:38 +0800
Subject: [PATCH 51/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=20one=20=E6=83=85=E5=86=B5=E4=B8=8B?=
 =?UTF-8?q?=E7=9A=84=E7=A4=BA=E4=BE=8B=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo01/index.ts                 |  43 +++
 src/api/infra/demo02/index.ts                 |  14 +
 src/components/UploadFile/src/UploadFile.vue  |   2 +-
 src/views/infra/demo01/Demo01StudentForm.vue  | 150 +++++++++++
 src/views/infra/demo01/index.vue              | 251 ++++++++++++++++++
 .../infra/demo02/DemoStudentAddressForm.vue   | 100 +++++--
 .../infra/demo02/DemoStudentContactForm.vue   | 158 ++++++-----
 src/views/infra/demo02/DemoStudentForm.vue    |  35 +--
 .../demo02/bak/DemoStudentAddressForm.vue     |  58 ++++
 9 files changed, 702 insertions(+), 109 deletions(-)
 create mode 100644 src/api/infra/demo01/index.ts
 create mode 100644 src/views/infra/demo01/Demo01StudentForm.vue
 create mode 100644 src/views/infra/demo01/index.vue
 create mode 100644 src/views/infra/demo02/bak/DemoStudentAddressForm.vue

diff --git a/src/api/infra/demo01/index.ts b/src/api/infra/demo01/index.ts
new file mode 100644
index 00000000..0154bc29
--- /dev/null
+++ b/src/api/infra/demo01/index.ts
@@ -0,0 +1,43 @@
+import request from '@/config/axios'
+
+export interface Demo01StudentVO {
+  id: number
+  name: string
+  description: string
+  birthday: Date
+  sex: number
+  enabled: boolean
+  avatar: string
+  video: string
+  memo: string
+}
+
+// 查询学生列表
+export const getDemo01StudentPage = async (params) => {
+  return await request.get({ url: `/infra/demo01-student/page`, params })
+}
+
+// 查询学生详情
+export const getDemo01Student = async (id: number) => {
+  return await request.get({ url: `/infra/demo01-student/get?id=` + id })
+}
+
+// 新增学生
+export const createDemo01Student = async (data: Demo01StudentVO) => {
+  return await request.post({ url: `/infra/demo01-student/create`, data })
+}
+
+// 修改学生
+export const updateDemo01Student = async (data: Demo01StudentVO) => {
+  return await request.put({ url: `/infra/demo01-student/update`, data })
+}
+
+// 删除学生
+export const deleteDemo01Student = async (id: number) => {
+  return await request.delete({ url: `/infra/demo01-student/delete?id=` + id })
+}
+
+// 导出学生 Excel
+export const exportDemo01Student = async (params) => {
+  return await request.download({ url: `/infra/demo01-student/export-excel`, params })
+}
\ No newline at end of file
diff --git a/src/api/infra/demo02/index.ts b/src/api/infra/demo02/index.ts
index b575dba4..500adde5 100644
--- a/src/api/infra/demo02/index.ts
+++ b/src/api/infra/demo02/index.ts
@@ -33,3 +33,17 @@ export const deleteDemoStudent = async (id: number) => {
 export const exportDemoStudent = async (params) => {
   return await request.download({ url: `/infra/demo-student/export-excel`, params })
 }
+
+// 获得学生联系人列表
+export const getDemoStudentContactListByStudentId = async (studentId) => {
+  return await request.get({
+    url: `/infra/demo-student/demo-student/list-by-student-id?studentId=` + studentId
+  })
+}
+
+// 获得学生地址
+export const getDemoStudentAddressByStudentId = async (studentId) => {
+  return await request.get({
+    url: `/infra/demo-student/demo-student/get-by-student-id?studentId=` + studentId
+  })
+}
diff --git a/src/components/UploadFile/src/UploadFile.vue b/src/components/UploadFile/src/UploadFile.vue
index bba466a7..c1f3e4e2 100644
--- a/src/components/UploadFile/src/UploadFile.vue
+++ b/src/components/UploadFile/src/UploadFile.vue
@@ -144,7 +144,7 @@ watch(
     } else if (isArray(props.modelValue)) {
       // 情况2：字符串
       files.concat(props.modelValue)
-    } else if (props.modelValue === undefined) {
+    } else if (props.modelValue == null) {
       // 情况3：undefined 不处理
     } else {
       throw new Error('不支持的 modelValue 类型')
diff --git a/src/views/infra/demo01/Demo01StudentForm.vue b/src/views/infra/demo01/Demo01StudentForm.vue
new file mode 100644
index 00000000..dfc9823d
--- /dev/null
+++ b/src/views/infra/demo01/Demo01StudentForm.vue
@@ -0,0 +1,150 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="formData.sex" placeholder="请选择性别">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-radio-group v-model="formData.enabled">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="头像">
+        <UploadImg v-model="formData.avatar" />
+      </el-form-item>
+      <el-form-item label="附件" prop="video">
+        <UploadFile v-model="formData.video" />
+      </el-form-item>
+      <el-form-item label="备注" prop="memo">
+        <Editor v-model="formData.memo" height="150px" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo01StudentApi from '@/api/infra/demo01'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  description: undefined,
+  birthday: undefined,
+  sex: undefined,
+  enabled: undefined,
+  avatar: undefined,
+  video: undefined,
+  memo: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
+  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo01StudentApi.getDemo01Student(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as Demo01StudentApi.Demo01StudentVO
+    if (formType.value === 'create') {
+      await Demo01StudentApi.createDemo01Student(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo01StudentApi.updateDemo01Student(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    birthday: undefined,
+    sex: undefined,
+    enabled: undefined,
+    avatar: undefined,
+    video: undefined,
+    memo: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/infra/demo01/index.vue b/src/views/infra/demo01/index.vue
new file mode 100644
index 00000000..fb35b561
--- /dev/null
+++ b/src/views/infra/demo01/index.vue
@@ -0,0 +1,251 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="queryParams.birthday"
+          value-format="YYYY-MM-DD"
+          type="date"
+          placeholder="选择出生日期"
+          clearable
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select
+          v-model="queryParams.sex"
+          placeholder="请选择性别"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-select
+          v-model="queryParams.enabled"
+          placeholder="请选择是否有效"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:demo01-student:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo01-student:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="是否有效" align="center" prop="enabled">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
+        </template>
+      </el-table-column>
+      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="附件" align="center" prop="video" />
+      <el-table-column label="备注" align="center" prop="memo" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo01-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo01-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo01StudentForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as Demo01StudentApi from '@/api/infra/demo01'
+import Demo01StudentForm from './Demo01StudentForm.vue'
+
+defineOptions({ name: 'InfraDemo01Student' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  birthday: null,
+  birthday: [],
+  sex: null,
+  enabled: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo01StudentApi.getDemo01StudentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo01StudentApi.deleteDemo01Student(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await Demo01StudentApi.exportDemo01Student(queryParams)
+    download.excel(data, '学生.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo02/DemoStudentAddressForm.vue b/src/views/infra/demo02/DemoStudentAddressForm.vue
index af4cd8f1..6d031406 100644
--- a/src/views/infra/demo02/DemoStudentAddressForm.vue
+++ b/src/views/infra/demo02/DemoStudentAddressForm.vue
@@ -6,39 +6,107 @@
     label-width="100px"
     v-loading="formLoading"
   >
-    <el-form-item label="子字段 1" prop="field1">
-      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+    <el-form-item label="名字" prop="name">
+      <el-input v-model="formData.name" placeholder="请输入名字" />
     </el-form-item>
-    <el-form-item label="子字段 2" prop="field2">
-      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+    <el-form-item label="个人简介">
+      <Editor v-model="formData.description" height="150px" />
     </el-form-item>
-    <el-form-item label="子字段 3" prop="field3">
-      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+    <el-form-item label="性别 1" prop="sex1">
+      <el-select v-model="formData.sex1" placeholder="请选择性别 1">
+        <el-option
+          v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_SEX1)"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="性别 2" prop="sex2">
+      <el-checkbox-group v-model="formData.sex2">
+        <el-checkbox
+          v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SEX2)"
+          :key="dict.value"
+          :label="dict.value"
+        >
+          {{ dict.label }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </el-form-item>
+    <el-form-item label="性别 3" prop="sex3">
+      <el-radio-group v-model="formData.sex3">
+        <el-radio
+          v-for="dict in getBoolDictOptions(DICT_TYPE.SYSTEM_SEX3)"
+          :key="dict.value"
+          :label="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="出生日期" prop="birthday">
+      <el-date-picker
+        v-model="formData.birthday"
+        type="date"
+        value-format="x"
+        placeholder="选择出生日期"
+      />
+    </el-form-item>
+    <el-form-item label="备注" prop="memo">
+      <el-input v-model="formData.memo" type="textarea" placeholder="请输入备注" />
     </el-form-item>
   </el-form>
 </template>
 <script setup lang="ts">
+import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as DemoStudentApi from '@/api/infra/demo02'
+
 const props = defineProps<{
-  studentId: undefined // 学生编号
+  studentId: undefined // 学生编号（主表的关联字段）
 }>()
 const formLoading = ref(false) // 表单的加载中
-const formData = ref({})
+const formData = ref([])
 const formRules = reactive({
-  field1: [required]
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  video: [{ required: true, message: '视频不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
+  sex1: [{ required: true, message: '性别 1不能为空', trigger: 'change' }],
+  sex2: [{ required: true, message: '性别 2不能为空', trigger: 'blur' }],
+  sex3: [{ required: true, message: '性别 3不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
   () => props.studentId,
-  (val) => {
-    if (val) {
+  async (val) => {
+    // 情况一：val 为空，说明是新增，则置空
+    if (!val) {
       formData.value = {
-        field2: '番茄',
-        field3: '西瓜'
+        id: undefined,
+        studentId: undefined,
+        name: undefined,
+        avatar: undefined,
+        video: undefined,
+        description: undefined,
+        sex1: undefined,
+        sex2: [],
+        sex3: undefined,
+        birthday: undefined,
+        memo: undefined
       }
-    } else {
-      formData.value = {}
+      return
+    }
+    // 情况二：val 非空，说明是修改，则加载数据
+    try {
+      formLoading.value = true
+      formData.value = await DemoStudentApi.getDemoStudentAddressByStudentId(val)
+    } finally {
+      formLoading.value = false
     }
   },
   { immediate: true }
@@ -49,7 +117,7 @@ const validate = () => {
   return formRef.value.validate()
 }
 
-/** 表单值 **/
+/** 表单值 */
 const getData = () => {
   return formData.value
 }
diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
index 694aadac..5f173f14 100644
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ b/src/views/infra/demo02/DemoStudentContactForm.vue
@@ -3,84 +3,93 @@
     ref="formRef"
     :model="formData"
     :rules="formRules"
-    label-width="0px"
     v-loading="formLoading"
+    label-width="0px"
     :inline-message="true"
   >
     <el-table :data="formData" class="-mt-10px">
       <el-table-column label="序号" type="index" width="100" />
-      <el-table-column label="名字" prop="name" width="50">
-        <template #default="row">
-          <el-form-item class="mb-0px!">
+      <el-table-column label="名字" width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
             <el-input v-model="row.name" placeholder="请输入名字" />
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="手机号码" width="150">
+      <el-table-column label="个人简介" width="400">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
-            <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
+          <el-form-item
+            :prop="`${$index}.description`"
+            :rules="formRules.description"
+            class="mb-0px!"
+          >
+            <Editor v-model="row.description" height="150px" />
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="类型" width="150">
+      <el-table-column label="性别 1" width="150">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.javaType`" :rules="formRules.javaType" class="mb-0px!">
-            <el-select v-model="row.javaType">
-              <el-option label="Long" value="Long" />
-              <el-option label="String" value="String" />
-              <el-option label="Integer" value="Integer" />
-              <el-option label="Double" value="Double" />
-              <el-option label="BigDecimal" value="BigDecimal" />
-              <el-option label="LocalDateTime" value="LocalDateTime" />
-              <el-option label="Boolean" value="Boolean" />
+          <el-form-item :prop="`${$index}.sex1`" :rules="formRules.sex1" class="mb-0px!">
+            <el-select v-model="row.sex1" placeholder="请选择性别 1">
+              <el-option
+                v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_SEX1)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
             </el-select>
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="多选" width="150">
+      <el-table-column label="性别 2" width="150">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.sex`" :rules="formRules.sex" class="mb-0px!">
-            <el-checkbox-group v-model="row.sex">
-              <el-checkbox key="Long" label="Long">Long</el-checkbox>
-              <el-checkbox key="String" label="String">String</el-checkbox>
+          <el-form-item :prop="`${$index}.sex2`" :rules="formRules.sex2" class="mb-0px!">
+            <el-checkbox-group v-model="row.sex2">
+              <el-checkbox
+                v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SEX2)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-checkbox>
             </el-checkbox-group>
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="图片上传" width="200">
+      <el-table-column label="性别 3" width="150">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.pic`" :rules="formRules.pic" class="mb-0px!">
-            <UploadImg v-model="row.pic" />
+          <el-form-item :prop="`${$index}.sex3`" :rules="formRules.sex3" class="mb-0px!">
+            <el-radio-group v-model="row.sex3">
+              <el-radio
+                v-for="dict in getBoolDictOptions(DICT_TYPE.SYSTEM_SEX3)"
+                :key="dict.value"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="文件上传" width="200">
+      <el-table-column label="出生日期" width="150">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.file`" :rules="formRules.file" class="mb-0px!">
-            <UploadFile v-model="row.file" />
+          <el-form-item :prop="`${$index}.birthday`" :rules="formRules.birthday" class="mb-0px!">
+            <el-date-picker
+              v-model="row.birthday"
+              type="date"
+              value-format="x"
+              placeholder="选择出生日期"
+            />
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="大输入框" width="200">
+      <el-table-column label="备注" width="200">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.content`" :rules="formRules.content" class="mb-0px!">
-            <el-input v-model="row.content" type="textarea" placeholder="请输入 content" />
+          <el-form-item :prop="`${$index}.memo`" :rules="formRules.memo" class="mb-0px!">
+            <el-input v-model="row.memo" type="textarea" placeholder="请输入备注" />
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="HTML" width="1024">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.html`" :rules="formRules.html" class="mb-0px!">
-            <Editor v-model="row.html" height="150px" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" fixed="right" label="操作" width="60">
-        <template #default="{ $index }">
-          <el-button @click="handleDelete($index)" link>—</el-button>
-        </template>
-      </el-table-column>
     </el-table>
   </el-form>
   <el-row justify="center" class="mt-3">
@@ -88,36 +97,43 @@
   </el-row>
 </template>
 <script setup lang="ts">
+import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as DemoStudentApi from '@/api/infra/demo02'
+
 const props = defineProps<{
-  studentId: undefined // 学生编号
+  studentId: undefined // 学生编号（主表的关联字段）
 }>()
 const formLoading = ref(false) // 表单的加载中
 const formData = ref([])
 const formRules = reactive({
-  mobile: [required],
-  javaType: [required],
-  sex: [required],
-  pic: [required]
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  video: [{ required: true, message: '视频不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
+  sex1: [{ required: true, message: '性别 1不能为空', trigger: 'change' }],
+  sex2: [{ required: true, message: '性别 2不能为空', trigger: 'blur' }],
+  sex3: [{ required: true, message: '性别 3不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
   () => props.studentId,
-  (val) => {
-    if (val) {
-      formData.value = [
-        {
-          name: '芋艿',
-          mobile: '15601691300',
-          javaType: undefined,
-          sex: [],
-          pic: undefined,
-          file: undefined
-        }
-      ]
-    } else {
+  async (val) => {
+    // 情况一：val 为空，说明是新增，则置空
+    if (!val) {
       formData.value = []
+      return
+    }
+    // 情况二：val 非空，说明是修改，则加载数据
+    try {
+      formLoading.value = true
+      formData.value = await DemoStudentApi.getDemoStudentContactListByStudentId(val)
+    } finally {
+      formLoading.value = false
     }
   },
   { immediate: true }
@@ -125,9 +141,21 @@ watch(
 
 /** 新增按钮操作 */
 const handleAdd = () => {
-  formData.value.push({
-    name: '土豆'
-  })
+  const row = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    avatar: undefined,
+    video: undefined,
+    description: undefined,
+    sex1: undefined,
+    sex2: [],
+    sex3: undefined,
+    birthday: undefined,
+    memo: undefined
+  }
+  row.studentId = props.studentId
+  formData.value.push(row)
 }
 
 /** 删除按钮操作 */
@@ -140,7 +168,7 @@ const validate = () => {
   return formRef.value.validate()
 }
 
-/** 表单值 **/
+/** 表单值 */
 const getData = () => {
   return formData.value
 }
diff --git a/src/views/infra/demo02/DemoStudentForm.vue b/src/views/infra/demo02/DemoStudentForm.vue
index fe0788c4..e9454c0f 100644
--- a/src/views/infra/demo02/DemoStudentForm.vue
+++ b/src/views/infra/demo02/DemoStudentForm.vue
@@ -6,23 +6,13 @@
       :rules="formRules"
       label-width="100px"
       v-loading="formLoading"
-    >
-      <el-form-item label="字段 1" prop="field1">
-        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
-      </el-form-item>
-      <el-form-item label="字段 2" prop="field2">
-        <el-input v-model="formData.field2" placeholder="请输入字段 2" />
-      </el-form-item>
-      <el-form-item label="字段 3" prop="field3">
-        <el-input v-model="formData.field3" placeholder="请输入字段 3" />
-      </el-form-item>
-    </el-form>
+    />
     <!-- 子表的表单 -->
     <el-tabs v-model="subTabsName">
-      <el-tab-pane label="联系人信息" name="DemoStudentContact">
+      <el-tab-pane label="学生联系人" name="demoStudentContact">
         <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
       </el-tab-pane>
-      <el-tab-pane label="地址信息" name="DemoStudentAddress">
+      <el-tab-pane label="学生地址" name="demoStudentAddress">
         <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
       </el-tab-pane>
     </el-tabs>
@@ -47,15 +37,13 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined
 })
-const formRules = reactive({
-  field2: [required]
-})
+const formRules = reactive({})
 const formRef = ref() // 表单 Ref
 
 /** 子表的表单 */
+const subTabsName = ref('demoStudentContact')
 const demoStudentContactFormRef = ref()
 const demoStudentAddressFormRef = ref()
-const subTabsName = ref('DemoStudentContact')
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -65,16 +53,9 @@ const open = async (type: string, id?: number) => {
   resetForm()
   // 修改时，设置数据
   if (id) {
-    // debugger
     formLoading.value = true
     try {
-      // formData.value = await DemoStudentApi.getDemoStudent(id)
-      formData.value = {
-        id: id,
-        field1: '1',
-        field2: '22',
-        field3: '333'
-      }
+      formData.value = await DemoStudentApi.getDemoStudent(id)
     } finally {
       formLoading.value = false
     }
@@ -91,13 +72,13 @@ const submitForm = async () => {
   try {
     await demoStudentContactFormRef.value.validate()
   } catch (e) {
-    subTabsName.value = 'DemoStudentContact'
+    subTabsName.value = 'demoStudentContact'
     return
   }
   try {
     await demoStudentAddressFormRef.value.validate()
   } catch (e) {
-    subTabsName.value = 'DemoStudentAddress'
+    subTabsName.value = 'demoStudentAddress'
     return
   }
   // 提交请求
diff --git a/src/views/infra/demo02/bak/DemoStudentAddressForm.vue b/src/views/infra/demo02/bak/DemoStudentAddressForm.vue
new file mode 100644
index 00000000..af4cd8f1
--- /dev/null
+++ b/src/views/infra/demo02/bak/DemoStudentAddressForm.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+    <el-form-item label="子字段 1" prop="field1">
+      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+    </el-form-item>
+    <el-form-item label="子字段 2" prop="field2">
+      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+    </el-form-item>
+    <el-form-item label="子字段 3" prop="field3">
+      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({})
+const formRules = reactive({
+  field1: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = {
+        field2: '番茄',
+        field3: '西瓜'
+      }
+    } else {
+      formData.value = {}
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>

From f0f78860255d1b3190556cd4dbd500c69d8a4b1f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 12 Nov 2023 22:33:38 +0800
Subject: [PATCH 52/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=88?=
 =?UTF-8?q?=E6=99=AE=E9=80=9A=EF=BC=89=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |   5 +-
 src/api/infra/demo11/index.ts                 |  57 ++++
 src/views/infra/demo11/Demo11StudentForm.vue  | 183 +++++++++++++
 .../components/Demo11StudentContactForm.vue   | 169 ++++++++++++
 .../components/Demo11StudentTeacherForm.vue   | 122 +++++++++
 src/views/infra/demo11/index.vue              | 252 ++++++++++++++++++
 6 files changed, 786 insertions(+), 2 deletions(-)
 create mode 100644 src/api/infra/demo11/index.ts
 create mode 100644 src/views/infra/demo11/Demo11StudentForm.vue
 create mode 100644 src/views/infra/demo11/components/Demo11StudentContactForm.vue
 create mode 100644 src/views/infra/demo11/components/Demo11StudentTeacherForm.vue
 create mode 100644 src/views/infra/demo11/index.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index f2977df6..70c91784 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,7 +21,7 @@ module.exports = defineConfig({
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
     'prettier',
-    'plugin:prettier/recommended', 
+    'plugin:prettier/recommended',
     '@unocss'
   ],
   rules: {
@@ -67,6 +67,7 @@ module.exports = defineConfig({
       }
     ],
     'vue/multi-word-component-names': 'off',
-    'vue/no-v-html': 'off'
+    'vue/no-v-html': 'off',
+    'prettier/prettier': 'off' // 芋艿：默认关闭 prettier 的 ESLint 校验，因为我们使用的是 IDE 的 Prettier 插件
   }
 })
diff --git a/src/api/infra/demo11/index.ts b/src/api/infra/demo11/index.ts
new file mode 100644
index 00000000..4c4c7b4e
--- /dev/null
+++ b/src/api/infra/demo11/index.ts
@@ -0,0 +1,57 @@
+import request from '@/config/axios'
+
+export interface Demo11StudentVO {
+  id: number
+  name: string
+  description: string
+  birthday: Date
+  sex: number
+  enabled: boolean
+  avatar: string
+  video: string
+  memo: string
+}
+
+// 查询学生列表
+export const getDemo11StudentPage = async (params) => {
+  return await request.get({ url: `/infra/demo11-student/page`, params })
+}
+
+// 查询学生详情
+export const getDemo11Student = async (id: number) => {
+  return await request.get({ url: `/infra/demo11-student/get?id=` + id })
+}
+
+// 新增学生
+export const createDemo11Student = async (data: Demo11StudentVO) => {
+  return await request.post({ url: `/infra/demo11-student/create`, data })
+}
+
+// 修改学生
+export const updateDemo11Student = async (data: Demo11StudentVO) => {
+  return await request.put({ url: `/infra/demo11-student/update`, data })
+}
+
+// 删除学生
+export const deleteDemo11Student = async (id: number) => {
+  return await request.delete({ url: `/infra/demo11-student/delete?id=` + id })
+}
+
+// 导出学生 Excel
+export const exportDemo11Student = async (params) => {
+  return await request.download({ url: `/infra/demo11-student/export-excel`, params })
+}
+
+// ==================== 子表（学生联系人） ====================
+
+// 获得学生联系人列表
+export const getDemo11StudentContactListByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo11-student/demo11-student/list-by-student-id?studentId=` + studentId })
+}
+
+// ==================== 子表（学生班主任） ====================
+
+// 获得学生班主任
+export const getDemo11StudentTeacherByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo11-student/demo11-student/get-by-student-id?studentId=` + studentId })
+}
\ No newline at end of file
diff --git a/src/views/infra/demo11/Demo11StudentForm.vue b/src/views/infra/demo11/Demo11StudentForm.vue
new file mode 100644
index 00000000..39c21a2b
--- /dev/null
+++ b/src/views/infra/demo11/Demo11StudentForm.vue
@@ -0,0 +1,183 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="formData.sex" placeholder="请选择性别">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-radio-group v-model="formData.enabled">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="头像">
+        <UploadImg v-model="formData.avatar" />
+      </el-form-item>
+      <el-form-item label="附件" prop="video">
+        <UploadFile v-model="formData.video" />
+      </el-form-item>
+      <el-form-item label="备注" prop="memo">
+        <Editor v-model="formData.memo" height="150px" />
+      </el-form-item>
+    </el-form>
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="学生联系人" name="demo11StudentContact">
+        <Demo11StudentContactForm ref="demo11StudentContactFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="学生班主任" name="demo11StudentTeacher">
+        <Demo11StudentTeacherForm ref="demo11StudentTeacherFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo11StudentApi from '@/api/infra/demo11'
+import Demo11StudentContactForm from './components/Demo11StudentContactForm.vue'
+import Demo11StudentTeacherForm from './components/Demo11StudentTeacherForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  description: undefined,
+  birthday: undefined,
+  sex: undefined,
+  enabled: undefined,
+  avatar: undefined,
+  video: undefined,
+  memo: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
+  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 子表的表单 */
+const subTabsName = ref('demo11StudentContact')
+const demo11StudentContactFormRef = ref()
+const demo11StudentTeacherFormRef = ref()
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo11StudentApi.getDemo11Student(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demo11StudentContactFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo11StudentContact'
+    return
+  }
+  try {
+    await demo11StudentTeacherFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo11StudentTeacher'
+    return
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as Demo11StudentApi.Demo11StudentVO
+    // 拼接子表的数据
+    data.demo11StudentContacts = demo11StudentContactFormRef.value.getData()
+    data.demo11StudentTeacher = demo11StudentTeacherFormRef.value.getData()
+    if (formType.value === 'create') {
+      await Demo11StudentApi.createDemo11Student(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo11StudentApi.updateDemo11Student(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    birthday: undefined,
+    sex: undefined,
+    enabled: undefined,
+    avatar: undefined,
+    video: undefined,
+    memo: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo11/components/Demo11StudentContactForm.vue b/src/views/infra/demo11/components/Demo11StudentContactForm.vue
new file mode 100644
index 00000000..1ab017e8
--- /dev/null
+++ b/src/views/infra/demo11/components/Demo11StudentContactForm.vue
@@ -0,0 +1,169 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    v-loading="formLoading"
+    label-width="0px"
+    :inline-message="true"
+  >
+    <el-table :data="formData" class="-mt-10px">
+      <el-table-column label="序号" type="index" width="100" />
+      <el-table-column label="名字" width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
+            <el-input v-model="row.name" placeholder="请输入名字" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="简介" width="200">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.description`" :rules="formRules.description" class="mb-0px!">
+            <el-input v-model="row.description" type="textarea" placeholder="请输入简介" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="出生日期" width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.birthday`" :rules="formRules.birthday" class="mb-0px!">
+            <el-date-picker
+              v-model="row.birthday"
+              type="date"
+              value-format="x"
+              placeholder="选择出生日期"
+            />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="性别" width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.sex`" :rules="formRules.sex" class="mb-0px!">
+            <el-select v-model="row.sex" placeholder="请选择性别">
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+            </el-select>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="是否有效" width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.enabled`" :rules="formRules.enabled" class="mb-0px!">
+            <el-radio-group v-model="row.enabled">
+                <el-radio
+                  v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+                  :key="dict.value"
+                  :label="dict.value"
+                >
+                  {{ dict.label }}
+                </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="头像" width="200">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.avatar`" :rules="formRules.avatar" class="mb-0px!">
+            <UploadImg v-model="row.avatar" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="附件" width="200">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.video`" :rules="formRules.video" class="mb-0px!">
+            <UploadFile v-model="row.video" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" width="400">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.memo`" :rules="formRules.memo" class="mb-0px!">
+            <Editor v-model="row.memo" height="150px" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-form>
+  <el-row justify="center" class="mt-3">
+    <el-button @click="handleAdd" round>+ 添加学生联系人</el-button>
+  </el-row>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo11StudentApi from '@/api/infra/demo11'
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
+  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    // 情况一：val 为空，说明是新增，则置空
+    if (!val) {
+      formData.value = []
+      return;
+    }
+    // 情况二：val 非空，说明是修改，则加载数据
+    try {
+      formLoading.value = true
+      formData.value = await Demo11StudentApi.getDemo11StudentContactListByStudentId(val)
+    } finally {
+      formLoading.value = false
+    }
+  },
+  { immediate: true }
+)
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  const row = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    description: undefined,
+    birthday: undefined,
+    sex: undefined,
+    enabled: undefined,
+    avatar: undefined,
+    video: undefined,
+    memo: undefined
+  }
+  row.studentId = props.studentId
+  formData.value.push(row)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (index) => {
+  formData.value.splice(index, 1)
+}
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 */
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo11/components/Demo11StudentTeacherForm.vue b/src/views/infra/demo11/components/Demo11StudentTeacherForm.vue
new file mode 100644
index 00000000..a8697be1
--- /dev/null
+++ b/src/views/infra/demo11/components/Demo11StudentTeacherForm.vue
@@ -0,0 +1,122 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+    <el-form-item label="名字" prop="name">
+      <el-input v-model="formData.name" placeholder="请输入名字" />
+    </el-form-item>
+    <el-form-item label="简介" prop="description">
+      <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
+    </el-form-item>
+    <el-form-item label="出生日期" prop="birthday">
+      <el-date-picker
+        v-model="formData.birthday"
+        type="date"
+        value-format="x"
+        placeholder="选择出生日期"
+      />
+    </el-form-item>
+    <el-form-item label="性别" prop="sex">
+      <el-select v-model="formData.sex" placeholder="请选择性别">
+        <el-option
+          v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="是否有效" prop="enabled">
+      <el-radio-group v-model="formData.enabled">
+        <el-radio
+          v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+          :key="dict.value"
+          :label="dict.value"
+          >
+          {{ dict.label }}
+        </el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="头像" prop="avatar">
+      <UploadImg v-model="formData.avatar" />
+    </el-form-item>
+    <el-form-item label="附件" prop="video">
+      <UploadFile v-model="formData.video" />
+    </el-form-item>
+    <el-form-item label="备注" prop="memo">
+      <Editor v-model="formData.memo" height="150px" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo11StudentApi from '@/api/infra/demo11'
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
+  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    // 1. 重置表单
+    formData.value = {
+      id: undefined,
+      studentId: undefined,
+      name: undefined,
+      description: undefined,
+      birthday: undefined,
+      sex: undefined,
+      enabled: undefined,
+      avatar: undefined,
+      video: undefined,
+      memo: undefined,
+    }
+    // 2. val 非空，则加载数据
+    if (!val) {
+      return;
+    }
+    try {
+      formLoading.value = true
+      const data = await Demo11StudentApi.getDemo11StudentTeacherByStudentId(val)
+      if (!data) {
+        return
+      }
+      formData.value = data
+    } finally {
+      formLoading.value = false
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 */
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo11/index.vue b/src/views/infra/demo11/index.vue
new file mode 100644
index 00000000..36529eb9
--- /dev/null
+++ b/src/views/infra/demo11/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="queryParams.birthday"
+          value-format="YYYY-MM-DD"
+          type="date"
+          placeholder="选择出生日期"
+          clearable
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select
+          v-model="queryParams.sex"
+          placeholder="请选择性别"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-select
+          v-model="queryParams.enabled"
+          placeholder="请选择是否有效"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:demo11-student:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo11-student:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="是否有效" align="center" prop="enabled">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
+        </template>
+      </el-table-column>
+      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="附件" align="center" prop="video" />
+      <el-table-column label="备注" align="center" prop="memo" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo11-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo11-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo11StudentForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as Demo11StudentApi from '@/api/infra/demo11'
+import Demo11StudentForm from './Demo11StudentForm.vue'
+
+defineOptions({ name: 'InfraDemo11Student' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  birthday: null,
+  birthday: [],
+  sex: null,
+  enabled: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo11StudentApi.getDemo11StudentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo11StudentApi.deleteDemo11Student(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await Demo11StudentApi.exportDemo11Student(queryParams)
+    download.excel(data, '学生.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file

From 999d8de9e972d62ae4bf2a23bcb05d7559c8c101 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 13 Nov 2023 13:57:15 +0800
Subject: [PATCH 53/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E4=B8=BB=E5=AD=90=E8=A1=A8=EF=BC=88?=
 =?UTF-8?q?=E5=86=85=E5=B5=8C=EF=BC=89=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo12/index.ts                 |  57 ++++
 .../components/Demo11StudentContactForm.vue   |   5 +
 src/views/infra/demo12/Demo12StudentForm.vue  | 183 +++++++++++++
 .../components/Demo12StudentContactForm.vue   |   5 +
 .../components/Demo12StudentContactList.vue   |  63 +++++
 .../components/Demo12StudentTeacherForm.vue   |   5 +
 .../components/Demo12StudentTeacherList.vue   |  67 +++++
 src/views/infra/demo12/index.vue              | 252 ++++++++++++++++++
 8 files changed, 637 insertions(+)
 create mode 100644 src/api/infra/demo12/index.ts
 create mode 100644 src/views/infra/demo12/Demo12StudentForm.vue
 create mode 100644 src/views/infra/demo12/components/Demo12StudentContactForm.vue
 create mode 100644 src/views/infra/demo12/components/Demo12StudentContactList.vue
 create mode 100644 src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
 create mode 100644 src/views/infra/demo12/components/Demo12StudentTeacherList.vue
 create mode 100644 src/views/infra/demo12/index.vue

diff --git a/src/api/infra/demo12/index.ts b/src/api/infra/demo12/index.ts
new file mode 100644
index 00000000..33c3fb4f
--- /dev/null
+++ b/src/api/infra/demo12/index.ts
@@ -0,0 +1,57 @@
+import request from '@/config/axios'
+
+export interface Demo12StudentVO {
+  id: number
+  name: string
+  description: string
+  birthday: Date
+  sex: number
+  enabled: boolean
+  avatar: string
+  video: string
+  memo: string
+}
+
+// 查询学生列表
+export const getDemo12StudentPage = async (params) => {
+  return await request.get({ url: `/infra/demo12-student/page`, params })
+}
+
+// 查询学生详情
+export const getDemo12Student = async (id: number) => {
+  return await request.get({ url: `/infra/demo12-student/get?id=` + id })
+}
+
+// 新增学生
+export const createDemo12Student = async (data: Demo12StudentVO) => {
+  return await request.post({ url: `/infra/demo12-student/create`, data })
+}
+
+// 修改学生
+export const updateDemo12Student = async (data: Demo12StudentVO) => {
+  return await request.put({ url: `/infra/demo12-student/update`, data })
+}
+
+// 删除学生
+export const deleteDemo12Student = async (id: number) => {
+  return await request.delete({ url: `/infra/demo12-student/delete?id=` + id })
+}
+
+// 导出学生 Excel
+export const exportDemo12Student = async (params) => {
+  return await request.download({ url: `/infra/demo12-student/export-excel`, params })
+}
+
+// ==================== 子表（学生联系人） ====================
+
+// 获得学生联系人列表
+export const getDemo12StudentContactListByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo12-student/demo12-student/list-by-student-id?studentId=` + studentId })
+}
+
+// ==================== 子表（学生班主任） ====================
+
+// 获得学生班主任
+export const getDemo12StudentTeacherByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo12-student/demo12-student/get-by-student-id?studentId=` + studentId })
+}
\ No newline at end of file
diff --git a/src/views/infra/demo11/components/Demo11StudentContactForm.vue b/src/views/infra/demo11/components/Demo11StudentContactForm.vue
index 1ab017e8..ba900017 100644
--- a/src/views/infra/demo11/components/Demo11StudentContactForm.vue
+++ b/src/views/infra/demo11/components/Demo11StudentContactForm.vue
@@ -85,6 +85,11 @@
           </el-form-item>
         </template>
       </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="60">
+        <template #default="{ $index }">
+          <el-button @click="handleDelete($index)" link>—</el-button>
+        </template>
+      </el-table-column>
     </el-table>
   </el-form>
   <el-row justify="center" class="mt-3">
diff --git a/src/views/infra/demo12/Demo12StudentForm.vue b/src/views/infra/demo12/Demo12StudentForm.vue
new file mode 100644
index 00000000..d3cb482d
--- /dev/null
+++ b/src/views/infra/demo12/Demo12StudentForm.vue
@@ -0,0 +1,183 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="formData.sex" placeholder="请选择性别">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-radio-group v-model="formData.enabled">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="头像">
+        <UploadImg v-model="formData.avatar" />
+      </el-form-item>
+      <el-form-item label="附件" prop="video">
+        <UploadFile v-model="formData.video" />
+      </el-form-item>
+      <el-form-item label="备注" prop="memo">
+        <Editor v-model="formData.memo" height="150px" />
+      </el-form-item>
+    </el-form>
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="学生联系人" name="demo12StudentContact">
+        <Demo12StudentContactForm ref="demo12StudentContactFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="学生班主任" name="demo12StudentTeacher">
+        <Demo12StudentTeacherForm ref="demo12StudentTeacherFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo12StudentApi from '@/api/infra/demo12'
+import Demo12StudentContactForm from './components/Demo12StudentContactForm.vue'
+import Demo12StudentTeacherForm from './components/Demo12StudentTeacherForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  description: undefined,
+  birthday: undefined,
+  sex: undefined,
+  enabled: undefined,
+  avatar: undefined,
+  video: undefined,
+  memo: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
+  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 子表的表单 */
+const subTabsName = ref('demo12StudentContact')
+const demo12StudentContactFormRef = ref()
+const demo12StudentTeacherFormRef = ref()
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo12StudentApi.getDemo12Student(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demo12StudentContactFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo12StudentContact'
+    return
+  }
+  try {
+    await demo12StudentTeacherFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo12StudentTeacher'
+    return
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as Demo12StudentApi.Demo12StudentVO
+    // 拼接子表的数据
+    data.demo12StudentContacts = demo12StudentContactFormRef.value.getData()
+    data.demo12StudentTeacher = demo12StudentTeacherFormRef.value.getData()
+    if (formType.value === 'create') {
+      await Demo12StudentApi.createDemo12Student(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo12StudentApi.updateDemo12Student(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    description: undefined,
+    birthday: undefined,
+    sex: undefined,
+    enabled: undefined,
+    avatar: undefined,
+    video: undefined,
+    memo: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentContactForm.vue b/src/views/infra/demo12/components/Demo12StudentContactForm.vue
new file mode 100644
index 00000000..d71f6146
--- /dev/null
+++ b/src/views/infra/demo12/components/Demo12StudentContactForm.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>123</div>
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentContactList.vue b/src/views/infra/demo12/components/Demo12StudentContactList.vue
new file mode 100644
index 00000000..65ed9df1
--- /dev/null
+++ b/src/views/infra/demo12/components/Demo12StudentContactList.vue
@@ -0,0 +1,63 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="学生编号" align="center" prop="studentId" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="是否有效" align="center" prop="enabled">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
+        </template>
+      </el-table-column>
+      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="附件" align="center" prop="video" />
+      <el-table-column label="备注" align="center" prop="memo" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+    </el-table>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import * as Demo12StudentApi from '@/api/infra/demo12'
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await Demo12StudentApi.getDemo12StudentContactListByStudentId(studentId.props)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue b/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
new file mode 100644
index 00000000..d71f6146
--- /dev/null
+++ b/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>123</div>
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentTeacherList.vue b/src/views/infra/demo12/components/Demo12StudentTeacherList.vue
new file mode 100644
index 00000000..55f6845b
--- /dev/null
+++ b/src/views/infra/demo12/components/Demo12StudentTeacherList.vue
@@ -0,0 +1,67 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="学生编号" align="center" prop="studentId" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="是否有效" align="center" prop="enabled">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
+        </template>
+      </el-table-column>
+      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="附件" align="center" prop="video" />
+      <el-table-column label="备注" align="center" prop="memo" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+    </el-table>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { DICT_TYPE } from '@/utils/dict'
+import * as Demo12StudentApi from '@/api/infra/demo12'
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo12StudentApi.getDemo12StudentTeacherByStudentId(studentId.props)
+    if (!data) {
+      return
+    }
+    list.value.push(data)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/index.vue b/src/views/infra/demo12/index.vue
new file mode 100644
index 00000000..c5a82a4c
--- /dev/null
+++ b/src/views/infra/demo12/index.vue
@@ -0,0 +1,252 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="queryParams.birthday"
+          value-format="YYYY-MM-DD"
+          type="date"
+          placeholder="选择出生日期"
+          clearable
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select
+          v-model="queryParams.sex"
+          placeholder="请选择性别"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-select
+          v-model="queryParams.enabled"
+          placeholder="请选择是否有效"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:demo12-student:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo12-student:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column label="是否有效" align="center" prop="enabled">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
+        </template>
+      </el-table-column>
+      <el-table-column label="头像" align="center" prop="avatar" />
+      <el-table-column label="附件" align="center" prop="video" />
+      <el-table-column label="备注" align="center" prop="memo" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo12-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo12-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo12StudentForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as Demo12StudentApi from '@/api/infra/demo12'
+import Demo12StudentForm from './Demo12StudentForm.vue'
+
+defineOptions({ name: 'InfraDemo12Student' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  birthday: null,
+  birthday: [],
+  sex: null,
+  enabled: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo12StudentApi.getDemo12StudentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo12StudentApi.deleteDemo12Student(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await Demo12StudentApi.exportDemo12Student(queryParams)
+    download.excel(data, '学生.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file

From 2385cd9b9a88f7b1f0de303a1c7b473ec203f544 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 13 Nov 2023 15:48:21 +0800
Subject: [PATCH 54/77] =?UTF-8?q?fix=EF=BC=9A=E5=A6=82=E6=9E=9C=E5=B7=B2?=
 =?UTF-8?q?=E7=BB=8F=E5=88=B0=E9=87=8D=E6=96=B0=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=88=99=E4=B8=8D=E8=BF=9B=E8=A1=8C=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/axios/service.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/config/axios/service.ts b/src/config/axios/service.ts
index 1a4741b6..6413e945 100644
--- a/src/config/axios/service.ts
+++ b/src/config/axios/service.ts
@@ -217,6 +217,10 @@ const refreshToken = async () => {
 const handleAuthorized = () => {
   const { t } = useI18n()
   if (!isRelogin.show) {
+    // 如果已经到重新登录页面则不进行弹窗提示
+    if (window.location.href.includes('login?redirect=')) {
+      return
+    }
     isRelogin.show = true
     ElMessageBox.confirm(t('sys.api.timeoutMessage'), t('common.confirmTitle'), {
       showCancelButton: false,

From 27c9a0f32deee6e69b81348aae08ba114a5a0797 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 13 Nov 2023 17:49:27 +0800
Subject: [PATCH 55/77] =?UTF-8?q?crm-=E5=9B=A2=E9=98=9F=E6=88=90=E5=91=98?=
 =?UTF-8?q?=EF=BC=9A=20=E5=85=88=E6=8F=90=E4=BA=A4=E4=B8=80=E6=B3=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/permission/index.ts               |  32 +++++
 .../crm/components/CrmPermissionForm.vue      | 106 ++++++++++++++++
 src/views/crm/components/CrmTeamList.vue      | 116 ++++++++++++++++++
 src/views/crm/components/index.ts             |  11 ++
 src/views/crm/customer/index.vue              | 115 +++++++++--------
 5 files changed, 328 insertions(+), 52 deletions(-)
 create mode 100644 src/api/crm/permission/index.ts
 create mode 100644 src/views/crm/components/CrmPermissionForm.vue
 create mode 100644 src/views/crm/components/CrmTeamList.vue
 create mode 100644 src/views/crm/components/index.ts

diff --git a/src/api/crm/permission/index.ts b/src/api/crm/permission/index.ts
new file mode 100644
index 00000000..f71e2bfc
--- /dev/null
+++ b/src/api/crm/permission/index.ts
@@ -0,0 +1,32 @@
+import request from '@/config/axios'
+
+export interface PermissionVO {
+  id: number // 数据权限编号
+  userId: number // 用户编号
+  bizType: number // Crm 类型
+  bizId: number // Crm 类型数据编号
+  level: number // 权限级别
+  deptName: string // 部门名称
+  nickname: string // 用户昵称
+  postNames: string // 岗位名称数组
+}
+
+// 查询团队成员列表
+export const getPermissionList = async (params) => {
+  return await request.get({ url: `/crm/permission/list`, params })
+}
+
+// 新增团队成员
+export const createPermission = async (data: PermissionVO) => {
+  return await request.post({ url: `/crm/permission/add`, data })
+}
+
+// 修改团队成员
+export const updatePermission = async (data: PermissionVO) => {
+  return await request.put({ url: `/crm/permission/update`, data })
+}
+
+// 删除团队成员
+export const deletePermission = async (params) => {
+  return await request.delete({ url: '/crm/permission/delete', params })
+}
diff --git a/src/views/crm/components/CrmPermissionForm.vue b/src/views/crm/components/CrmPermissionForm.vue
new file mode 100644
index 00000000..1d217323
--- /dev/null
+++ b/src/views/crm/components/CrmPermissionForm.vue
@@ -0,0 +1,106 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+    >
+      <el-form-item v-if="formType === 'create'" label="选择人员" prop="userId">
+        <el-select v-model="formData.userId">
+          <el-option
+            v-for="item in userOptions"
+            :key="parseInt(item.id)"
+            :label="item.nickname"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="权限级别" prop="level">
+        <el-radio-group v-model="formData.level">
+          <el-radio label="2">只读</el-radio>
+          <el-radio label="3">读写</el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'CrmPermissionForm' })
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const formData = ref({
+  userId: undefined, // 用户编号
+  bizType: undefined, // Crm 类型
+  bizId: undefined, // Crm 类型数据编号
+  level: undefined // 权限级别
+})
+const formRules = reactive({
+  userId: [{ required: true, message: '人员不能为空', trigger: 'blur' }],
+  level: [{ required: true, message: '权限级别不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: 'create' | 'update', bizType: number, bizId: number, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type) + '团队成员'
+  formType.value = type
+  resetForm(bizType, bizId)
+  // 修改时，设置数据
+  if (id) {
+    formData.value.id = id
+  }
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value === 'create') {
+      message.success(t('common.createSuccess'))
+    } else {
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = (bizType: number, bizId: number) => {
+  formData.value = {
+    userId: undefined, // 用户编号
+    bizType, // Crm 类型
+    bizId, // Crm 类型数据编号
+    level: undefined // 权限级别
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/crm/components/CrmTeamList.vue b/src/views/crm/components/CrmTeamList.vue
new file mode 100644
index 00000000..824409b8
--- /dev/null
+++ b/src/views/crm/components/CrmTeamList.vue
@@ -0,0 +1,116 @@
+<template>
+  <!-- 操作栏 -->
+  <el-row justify="end">
+    <el-button type="primary" @click="handleAdd">
+      <Icon class="mr-5px" icon="ep:plus" />
+      新增
+    </el-button>
+    <el-button @click="handleEdit">
+      <Icon class="mr-5px" icon="ep:edit" />
+      编辑
+    </el-button>
+    <el-button @click="handleRemove">
+      <Icon class="mr-5px" icon="ep:delete" />
+      移除
+    </el-button>
+    <el-button type="danger" @click="handleQuit"> 退出团队</el-button>
+  </el-row>
+  <!--  团队成员展示 -->
+  <el-table
+    v-loading="loading"
+    :data="list"
+    :show-overflow-tooltip="true"
+    :stripe="true"
+    class="mt-20px"
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column type="selection" width="55" />
+    <el-table-column align="center" label="姓名" prop="mobile" />
+    <el-table-column align="center" label="部门" prop="detailAddress" />
+    <el-table-column align="center" label="岗位" prop="detailAddress" />
+    <el-table-column align="center" label="权限级别" prop="creatorName" />
+    <el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
+  </el-table>
+  <CrmPermissionForm ref="crmPermissionFormRef" />
+</template>
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import { ElTable } from 'element-plus'
+import * as PermissionApi from '@/api/crm/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import CrmPermissionForm from './CrmPermissionForm.vue'
+
+defineOptions({ name: 'CrmTeam' })
+const props = defineProps<{
+  bizType: number
+  bizId: number
+}>()
+const loading = ref(true) // 列表的加载中
+const list = ref<PermissionApi.PermissionVO[]>([]) // 列表的数据
+const getList = async () => {
+  loading.value = true
+  try {
+    const res = await PermissionApi.getPermissionList({
+      bizType: props.bizType,
+      bizId: props.bizId
+    })
+    list.value = res
+  } finally {
+    loading.value = false
+  }
+}
+
+const multipleSelection = ref<PermissionApi.PermissionVO[]>([])
+const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
+  multipleSelection.value = val
+}
+const message = useMessage()
+const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm | null>>(null)
+const handleEdit = () => {
+  if (multipleSelection.value?.length === 0) {
+    message.warning('请先选择团队成员后操作！')
+    return
+  }
+  const ids = multipleSelection.value?.map((item) => item.id)
+  crmPermissionFormRef.value?.open('update', props.bizType, props.bizId, ids[0])
+}
+const handleRemove = async () => {
+  if (multipleSelection.value?.length === 0) {
+    message.warning('请先选择团队成员后操作！')
+    return
+  }
+  await message.delConfirm()
+  const ids = multipleSelection.value?.map((item) => item.id)
+  ids?.forEach((id) => {
+    // TODO 还不确定要不要搞个批量删除，还是一次只能删除一个，先用循环弄一下
+    PermissionApi.deletePermission({
+      bizType: props.bizType,
+      bizId: props.bizId,
+      id
+    })
+  })
+}
+const handleAdd = () => {
+  crmPermissionFormRef.value?.open('create', props.bizType, props.bizId)
+}
+
+const userStore = useUserStoreWithOut()
+const handleQuit = () => {
+  const permission = list.value.find(
+    (item) => item.userId === userStore.getUser.id && item.level === 1
+  )
+  if (permission) {
+    message.warning('负责人不能退出团队！')
+    return
+  }
+}
+
+watch(
+  () => props.bizId,
+  () => {
+    getList()
+  },
+  { immediate: true, deep: true }
+)
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/crm/components/index.ts b/src/views/crm/components/index.ts
new file mode 100644
index 00000000..b0bf3e42
--- /dev/null
+++ b/src/views/crm/components/index.ts
@@ -0,0 +1,11 @@
+import CrmTeam from './CrmTeamList.vue'
+
+enum CrmBizTypeEnum {
+  CRM_LEADS = 1, // 线索
+  CRM_CUSTOMER = 2, // 客户
+  CRM_CONTACTS = 3, // 联系人
+  CRM_BUSINESS = 5, // 商机
+  CRM_CONTRACT = 6 // 合同
+}
+
+export { CrmTeam, CrmBizTypeEnum }
diff --git a/src/views/crm/customer/index.vue b/src/views/crm/customer/index.vue
index 073bf8cb..b214d7c1 100644
--- a/src/views/crm/customer/index.vue
+++ b/src/views/crm/customer/index.vue
@@ -2,36 +2,36 @@
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
-      class="-mb-15px"
-      :model="queryParams"
       ref="queryFormRef"
       :inline="true"
+      :model="queryParams"
+      class="-mb-15px"
       label-width="68px"
     >
       <el-form-item label="客户名称" prop="name">
         <el-input
           v-model="queryParams.name"
-          placeholder="请输入客户名称"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
+          clearable
+          placeholder="请输入客户名称"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="手机" prop="mobile">
         <el-input
           v-model="queryParams.mobile"
-          placeholder="请输入手机"
-          clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
+          clearable
+          placeholder="请输入手机"
+          @keyup.enter="handleQuery"
         />
       </el-form-item>
       <el-form-item label="所属行业" prop="industryId">
         <el-select
           v-model="queryParams.industryId"
-          placeholder="请选择所属行业"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择所属行业"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY)"
@@ -44,9 +44,9 @@
       <el-form-item label="客户等级" prop="level">
         <el-select
           v-model="queryParams.level"
-          placeholder="请选择客户等级"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择客户等级"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"
@@ -59,9 +59,9 @@
       <el-form-item label="客户来源" prop="source">
         <el-select
           v-model="queryParams.source"
-          placeholder="请选择客户来源"
-          clearable
           class="!w-240px"
+          clearable
+          placeholder="请选择客户来源"
         >
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE)"
@@ -72,19 +72,27 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" @click="openForm('create')" v-hasPermi="['crm:customer:create']">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+        <el-button v-hasPermi="['crm:customer:create']" type="primary" @click="openForm('create')">
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
         </el-button>
         <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
           v-hasPermi="['crm:customer:export']"
+          :loading="exportLoading"
+          plain
+          type="success"
+          @click="handleExport"
         >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
+          <Icon class="mr-5px" icon="ep:download" />
+          导出
         </el-button>
       </el-form-item>
     </el-form>
@@ -92,77 +100,77 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="客户名称" align="center" prop="name" width="160" />
-      <el-table-column label="所属行业" align="center" prop="industryId" width="120">
+    <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
+      <el-table-column align="center" label="编号" prop="id" />
+      <el-table-column align="center" label="客户名称" prop="name" width="160" />
+      <el-table-column align="center" label="所属行业" prop="industryId" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_INDUSTRY" :value="scope.row.industryId" />
         </template>
       </el-table-column>
-      <el-table-column label="客户来源" align="center" prop="source" width="100">
+      <el-table-column align="center" label="客户来源" prop="source" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_SOURCE" :value="scope.row.source" />
         </template>
       </el-table-column>
-      <el-table-column label="客户等级" align="center" prop="level" width="120">
+      <el-table-column align="center" label="客户等级" prop="level" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.level" />
         </template>
       </el-table-column>
-      <el-table-column label="手机" align="center" prop="mobile" width="120" />
-      <el-table-column label="详细地址" align="center" prop="detailAddress" width="200" />
-      <el-table-column label="负责人" align="center" prop="ownerUserName" />
-      <el-table-column label="所属部门" align="center" prop="ownerUserDept" />
-      <el-table-column label="创建人" align="center" prop="creatorName" />
+      <el-table-column align="center" label="手机" prop="mobile" width="120" />
+      <el-table-column align="center" label="详细地址" prop="detailAddress" width="200" />
+      <el-table-column align="center" label="负责人" prop="ownerUserName" />
+      <el-table-column align="center" label="所属部门" prop="ownerUserDept" />
+      <el-table-column align="center" label="创建人" prop="creatorName" />
       <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
         :formatter="dateFormatter"
+        align="center"
+        label="创建时间"
+        prop="createTime"
         width="180px"
       />
-      <el-table-column label="成交状态" align="center" prop="dealStatus">
+      <el-table-column align="center" label="成交状态" prop="dealStatus">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.dealStatus" />
         </template>
       </el-table-column>
       <el-table-column
-        label="下次联系时间"
-        align="center"
-        prop="contactNextTime"
         :formatter="dateFormatter"
+        align="center"
+        label="下次联系时间"
+        prop="contactNextTime"
         width="180px"
       />
       <el-table-column
-        label="最后跟进时间"
-        align="center"
-        prop="contactLastTime"
         :formatter="dateFormatter"
+        align="center"
+        label="最后跟进时间"
+        prop="contactLastTime"
         width="180px"
       />
-      <el-table-column label="锁定状态" align="center" prop="lockStatus">
+      <el-table-column align="center" label="锁定状态" prop="lockStatus">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.lockStatus" />
         </template>
       </el-table-column>
       <!--  TODO @wanwan 距进入公海天数    -->
-      <el-table-column label="操作" align="center" min-width="150" fixed="right">
+      <el-table-column align="center" fixed="right" label="操作" min-width="150">
         <template #default="scope">
           <el-button link type="primary" @click="openDetail(scope.row.id)">详情</el-button>
           <el-button
+            v-hasPermi="['crm:customer:update']"
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['crm:customer:update']"
           >
             编辑
           </el-button>
           <el-button
+            v-hasPermi="['crm:customer:delete']"
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['crm:customer:delete']"
           >
             删除
           </el-button>
@@ -171,23 +179,26 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
       @pagination="getList"
     />
   </ContentWrap>
+  <!-- TODO 方便查看效果 -->
+  <CrmTeam :biz-id="1" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />
 
   <!-- 表单弹窗：添加/修改 -->
   <CustomerForm ref="formRef" @success="getList" />
 </template>
 
-<script setup lang="ts">
-import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as CustomerApi from '@/api/crm/customer'
 import CustomerForm from './CustomerForm.vue'
+import { CrmBizTypeEnum, CrmTeam } from '@/views/crm/components'
 
 defineOptions({ name: 'CrmCustomer' })
 

From 8bb9dec32867881f0555a81268b8f096b2251863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9F=AF=E6=9D=A8?= <key5230@163.com>
Date: Tue, 14 Nov 2023 01:43:59 +0000
Subject: [PATCH 56/77] =?UTF-8?q?=E3=80=90bugfix=E3=80=91=EF=BC=9A?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=BB=91=E5=9D=97=E9=AA=8C=E8=AF=81=E7=A0=81?=
 =?UTF-8?q?=E6=97=A0=E4=BB=BB=E4=BD=95=E6=BB=91=E5=8A=A8=E7=9B=B4=E6=8E=A5?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E9=AA=8C=E8=AF=81=E6=97=B6=EF=BC=8Cx?=
 =?UTF-8?q?=E5=9D=90=E6=A0=87=E7=A9=BA=EF=BC=8C=E5=AF=BC=E8=87=B4=E5=90=8E?=
 =?UTF-8?q?=E7=AB=AFNPE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 柯杨 <key5230@163.com>
---
 src/components/Verifition/src/Verify/VerifySlide.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Verifition/src/Verify/VerifySlide.vue b/src/components/Verifition/src/Verify/VerifySlide.vue
index 8b448b0d..f3c7bfea 100644
--- a/src/components/Verifition/src/Verify/VerifySlide.vue
+++ b/src/components/Verifition/src/Verify/VerifySlide.vue
@@ -277,7 +277,7 @@ const end = () => {
   endMovetime.value = +new Date()
   //判断是否重合
   if (status.value && isEnd.value == false) {
-    var moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''))
+    var moveLeftDistance = parseInt((moveBlockLeft.value || '0').replace('px', ''))
     moveLeftDistance = (moveLeftDistance * 310) / parseInt(setSize.imgWidth)
     let data = {
       captchaType: captchaType.value,

From 45656562a82353927da0aa614a1ce0689e7bd6b0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 14 Nov 2023 09:50:54 +0800
Subject: [PATCH 57/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE=E4=B8=BB=E5=AD=90?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/codegen/index.ts                |  10 +-
 src/api/infra/demo12/index.ts                 |  48 +++++-
 src/views/infra/codegen/EditTable.vue         |   2 +-
 .../codegen/components/GenerateInfoForm.vue   |  94 ++++++-----
 src/views/infra/demo12/Demo12StudentForm.vue  |   2 +-
 .../components/Demo12StudentContactForm.vue   | 152 +++++++++++++++++-
 .../components/Demo12StudentContactList.vue   |  95 ++++++++++-
 .../components/Demo12StudentTeacherForm.vue   | 152 +++++++++++++++++-
 .../components/Demo12StudentTeacherList.vue   |  99 ++++++++++--
 src/views/infra/demo12/index.vue              |  28 +++-
 10 files changed, 612 insertions(+), 70 deletions(-)

diff --git a/src/api/infra/codegen/index.ts b/src/api/infra/codegen/index.ts
index 64701efe..1b91e917 100644
--- a/src/api/infra/codegen/index.ts
+++ b/src/api/infra/codegen/index.ts
@@ -67,6 +67,11 @@ export type CodegenCreateListReqVO = {
   tableNames: string[]
 }
 
+// 查询列表代码生成表定义
+export const getCodegenTableList = (dataSourceConfigId: number) => {
+  return request.get({ url: '/infra/codegen/table/list?dataSourceConfigId=' + dataSourceConfigId })
+}
+
 // 查询列表代码生成表定义
 export const getCodegenTablePage = (params: PageParam) => {
   return request.get({ url: '/infra/codegen/table/page', params })
@@ -92,11 +97,6 @@ export const syncCodegenFromDB = (id: number) => {
   return request.put({ url: '/infra/codegen/sync-from-db?tableId=' + id })
 }
 
-// 基于 SQL 建表语句，同步数据库的表和字段定义
-export const syncCodegenFromSQL = (id: number, sql: string) => {
-  return request.put({ url: '/infra/codegen/sync-from-sql?tableId=' + id + '&sql=' + sql })
-}
-
 // 预览生成代码
 export const previewCodegen = (id: number) => {
   return request.get({ url: '/infra/codegen/preview?tableId=' + id })
diff --git a/src/api/infra/demo12/index.ts b/src/api/infra/demo12/index.ts
index 33c3fb4f..3f2be47e 100644
--- a/src/api/infra/demo12/index.ts
+++ b/src/api/infra/demo12/index.ts
@@ -44,14 +44,52 @@ export const exportDemo12Student = async (params) => {
 
 // ==================== 子表（学生联系人） ====================
 
-// 获得学生联系人列表
-export const getDemo12StudentContactListByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo12-student/demo12-student/list-by-student-id?studentId=` + studentId })
+// 获得学生联系人分页
+export const getDemo12StudentContactPage = async (params) => {
+  return await request.get({ url: `/infra/demo12-student/demo12-student-contact/page`, params })
+}
+// 新增学生联系人
+export const createDemo12StudentContact = async (data) => {
+  return await request.post({ url: `/infra/demo12-student/demo12-student-contact/create`, data })
+}
+
+// 修改学生联系人
+export const updateDemo12StudentContact = async (data) => {
+  return await request.put({ url: `/infra/demo12-student/demo12-student-contact/update`, data })
+}
+
+// 删除学生联系人
+export const deleteDemo12StudentContact = async (id: number) => {
+  return await request.delete({ url: `/infra/demo12-student/demo12-student-contact/delete?id=` + id })
+}
+
+// 获得学生联系人
+export const getDemo12StudentContact = async (id: number) => {
+  return await request.get({ url: `/infra/demo12-student/demo12-student-contact/get?id=` + id })
 }
 
 // ==================== 子表（学生班主任） ====================
 
+// 获得学生班主任分页
+export const getDemo12StudentTeacherPage = async (params) => {
+  return await request.get({ url: `/infra/demo12-student/demo12-student-teacher/page`, params })
+}
+// 新增学生班主任
+export const createDemo12StudentTeacher = async (data) => {
+  return await request.post({ url: `/infra/demo12-student/demo12-student-teacher/create`, data })
+}
+
+// 修改学生班主任
+export const updateDemo12StudentTeacher = async (data) => {
+  return await request.put({ url: `/infra/demo12-student/demo12-student-teacher/update`, data })
+}
+
+// 删除学生班主任
+export const deleteDemo12StudentTeacher = async (id: number) => {
+  return await request.delete({ url: `/infra/demo12-student/demo12-student-teacher/delete?id=` + id })
+}
+
 // 获得学生班主任
-export const getDemo12StudentTeacherByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo12-student/demo12-student/get-by-student-id?studentId=` + studentId })
+export const getDemo12StudentTeacher = async (id: number) => {
+  return await request.get({ url: `/infra/demo12-student/demo12-student-teacher/get?id=` + id })
 }
\ No newline at end of file
diff --git a/src/views/infra/codegen/EditTable.vue b/src/views/infra/codegen/EditTable.vue
index 9c4e7657..c94e0da6 100644
--- a/src/views/infra/codegen/EditTable.vue
+++ b/src/views/infra/codegen/EditTable.vue
@@ -8,7 +8,7 @@
         <colum-info-form ref="columInfoRef" :columns="formData.columns" />
       </el-tab-pane>
       <el-tab-pane label="生成信息" name="generateInfo">
-        <generate-info-form ref="generateInfoRef" :table="formData.table" />
+        <generate-info-form ref="generateInfoRef" :table="formData.table" :columns="formData.columns" />
       </el-tab-pane>
     </el-tabs>
     <el-form>
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
index 744edfe6..178b4e0f 100644
--- a/src/views/infra/codegen/components/GenerateInfoForm.vue
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="12">
         <el-form-item label="生成模板" prop="templateType">
-          <el-select v-model="formData.templateType" @change="tplSelectChange">
+          <el-select v-model="formData.templateType">
             <el-option
               v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
               :key="dict.value"
@@ -246,48 +246,68 @@
         </el-form-item>
       </el-col>
     </el-row>
-    <el-row v-show="formData.tplCategory === 'sub'">
-      <h4 class="form-header">关联信息</h4>
+
+    <!-- 主表信息 -->
+    <el-row v-if="formData.templateType === 15">
+      <el-col :span="24">
+        <h4 class="form-header">主表信息</h4>
+      </el-col>
       <el-col :span="12">
-        <el-form-item>
+        <el-form-item prop="masterTableId">
           <template #label>
             <span>
-              关联子表的表名
-              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
+              关联的主表
+              <el-tooltip content="关联主表（父表）的表名， 如：system_user" placement="top">
                 <Icon icon="ep:question-filled" />
               </el-tooltip>
             </span>
           </template>
-          <el-select v-model="formData.subTableName" placeholder="请选择" @change="subSelectChange">
+          <el-select v-model="formData.masterTableId" placeholder="请选择">
             <el-option
               v-for="(table0, index) in tables"
               :key="index"
               :label="table0.tableName + '：' + table0.tableComment"
-              :value="table0.tableName"
+              :value="table0.id"
             />
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item>
+        <el-form-item prop="subJoinColumnId">
           <template #label>
             <span>
-              子表关联的外键名
-              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
+              子表关联的字段
+              <el-tooltip content="子表关联的字段， 如：user_id" placement="top">
                 <Icon icon="ep:question-filled" />
               </el-tooltip>
             </span>
           </template>
-          <el-select v-model="formData.subTableFkName" placeholder="请选择">
+          <el-select v-model="formData.subJoinColumnId" placeholder="请选择">
             <el-option
-              v-for="(column, index) in subColumns"
+              v-for="(column, index) in props.columns"
               :key="index"
               :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
+              :value="column.id"
             />
           </el-select>
         </el-form-item>
       </el-col>
+      <el-col :span="12">
+        <el-form-item prop="subJoinMany">
+          <template #label>
+            <span>
+              关联关系
+              <el-tooltip content="主表与子表的关联关系" placement="top">
+                <Icon icon="ep:question-filled" />
+              </el-tooltip>
+            </span>
+          </template>
+          <el-radio-group v-model="formData.subJoinMany" placeholder="请选择">
+            <el-radio :label="true">一对多</el-radio>
+            <el-radio :label="false">一对一</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-col>
     </el-row>
   </el-form>
 </template>
@@ -305,6 +325,10 @@ const props = defineProps({
   table: {
     type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
     default: () => null
+  },
+  columns: {
+    type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
+    default: () => null
   }
 })
 
@@ -323,9 +347,10 @@ const formData = ref({
   treeParentCode: '',
   treeName: '',
   tplCategory: '',
-  subTableName: '',
-  subTableFkName: '',
-  genType: ''
+  genType: '',
+  masterTableId: undefined,
+  subJoinColumnId: undefined,
+  subJoinMany: undefined
 })
 
 const rules = reactive({
@@ -336,41 +361,27 @@ const rules = reactive({
   businessName: [required],
   businessPackage: [required],
   className: [required],
-  classComment: [required]
+  classComment: [required],
+  masterTableId: [required],
+  subJoinColumnId: [required],
+  subJoinMany: [required]
 })
 
-const tables = ref([])
-const subColumns = ref([])
+const tables = ref([]) // 表定义列表
 const menus = ref<any[]>([])
 const menuTreeProps = {
   label: 'name'
 }
 
-/** 选择子表名触发 */
-const subSelectChange = () => {
-  formData.value.subTableFkName = ''
-}
-
-/** 选择生成模板触发 */
-const tplSelectChange = (value) => {
-  if (value !== 1) {
-    // TODO 芋艿：暂时不考虑支持树形结构
-    message.error(
-      '暂时不考虑支持【树形】和【主子表】的代码生成。原因是：导致 vm 模板过于复杂，不利于胖友二次开发'
-    )
-    return false
-  }
-  if (value !== 'sub') {
-    formData.value.subTableName = ''
-    formData.value.subTableFkName = ''
-  }
-}
-
 watch(
   () => props.table,
-  (table) => {
+  async (table) => {
     if (!table) return
     formData.value = table as any
+    // 加载表列表
+    if (table.dataSourceConfigId >= 0) {
+      tables.value = await CodegenApi.getCodegenTableList(formData.value.dataSourceConfigId)
+    }
   },
   {
     deep: true,
@@ -380,6 +391,7 @@ watch(
 
 onMounted(async () => {
   try {
+    // 加载菜单
     const resp = await MenuApi.getSimpleMenusList()
     menus.value = handleTree(resp)
   } catch {}
diff --git a/src/views/infra/demo12/Demo12StudentForm.vue b/src/views/infra/demo12/Demo12StudentForm.vue
index d3cb482d..af4e2733 100644
--- a/src/views/infra/demo12/Demo12StudentForm.vue
+++ b/src/views/infra/demo12/Demo12StudentForm.vue
@@ -42,7 +42,7 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="头像">
+      <el-form-item label="头像" prop="avatar">
         <UploadImg v-model="formData.avatar" />
       </el-form-item>
       <el-form-item label="附件" prop="video">
diff --git a/src/views/infra/demo12/components/Demo12StudentContactForm.vue b/src/views/infra/demo12/components/Demo12StudentContactForm.vue
index d71f6146..e246678b 100644
--- a/src/views/infra/demo12/components/Demo12StudentContactForm.vue
+++ b/src/views/infra/demo12/components/Demo12StudentContactForm.vue
@@ -1,5 +1,155 @@
 <template>
-  <div>123</div>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="formData.sex" placeholder="请选择性别">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-radio-group v-model="formData.enabled">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="头像" prop="avatar">
+        <UploadImg v-model="formData.avatar" />
+      </el-form-item>
+      <el-form-item label="附件" prop="video">
+        <UploadFile v-model="formData.video" />
+      </el-form-item>
+      <el-form-item label="备注" prop="memo">
+        <Editor v-model="formData.memo" height="150px" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
 </template>
 <script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo12StudentApi from '@/api/infra/demo12'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  description: undefined,
+  birthday: undefined,
+  sex: undefined,
+  enabled: undefined,
+  avatar: undefined,
+  video: undefined,
+  memo: undefined
+})
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
+  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, studentId: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  formData.value.studentId = studentId
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo12StudentApi.getDemo12StudentContact(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value === 'create') {
+      await Demo12StudentApi.createDemo12StudentContact(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo12StudentApi.updateDemo12StudentContact(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    description: undefined,
+    birthday: undefined,
+    sex: undefined,
+    enabled: undefined,
+    avatar: undefined,
+    video: undefined,
+    memo: undefined
+  }
+  formRef.value?.resetFields()
+}
 </script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentContactList.vue b/src/views/infra/demo12/components/Demo12StudentContactList.vue
index 65ed9df1..b9b1e717 100644
--- a/src/views/infra/demo12/components/Demo12StudentContactList.vue
+++ b/src/views/infra/demo12/components/Demo12StudentContactList.vue
@@ -1,6 +1,14 @@
 <template>
   <!-- 列表 -->
   <ContentWrap>
+    <el-button
+      type="primary"
+      plain
+      @click="openForm('create')"
+      v-hasPermi="['infra:demo12-student:create']"
+    >
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="学生编号" align="center" prop="studentId" />
@@ -33,31 +41,108 @@
         :formatter="dateFormatter"
         width="180px"
       />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo12-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo12-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
   </ContentWrap>
+
+    <!-- 表单弹窗：添加/修改 -->
+    <Demo12StudentContactForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import * as Demo12StudentApi from '@/api/infra/demo12'
+import Demo12StudentContactForm from './Demo12StudentContactForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
 const props = defineProps<{
   studentId: undefined // 学生编号（主表的关联字段）
 }>()
-const loading = ref(true) // 列表的加载中
+const loading = ref(false) // 列表的加载中
 const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    queryParams.studentId = val
+    handleQuery()
+  },
+  { immediate: false }
+)
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    list.value = await Demo12StudentApi.getDemo12StudentContactListByStudentId(studentId.props)
+    const data = await Demo12StudentApi.getDemo12StudentContactPage(queryParams)
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
 }
 
-/** 初始化 **/
-onMounted(() => {
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
   getList()
-})
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  if (!props.studentId) {
+    message.error('请选择一个学生')
+    return
+  }
+  formRef.value.open(type, id, props.studentId)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo12StudentApi.deleteDemo12StudentContact(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
 </script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue b/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
index d71f6146..92e2b373 100644
--- a/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
+++ b/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
@@ -1,5 +1,155 @@
 <template>
-  <div>123</div>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="formData.sex" placeholder="请选择性别">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有效" prop="enabled">
+        <el-radio-group v-model="formData.enabled">
+          <el-radio
+            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="头像" prop="avatar">
+        <UploadImg v-model="formData.avatar" />
+      </el-form-item>
+      <el-form-item label="附件" prop="video">
+        <UploadFile v-model="formData.video" />
+      </el-form-item>
+      <el-form-item label="备注" prop="memo">
+        <Editor v-model="formData.memo" height="150px" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
 </template>
 <script setup lang="ts">
+import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo12StudentApi from '@/api/infra/demo12'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  description: undefined,
+  birthday: undefined,
+  sex: undefined,
+  enabled: undefined,
+  avatar: undefined,
+  video: undefined,
+  memo: undefined
+})
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
+  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
+  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
+  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, studentId: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  formData.value.studentId = studentId
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo12StudentApi.getDemo12StudentTeacher(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value === 'create') {
+      await Demo12StudentApi.createDemo12StudentTeacher(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo12StudentApi.updateDemo12StudentTeacher(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    description: undefined,
+    birthday: undefined,
+    sex: undefined,
+    enabled: undefined,
+    avatar: undefined,
+    video: undefined,
+    memo: undefined
+  }
+  formRef.value?.resetFields()
+}
 </script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentTeacherList.vue b/src/views/infra/demo12/components/Demo12StudentTeacherList.vue
index 55f6845b..d0594534 100644
--- a/src/views/infra/demo12/components/Demo12StudentTeacherList.vue
+++ b/src/views/infra/demo12/components/Demo12StudentTeacherList.vue
@@ -1,6 +1,14 @@
 <template>
   <!-- 列表 -->
   <ContentWrap>
+    <el-button
+      type="primary"
+      plain
+      @click="openForm('create')"
+      v-hasPermi="['infra:demo12-student:create']"
+    >
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="学生编号" align="center" prop="studentId" />
@@ -33,35 +41,108 @@
         :formatter="dateFormatter"
         width="180px"
       />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo12-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo12-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
   </ContentWrap>
+
+    <!-- 表单弹窗：添加/修改 -->
+    <Demo12StudentTeacherForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
 import { DICT_TYPE } from '@/utils/dict'
 import * as Demo12StudentApi from '@/api/infra/demo12'
+import Demo12StudentTeacherForm from './Demo12StudentTeacherForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
 const props = defineProps<{
   studentId: undefined // 学生编号（主表的关联字段）
 }>()
-const loading = ref(true) // 列表的加载中
+const loading = ref(false) // 列表的加载中
 const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    queryParams.studentId = val
+    handleQuery()
+  },
+  { immediate: false }
+)
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const data = await Demo12StudentApi.getDemo12StudentTeacherByStudentId(studentId.props)
-    if (!data) {
-      return
-    }
-    list.value.push(data)
+    const data = await Demo12StudentApi.getDemo12StudentTeacherPage(queryParams)
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
 }
 
-/** 初始化 **/
-onMounted(() => {
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
   getList()
-})
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  if (!props.studentId) {
+    message.error('请选择一个学生')
+    return
+  }
+  formRef.value.open(type, id, props.studentId)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo12StudentApi.deleteDemo12StudentTeacher(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
 </script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/index.vue b/src/views/infra/demo12/index.vue
index c5a82a4c..47ec7f21 100644
--- a/src/views/infra/demo12/index.vue
+++ b/src/views/infra/demo12/index.vue
@@ -94,7 +94,14 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="名字" align="center" prop="name" />
       <el-table-column label="简介" align="center" prop="description" />
@@ -157,6 +164,17 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <Demo12StudentForm ref="formRef" @success="getList" />
+  <!-- 子表的列表 -->
+  <ContentWrap>
+    <el-tabs model-value="demo12StudentContact">
+      <el-tab-pane label="学生联系人" name="demo12StudentContact">
+        <Demo12StudentContactList :student-id="currentRow.id" />
+      </el-tab-pane>
+      <el-tab-pane label="学生班主任" name="demo12StudentTeacher">
+        <Demo12StudentTeacherList :student-id="currentRow.id" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
 </template>
 
 <script setup lang="ts">
@@ -165,6 +183,8 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import * as Demo12StudentApi from '@/api/infra/demo12'
 import Demo12StudentForm from './Demo12StudentForm.vue'
+import Demo12StudentContactList from './components/Demo12StudentContactList.vue'
+import Demo12StudentTeacherList from './components/Demo12StudentTeacherList.vue'
 
 defineOptions({ name: 'InfraDemo12Student' })
 
@@ -245,6 +265,12 @@ const handleExport = async () => {
   }
 }
 
+/** 选中行操作 */
+const currentRow = ref({}) // 选中行
+const handleCurrentChange = (row) => {
+  currentRow.value = row
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()

From 015a1640c1a1c66d6975788158eaeaa4c4200130 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 14 Nov 2023 11:26:07 +0800
Subject: [PATCH 58/77] =?UTF-8?q?crm-=E5=9B=A2=E9=98=9F=E6=88=90=E5=91=98?=
 =?UTF-8?q?=EF=BC=9A=E5=AE=8C=E5=96=84=E5=9B=A2=E9=98=9F=E6=88=90=E5=91=98?=
 =?UTF-8?q?=E9=80=9A=E7=94=A8=E7=BB=84=E4=BB=B6=E5=B0=81=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/permission/index.ts               | 35 +++++++++++++------
 .../crm/components/CrmPermissionForm.vue      | 30 +++++++++-------
 src/views/crm/components/CrmTeamList.vue      | 31 ++++++++--------
 src/views/crm/components/index.ts             |  8 ++++-
 4 files changed, 65 insertions(+), 39 deletions(-)

diff --git a/src/api/crm/permission/index.ts b/src/api/crm/permission/index.ts
index f71e2bfc..c592bb23 100644
--- a/src/api/crm/permission/index.ts
+++ b/src/api/crm/permission/index.ts
@@ -1,14 +1,14 @@
 import request from '@/config/axios'
 
 export interface PermissionVO {
-  id: number // 数据权限编号
-  userId: number // 用户编号
-  bizType: number // Crm 类型
-  bizId: number // Crm 类型数据编号
-  level: number // 权限级别
-  deptName: string // 部门名称
-  nickname: string // 用户昵称
-  postNames: string // 岗位名称数组
+  id?: number // 数据权限编号
+  userId: number | undefined // 用户编号
+  bizType: number | undefined // Crm 类型
+  bizId: number | undefined // Crm 类型数据编号
+  level: number | undefined // 权限级别
+  deptName?: string // 部门名称
+  nickname?: string // 用户昵称
+  postNames?: string // 岗位名称数组
 }
 
 // 查询团队成员列表
@@ -21,8 +21,8 @@ export const createPermission = async (data: PermissionVO) => {
   return await request.post({ url: `/crm/permission/add`, data })
 }
 
-// 修改团队成员
-export const updatePermission = async (data: PermissionVO) => {
+// 修改团队成员权限级别
+export const updatePermission = async (data) => {
   return await request.put({ url: `/crm/permission/update`, data })
 }
 
@@ -30,3 +30,18 @@ export const updatePermission = async (data: PermissionVO) => {
 export const deletePermission = async (params) => {
   return await request.delete({ url: '/crm/permission/delete', params })
 }
+
+// 退出团队
+export const quitTeam = async (id) => {
+  return await request.delete({ url: '/crm/permission/quit-team?id=' + id })
+}
+
+// 领取公海数据
+export const receive = async (data: { bizType: number; bizId: number }) => {
+  return await request.put({ url: `/crm/permission/receive`, data })
+}
+
+// 数据放入公海
+export const putPool = async (data: { bizType: number; bizId: number }) => {
+  return await request.put({ url: `/crm/permission/put-pool`, data })
+}
diff --git a/src/views/crm/components/CrmPermissionForm.vue b/src/views/crm/components/CrmPermissionForm.vue
index 1d217323..9754637b 100644
--- a/src/views/crm/components/CrmPermissionForm.vue
+++ b/src/views/crm/components/CrmPermissionForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="dialogVisible" :title="dialogTitle">
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
     <el-form
       ref="formRef"
       v-loading="formLoading"
@@ -11,16 +11,16 @@
         <el-select v-model="formData.userId">
           <el-option
             v-for="item in userOptions"
-            :key="parseInt(item.id)"
+            :key="item.id"
             :label="item.nickname"
-            :value="parseInt(item.id)"
+            :value="item.id"
           />
         </el-select>
       </el-form-item>
       <el-form-item label="权限级别" prop="level">
         <el-radio-group v-model="formData.level">
-          <el-radio label="2">只读</el-radio>
-          <el-radio label="3">读写</el-radio>
+          <el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio>
+          <el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
@@ -32,6 +32,8 @@
 </template>
 <script lang="ts" setup>
 import * as UserApi from '@/api/system/user'
+import * as PermissionApi from '@/api/crm/permission'
+import { CrmPermissionLevelEnum } from './index'
 
 defineOptions({ name: 'CrmPermissionForm' })
 const { t } = useI18n() // 国际化
@@ -42,7 +44,7 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-const formData = ref({
+const formData = ref<PermissionApi.PermissionVO & { ids?: number[] }>({
   userId: undefined, // 用户编号
   bizType: undefined, // Crm 类型
   bizId: undefined, // Crm 类型数据编号
@@ -55,17 +57,15 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
-const open = async (type: 'create' | 'update', bizType: number, bizId: number, id?: number) => {
+const open = async (type: 'create' | 'update', bizType: number, bizId: number, ids?: number[]) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type) + '团队成员'
   formType.value = type
   resetForm(bizType, bizId)
   // 修改时，设置数据
-  if (id) {
-    formData.value.id = id
+  if (ids) {
+    formData.value.ids = ids
   }
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -81,8 +81,10 @@ const submitForm = async () => {
   try {
     const data = formData.value
     if (formType.value === 'create') {
+      await PermissionApi.createPermission(unref(data))
       message.success(t('common.createSuccess'))
     } else {
+      await PermissionApi.updatePermission(unref(data))
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -95,12 +97,16 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = (bizType: number, bizId: number) => {
+  formRef.value?.resetFields()
   formData.value = {
     userId: undefined, // 用户编号
     bizType, // Crm 类型
     bizId, // Crm 类型数据编号
     level: undefined // 权限级别
   }
-  formRef.value?.resetFields()
 }
+onMounted(async () => {
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+})
 </script>
diff --git a/src/views/crm/components/CrmTeamList.vue b/src/views/crm/components/CrmTeamList.vue
index 824409b8..6a1c14bc 100644
--- a/src/views/crm/components/CrmTeamList.vue
+++ b/src/views/crm/components/CrmTeamList.vue
@@ -25,10 +25,10 @@
     @selection-change="handleSelectionChange"
   >
     <el-table-column type="selection" width="55" />
-    <el-table-column align="center" label="姓名" prop="mobile" />
-    <el-table-column align="center" label="部门" prop="detailAddress" />
-    <el-table-column align="center" label="岗位" prop="detailAddress" />
-    <el-table-column align="center" label="权限级别" prop="creatorName" />
+    <el-table-column align="center" label="姓名" prop="nickname" />
+    <el-table-column align="center" label="部门" prop="deptName" />
+    <el-table-column align="center" label="岗位" prop="postNames" />
+    <el-table-column align="center" label="权限级别" prop="level" />
     <el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
   </el-table>
   <CrmPermissionForm ref="crmPermissionFormRef" />
@@ -39,6 +39,7 @@ import { ElTable } from 'element-plus'
 import * as PermissionApi from '@/api/crm/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import CrmPermissionForm from './CrmPermissionForm.vue'
+import { CrmPermissionLevelEnum } from './index'
 
 defineOptions({ name: 'CrmTeam' })
 const props = defineProps<{
@@ -65,14 +66,14 @@ const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
   multipleSelection.value = val
 }
 const message = useMessage()
-const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm | null>>(null)
+const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>()
 const handleEdit = () => {
   if (multipleSelection.value?.length === 0) {
     message.warning('请先选择团队成员后操作！')
     return
   }
   const ids = multipleSelection.value?.map((item) => item.id)
-  crmPermissionFormRef.value?.open('update', props.bizType, props.bizId, ids[0])
+  crmPermissionFormRef.value?.open('update', props.bizType, props.bizId, ids)
 }
 const handleRemove = async () => {
   if (multipleSelection.value?.length === 0) {
@@ -81,13 +82,10 @@ const handleRemove = async () => {
   }
   await message.delConfirm()
   const ids = multipleSelection.value?.map((item) => item.id)
-  ids?.forEach((id) => {
-    // TODO 还不确定要不要搞个批量删除，还是一次只能删除一个，先用循环弄一下
-    PermissionApi.deletePermission({
-      bizType: props.bizType,
-      bizId: props.bizId,
-      id
-    })
+  await PermissionApi.deletePermission({
+    bizType: props.bizType,
+    bizId: props.bizId,
+    ids
   })
 }
 const handleAdd = () => {
@@ -95,14 +93,16 @@ const handleAdd = () => {
 }
 
 const userStore = useUserStoreWithOut()
-const handleQuit = () => {
+const handleQuit = async () => {
   const permission = list.value.find(
-    (item) => item.userId === userStore.getUser.id && item.level === 1
+    (item) => item.userId === userStore.getUser.id && item.level === CrmPermissionLevelEnum.OWNER
   )
   if (permission) {
     message.warning('负责人不能退出团队！')
     return
   }
+  const userPermission = list.value.find((item) => item.userId === userStore.getUser.id)
+  await PermissionApi.quitTeam(userPermission?.id)
 }
 
 watch(
@@ -113,4 +113,3 @@ watch(
   { immediate: true, deep: true }
 )
 </script>
-<style lang="scss" scoped></style>
diff --git a/src/views/crm/components/index.ts b/src/views/crm/components/index.ts
index b0bf3e42..c25feef3 100644
--- a/src/views/crm/components/index.ts
+++ b/src/views/crm/components/index.ts
@@ -8,4 +8,10 @@ enum CrmBizTypeEnum {
   CRM_CONTRACT = 6 // 合同
 }
 
-export { CrmTeam, CrmBizTypeEnum }
+enum CrmPermissionLevelEnum {
+  OWNER = 1, // 负责人
+  READ = 2, // 读
+  WRITE = 3 // 写
+}
+
+export { CrmTeam, CrmBizTypeEnum, CrmPermissionLevelEnum }

From 8e0cf5c1e54afd114a41fd40f838614a68bbb4d0 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 14 Nov 2023 12:06:42 +0800
Subject: [PATCH 59/77] =?UTF-8?q?crm-=E5=9B=A2=E9=98=9F=E6=88=90=E5=91=98?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=8E=B7=E5=BE=97=E6=9D=83=E9=99=90?=
 =?UTF-8?q?=E7=BA=A7=E5=88=AB=E5=90=8D=E7=A7=B0=E5=87=BD=E6=95=B0=20getLev?=
 =?UTF-8?q?elName?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/permission/index.ts          |  1 +
 src/views/crm/components/CrmTeamList.vue | 38 ++++++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/api/crm/permission/index.ts b/src/api/crm/permission/index.ts
index c592bb23..e790c334 100644
--- a/src/api/crm/permission/index.ts
+++ b/src/api/crm/permission/index.ts
@@ -9,6 +9,7 @@ export interface PermissionVO {
   deptName?: string // 部门名称
   nickname?: string // 用户昵称
   postNames?: string // 岗位名称数组
+  createTime?: Date
 }
 
 // 查询团队成员列表
diff --git a/src/views/crm/components/CrmTeamList.vue b/src/views/crm/components/CrmTeamList.vue
index 6a1c14bc..f7591f6a 100644
--- a/src/views/crm/components/CrmTeamList.vue
+++ b/src/views/crm/components/CrmTeamList.vue
@@ -28,7 +28,11 @@
     <el-table-column align="center" label="姓名" prop="nickname" />
     <el-table-column align="center" label="部门" prop="deptName" />
     <el-table-column align="center" label="岗位" prop="postNames" />
-    <el-table-column align="center" label="权限级别" prop="level" />
+    <el-table-column align="center" label="权限级别" prop="level">
+      <template #default="{ row }">
+        <el-tag>{{ getLevelName(row.level) }}</el-tag>
+      </template>
+    </el-table-column>
     <el-table-column :formatter="dateFormatter" align="center" label="加入时间" prop="createTime" />
   </el-table>
   <CrmPermissionForm ref="crmPermissionFormRef" />
@@ -47,7 +51,20 @@ const props = defineProps<{
   bizId: number
 }>()
 const loading = ref(true) // 列表的加载中
-const list = ref<PermissionApi.PermissionVO[]>([]) // 列表的数据
+const list = ref<PermissionApi.PermissionVO[]>([
+  // TODO 测试数据
+  {
+    id: 1, // 数据权限编号
+    userId: 1, // 用户编号
+    bizType: 1, // Crm 类型
+    bizId: 1, // Crm 类型数据编号
+    level: 1, // 权限级别
+    deptName: '研发部门', // 部门名称
+    nickname: '芋道源码', // 用户昵称
+    postNames: '全栈开发工程师', // 岗位名称数组
+    createTime: new Date()
+  }
+]) // 列表的数据
 const getList = async () => {
   loading.value = true
   try {
@@ -60,7 +77,22 @@ const getList = async () => {
     loading.value = false
   }
 }
-
+/**
+ * 获得权限级别名称
+ * @param level 权限级别
+ */
+const getLevelName = computed(() => (level: number) => {
+  switch (level) {
+    case CrmPermissionLevelEnum.OWNER:
+      return '负责人'
+    case CrmPermissionLevelEnum.READ:
+      return '只读'
+    case CrmPermissionLevelEnum.WRITE:
+      return '读写'
+    default:
+      break
+  }
+})
 const multipleSelection = ref<PermissionApi.PermissionVO[]>([])
 const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
   multipleSelection.value = val

From e56afbf80f892f382ae1b61ddfa62d79307ef247 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 14 Nov 2023 21:49:49 +0800
Subject: [PATCH 60/77] chore: update deps

---
 package.json | 56 ++++++++++++++++++++++++++--------------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index fb0f23ad..bc01d35f 100644
--- a/package.json
+++ b/package.json
@@ -31,23 +31,23 @@
     "@form-create/element-ui": "^3.1.24",
     "@iconify/iconify": "^3.1.1",
     "@videojs-player/vue": "^1.0.0",
-    "@vueuse/core": "^10.5.0",
+    "@vueuse/core": "^10.6.1",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.10",
     "@zxcvbn-ts/core": "^3.0.4",
     "animate.css": "^4.1.1",
-    "axios": "^1.6.0",
+    "axios": "^1.6.1",
     "benz-amr-recorder": "^1.1.5",
     "bpmn-js-token-simulation": "^0.10.0",
     "camunda-bpmn-moddle": "^7.0.1",
     "cropperjs": "^1.6.1",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
-    "diagram-js": "^12.6.0",
-    "driver.js": "^1.3.0",
+    "diagram-js": "^12.8.0",
+    "driver.js": "^1.3.1",
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "2.4.1",
+    "element-plus": "2.4.2",
     "fast-xml-parser": "^4.3.2",
     "highlight.js": "^11.9.0",
     "jsencrypt": "^3.3.2",
@@ -62,9 +62,9 @@
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
     "video.js": "^7.21.5",
-    "vue": "^3.3.7",
+    "vue": "^3.3.8",
     "vue-dompurify-html": "^4.1.4",
-    "vue-i18n": "^9.6.2",
+    "vue-i18n": "^9.6.5",
     "vue-router": "^4.2.5",
     "vue-types": "^5.1.1",
     "vuedraggable": "^4.1.0",
@@ -72,49 +72,49 @@
     "xml-js": "^1.6.11"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.2.0",
-    "@commitlint/config-conventional": "^18.1.0",
-    "@iconify/json": "^2.2.135",
-    "@intlify/unplugin-vue-i18n": "^1.4.0",
+    "@commitlint/cli": "^18.4.1",
+    "@commitlint/config-conventional": "^18.4.0",
+    "@iconify/json": "^2.2.142",
+    "@intlify/unplugin-vue-i18n": "^1.5.0",
     "@purge-icons/generated": "^0.9.0",
-    "@types/lodash-es": "^4.17.10",
-    "@types/node": "^20.8.9",
-    "@types/nprogress": "^0.2.2",
-    "@types/qrcode": "^1.5.4",
-    "@types/qs": "^6.9.9",
-    "@types/sortablejs": "^1.15.4",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
-    "@unocss/transformer-variant-group": "^0.57.1",
-    "@unocss/eslint-config": "^0.57.1",
+    "@types/lodash-es": "^4.17.11",
+    "@types/node": "^20.9.0",
+    "@types/nprogress": "^0.2.3",
+    "@types/qrcode": "^1.5.5",
+    "@types/qs": "^6.9.10",
+    "@types/sortablejs": "^1.15.5",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "@unocss/transformer-variant-group": "^0.57.4",
+    "@unocss/eslint-config": "^0.57.4",
     "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.4.0",
+    "@vitejs/plugin-vue": "^4.4.1",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
     "autoprefixer": "^10.4.16",
     "bpmn-js": "8.9.0",
     "bpmn-js-properties-panel": "0.46.0",
     "consola": "^3.2.3",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-define-config": "^1.24.1",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-vue": "^9.18.1",
-    "lint-staged": "^15.0.2",
+    "lint-staged": "^15.1.0",
     "postcss": "^8.4.31",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.9",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "rimraf": "^5.0.5",
-    "rollup": "^4.1.5",
+    "rollup": "^4.4.1",
     "sass": "^1.69.5",
     "stylelint": "^15.11.0",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-order": "^6.0.3",
-    "terser": "^5.23.0",
+    "terser": "^5.24.0",
     "typescript": "5.2.2",
-    "unocss": "^0.57.1",
+    "unocss": "^0.57.4",
     "unplugin-auto-import": "^0.16.7",
     "unplugin-element-plus": "^0.8.0",
     "unplugin-vue-components": "^0.25.2",

From 8a74b954d09b47d02d5a92a152c17de6c93ca3b1 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 14 Nov 2023 21:53:30 +0800
Subject: [PATCH 61/77] docs: update deps

---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index aa498ce2..6c0cc78d 100644
--- a/README.md
+++ b/README.md
@@ -38,15 +38,15 @@
 
 | 框架                                                                   | 说明               | 版本     |
 |----------------------------------------------------------------------|------------------|--------|
-| [Vue](https://staging-cn.vuejs.org/)                                 | Vue 框架           | 3.3.4 |
-| [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具          | 4.4.11  |
-| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus     | 2.4.0 |
+| [Vue](https://staging-cn.vuejs.org/)                                 | Vue 框架           | 3.3.8 |
+| [Vite](https://cn.vitejs.dev//)                                      | 开发与构建工具          | 4.5.0  |
+| [Element Plus](https://element-plus.org/zh-CN/)                      | Element Plus     | 2.4.2 |
 | [TypeScript](https://www.typescriptlang.org/docs/)                   | JavaScript 的超集   | 5.2.2  |
 | [pinia](https://pinia.vuejs.org/)                                    | Vue 存储库 替代 vuex5 | 2.1.7 |
-| [vueuse](https://vueuse.org/)                                        | 常用工具集            | 10.5.0 |
-| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.5.0  |
+| [vueuse](https://vueuse.org/)                                        | 常用工具集            | 10.6.1 |
+| [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化              | 9.6.5  |
 | [vue-router](https://router.vuejs.org/)                              | Vue 路由           | 4.2.5  |
-| [unocss](https://uno.antfu.me/)                                      | 原子 css          | 0.56.5  |
+| [unocss](https://uno.antfu.me/)                                      | 原子 css          | 0.57.4  |
 | [iconify](https://icon-sets.iconify.design/)                         | 在线图标库            | 3.1.1  |
 | [wangeditor](https://www.wangeditor.com/)                            | 富文本编辑器           | 5.1.23 |
 

From 249e0d21a3a96cec9e437544b27b1d60664cd12f Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 14 Nov 2023 21:56:02 +0800
Subject: [PATCH 62/77] fix: eslint

---
 src/assets/map/json/china.json                | 857 +++++++++++++++++-
 .../components/mobile/Carousel/index.vue      |   2 +-
 src/views/infra/codegen/PreviewCode.vue       |   2 +-
 3 files changed, 858 insertions(+), 3 deletions(-)

diff --git a/src/assets/map/json/china.json b/src/assets/map/json/china.json
index 0c92e71c..bbc0a832 100644
--- a/src/assets/map/json/china.json
+++ b/src/assets/map/json/china.json
@@ -1 +1,856 @@
-{"type":"FeatureCollection","features":[{"type":"Feature","id":"710000","properties":{"id":"710000","cp":[121.509062,24.044332],"name":"台湾","childNum":6},"geometry":{"type":"MultiPolygon","coordinates":[["@@°Ü¯Û"],["@@ƛĴÕƊÉɼģºðʀ\\ƎsÆNŌÔĚäœnÜƤɊĂǀĆĴžĤNJŨxĚĮǂƺòƌ‚–âÔ®ĮXŦţƸZûЋƕƑGđ¨ĭMó·ęcëƝɉlÝƯֹÅŃ^Ó·śŃNjƏďíåɛGɉ™¿@ăƑŽ¥ĘWǬÏĶŁâ"],["@@\\p|WoYG¿¥I†j@¢"],["@@…¡‰@ˆV^RqˆBbAŒnTXeRz¤Lž«³I"],["@@ÆEE—„kWqë @œ"],["@@fced"],["@@„¯ɜÄèaì¯ØǓIġĽ"],["@@çûĖ롖hòř "]],"encodeOffsets":[[[122886,24033]],[[123335,22980]],[[122375,24193]],[[122518,24117]],[[124427,22618]],[[124862,26043]],[[126259,26318]],[[127671,26683]]]}},{"type":"Feature","id":"130000","properties":{"id":"130000","cp":[114.502461,38.045474],"name":"河北","childNum":3},"geometry":{"type":"MultiPolygon","coordinates":[["@@o~†Z]‚ªr‰ºc_ħ²G¼s`jΟnüsœłNX_“M`ǽÓnUK…Ĝēs¤­©yrý§uģŒc†JŠ›e"],["@@U`Ts¿m‚"],["@@oºƋÄd–eVŽDJj£€J|Ådz•Ft~žKŨ¸IÆv|”‡¢r}膎onb˜}`RÎÄn°ÒdÞ²„^®’lnÐèĄlðӜ×]ªÆ}LiĂ±Ö`^°Ç¶p®đDcœŋ`–ZÔ’¶êqvFƚ†N®ĆTH®¦O’¾ŠIbÐã´BĐɢŴÆíȦp–ĐÞXR€·nndOž¤’OÀĈƒ­Qg˜µFo|gȒęSWb©osx|hYh•gŃfmÖĩnº€T̒Sp›¢dYĤ¶UĈjl’ǐpäìë|³kÛfw²Xjz~ÂqbTŠÑ„ěŨ@|oM‡’zv¢ZrÃVw¬ŧĖ¸fŒ°ÐT€ªqŽs{Sž¯r æÝlNd®²Ğ džiGʂJ™¼lr}~K¨ŸƐÌWö€™ÆŠzRš¤lêmĞL΄’@¡|q]SvK€ÑcwpÏρ†ĿćènĪWlĄkT}ˆJ”¤~ƒÈT„d„™pddʾĬŠ”ŽBVt„EÀ¢ôPĎƗè@~‚k–ü\\rÊĔÖæW_§¼F˜†´©òDòj’ˆYÈrbĞāøŀG{ƀ|¦ðrb|ÀH`pʞkv‚GpuARhÞÆǶgʊTǼƹS£¨¡ù³ŘÍ]¿Ây™ôEP xX¶¹܇O¡“gÚ¡IwÃ鑦ÅB‡Ï|Ç°…N«úmH¯‹âŸDùŽyŜžŲIÄuШDž•¸dɂ‡‚FŸƒ•›Oh‡đ©OŸ›iÃ`ww^ƒÌkŸ‘ÑH«ƇǤŗĺtFu…{Z}Ö@U‡´…ʚLg®¯Oı°ÃwŸ ^˜—€VbÉs‡ˆmA…ê]]w„§›RRl£‡ȭµu¯b{ÍDěïÿȧŽuT£ġƒěŗƃĝ“Q¨fV†Ƌ•ƅn­a@‘³@šď„yýIĹÊKšŭfċŰóŒxV@tˆƯŒJ”]eƒR¾fe|rHA˜|h~Ėƍl§ÏŠlTíb ØoˆÅbbx³^zÃĶš¶Sj®A”yÂhðk`š«P€”ˈµEF†Û¬Y¨Ļrõqi¼‰Wi°§’б´°^[ˆÀ|ĠO@ÆxO\\tŽa\\tĕtû{ġŒȧXýĪÓjùÎRb›š^ΛfK[ݏděYfíÙTyŽuUSyŌŏů@Oi½’éŅ­aVcř§ax¹XŻác‡žWU£ôãºQ¨÷Ñws¥qEH‰Ù|‰›šYQoŕÇyáĂ£MðoťÊ‰P¡mšWO¡€v†{ôvîēÜISpÌhp¨ ‘j†deŔQÖj˜X³à™Ĉ[n`Yp@Už–cM`’RKhŒEbœ”pŞlNut®Etq‚nsÁŠgA‹iú‹oH‡qCX‡”hfgu“~ϋWP½¢G^}¯ÅīGCŸÑ^ãziMáļMTÃƘrMc|O_ž¯Ŏ´|‡morDkO\\mĆJfl@cĢ¬¢aĦtRıҙ¾ùƀ^juųœK­ƒUFy™—Ɲ…›īÛ÷ąV×qƥV¿aȉd³B›qPBm›aËđŻģm“Å®VŠ¹d^K‡KoŸnYg“¯Xhqa”Ldu¥•ÍpDž¡KąÅƒkĝęěhq‡}HyÓ]¹ǧ£…Í÷¿qᵧš™g‘¤o^á¾ZE‡¤i`ij{n•ƒOl»ŸWÝĔįhg›F[¿¡—ßkOüš_‰€ū‹i„DZàUtėGylƒ}ŒÓM}€jpEC~¡FtoQi‘šHkk{Ãmï‚"]],"encodeOffsets":[[[119712,40641]],[[121616,39981]],[[116462,37237]]]}},{"type":"Feature","id":"140000","properties":{"id":"140000","cp":[111.849248,36.857014],"name":"山西","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@Þĩ҃S‰ra}Á€yWix±Üe´lè“ßÓǏok‘ćiµVZģ¡coœ‘TS˹ĪmnÕńe–hZg{gtwªpXaĚThȑp{¶Eh—®RćƑP¿£‘Pmc¸mQÝW•ďȥoÅîɡųAďä³aωJ‘½¥PG­ąSM­™…EÅruµé€‘Yӎ•Ō_d›ĒCo­Èµ]¯_²ÕjāŽK~©ÅØ^ԛkïçămϑk]­±ƒcݯÑÃmQÍ~_a—pm…~ç¡q“ˆu{JÅŧ·Ls}–EyÁÆcI{¤IiCfUc•ƌÃp§]웫vD@¡SÀ‘µM‚ÅwuŽYY‡¡DbÑc¡hƒ×]nkoQdaMç~eD•ÛtT‰©±@¥ù@É¡‰ZcW|WqOJmĩl«ħşvOÓ«IqăV—¥ŸD[mI~Ó¢cehiÍ]Ɠ~ĥqXŠ·eƷœn±“}v•[ěďŽŕ]_‘œ•`‰¹ƒ§ÕōI™o©b­s^}Ét±ū«³p£ÿ·Wµ|¡¥ăFÏs׌¥ŅxŸÊdÒ{ºvĴÎêÌɊ²¶€ü¨|ÞƸµȲ‘LLúÉƎ¤ϊęĔV`„_bª‹S^|ŸdŠzY|dz¥p†ZbÆ£¶ÒK}tĦÔņƠ‚PYzn€ÍvX¶Ěn ĠÔ„zý¦ª˜÷žÑĸَUȌ¸‚dòÜJð´’ìúNM¬ŒXZ´‘¤ŊǸ_tldIš{¦ƀðĠȤ¥NehXnYG‚‡R° ƬDj¬¸|CĞ„Kq‚ºfƐiĺ©ª~ĆOQª ¤@ìǦɌ²æBŒÊ”TœŸ˜ʂōĖ’šĴŞ–ȀœÆÿȄlŤĒö„t”νî¼ĨXhŒ‘˜|ªM¤Ðz"],"encodeOffsets":[[116874,41716]]}},{"type":"Feature","id":"150000","properties":{"id":"150000","cp":[111.670801,41.818311],"name":"内蒙古","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@¯PqƒFB…‰|S•³C|kñ•H‹d‘iÄ¥sˆʼnő…PóÑÑE^‘ÅPpy_YtS™hQ·aHwsOnʼnÚs©iqj›‰€USiº]ïWš‰«gW¡A–Rë¥_ŽsgÁnUI«m‰…„‹]j‡vV¼euhwqA„aW˜ƒ_µj…»çjioQR¹ēÃßt@r³[ÛlćË^ÍÉáG“›OUۗOB±•XŸkŇ¹£k|e]ol™ŸkVͼÕqtaÏõjgÁ£§U^Œ”RLˆËnX°Ç’Bz†^~wfvˆypV ¯„ƫĉ˭ȫƗŷɿÿĿƑ˃ĝÿÃǃßËőó©ǐȍŒĖM×ÍEyx‹þp]Évïè‘vƀnÂĴÖ@‚‰†V~Ĉv¦wĖt—ējyÄDXÄxGQuv_›i¦aBçw‘˛wD™©{ŸtāmQ€{EJ§KPśƘƿ¥@‰sCT•É}ɃwˆƇy±ŸgÑ“}T[÷kÐ禫…SÒ¥¸ëBX½‰HáŵÀğtSÝÂa[ƣ°¯¦P]£ġ“–“Òk®G²„èQ°óMq}EŠóƐÇ\\ƒ‡@áügQ͋u¥Fƒ“T՛¿Jû‡]|mvāÎYua^WoÀa·­ząÒot׶CLƗi¯¤mƎHNJ¤îìɾŊìTdåwsRÖgĒųúÍġäÕ}Q¶—ˆ¿A•†‹[¡Œ{d×uQAƒ›M•xV‹vMOmăl«ct[wº_šÇʊŽŸjb£ĦS_é“QZ“_lwgOiýe`YYLq§IÁˆdz£ÙË[ÕªuƏ³ÍT—s·bÁĽäė[›b[ˆŗfãcn¥îC¿÷µ[ŏÀQ­ōšĉm¿Á^£mJVm‡—L[{Ï_£›F¥Ö{ŹA}…×Wu©ÅaųijƳhB{·TQqÙIķˑZđ©Yc|M¡…L•eVUóK_QWk’_ĥ‘¿ãZ•»X\\ĴuUƒè‡lG®ěłTĠğDєOrÍd‚ÆÍz]‹±…ŭ©ŸÅ’]ŒÅÐ}UË¥©Tċ™ïxgckfWgi\\ÏĒ¥HkµE˜ë{»ÏetcG±ahUiñiWsɁˆ·c–C‚Õk]wȑ|ća}w…VaĚ᠞ŒG°ùnM¬¯†{ȈÐÆA’¥ÄêJxÙ¢”hP¢Ûˆº€µwWOŸóFŽšÁz^ÀŗÎú´§¢T¤ǻƺSė‰ǵhÝÅQgvBHouʝl_o¿Ga{ïq{¥|ſĿHĂ÷aĝÇq‡Z‘ñiñC³ª—…»E`¨åXēÕqÉû[l•}ç@čƘóO¿¡ƒFUsA‰“ʽīccšocƒ‚ƒÇS}„“£‡IS~ălkĩXçmĈ…ŀЂoÐdxÒuL^T{r@¢‘žÍƒĝKén£kQ™‰yšÅõËXŷƏL§~}kqš»IHėDžjĝŸ»ÑÞoŸå°qTt|r©ÏS‹¯·eŨĕx«È[eMˆ¿yuˆ‘pN~¹ÏyN£{©’—g‹ħWí»Í¾s“əšDž_ÃĀɗ±ą™ijĉʍŌŷ—S›É“A‹±åǥɋ@럣R©ąP©}ĹªƏj¹erƒLDĝ·{i«ƫC£µsKCš…GS|úþX”gp›{ÁX¿Ÿć{ƱȏñZáĔyoÁhA™}ŅĆfdʼn„_¹„Y°ėǩÑ¡H¯¶oMQqð¡Ë™|‘Ñ`ƭŁX½·óۓxğįÅcQ‡ˆ“ƒs«tȋDžF“Ÿù^i‘t«Č¯[›hAi©á¥ÇĚ×l|¹y¯YȵƓ‹ñǙµï‚ċ™Ļ|Dœ™üȭ¶¡˜›oŽäÕG\\ďT¿Òõr¯œŸLguÏYęRƩšɷŌO\\İТæ^Ŋ IJȶȆbÜGŽĝ¬¿ĚVĎgª^íu½jÿĕęjık@Ľƒ]ėl¥Ë‡ĭûÁ„ƒėéV©±ćn©­ȇžÍq¯½•YÃÔʼn“ÉNѝÅÝy¹NqáʅDǡËñ­ƁYÅy̱os§ȋµʽǘǏƬɱà‘ưN¢ƔÊuľýľώȪƺɂļžxœZĈ}ÌʼnŪ˜ĺœŽĭFЛĽ̅ȣͽÒŵìƩÇϋÿȮǡŏçƑůĕ~Ǎ›¼ȳÐUf†dIxÿ\\G ˆzâɏÙOº·pqy£†@ŒŠqþ@Ǟ˽IBäƣzsÂZ†ÁàĻdñ°ŕzéØűzșCìDȐĴĺf®ŽÀľưø@ɜÖÞKĊŇƄ§‚͑těï͡VAġÑÑ»d³öǍÝXĉĕÖ{þĉu¸ËʅğU̎éhɹƆ̗̮ȘNJ֥ड़ࡰţાíϲäʮW¬®ҌeרūȠkɬɻ̼ãüfƠSצɩςåȈHϚÎKdzͲOðÏȆƘ¼CϚǚ࢚˼ФԂ¤ƌžĞ̪Qʤ´¼mȠJˀŸƲÀɠmǐnǔĎȆÞǠN~€ʢĜ‚¶ƌĆĘźʆȬ˪ĚĒ¸ĞGȖƴƀj`ĢçĶāàŃºēĢƒĖćšYŒÀŎüôQÐÂŎŞdžŞêƖš˜oˆDĤÕºÑǘÛˤ³̀gńƘĔÀ^žªƂ`ªt¾äƚêĦĀ¼Ð€Ĕǎ¨Ȕ»͠^ˮÊȦƤøxRrŜH¤¸ÂxDĝŒ|ø˂˜ƮÐ¬ɚwɲFjĔ²Äw°dždÀɞ_ĸdîàŎjʜêTЪŌ‡ŜWÈ|tqĢUB~´°ÎFC•ŽU¼pĀēƄN¦¾O¶ŠłKĊOj“Ě”j´ĜYp˜{¦„ˆSĚÍ\\Tš×ªV–÷Ší¨ÅDK°ßtŇĔKš¨ǵÂcḷ̌ĚǣȄĽF‡lġUĵœŇ‹ȣFʉɁƒMğįʏƶɷØŭOǽ«ƽū¹Ʊő̝Ȩ§ȞʘĖiɜɶʦ}¨֪ࠜ̀ƇǬ¹ǨE˦ĥªÔêFŽxúQ„Er´W„rh¤Ɛ \\talĈDJ˜Ü|[Pll̚¸ƎGú´Pž¬W¦†^¦–H]prR“n|or¾wLVnÇIujkmon£cX^Bh`¥V”„¦U¤¸}€xRj–[^xN[~ªŠxQ„‚[`ªHÆÂExx^wšN¶Ê˜|¨ì†˜€MrœdYp‚oRzNy˜ÀDs~€bcfÌ`L–¾n‹|¾T‚°c¨È¢a‚r¤–`[|òDŞĔöxElÖdH„ÀI`„Ď\\Àì~ƎR¼tf•¦^¢ķ¶e”ÐÚMŒptgj–„ɡČÅyġLû™ŇV®ŠÄÈƀ†Ď°P|ªVV†ªj–¬ĚÒêp¬–E|ŬÂc|ÀtƐK fˆ{ĘFĒœƌXƲąo½Ę‘\\¥–o}›Ûu£ç­kX‘{uĩ«āíÓUŅßŢq€Ť¥lyň[€oi{¦‹L‡ń‡ðFȪȖ”ĒL„¿Ì‹ˆfŒ£K£ʺ™oqNŸƒwğc`ue—tOj×°KJ±qƒÆġm‰Ěŗos¬…qehqsuœƒH{¸kH¡Š…ÊRǪÇƌbȆ¢´ä܍¢NìÉʖ¦â©Ġu¦öČ^â£Ăh–šĖMÈÄw‚\\fŦ°W ¢¾luŸD„wŠ\\̀ʉÌÛM…Ā[bӞEn}¶Vc…ê“sƒ"]],"encodeOffsets":[[[129102,52189]]]}},{"type":"Feature","id":"210000","properties":{"id":"210000","cp":[123.429096,41.796767],"name":"辽宁","childNum":16},"geometry":{"type":"MultiPolygon","coordinates":[["@@L–Ž@@s™a"],["@@MnNm"],["@@d‚c"],["@@eÀ‚C@b‚“‰"],["@@f‡…Xwkbr–Ä`qg"],["@@^jtW‘Q"],["@@~ Y]c"],["@@G`ĔN^_¿Z‚ÃM"],["@@iX¶B‹Y"],["@@„YƒZ"],["@@L_{Epf"],["@@^WqCT\\"],["@@\\[“‹§t|”¤_"],["@@m`n_"],["@@Ïxnj{q_×^Giip"],["@@@œé^B†‡ntˆaÊU—˜Ÿ]x ¯ÄPIJ­°h€ʙK³†VˆÕ@Y~†|EvĹsDŽ¦­L^p²ŸÒG ’Ël]„xxÄ_˜fT¤Ď¤cŽœP„–C¨¸TVjbgH²sdÎdHt`Bˆ—²¬GJję¶[ÐhjeXdlwhšðSȦªVÊπ‹Æ‘Z˜ÆŶ®²†^ŒÎyÅÎcPqń“ĚDMħĜŁH­ˆk„çvV[ij¼W–‚YÀäĦ’‘`XlžR`žôLUVžfK–¢†{NZdĒª’YĸÌÚJRr¸SA|ƴgŴĴÆbvªØX~†źBŽ|¦ÕœEž¤Ð`\\|Kˆ˜UnnI]¤ÀÂĊnŎ™R®Ő¿¶\\ÀøíDm¦ÎbŨab‰œaĘ\\ľã‚¸a˜tÎSƐ´©v\\ÖÚÌǴ¤Â‡¨JKr€Z_Z€fjþhPkx€`Y”’RIŒjJcVf~sCN¤ ˆE‚œhæm‰–sHy¨SðÑÌ\\\\ŸĐRZk°IS§fqŒßýáЍÙÉÖ[^¯ǤŲ„ê´\\¦¬ĆPM¯£Ÿˆ»uïpùzEx€žanµyoluqe¦W^£ÊL}ñrkqWňûP™‰UP¡ôJŠoo·ŒU}£Œ„[·¨@XŒĸŸ“‹‹DXm­Ûݏº‡›GU‹CÁª½{íĂ^cj‡k“¶Ã[q¤“LÉö³cux«zZfƒ²BWÇ®Yß½ve±ÃC•ý£W{Ú^’q^sÑ·¨‹ÍOt“¹·C¥‡GD›rí@wÕKţ݋˜Ÿ«V·i}xËÍ÷‘i©ĝ‡ɝǡ]ƒˆ{c™±OW‹³Ya±Ÿ‰_穂Hžĕoƫ€Ňqƒr³‰Lys[„ñ³¯OS–ďOMisZ†±ÅFC¥Pq{‚Ã[Pg}\\—¿ghćO…•k^ģÁFıĉĥM­oEqqZûěʼn³F‘¦oĵ—hŸÕP{¯~TÍlª‰N‰ßY“Ð{Ps{ÃVU™™eĎwk±ʼnVÓ½ŽJãÇÇ»Jm°dhcÀff‘dF~ˆ€ĀeĖ€d`sx² šƒ®EżĀdQ‹Âd^~ăÔHˆ¦\\›LKpĄVez¤NP ǹӗR™ÆąJSh­a[¦´Âghwm€BÐ¨źhI|žVVŽ—Ž|p] Â¼èNä¶ÜBÖ¼“L`‚¼bØæŒKV”ŸpoœúNZÞÒKxpw|ÊEMnzEQšŽIZ”ŽZ‡NBˆčÚFÜçmĩ‚WĪñt‘ÞĵÇñZ«uD‚±|Əlij¥ãn·±PmÍa‰–da‡ CL‡Ǒkùó¡³Ï«QaċϑOÃ¥ÕđQȥċƭy‹³ÃA"]],"encodeOffsets":[[[123686,41445]],[[126019,40435]],[[124393,40128]],[[126117,39963]],[[125322,40140]],[[126686,40700]],[[126041,40374]],[[125584,40168]],[[125453,40165]],[[125362,40214]],[[125280,40291]],[[125774,39997]],[[125976,40496]],[[125822,39993]],[[125509,40217]],[[122731,40949]]]}},{"type":"Feature","id":"220000","properties":{"id":"220000","cp":[125.3245,43.886841],"name":"吉林","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@‘p䔳PClƒFbbÍzš€wBG’ĭ€Z„Åi“»ƒlY­ċ²SgŽkÇ£—^S‰“qd¯•‹R…©éŽ£¯S†\\cZ¹iűƏCuƍÓX‡oR}“M^o•£…R}oªU­F…uuXHlEŕ‡€Ï©¤ÛmTŽþ¤D–²ÄufàÀ­XXȱAe„yYw¬dvõ´KÊ£”\\rµÄl”iˆdā]|DÂVŒœH¹ˆÞ®ÜWnŒC”Œķ W‹§@\\¸‹ƒ~¤‹Vp¸‰póIO¢ŠVOšŇürXql~òÉK]¤¥Xrfkvzpm¶bwyFoúvð‡¼¤ N°ąO¥«³[ƒéǡű_°Õ\\ÚÊĝŽþâőàerR¨­JYlďQ[ ÏYëЧTGz•tnŠß¡gFkMŸāGÁ¤ia É‰™È¹`\\xs€¬dĆkNnuNUŠ–užP@‚vRY¾•–\\¢…ŒGªóĄ~RãÖÎĢù‚đŴÕhQŽxtcæëSɽʼníëlj£ƍG£nj°KƘµDsØÑpyƸ®¿bXp‚]vbÍZuĂ{nˆ^IüœÀSք”¦EŒvRÎûh@℈[‚Əȉô~FNr¯ôçR±ƒ­HÑl•’Ģ–^¤¢‚OðŸŒævxsŒ]ÞÁTĠs¶¿âƊGW¾ìA¦·TѬ†è¥€ÏÐJ¨¼ÒÖ¼ƒƦɄxÊ~S–tD@ŠĂ¼Ŵ¡jlºWžvЉˆzƦZЎ²CH— „Axiukd‹ŒGgetqmcžÛ£Ozy¥cE}|…¾cZ…k‚‰¿uŐã[oxGikfeäT@…šSUwpiÚFM©’£è^ڟ‚`@v¶eň†f h˜eP¶žt“äOlÔUgƒÞzŸU`lœ}ÔÆUvØ_Ō¬Öi^ĉi§²ÃŠB~¡Ĉ™ÚEgc|DC_Ȧm²rBx¼MÔ¦ŮdĨÃâYx‘ƘDVÇĺĿg¿cwÅ\\¹˜¥Yĭlœ¤žOv†šLjM_a W`zļMž·\\swqÝSA‡š—q‰Śij¯Š‘°kŠRē°wx^Đkǂғ„œž“œŽ„‹\\]˜nrĂ}²ĊŲÒøãh·M{yMzysěnĒġV·°“G³¼XÀ““™¤¹i´o¤ŃšŸÈ`̃DzÄUĞd\\i֚ŒˆmÈBĤÜɲDEh LG¾ƀľ{WaŒYÍȏĢĘÔRîĐj‹}Ǟ“ccj‡oUb½š{“h§Ǿ{K‹ƖµÎ÷žGĀÖŠåưÎs­l›•yiē«‹`姝H¥Ae^§„GK}iã\\c]v©ģZ“mÃ|“[M}ģTɟĵ‘Â`À–çm‰‘FK¥ÚíÁbXš³ÌQґHof{‰]e€pt·GŋĜYünĎųVY^’˜ydõkÅZW„«WUa~U·Sb•wGçǑ‚“iW^q‹F‚“›uNĝ—·Ew„‹UtW·Ýďæ©PuqEzwAV•—XR‰ãQ`­©GŒM‡ehc›c”ďϝd‡©ÑW_ϗYƅŒ»…é\\ƒɹ~ǙG³mØ©BšuT§Ĥ½¢Ã_ý‘L¡‘ýŸqT^rme™\\Pp•ZZbƒyŸ’uybQ—efµ]UhĿDCmûvašÙNSkCwn‰cćfv~…Y‹„ÇG"],"encodeOffsets":[[130196,42528]]}},{"type":"Feature","id":"230000","properties":{"id":"230000","cp":[128.642464,46.756967],"name":"黑龙江","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@UƒµNÿ¥īè灋•HÍøƕ¶LŒǽ|g¨|”™Ža¾pViˆdd”~ÈiŒíďÓQġėǐZ΋ŽXb½|ſÃH½ŸKFgɱCģÛÇA‡n™‹jÕc[VĝDZÃ˄Ç_™ £ń³pŽj£º”š¿”»WH´¯”U¸đĢmžtĜyzzNN|g¸÷äűѱĉā~mq^—Œ[ƒ”››”ƒǁÑďlw]¯xQĔ‰¯l‰’€°řĴrŠ™˜BˆÞTxr[tŽ¸ĻN_yŸX`biN™Ku…P›£k‚ZĮ—¦[ºxÆÀdhŽĹŀUÈƗCw’áZħÄŭcÓ¥»NAw±qȥnD`{ChdÙFćš}¢‰A±Äj¨]ĊÕjŋ«×`VuÓś~_kŷVÝyh„“VkÄãPs”Oµ—fŸge‚Ň…µf@u_Ù ÙcŸªNªÙEojVx™T@†ãSefjlwH\\pŏäÀvŠŽlY†½d{†F~¦dyz¤PÜndsrhf‹HcŒvlwjFœ£G˜±DύƥY‡yϊu¹XikĿ¦ÏqƗǀOŜ¨LI|FRĂn sª|Cš˜zxAè¥bœfudTrFWÁ¹Am|˜ĔĕsķÆF‡´Nš‰}ć…UŠÕ@Áijſmužç’uð^ÊýowŒFzØÎĕNőžǏȎôªÌŒDŽàĀÄ˄ĞŀƒʀĀƘŸˮȬƬĊ°ƒUŸzou‡xe]}Ž…AyȑW¯ÌmK‡“Q]‹Īºif¸ÄX|sZt|½ÚUΠlkš^p{f¤lˆºlÆW –€A²˜PVܜPH”Êâ]ÎĈÌÜk´\\@qàsĔÄQºpRij¼èi†`¶—„bXƒrBgxfv»ŽuUiˆŒ^v~”J¬mVp´£Œ´VWrnP½ì¢BX‚¬h™ŠðX¹^TjVœŠriªj™tŊÄm€tPGx¸bgRšŽsT`ZozÆO]’ÒFô҆Oƒ‡ŊŒvŞ”p’cGŒêŠsx´DR–Œ{A†„EOr°Œ•žx|íœbˆ³Wm~DVjºéNN†Ëܲɶ­GƒxŷCStŸ}]ûō•SmtuÇÃĕN•™āg»šíT«u}ç½BĵÞʣ¥ëÊ¡Mێ³ãȅ¡ƋaǩÈÉQ‰†G¢·lG|›„tvgrrf«†ptęŘnŠÅĢr„I²¯LiØsPf˜_vĠd„xM prʹšL¤‹¤‡eˌƒÀđK“žïÙVY§]I‡óáĥ]ķ†Kˆ¥Œj|pŇ\\kzţ¦šnņäÔVĂîĪ¬|vW’®l¤èØr‚˜•xm¶ă~lÄƯĄ̈́öȄEÔ¤ØQĄ–Ą»ƢjȦOǺ¨ìSŖÆƬy”Qœv`–cwƒZSÌ®ü±DŽ]ŀç¬B¬©ńzƺŷɄeeOĨS’Œfm Ċ‚ƀP̎ēz©Ċ‚ÄÕÊmgŸÇsJ¥ƔˆŊśæ’΁Ñqv¿íUOµª‰ÂnĦÁ_½ä@ê텣P}Ġ[@gġ}g“ɊדûÏWXá¢užƻÌsNͽƎÁ§č՛AēeL³àydl›¦ĘVçŁpśdžĽĺſʃQíÜçÛġԏsĕ¬—Ǹ¯YßċġHµ ¡eå`ļƒrĉŘóƢFì“ĎWøxÊk†”ƈdƬv|–I|·©NqńRŀƒ¤é”eŊœŀ›ˆàŀU²ŕƀB‚Q£Ď}L¹Îk@©ĈuǰųǨ”Ú§ƈnTËÇéƟÊcfčŤ^Xm‡—HĊĕË«W·ċëx³ǔķÐċJā‚wİ_ĸ˜Ȁ^ôWr­°oú¬Ħ…ŨK~”ȰCĐ´Ƕ£’fNÎèâw¢XnŮeÂÆĶŽ¾¾xäLĴĘlļO¤ÒĨA¢Êɚ¨®‚ØCÔ ŬGƠ”ƦYĜ‡ĘÜƬDJ—g_ͥœ@čŅĻA“¶¯@wÎqC½Ĉ»NŸăëK™ďÍQ“Ùƫ[«Ãí•gßÔÇOÝáW‘ñuZ“¯ĥ€Ÿŕā¡ÑķJu¤E Ÿå¯°WKɱ_d_}}vyŸõu¬ï¹ÓU±½@gÏ¿rýD‰†g…Cd‰µ—°MFYxw¿CG£‹Rƛ½Õ{]L§{qqąš¿BÇƻğëšܭNJË|c²}Fµ}›ÙRsÓpg±ŠQNqǫŋRwŕnéÑÉKŸ†«SeYR…ŋ‹@{¤SJ}šD Ûǖ֍Ÿ]gr¡µŷjqWÛham³~S«“„›Þ]"]],"encodeOffsets":[[[134456,44547]]]}},{"type":"Feature","id":"320000","properties":{"id":"320000","cp":[119.767413,33.041544],"name":"江苏","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@cþÅPiŠ`ZŸRu¥É\\]~°ŽY`µ†Óƒ^phÁbnÀşúŽòa–ĬºTÖŒb‚˜e¦¦€{¸ZâćNpŒ©žHr|^ˆmjhŠSEb\\afv`sz^lkŽlj‹Ätg‹¤D˜­¾Xš¿À’|ДiZ„ȀåB·î}GL¢õcßjaŸyBFµÏC^ĭ•cÙt¿sğH]j{s©HM¢ƒQnDÀ©DaÜތ·jgàiDbPufjDk`dPOîƒhw¡ĥ‡¥šG˜ŸP²ĐobºrY†„î¶aHŢ´ ]´‚rılw³r_{£DB_Ûdåuk|ˆŨ¯F Cºyr{XFy™e³Þċ‡¿Â™kĭB¿„MvÛpm`rÚã”@Ę¹hågËÖƿxnlč¶Åì½Ot¾dJlŠVJʜǀœŞqvnOŠ^ŸJ”Z‘ż·Q}ê͎ÅmµÒ]Žƍ¦Dq}¬R^èĂ´ŀĻĊIԒtžIJyQŐĠMNtœR®òLh‰›Ěs©»œ}OӌGZz¶A\\jĨFˆäOĤ˜HYš†JvÞHNiÜaϚɖnFQlšNM¤ˆB´ĄNöɂtp–Ŭdf先‹qm¿QûŠùއÚb¤uŃJŴu»¹Ą•lȖħŴw̌ŵ²ǹǠ͛hĭłƕrçü±Y™xci‡tğ®jű¢KOķ•Coy`å®VTa­_Ā]ŐÝɞï²ʯÊ^]afYǸÃĆēĪȣJđ͍ôƋĝÄ͎ī‰çÛɈǥ£­ÛmY`ó£Z«§°Ó³QafusNıDž_k}¢m[ÝóDµ—¡RLčiXy‡ÅNïă¡¸iĔϑNÌŕoēdōîåŤûHcs}~Ûwbù¹£¦ÓCt‹OPrƒE^ÒoŠg™ĉIµžÛÅʹK…¤½phMŠü`o怆ŀ"],"encodeOffsets":[[121740,32276]]}},{"type":"Feature","id":"330000","properties":{"id":"330000","cp":[120.153576,29.287459],"name":"浙江","childNum":45},"geometry":{"type":"MultiPolygon","coordinates":[["@@E^dQ]K"],["@@jX^j‡"],["@@sfŠbU‡"],["@@qP\\xz[ck"],["@@‘Rƒ¢‚FX}°[s_"],["@@Cbœ\\—}"],["@@e|v\\la{u"],["@@v~u}"],["@@QxÂF¯}"],["@@¹nŒvÞs¯o"],["@@rSkUEj"],["@@bi­ZŒP"],["@@p[}INf"],["@@À¿€"],["@@¹dnbŒ…"],["@@rSŸBnR"],["@@g~h}"],["@@FlEk"],["@@OdPc"],["@@v[u\\"],["@@FjâL~wyoo~›sµL–\\"],["@@¬e¹aNˆ"],["@@\\nÔ¡q]L³ë\\ÿ®ŒQ֎"],["@@ÊA­©[¬"],["@@KxŒv­"],["@@@hlIk]"],["@@pW{o||j"],["@@Md|_mC"],["@@¢…X£ÏylD¼XˆtH"],["@@hlÜ[LykAvyfw^Ež›¤"],["@@fp¤Mus“R"],["@@®_ma~•LÁ¬šZ"],["@@iM„xZ"],["@@ZcYd"],["@@Z~dOSo|A¿qZv"],["@@@`”EN¡v"],["@@|–TY{"],["@@@n@m"],["@@XWkCT\\"],["@@ºwšZRkĕWO¢"],["@@™X®±Grƪ\\ÔáXq{‹"],["@@ůTG°ĄLHm°UC‹"],["@@¤Ž€aÜx~}dtüGæţŎíĔcŖpMËВjē¢·ðĄÆMzˆjWKĎ¢Q¶˜À_꒔_Bı€i«pZ€gf€¤Nrq]§ĂN®«H±‡yƳí¾×ŸīàLłčŴǝĂíÀBŖÕªˆŠÁŖHŗʼnåqûõi¨hÜ·ƒñt»¹ýv_[«¸m‰YL¯‰Qª…mĉÅdMˆ•gÇjcº«•ęœ¬­K­´ƒB«Âącoċ\\xKd¡gěŧ«®á’[~ıxu·Å”KsËɏc¢Ù\\ĭƛëbf¹­ģSƒĜkáƉÔ­ĈZB{ŠaM‘µ‰fzʼnfåÂŧįƋǝÊĕġć£g³ne­ą»@­¦S®‚\\ßðCšh™iqªĭiAu‡A­µ”_W¥ƣO\\lċĢttC¨£t`ˆ™PZäuXßBs‡Ļyek€OđġĵHuXBšµ]׌‡­­\\›°®¬F¢¾pµ¼kŘó¬Wät’¸|@ž•L¨¸µr“ºù³Ù~§WI‹ŸZWŽ®’±Ð¨ÒÉx€`‰²pĜ•rOògtÁZ}þÙ]„’¡ŒŸFK‚wsPlU[}¦Rvn`hq¬\\”nQ´ĘRWb”‚_ rtČFI֊kŠŠĦPJ¶ÖÀÖJĈĄTĚòžC ²@Pú…Øzœ©PœCÈڜĒ±„hŖ‡l¬â~nm¨f©–iļ«m‡nt–u†ÖZÜÄj“ŠLŽ®E̜Fª²iÊxبžIÈhhst"],["@@o\\V’zRZ}y"],["@@†@°¡mۛGĕ¨§Ianá[ýƤjfæ‡ØL–•äGr™"]],"encodeOffsets":[[[125592,31553]],[[125785,31436]],[[125729,31431]],[[125513,31380]],[[125223,30438]],[[125115,30114]],[[124815,29155]],[[124419,28746]],[[124095,28635]],[[124005,28609]],[[125000,30713]],[[125111,30698]],[[125078,30682]],[[125150,30684]],[[124014,28103]],[[125008,31331]],[[125411,31468]],[[125329,31479]],[[125626,30916]],[[125417,30956]],[[125254,30976]],[[125199,30997]],[[125095,31058]],[[125083,30915]],[[124885,31015]],[[125218,30798]],[[124867,30838]],[[124755,30788]],[[124802,30809]],[[125267,30657]],[[125218,30578]],[[125200,30562]],[[124968,30474]],[[125167,30396]],[[124955,29879]],[[124714,29781]],[[124762,29462]],[[124325,28754]],[[123990,28459]],[[125366,31477]],[[125115,30363]],[[125369,31139]],[[122495,31878]],[[125329,30690]],[[125192,30787]]]}},{"type":"Feature","id":"340000","properties":{"id":"340000","cp":[117.283042,31.26119],"name":"安徽","childNum":3},"geometry":{"type":"MultiPolygon","coordinates":[["@@^iuLX^"],["@@‚e©Ehl"],["@@°ZÆëϵmkǀwÌÕæhºgBĝâqÙĊz›ÖgņtÀÁÊÆá’hEz|WzqD¹€Ÿ°E‡ŧl{ævÜcA`¤C`|´qžxIJkq^³³ŸGšµbƒíZ…¹qpa±ď OH—¦™Ħˆx¢„gPícOl_iCveaOjCh߸i݋bÛªCC¿€m„RV§¢A|t^iĠGÀtÚs–d]ĮÐDE¶zAb àiödK¡~H¸íæAžǿYƒ“j{ď¿‘™À½W—®£ChŒÃsiŒkkly]_teu[bFa‰Tig‡n{]Gqªo‹ĈMYá|·¥f¥—őaSÕė™NµñĞ«ImŒ_m¿Âa]uĜp …Z_§{Cƒäg¤°r[_Yj‰ÆOdý“[ŽI[á·¥“Q_n‡ùgL¾mv™ˊBÜƶĊJhšp“c¹˜O]iŠ]œ¥ jtsggJǧw×jÉ©±›EFˍ­‰Ki”ÛÃÕYv…s•ˆm¬njĻª•§emná}k«ŕˆƒgđ²Ù›DǤ›í¡ªOy›†×Où±@DŸñSęćăÕIÕ¿IµĥO‰‰jNÕËT¡¿tNæŇàåyķrĕq§ÄĩsWÆߎF¶žX®¿‰mŒ™w…RIޓfßoG‘³¾©uyH‘į{Ɓħ¯AFnuP…ÍÔzšŒV—dàôº^Ðæd´€‡oG¤{S‰¬ćxã}›ŧ×Kǥĩ«žÕOEзÖdÖsƘѨ[’Û^Xr¢¼˜§xvěƵ`K”§ tÒ´Cvlo¸fzŨð¾NY´ı~ÉĔē…ßúLÃϖ_ÈÏ|]ÂÏFl”g`bšežž€n¾¢pU‚h~ƴĖ¶_‚r sĄ~cž”ƈ]|r c~`¼{À{ȒiJjz`îÀT¥Û³…]’u}›f…ïQl{skl“oNdŸjŸäËzDvčoQŠďHI¦rb“tHĔ~BmlRš—V_„ħTLnñH±’DžœL‘¼L˜ªl§Ťa¸ŒĚlK²€\\RòvDcÎJbt[¤€D@®hh~kt°ǾzÖ@¾ªdb„YhüóZ ň¶vHrľ\\ʗJuxAT|dmÀO„‹[ÃԋG·ĚąĐlŪÚpSJ¨ĸˆLvÞcPæķŨŽ®mАˆálŸwKhïgA¢ųƩޖ¤OȜm’°ŒK´"]],"encodeOffsets":[[[121722,32278]],[[119475,30423]],[[119168,35472]]]}},{"type":"Feature","id":"350000","properties":{"id":"350000","cp":[118.306239,26.075302],"name":"福建","childNum":18},"geometry":{"type":"MultiPolygon","coordinates":[["@@“zht´‡]"],["@@aj^~ĆG—©O"],["@@ed¨„C}}i"],["@@@vˆPGsQ"],["@@‰sBz‚ddW]Q"],["@@SŽ¨Q“{"],["@@NŽVucW"],["@@qptBAq"],["@@‰’¸[mu"],["@@Q\\pD]_"],["@@jSwUadpF"],["@@eXª~ƒ•"],["@@AjvFso"],["@@fT–›_Çí\\Ÿ™—v|ba¦jZÆy€°"],["@@IjJi"],["@@wJI€ˆxš«¼AoNe{M­"],["@@K‰±¡Óˆ”ČäeZ"],["@@k¡¹Eh~c®wBk‹UplÀ¡I•~Māe£bN¨gZý¡a±Öcp©PhžI”Ÿ¢Qq…ÇGj‹|¥U™ g[Ky¬ŏ–v@OpˆtÉEŸF„\\@ åA¬ˆV{Xģ‰ĐBy…cpě…¼³Ăp·¤ƒ¥o“hqqÚ¡ŅLsƒ^ᗞ§qlŸÀhH¨MCe»åÇGD¥zPO£čÙkJA¼ß–ėu›ĕeûҍiÁŧSW¥˜QŠûŗ½ùěcݧSùĩąSWó«íęACµ›eR—åǃRCÒÇZÍ¢‹ź±^dlsŒtjD¸•‚ZpužÔâÒH¾oLUêÃÔjjēò´ĄW‚ƛ…^Ñ¥‹ĦŸ@Çò–ŠmŒƒOw¡õyJ†yD}¢ďÑÈġfŠZd–a©º²z£šN–ƒjD°Ötj¶¬ZSÎ~¾c°¶Ðm˜x‚O¸¢Pl´žSL|¥žA†ȪĖM’ņIJg®áIJČĒü` ŽQF‡¬h|ÓJ@zµ |ê³È ¸UÖŬŬÀEttĸr‚]€˜ðŽM¤ĶIJHtÏ A’†žĬkvsq‡^aÎbvŒd–™fÊòSD€´Z^’xPsÞrv‹ƞŀ˜jJd×ŘÉ ®A–ΦĤd€xĆqAŒ†ZR”ÀMźŒnĊ»ŒİÐZ— YX–æJŠyĊ²ˆ·¶q§·–K@·{s‘Xãô«lŗ¶»o½E¡­«¢±¨Yˆ®Ø‹¶^A™vWĶGĒĢžPlzfˆļŽtàAvWYãšO_‡¤sD§ssČġ[kƤPX¦Ž`¶“ž®ˆBBvĪjv©šjx[L¥àï[F…¼ÍË»ğV`«•Ip™}ccÅĥZE‹ãoP…´B@ŠD—¸m±“z«Ƴ—¿å³BRضˆœWlâþäą`“]Z£Tc— ĹGµ¶H™m@_©—kŒ‰¾xĨ‡ôȉðX«½đCIbćqK³Á‹Äš¬OAwã»aLʼn‡ËĥW[“ÂGI—ÂNxij¤D¢ŽîĎÎB§°_JœGsƒ¥E@…¤uć…P‘å†cuMuw¢BI¿‡]zG¹guĮck\\_"]],"encodeOffsets":[[[123250,27563]],[[122541,27268]],[[123020,27189]],[[122916,27125]],[[122887,26845]],[[122808,26762]],[[122568,25912]],[[122778,26197]],[[122515,26757]],[[122816,26587]],[[123388,27005]],[[122450,26243]],[[122578,25962]],[[121255,25103]],[[120987,24903]],[[122339,25802]],[[121042,25093]],[[122439,26024]]]}},{"type":"Feature","id":"360000","properties":{"id":"360000","cp":[115.592151,27.676493],"name":"江西","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@ĢĨƐgļˆ¼ÂMD~ņªe^\\^§„ý©j׍cZ†Ø¨zdÒa¶ˆlҍJŒìõ`oz÷@¤u޸´†ôęöY¼‰HČƶajlÞƩ¥éZ[”|h}^U Œ ¥p„ĄžƦO lt¸Æ €Q\\€ŠaÆ|CnÂOjt­ĚĤd’ÈŒF`’¶„@Ð딠¦ōҞ¨Sêv†HĢûXD®…QgėWiØPÞìºr¤dž€NĠ¢l–•ĄtZoœCƞÔºCxrpĠV®Ê{f_Y`_ƒeq’’®Aot`@o‚DXfkp¨|Šs¬\\D‘ÄSfè©Hn¬…^DhÆyøJh“ØxĢĀLʈ„ƠPżċĄwȠ̦G®ǒĤäTŠÆ~ĦwŠ«|TF¡Šn€c³Ïå¹]ĉđxe{ÎӐ†vOEm°BƂĨİ|G’vz½ª´€H’àp”eJ݆Qšxn‹ÀŠW­žEµàXÅĪt¨ÃĖrÄwÀFÎ|ňÓMå¼ibµ¯»åDT±m[“r«_gŽmQu~¥V\\OkxtL E¢‹ƒ‘Ú^~ýê‹Pó–qo슱_Êw§ÑªåƗā¼‹mĉŹ‹¿NQ“…YB‹ąrwģcÍ¥B•Ÿ­ŗÊcØiI—žƝĿuŒqtāwO]‘³YCñTeɕš‹caub͈]trlu€ī…B‘ПGsĵıN£ï—^ķqss¿FūūV՟·´Ç{éĈý‰ÿ›OEˆR_ŸđûIċâJh­ŅıN‘ȩĕB…¦K{Tk³¡OP·wn—µÏd¯}½TÍ«YiµÕsC¯„iM•¤™­•¦¯P|ÿUHv“he¥oFTu‰õ\\ŽOSs‹MòđƇiaºćXŸĊĵà·çhƃ÷ǜ{‘ígu^›đg’m[×zkKN‘¶Õ»lčÓ{XSƉv©_ÈëJbVk„ĔVÀ¤P¾ºÈMÖxlò~ªÚàGĂ¢B„±’ÌŒK˜y’áV‡¼Ã~­…`g›ŸsÙfI›Ƌlę¹e|–~udjˆuTlXµf`¿JdŠ[\\˜„L‚‘²"],"encodeOffsets":[[116689,26234]]}},{"type":"Feature","id":"370000","properties":{"id":"370000","cp":[118.000923,36.275807],"name":"山东","childNum":13},"geometry":{"type":"MultiPolygon","coordinates":[["@@Xjd]{K"],["@@itbFHy"],["@@HlGk"],["@@T‚ŒGŸy"],["@@K¬˜•‹U"],["@@WdXc"],["@@PtOs"],["@@•LnXhc"],["@@ppVƒu]Or"],["@@cdzAUa"],["@@udRhnCI‡"],["@@ˆoIƒpR„"],["@@Ľč{fzƤî’Kš–ÎMĮ]†—ZFˆ½Y]â£ph’™š¶¨râøÀ†ÎǨ¤^ºÄ”Gzˆ~grĚĜlĞƄLĆdž¢Îo¦–cv“Kb€gr°Wh”mZp ˆL]LºcU‰Æ­n”żĤÌĒœbAnrOAœ´žȊcÀbƦUØrĆUÜøœĬƞ†š˜Ez„VL®öØBkŖÝĐĖ¹ŧ̄±ÀbÎɜnb²ĦhņBĖ›žįĦåXćì@L¯´ywƕCéõė ƿ¸‘lµ¾Z|†ZWyFYŸ¨Mf~C¿`€à_RÇzwƌfQnny´INoƬˆèôº|sT„JUš›‚L„îVj„ǎ¾Ē؍‚Dz²XPn±ŴPè¸ŔLƔÜƺ_T‘üÃĤBBċȉöA´fa„˜M¨{«M`‡¶d¡ô‰Ö°šmȰBÔjjŒ´PM|”c^d¤u•ƒ¤Û´Œä«ƢfPk¶Môlˆ]Lb„}su^ke{lC‘…M•rDŠÇ­]NÑFsmoõľH‰yGă{{çrnÓE‰‹ƕZGª¹Fj¢ïW…uøCǷ돡ąuhÛ¡^Kx•C`C\\bÅxì²ĝÝ¿_N‰īCȽĿåB¥¢·IŖÕy\\‡¹kx‡Ã£Č×GDyÕ¤ÁçFQ¡„KtŵƋ]CgÏAùSed‡cÚź—ŠuYfƒyMmhUWpSyGwMPqŀ—›Á¼zK›¶†G•­Y§Ëƒ@–´śÇµƕBmœ@Io‚g——Z¯u‹TMx}C‘‰VK‚ï{éƵP—™_K«™pÛÙqċtkkù]gŽ‹Tğwo•ɁsMõ³ă‡AN£™MRkmEʕč™ÛbMjÝGu…IZ™—GPģ‡ãħE[iµBEuŸDPԛ~ª¼ętŠœ]ŒûG§€¡QMsğNPŏįzs£Ug{đJĿļā³]ç«Qr~¥CƎÑ^n¶ÆéÎR~Ż¸Y’I“] P‰umŝrƿ›‰›Iā‹[x‰edz‹L‘¯v¯s¬ÁY…~}…ťuŁŒg›ƋpÝĄ_ņī¶ÏSR´ÁP~ž¿Cyžċßdwk´Ss•X|t‰`Ä Èð€AªìÎT°¦Dd–€a^lĎDĶÚY°Ž`ĪŴǒˆ”àŠv\\ebŒZH„ŖR¬ŢƱùęO•ÑM­³FۃWp[ƒ"]],"encodeOffsets":[[[123806,39303]],[[123821,39266]],[[123742,39256]],[[123702,39203]],[[123649,39066]],[[123847,38933]],[[123580,38839]],[[123894,37288]],[[123043,36624]],[[123344,38676]],[[123522,38857]],[[123628,38858]],[[118260,36742]]]}},{"type":"Feature","id":"410000","properties":{"id":"410000","cp":[113.665412,33.757975],"name":"河南","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@•ýL™ùµP³swIÓxcŢĞð†´E®žÚPt†ĴXØx¶˜@«ŕŕQGƒ‹Yfa[şu“ßǩ™đš_X³ijÕčC]kbc•¥CS¯ëÍB©÷‹–³­Siˆ_}m˜YTtž³xlàcȂzÀD}ÂOQ³ÐTĨ¯†ƗòËŖ[hœł‹Ŧv~††}ÂZž«¤lPǕ£ªÝŴÅR§ØnhcŒtâk‡nύ­ľŹUÓÝdKuķ‡I§oTũÙďkęĆH¸ÓŒ\\ăŒ¿PcnS{wBIvɘĽ[GqµuŸŇôYgûƒZcaŽ©@½Õǽys¯}lgg@­C\\£as€IdÍuCQñ[L±ęk·‹ţb¨©kK—’»›KC²‘òGKmĨS`ƒ˜UQ™nk}AGē”sqaJ¥ĐGR‰ĎpCuÌy ã iMc”plk|tRk†ðœev~^‘´†¦ÜŽSí¿_iyjI|ȑ|¿_»d}qŸ^{“Ƈdă}Ÿtqµ`Ƴĕg}V¡om½fa™Ço³TTj¥„tĠ—Ry”K{ùÓjuµ{t}uËR‘iŸvGŠçJFjµŠÍyqΘàQÂFewixGw½Yŷpµú³XU›½ġy™łå‰kÚwZXˆ·l„¢Á¢K”zO„Λ΀jc¼htoDHr…|­J“½}JZ_¯iPq{tę½ĕ¦Zpĵø«kQ…Ťƒ]MÛfaQpě±ǽ¾]u­Fu‹÷nƒ™čįADp}AjmcEǒaª³o³ÆÍSƇĈÙDIzˑ赟^ˆKLœ—i—Þñ€[œƒaA²zz‰Ì÷Dœ|[šíijgf‚ÕÞd®|`ƒĆ~„oĠƑô³Ŋ‘D×°¯CsŠøÀ«ì‰UMhTº¨¸ǡîS–Ô„DruÂÇZ•ÖEŽ’vPZ„žW”~؋ÐtĄE¢¦Ðy¸bŠô´oŬ¬Ž²Ês~€€]®tªašpŎJ¨Öº„_ŠŔ–`’Ŗ^Ѝ\\Ĝu–”~m²Ƹ›¸fW‰ĦrƔ}Î^gjdfÔ¡J}\\n C˜¦þWxªJRÔŠu¬ĨĨmF†dM{\\d\\ŠYÊ¢ú@@¦ª²SŠÜsC–}fNècbpRmlØ^g„d¢aÒ¢CZˆZxvÆ¶N¿’¢T@€uCœ¬^ĊðÄn|žlGl’™Rjsp¢ED}€Fio~ÔNŽ‹„~zkĘHVsDzßjƒŬŒŠŢ`Pûàl¢˜\\ÀœEhŽİgÞē X¼Pk–„|m"],"encodeOffsets":[[118256,37017]]}},{"type":"Feature","id":"420000","properties":{"id":"420000","cp":[113.298572,30.684355],"name":"湖北","childNum":3},"geometry":{"type":"MultiPolygon","coordinates":[["@@AB‚"],["@@lskt"],["@@¾«}{ra®pîÃ\\™›{øCŠËyyB±„b\\›ò˜Ý˜jK›‡L ]ĎĽÌ’JyÚCƈćÎT´Å´pb©È‘dFin~BCo°BĎĚømvŒ®E^vǾ½Ĝ²Ro‚bÜeNŽ„^ĺ£R†¬lĶ÷YoĖ¥Ě¾|sOr°jY`~I”¾®I†{GqpCgyl{‡£œÍƒÍyPL“¡ƒ¡¸kW‡xYlÙ抚ŁĢzœ¾žV´W¶ùŸo¾ZHxjwfx„GNÁ•³Xéæl¶‰EièIH‰ u’jÌQ~v|sv¶Ôi|ú¢Fh˜Qsğ¦ƒSiŠBg™ÐE^ÁÐ{–čnOÂȞUÎóĔ†ÊēIJ}Z³½Mŧïeyp·uk³DsѨŸL“¶_œÅuèw»—€¡WqÜ]\\‘Ò§tƗcÕ¸ÕFÏǝĉăxŻČƟO‡ƒKÉġÿ×wg”÷IÅzCg†]m«ªGeçÃTC’«[‰t§{loWeC@ps_Bp‘­r‘„f_``Z|ei¡—oċMqow€¹DƝӛDYpûs•–‹Ykıǃ}s¥ç³[§ŸcYŠ§HK„«Qy‰]¢“wwö€¸ïx¼ņ¾Xv®ÇÀµRĠЋžHMž±cÏd„ƒǍũȅȷ±DSyúĝ£ŤĀàtÖÿï[îb\\}pĭÉI±Ñy…¿³x¯N‰o‰|¹H™ÏÛm‹júË~Tš•u˜ęjCöAwě¬R’đl¯ Ñb­‰ŇT†Ŀ_[Œ‘IčĄʿnM¦ğ\\É[T·™k¹œ©oĕ@A¾w•ya¥Y\\¥Âaz¯ãÁ¡k¥ne£Ûw†E©Êō¶˓uoj_Uƒ¡cF¹­[Wv“P©w—huÕyBF“ƒ`R‹qJUw\\i¡{jŸŸEPïÿ½fć…QÑÀQ{ž‚°‡fLԁ~wXg—ītêݾ–ĺ‘Hdˆ³fJd]‹HJ²…E€ƒoU¥†HhwQsƐ»Xmg±çve›]Dm͂PˆoCc¾‹_h”–høYrŊU¶eD°Č_N~øĹĚ·`z’]Äþp¼…äÌQŒv\\rCŒé¾TnkžŐڀÜa‡“¼ÝƆĢ¶Ûo…d…ĔňТJq’Pb ¾|JŒ¾fXŠƐîĨ_Z¯À}úƲ‹N_ĒĊ^„‘ĈaŐyp»CÇĕKŠšñL³ŠġMŒ²wrIÒŭxjb[œžn«øœ˜—æˆàƒ ^²­h¯Ú€ŐªÞ¸€Y²ĒVø}Ā^İ™´‚LŠÚm„¥ÀJÞ{JVŒųÞŃx×sxxƈē ģMř–ÚðòIf–Ċ“Œ\\Ʈ±ŒdʧĘD†vČ_Àæ~DŒċ´A®µ†¨ØLV¦êHÒ¤"]],"encodeOffsets":[[[113712,34000]],[[115612,30507]],[[113649,34054]]]}},{"type":"Feature","id":"430000","properties":{"id":"430000","cp":[111.782279,28.09409],"name":"湖南","childNum":3},"geometry":{"type":"MultiPolygon","coordinates":[["@@—n„FTs"],["@@ßÅÆችÔXr—†CO™“…ËR‘ïÿĩ­TooQyšÓ[‹ŅBE¬–ÎÓXa„į§Ã¸G °ITxp‰úxÚij¥Ïš–Ģ¾ŠedžÄ©ĸG…œàGh‚€M¤–Â_U}Ċ}¢pczfŠþg¤€”ÇòAV‘‹M"],["@@©K—ƒA·³CQ±Á«³BUŠƑ¹AŠtćOw™D]ŒJiØSm¯b£‘ylƒ›X…HËѱH•«–‘C^õľA–Å§¤É¥„ïyuǙuA¢^{ÌC´­¦ŷJ£^[†“ª¿‡ĕ~•Ƈ…•N… skóā‡¹¿€ï]ă~÷O§­@—Vm¡‹Qđ¦¢Ĥ{ºjԏŽŒª¥nf´•~ÕoŸž×Ûą‹MąıuZœmZcÒ IJĪ²SÊDŽŶ¨ƚƒ’CÖŎªQؼrŭŽ­«}NÏürʬŒmjr€@ĘrTW ­SsdHzƓ^ÇÂyUi¯DÅYlŹu{hTœ}mĉ–¹¥ě‰Dÿë©ıÓ[Oº£ž“¥ót€ł¹MՄžƪƒ`Pš…Di–ÛUŠ¾Å‌ìˆU’ñB“È£ýhe‰dy¡oċ€`pfmjP~‚kZa…ZsÐd°wj§ƒ@€Ĵ®w~^‚kÀÅKvNmX\\¨a“”сqvíó¿F„¤¡@ũÑVw}S@j}¾«pĂr–ªg àÀ²NJ¶¶Dô…K‚|^ª†Ž°LX¾ŴäPĪ±œ£EXd›”^¶›IJÞܓ~‘u¸ǔ˜Ž›MRhsR…e†`ÄofIÔ\\Ø  i”ćymnú¨cj ¢»–GČìƊÿШXeĈĀ¾Oð Fi ¢|[jVxrIQŒ„_E”zAN¦zLU`œcªx”OTu RLÄ¢dV„i`p˔vŎµªÉžF~ƒØ€d¢ºgİàw¸Áb[¦Zb¦–z½xBĖ@ªpº›šlS¸Ö\\Ĕ[N¥ˀmĎă’J\\‹ŀ`€…ňSڊĖÁĐiO“Ĝ«BxDõĚiv—ž–S™Ì}iùŒžÜnšÐºGŠ{Šp°M´w†ÀÒzJ²ò¨ oTçüöoÛÿñŽőФ‚ùTz²CȆȸǎŪƒƑÐc°dPÎŸğ˶[Ƚu¯½WM¡­Éž“’B·rížnZŸÒ `‡¨GA¾\\pē˜XhÆRC­üWGġu…T靧Ŏѝ©ò³I±³}_‘‹EÃħg®ęisÁPDmÅ{‰b[Rşs·€kPŸŽƥƒóRo”O‹ŸVŸ~]{g\\“êYƪ¦kÝbiċƵŠGZ»Ěõ…ó·³vŝž£ø@pyö_‹ëŽIkѵ‡bcѧy…×dY؎ªiþž¨ƒ[]f]Ņ©C}ÁN‡»hĻħƏ’ĩ"]],"encodeOffsets":[[[115640,30489]],[[112543,27312]],[[116690,26230]]]}},{"type":"Feature","id":"440000","properties":{"id":"440000","cp":[113.280637,23.125178],"name":"广东","childNum":24},"geometry":{"type":"MultiPolygon","coordinates":[["@@QdˆAua"],["@@ƒlxDLo"],["@@sbhNLo"],["@@Ă āŸ"],["@@WltO[["],["@@Krœ]S"],["@@e„„I]y"],["@@I|„Mym"],["@@ƒÛ³LSŒž¼Y"],["@@nvºB–ëui©`¾"],["@@zdšÛ›Jw®"],["@@†°…¯"],["@@a yAª¸ËJIx،@€ĀHAmßV¡o•fu•o"],["@@šs‰ŗÃÔėAƁ›ZšÄ ~°ČP‚‹äh"],["@@‹¶Ý’Ì‚vmĞh­ı‡Q"],["@@HœŠdSjĒ¢D}war…“u«ZqadYM"],["@@elŒ\\LqqU"],["@@~rMo\\"],["@@f„^ƒC"],["@@øPªoj÷ÍÝħXČx”°Q¨ıXNv"],["@@gÇƳˆŽˆ”oˆŠˆ[~tly"],["@@E–ÆC¿‘"],["@@OŽP"],["@@w‹†đóg‰™ĝ—[³‹¡VÙæÅöM̳¹pÁaËýý©D©Ü“JŹƕģGą¤{Ùū…ǘO²«BƱéA—Ò‰ĥ‡¡«BhlmtÃPµyU¯uc“d·w_bŝcīímGOŽ|KP’ȏ‡ŹãŝIŕŭŕ@Óoo¿ē‹±ß}Ž…ŭ‚ŸIJWÈCőâUâǙI›ğʼn©I›ijEׅÁ”³Aó›wXJþ±ÌŒÜӔĨ£L]ĈÙƺZǾĆĖMĸĤfŒÎĵl•ŨnȈ‘ĐtF”Š–FĤ–‚êk¶œ^k°f¶gŠŽœ}®Fa˜f`vXŲxl˜„¦–ÔÁ²¬ÐŸ¦pqÊ̲ˆi€XŸØRDÎ}†Ä@ZĠ’s„x®AR~®ETtĄZ†–ƈfŠŠHâÒÐA†µ\\S¸„^wĖkRzŠalŽŜ|E¨ÈNĀňZTŒ’pBh£\\ŒĎƀuXĖtKL–¶G|Ž»ĺEļĞ~ÜĢÛĊrˆO˜Ùîvd]nˆ¬VœÊĜ°R֟pM††–‚ƂªFbwžEÀˆ˜©Œž\\…¤]ŸI®¥D³|ˎ]CöAŤ¦…æ’´¥¸Lv¼€•¢ĽBaô–F~—š®²GÌҐEY„„œzk¤’°ahlV՞I^‹šCxĈPŽsB‰ƒºV‰¸@¾ªR²ĨN]´_eavSi‡vc•}p}Đ¼ƌkJœÚe thœ†_¸ ºx±ò_xN›Ë‹²‘@ƒă¡ßH©Ùñ}wkNÕ¹ÇO½¿£ĕ]ly_WìIžÇª`ŠuTÅxYĒÖ¼k֞’µ‚MžjJÚwn\\h‘œĒv]îh|’È›Ƅøègž¸Ķß ĉĈWb¹ƀdéʌNTtP[ŠöSvrCZžžaGuœbo´ŖÒÇА~¡zCI…özx¢„Pn‹•‰Èñ @ŒĥÒ¦†]ƞŠV}³ăĔñiiÄÓVépKG½Ä‘ÓávYo–C·sit‹iaÀy„ŧΡÈYDÑům}‰ý|m[węõĉZÅxUO}÷N¹³ĉo_qtă“qwµŁYلǝŕ¹tïÛUïmRCº…ˆĭ|µ›ÕÊK™½R‘ē ó]‘–GªęAx–»HO£|ām‡¡diď×YïYWªʼnOeÚtĐ«zđ¹T…ā‡úE™á²\\‹ķÍ}jYàÙÆſ¿Çdğ·ùTßÇţʄ¡XgWÀLJğ·¿ÃˆOj YÇ÷Qě‹i"]],"encodeOffsets":[[[117381,22988]],[[116552,22934]],[[116790,22617]],[[116973,22545]],[[116444,22536]],[[116931,22515]],[[116496,22490]],[[116453,22449]],[[113301,21439]],[[118726,21604]],[[118709,21486]],[[113210,20816]],[[115482,22082]],[[113171,21585]],[[113199,21590]],[[115232,22102]],[[115739,22373]],[[115134,22184]],[[113056,21175]],[[119573,21271]],[[119957,24020]],[[115859,22356]],[[116561,22649]],[[116285,22746]]]}},{"type":"Feature","id":"450000","properties":{"id":"450000","cp":[108.320004,22.82402],"name":"广西","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@H– TQ§•A"],["@@ĨʪƒLƒƊDÎĹĐCǦė¸zÚGn£¾›rªŀÜt¬@֛ڈSx~øOŒ˜ŶÐÂæȠ\\„ÈÜObĖw^oބLf¬°bI lTØB̈F£Ć¹gñĤaY“t¿¤VSñœK¸¤nM†¼‚JE±„½¸šŠño‹ÜCƆæĪ^ŠĚQÖ¦^‡ˆˆf´Q†üÜʝz¯šlzUĺš@쇀p¶n]sxtx¶@„~ÒĂJb©gk‚{°‚~c°`ԙ¬rV\\“la¼¤ôá`¯¹LC†ÆbŒxEræO‚v[H­˜„[~|aB£ÖsºdAĐzNÂðsŽÞƔ…Ĥªbƒ–ab`ho¡³F«èVloŽ¤™ÔRzpp®SŽĪº¨ÖƒºN…ij„d`’a”¦¤F³ºDÎńĀìŠCžĜº¦Ċ•~nS›|gźvZkCÆj°zVÈÁƔ]LÊFZg…čP­kini«‹qǀcz͔Y®¬Ů»qR×ō©DՄ‘§ƙǃŵTÉĩ±ŸıdÑnYY›IJvNĆƌØÜ Öp–}e³¦m‹©iÓ|¹Ÿħņ›|ª¦QF¢Â¬ʖovg¿em‡^ucà÷gՎuŒíÙćĝ}FĻ¼Ĺ{µHK•sLSđƃr‹č¤[Ag‘oS‹ŇYMÿ§Ç{Fśbky‰lQxĕƒ]T·¶[B…ÑÏGáşşƇe€…•ăYSs­FQ}­Bƒw‘tYğÃ@~…C̀Q ×W‡j˱rÉ¥oÏ ±«ÓÂ¥•ƒ€k—ŽwWűŒmcih³K›~‰µh¯e]lµ›él•Eģ‰•E“ďs‡’mǖŧē`ãògK_ÛsUʝ“ćğ¶hŒöŒO¤Ǜn³Žc‘`¡y‹¦C‘ez€YŠwa™–‘[ďĵűMę§]X˜Î_‚훘Û]é’ÛUćİÕBƣ±…dƒy¹T^džûÅÑŦ·‡PĻþÙ`K€¦˜…¢ÍeœĥR¿Œ³£[~Œäu¼dl‰t‚†W¸oRM¢ď\\zœ}Æzdvň–{ÎXF¶°Â_„ÒÂÏL©Ö•TmuŸ¼ãl‰›īkiqéfA„·Êµ\\őDc¥ÝF“y›Ôć˜c€űH_hL܋êĺШc}rn`½„Ì@¸¶ªVLŒŠhŒ‹\\•Ţĺk~ŽĠið°|gŒtTĭĸ^x‘vK˜VGréAé‘bUu›MJ‰VÃO¡…qĂXËS‰ģãlýàŸ_ju‡YÛÒB†œG^˜é֊¶§ŽƒEG”ÅzěƒƯ¤Ek‡N[kdåucé¬dnYpAyČ{`]þ¯T’bÜÈk‚¡Ġ•vŒàh„ÂƄ¢J"]],"encodeOffsets":[[[111707,21520]],[[107619,25527]]]}},{"type":"Feature","id":"460000","properties":{"id":"460000","cp":[109.83119,19.031971],"name":"海南","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@š¦Ŝil¢”XƦ‘ƞò–ïè§ŞCêɕrŧůÇąĻõ™·ĉ³œ̅kÇm@ċȧƒŧĥ‰Ľʉ­ƅſ“ȓÒ˦ŝE}ºƑ[ÍĜȋ gÎfǐÏĤ¨êƺ\\Ɔ¸ĠĎvʄȀœÐ¾jNðĀÒRŒšZdž™zÐŘΰH¨Ƣb²_Ġ "],"encodeOffsets":[[112750,20508]]}},{"type":"Feature","id":"510000","properties":{"id":"510000","cp":[104.065735,30.659462],"name":"四川","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@LqKr"],["@@Š[ĻéV£ž_ţġñpG •réÏ·~ąSfy×͂·ºſƽiÍıƣıĻmHH}siaX@iÇ°ÁÃ×t«ƒ­Tƒ¤J–JJŒyJ•ÈŠ`Ohߦ¡uËhIyCjmÿw…ZG……Ti‹SˆsO‰žB²ŸfNmsPaˆ{M{ŠõE‘^Hj}gYpaeuž¯‘oáwHjÁ½M¡pM“–uå‡mni{fk”\\oƒÎqCw†EZ¼K›ĝŠƒAy{m÷L‡wO×SimRI¯rK™õBS«sFe‡]fµ¢óY_ÆPRcue°Cbo׌bd£ŌIHgtrnyPt¦foaXďx›lBowz‹_{ÊéWiêE„GhܸºuFĈIxf®Ž•Y½ĀǙ]¤EyŸF²ċ’w¸¿@g¢§RGv»–áŸW`ÃĵJwi]t¥wO­½a[׈]`Ãi­üL€¦LabbTÀå’c}Íh™Æhˆ‹®BH€î|Ék­¤S†y£„ia©taį·Ɖ`ō¥Uh“O…ƒĝLk}©Fos‰´›Jm„µlŁu—…ø–nÑJWΪ–YÀïAetTžŅ‚ӍG™Ë«bo‰{ıwodƟ½ƒžOġܑµxàNÖ¾P²§HKv¾–]|•B‡ÆåoZ`¡Ø`ÀmºĠ~ÌЧnDž¿¤]wğ@sƒ‰rğu‰~‘Io”[é±¹ ¿žſđӉ@q‹gˆ¹zƱřaí°KtǤV»Ã[ĩǭƑ^ÇÓ@ỗs›Zϕ‹œÅĭ€Ƌ•ěpwDóÖሯneQˌq·•GCœýS]xŸ·ý‹q³•O՜Œ¶Qzßti{ř‰áÍÇWŝŭñzÇW‹pç¿JŒ™‚Xœĩè½cŒF–ÂLiVjx}\\N†ŇĖ¥Ge–“JA¼ÄHfÈu~¸Æ«dE³ÉMA|b˜Ò…˜ćhG¬CM‚õŠ„ƤąAvƒüV€éŀ‰_V̳ĐwQj´·ZeÈÁ¨X´Æ¡Qu·»Ÿ“˜ÕZ³ġqDo‰y`L¬gdp°şŠp¦ėìÅĮZŽ°Iä”h‚‘ˆzŠĵœf²å ›ĚрKp‹IN|‹„Ñz]ń……·FU×é»R³™MƒÉ»GM«€ki€™ér™}Ã`¹ăÞmȝnÁîRǀ³ĜoİzŔwǶVÚ£À]ɜ»ĆlƂ²Ġ…þTº·àUȞÏʦ¶†I’«dĽĢdĬ¿–»Ĕ׊h\\c¬†ä²GêëĤł¥ÀǿżÃÆMº}BÕĢyFVvw–ˆxBèĻĒ©Ĉ“tCĢɽŠȣ¦āæ·HĽî“ôNԓ~^¤Ɗœu„œ^s¼{TA¼ø°¢İªDè¾Ň¶ÝJ‘®Z´ğ~Sn|ªWÚ©òzPOȸ‚bð¢|‹øĞŠŒœŒQìÛÐ@Ğ™ǎRS¤Á§d…i“´ezÝúØã]Hq„kIŸþËQǦÃsǤ[E¬ÉŪÍxXƒ·ÖƁİlƞ¹ª¹|XÊwn‘ÆƄmÀêErĒtD®ċæcQƒ”E®³^ĭ¥©l}äQto˜ŖÜqƎkµ–„ªÔĻĴ¡@Ċ°B²Èw^^RsºTĀ£ŚæœQP‘JvÄz„^Đ¹Æ¯fLà´GC²‘dt˜­ĀRt¼¤ĦOðğfÔðDŨŁĞƘïžPȆ®âbMüÀXZ ¸£@Ś›»»QÉ­™]d“sÖ×_͖_ÌêŮPrĔĐÕGĂeZÜîĘqBhtO ¤tE[h|Y‹Ô‚ZśÎs´xº±UŒ’ñˆt|O’ĩĠºNbgþŠJy^dÂY Į„]Řz¦gC‚³€R`ĀŠz’¢AjŒ¸CL„¤RÆ»@­Ŏk\\Ç´£YW}z@Z}‰Ã¶“oû¶]´^N‡Ò}èN‚ª–P˜Íy¹`S°´†ATe€VamdUĐwʄvĮÕ\\ƒu‹Æŗ¨Yp¹àZÂm™Wh{á„}WØǍ•Éüw™ga§áCNęÎ[ĀÕĪgÖɪX˜øx¬½Ů¦¦[€—„NΆL€ÜUÖ´òrÙŠxR^–†J˜k„ijnDX{Uƒ~ET{ļº¦PZc”jF²Ė@Žp˜g€ˆ¨“B{ƒu¨ŦyhoÚD®¯¢˜ WòàFΤ¨GDäz¦kŮPœġq˚¥À]€Ÿ˜eŽâÚ´ªKxī„Pˆ—Ö|æ[xäJÞĥ‚s’NÖ½ž€I†¬nĨY´®Ð—ƐŠ€mD™ŝuäđđEb…e’e_™v¡}ìęNJē}q”É埁T¯µRs¡M@}ůa†a­¯wvƉåZwž\\Z{åû^›"]],"encodeOffsets":[[[108815,30935]],[[110617,31811]]]}},{"type":"Feature","id":"520000","properties":{"id":"520000","cp":[106.713478,26.578343],"name":"贵州","childNum":3},"geometry":{"type":"MultiPolygon","coordinates":[["@@†G\\†lY£‘in"],["@@q‚|ˆ‚mc¯tχVSÎ"],["@@hÑ£Is‡NgßH†›HªķÃh_¹ƒ¡ĝħń¦uيùŽgS¯JHŸ|sÝÅtÁïyMDč»eÕtA¤{b\\}—ƒG®u\\åPFq‹wÅaD…žK°ºâ_£ùbµ”mÁ‹ÛœĹM[q|hlaªāI}тƒµ@swtwm^oµˆD鼊yV™ky°ÉžûÛR…³‚‡eˆ‡¥]RՋěħ[ƅåÛDpŒ”J„iV™™‰ÂF²I…»mN·£›LbÒYb—WsÀbŽ™pki™TZĄă¶HŒq`……ĥ_JŸ¯ae«ƒKpÝx]aĕÛPƒÇȟ[ÁåŵÏő—÷Pw}‡TœÙ@Õs«ĿÛq©½œm¤ÙH·yǥĘĉBµĨÕnđ]K„©„œá‹ŸG纍§Õßg‡ǗĦTèƤƺ{¶ÉHÎd¾ŚÊ·OÐjXWrãLyzÉAL¾ę¢bĶėy_qMĔąro¼hĊžw¶øV¤w”²Ĉ]ʚKx|`ź¦ÂÈdr„cȁbe¸›`I¼čTF´¼Óýȃr¹ÍJ©k_șl³´_pН`oÒhŽ¶pa‚^ÓĔ}D»^Xyœ`d˜[Kv…JPhèhCrĂĚÂ^Êƌ wˆZL­Ġ£šÁbrzOIl’MM”ĪŐžËr×ÎeŦŽtw|Œ¢mKjSǘňĂStÎŦEtqFT†¾†E쬬ôxÌO¢Ÿ KŠ³ŀºäY†„”PVgŎ¦Ŋm޼VZwVlŒ„z¤…ž£Tl®ctĽÚó{G­A‡ŒÇgeš~Αd¿æaSba¥KKûj®_ć^\\ؾbP®¦x^sxjĶI_Ä X‚⼕Hu¨Qh¡À@Ëô}Ž±žGNìĎlT¸ˆ…`V~R°tbÕĊ`¸úÛtπFDu€[ƒMfqGH·¥yA‰ztMFe|R‚_Gk†ChZeÚ°to˜v`x‹b„ŒDnÐ{E}šZ˜è€x—†NEފREn˜[Pv@{~rĆAB§‚EO¿|UZ~ì„Uf¨J²ĂÝƀ‚sª–B`„s¶œfvö¦ŠÕ~dÔq¨¸º»uù[[§´sb¤¢zþFœ¢Æ…Àhˆ™ÂˆW\\ıŽËI݊o±ĭŠ£þˆÊs}¡R]ŒěƒD‚g´VG¢‚j±®è†ºÃmpU[Á›‘Œëº°r›ÜbNu¸}Žº¼‡`ni”ºÔXĄ¤¼Ôdaµ€Á_À…†ftQQgœR—‘·Ǔ’v”}Ýלĵ]µœ“Wc¤F²›OĩųãW½¯K‚©…]€{†LóµCIµ±Mß¿hŸ•©āq¬o‚½ž~@i~TUxŪÒ¢@ƒ£ÀEîôruń‚”“‚b[§nWuMÆLl¿]x}ij­€½"]],"encodeOffsets":[[[112158,27383]],[[112105,27474]],[[112095,27476]]]}},{"type":"Feature","id":"530000","properties":{"id":"530000","cp":[101.512251,24.740609],"name":"云南","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@[„ùx½}ÑRH‘YīĺûsÍn‘iEoã½Ya²ė{c¬ĝg•ĂsA•ØÅwď‚õzFjw}—«Dx¿}UũlŸê™@•HÅ­F‰¨ÇoJ´Ónũuą¡Ã¢pÒŌ“Ø TF²‚xa²ËX€‚cʋlHîAßËŁkŻƑŷÉ©h™W­æßU‡“Ës¡¦}•teèƶStǀÇ}Fd£j‹ĈZĆÆ‹¤T‚č\\Dƒ}O÷š£Uˆ§~ŃG™‚åŃDĝ¸œTsd¶¶Bªš¤u¢ŌĎo~t¾ÍŶÒtD¦Ú„iôö‰€z›ØX²ghįh½Û±¯€ÿm·zR¦Ɵ`ªŊÃh¢rOԍ´£Ym¼èêf¯ŪĽn„†cÚbŒw\\zlvWžªâˆ ¦g–mĿBş£¢ƹřbĥkǫßeeZkÙIKueT»sVesb‘aĕ  ¶®dNœĄÄpªyŽ¼—„³BE˜®l‡ŽGœŭCœǶwêżĔÂe„pÍÀQƞpC„–¼ŲÈ­AÎô¶R„ä’Q^Øu¬°š_Èôc´¹ò¨P΢hlϦ´Ħ“Æ´sâDŽŲPnÊD^¯°’Upv†}®BP̪–jǬx–Söwlfòªv€qĸ|`H€­viļ€ndĜ­Ćhň•‚em·FyށqóžSį¯‘³X_ĞçêtryvL¤§z„¦c¦¥jnŞk˜ˆlD¤øz½ĜàžĂŧMÅ|áƆàÊcðÂF܎‚áŢ¥\\\\º™İøÒÐJĴ‡„îD¦zK²ǏÎEh~’CD­hMn^ÌöÄ©ČZÀžaü„fɭyœpį´ěFűk]Ôě¢qlÅĆÙa¶~Äqššê€ljN¬¼H„ÊšNQ´ê¼VظE††^ŃÒyŒƒM{ŒJLoÒœęæŸe±Ķ›y‰’‡gã“¯JYÆĭĘëo¥Š‰o¯hcK«z_pŠrC´ĢÖY”—¼ v¸¢RŽÅW³Â§fǸYi³xR´ďUˊ`êĿU„û€uĆBƒƣö‰N€DH«Ĉg†——Ñ‚aB{ÊNF´¬c·Åv}eÇÃGB»”If•¦HňĕM…~[iwjUÁKE•Ž‹¾dĪçW›šI‹èÀŒoÈXòyŞŮÈXâÎŚŠj|àsRy‹µÖ›–Pr´þŒ ¸^wþTDŔ–Hr¸‹žRÌmf‡żÕâCôox–ĜƌÆĮŒ›Ð–œY˜tâŦÔ@]ÈǮƒ\\Ī¼Ä£UsȯLbîƲŚºyh‡rŒŠ@ĒԝƀŸÀ²º\\êp“’JŠ}ĠvŠqt„Ġ@^xÀ£È†¨mËÏğ}n¹_¿¢×Y_æpˆÅ–A^{½•Lu¨GO±Õ½ßM¶w’ÁĢۂP‚›Ƣ¼pcIJxŠ|ap̬HšÐŒŊSfsðBZ¿©“XÏÒK•k†÷Eû¿‰S…rEFsÕūk”óVǥʼniTL‚¡n{‹uxţÏh™ôŝ¬ğōN“‘NJkyPaq™Âğ¤K®‡YŸxÉƋÁ]āęDqçgOg†ILu—\\_gz—]W¼ž~CÔē]bµogpў_oď`´³Țkl`IªºÎȄqÔþž»E³ĎSJ»œ_f·‚adÇqƒÇc¥Á_Źw{™L^ɱćx“U£µ÷xgĉp»ĆqNē`rĘzaĵĚ¡K½ÊBzyäKXqiWPÏɸ½řÍcÊG|µƕƣG˛÷Ÿk°_^ý|_zċBZocmø¯hhcæ\\lˆMFlư£Ĝ„ÆyH“„F¨‰µêÕ]—›HA…àӄ^it `þßäkŠĤÎT~Wlÿ¨„ÔPzUC–NVv [jâôDôď[}ž‰z¿–msSh‹¯{jïğl}šĹ[–őŒ‰gK‹©U·µË@¾ƒm_~q¡f¹…ÅË^»‘f³ø}Q•„¡Ö˳gͱ^ǁ…\\ëÃA_—¿bW›Ï[¶ƛ鏝£F{īZgm@|kHǭƁć¦UĔťƒ×ë}ǝƒeďºȡȘÏíBə£āĘPªij¶“ʼnÿ‡y©n‰ď£G¹¡I›Š±LÉĺÑdĉ܇W¥˜‰}g˜Á†{aqÃ¥aŠıęÏZ—ï`"],"encodeOffsets":[[104636,22969]]}},{"type":"Feature","id":"540000","properties":{"id":"540000","cp":[89.132212,30.860361],"name":"西藏","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@hžľxŽŖ‰xƒÒVŽ†ºÅâAĪÝȆµę¯Ňa±r_w~uSÕň‘qOj]ɄQ…£Z……UDûoY’»©M[‹L¼qãË{V͕çWViŽ]ë©Ä÷àyƛh›ÚU°ŒŒa”d„cQƒ~Mx¥™cc¡ÙaSyF—ցk­ŒuRýq¿Ôµ•QĽ³aG{¿FµëªéĜÿª@¬·–K‰·àariĕĀ«V»Ŷ™Ĵū˜gèLǴŇƶaf‹tŒèBŚ£^Šâ†ǐÝ®–šM¦ÁǞÿ¬LhŸŽJ¾óƾƺcxw‹f]Y…´ƒ¦|œQLn°aœdĊ…œ\\¨o’œǀÍŎœ´ĩĀd`tÊQŞŕ|‚¨C^©œĈ¦„¦ÎJĊ{ŽëĎjª²rЉšl`¼Ą[t|¦St辉PŒÜK¸€d˜Ƅı]s¤—î_v¹ÎVòŦj˜£Əsc—¬_Ğ´|Ł˜¦AvŽ¦w`ăaÝaa­¢e¤ı²©ªSªšÈMĄwžÉØŔì@T‘¤—Ę™\\õª@”þo´­xA s”ÂtŎKzó´ÇĊµ¢rž^nĊ­Æ¬×üGž¢‚³ {âĊ]š™G‚~bÀgVjzlhǶf€žOšfdŠ‰ªB]pj„•TO–tĊ‚n¤}®¦ƒČ¥d¢¼»ddš”Y¼Žt—¢eȤJ¤}Ǿ¡°§¤AГlc@ĝ”sªćļđAç‡wx•UuzEÖġ~AN¹ÄÅȀŻ¦¿ģŁéì±H…ãd«g[؉¼ēÀ•cīľġ¬cJ‘µ…ÐʥVȝ¸ßS¹†ý±ğkƁ¼ą^ɛ¤Ûÿ‰b[}¬ōõÃ]ËNm®g@•Bg}ÍF±ǐyL¥íCˆƒIij€Ï÷њį[¹¦[⚍EÛïÁÉdƅß{âNÆāŨߝ¾ě÷yC£‡k­´ÓH@¹†TZ¥¢įƒ·ÌAЧ®—Zc…v½ŸZ­¹|ŕWZqgW“|ieZÅYVӁqdq•bc²R@†c‡¥Rã»Ge†ŸeƃīQ•}J[ғK…¬Ə|o’ėjġĠÑN¡ð¯EBčnwôɍėªƒ²•CλŹġǝʅįĭạ̃ūȹ]ΓͧgšsgȽóϧµǛ†ęgſ¶ҍć`ĘąŌJޚä¤rÅň¥ÖÁUětęuůÞiĊÄÀ\\Æs¦ÓRb|Â^řÌkÄŷ¶½÷‡f±iMݑ›‰@ĥ°G¬ÃM¥n£Øą‚ğ¯ß”§aëbéüÑOčœk£{\\‘eµª×M‘šÉfm«Ƒ{Å׃Gŏǩãy³©WÑăû‚··‘Q—òı}¯ã‰I•éÕÂZ¨īès¶ZÈsŽæĔTŘvŽgÌsN@îá¾ó@‰˜ÙwU±ÉT廣TđŸWxq¹Zo‘b‹s[׌¯cĩv‡Œėŧ³BM|¹k‰ªħ—¥TzNYnݍßpęrñĠĉRS~½ŠěVVŠµ‚õ‡«ŒM££µB•ĉ¥áºae~³AuĐh`Ü³ç@BۘïĿa©|z²Ý¼D”£àč²‹ŸƒIƒû›I ā€óK¥}rÝ_Á´éMaň¨€~ªSĈ½Ž½KÙóĿeƃÆBŽ·¬ën×W|Uº}LJrƳ˜lŒµ`bÔ`QˆˆÐÓ@s¬ñIŒÍ@ûws¡åQÑßÁ`ŋĴ{Ī“T•ÚÅTSij‚‹Yo|Ç[ǾµMW¢ĭiÕØ¿@˜šMh…pÕ]j†éò¿OƇĆƇp€êĉâlØw–ěsˆǩ‚ĵ¸c…bU¹ř¨WavquSMzeo_^gsÏ·¥Ó@~¯¿RiīB™Š\\”qTGªÇĜçPoŠÿfñòą¦óQīÈáP•œābß{ƒZŗĸIæńhnszÁCËìñšÏ·ąĚÝUm®ó­L·ăU›Èíoù´Êj°ŁŤ_uµ^‘°Œìǖ@tĶĒ¡Æ‡M³Ģ«˜İĨÅ®ğ†RŽāð“ggheÆ¢z‚Ê©Ô\\°ÝĎz~ź¤Pn–MĪÖB£Ÿk™n鄧żćŠ˜ĆK„Ē°¼L¶è‰âz¨u¦¥LDĘz¬ýÎmĘd¾ß”Fz“hg²™Fy¦ĝ¤ċņbΛ@y‚Ąæm°NĮZRÖíŽJ²öLĸÒ¨Y®ƌÐV‰à˜tt_ڀÂyĠzž]Ţh€zĎ{†ĢX”ˆc|šÐqŽšfO¢¤ög‚ÌHNŽ„PKŖœŽ˜Uú´xx[xˆvĐCûĀŠìÖT¬¸^}Ìsòd´_Ž‡KgžLĴ…ÀBon|H@–Êx˜—¦BpŰˆŌ¿fµƌA¾zLjRxŠ¶F”œkĄźRzŀˆ~¶[”´Hnª–VƞuĒ­È¨ƎcƽÌm¸ÁÈM¦x͊ëÀxdžB’šú^´W†£–d„kɾĬpœw‚˂ØɦļĬIŚœÊ•n›Ŕa¸™~J°î”lɌxĤÊÈðhÌ®‚g˜T´øŽàCˆŽÀ^ªerrƘdž¢İP|Ė ŸWœªĦ^¶´ÂL„aT±üWƜ˜ǀRšŶUńšĖ[QhlLüA†‹Ü\\†qR›Ą©"],"encodeOffsets":[[90849,37210]]}},{"type":"Feature","id":"610000","properties":{"id":"610000","cp":[108.948024,34.263161],"name":"陕西","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@˜p¢—ȮµšûG™Ħ}Ħšðǚ¶òƄ€jɂz°{ºØkÈęâ¦jª‚Bg‚\\œċ°s¬Ž’]jžú ‚E”Ȍdž¬s„t‡”RˆÆdĠݎwܔ¸ôW¾ƮłÒ_{’Ìšû¼„jº¹¢GǪÒ¯ĘƒZ`ºŊƒecņąš~BÂgzpâēòYǠȰÌTΨÂWœ|fcŸă§uF—Œ@NŸ¢XLƒŠRMº[ğȣſï|¥J™kc`sʼnǷ’Y¹‹W@µ÷K…ãï³ÛIcñ·VȋڍÒķø©—þ¥ƒy‚ÓŸğęmWµÎumZyOŅƟĥÓ~sÑL¤µaŅY¦ocyZ{‰y c]{ŒTa©ƒ`U_Ěē£ωÊƍKù’K¶ȱÝƷ§{û»ÅÁȹÍéuij|¹cÑd‘ŠìUYƒŽO‘uF–ÕÈYvÁCqӃT•Ǣí§·S¹NgŠV¬ë÷Át‡°Dد’C´ʼnƒópģ}„ċcE˅FŸŸéGU¥×K…§­¶³B‹Č}C¿åċ`wġB·¤őcƭ²ő[Å^axwQO…ÿEËߌ•ĤNĔŸwƇˆÄŠńwĪ­Šo[„_KÓª³“ÙnK‰Çƒěœÿ]ď€ă_d©·©Ýŏ°Ù®g]±„Ÿ‡ß˜å›—¬÷m\\›iaǑkěX{¢|ZKlçhLt€Ňîŵ€œè[€É@ƉĄEœ‡tƇÏ˜³­ħZ«mJ…›×¾‘MtÝĦ£IwÄå\\Õ{‡˜ƒOwĬ©LÙ³ÙgBƕŀr̛ĢŭO¥lãyC§HÍ£ßEñŸX¡—­°ÙCgpťz‘ˆb`wI„vA|§”‡—hoĕ@E±“iYd¥OĻ¹S|}F@¾oAO²{tfžÜ—¢Fǂ҈W²°BĤh^Wx{@„¬‚­F¸¡„ķn£P|ŸªĴ@^ĠĈæb–Ôc¶l˜Yi…–^Mi˜cĎ°Â[ä€vï¶gv@À“Ĭ·lJ¸sn|¼u~a]’ÆÈtŌºJp’ƒþ£KKf~Š¦UbyäIšĺãn‡Ô¿^­žŵMT–hĠܤko¼Ŏìąǜh`[tŒRd²IJ_œXPrɲ‰l‘‚XžiL§àƒ–¹ŽH˜°Ȧqº®QC—bA†„ŌJ¸ĕÚ³ĺ§ `d¨YjžiZvRĺ±öVKkjGȊĐePОZmļKÀ€‚[ŠŽ`ösìh†ïÎoĬdtKÞ{¬èÒÒBŒÔpIJÇĬJŊ¦±J«ˆY§‹@·pH€µàåVKe›pW†ftsAÅqC·¬ko«pHÆuK@oŸHĆۄķhx“e‘n›S³àǍrqƶRbzy€¸ËАl›¼EºpĤ¼Œx¼½~Ğ’”à@†ÚüdK^ˆmÌSj"],"encodeOffsets":[[110234,38774]]}},{"type":"Feature","id":"620000","properties":{"id":"620000","cp":[103.823557,36.058039],"name":"甘肃","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@VuUv"],["@@ũ‹EĠtt~nkh`Q‰¦ÅÄÜdw˜Ab×ĠąJˆ¤DüègĺqBqœj°lI¡ĨÒ¤úSHbš‡ŠjΑBŠ°aZˆ¢KJŽ’O[|A£žDx}Nì•HUnrk„ kp€¼Y kMJn[aG‚áÚÏ[½rc†}aQxOgsPMnUs‡nc‹Z…ž–sKúvA›t„Þġ’£®ĀYKdnFwš¢JE°”Latf`¼h¬we|€Æ‡šbj}GA€·~WŽ”—`†¢MC¤tL©IJ°qdf”O‚“bÞĬ¹ttu`^ZúE`Œ[@„Æsîz®¡’C„ƳƜG²“R‘¢R’m”fŽwĸg܃‚ą G@pzJM½mŠhVy¸uÈÔO±¨{LfæU¶ßGĂq\\ª¬‡²I‚¥IʼnÈīoı‹ÓÑAçÑ|«LÝcspīðÍg…të_õ‰\\ĉñLYnĝg’ŸRǡÁiHLlõUĹ²uQjYi§Z_c¨Ÿ´ĹĖÙ·ŋI…ƒaBD˜­R¹ȥr—¯G•ºß„K¨jWk’ɱŠOq›Wij\\a­‹Q\\sg_ĆǛōëp»£lğۀgS•ŶN®À]ˆÓäm™ĹãJaz¥V}‰Le¤L„ýo‘¹IsŋÅÇ^‘Žbz…³tmEÁ´aŠ¹cčecÇN•ĊãÁ\\č¯—dNj•]j†—ZµkÓda•ćå]ğij@ ©O{¤ĸm¢ƒE·®ƒ«|@Xwg]Aģ±¯‡XǁÑdzªc›wQÚŝñsÕ³ÛV_ýƒ˜¥\\ů¥©¾÷w—Ž©WÕÊĩhÿÖÁRo¸V¬âDb¨šhûx–Ê×nj~Zâƒg|šXÁnßYoº§ZÅŘvŒ[„ĭÖʃuďxcVbnUSf…B¯³_Tzº—ΕO©çMÑ~Mˆ³]µ^püµ”ŠÄY~y@X~¤Z³€[Èōl@®Å¼£QKƒ·Di‹¡By‘ÿ‰Q_´D¥hŗyƒ^ŸĭÁZ]cIzý‰ah¹MĪğP‘s{ò‡‹‘²Vw¹t³Ŝˁ[ŽÑ}X\\gsFŸ£sPAgěp×ëfYHāďÖqēŭOÏë“dLü•\\iŒ”t^c®šRʺ¶—¢H°mˆ‘rYŸ£BŸ¹čIoľu¶uI]vģSQ{ƒUŻ”Å}QÂ|̋°ƅ¤ĩŪU ęĄžÌZҞ\\v˜²PĔ»ƢNHƒĂyAmƂwVmž`”]ȏb•”H`‰Ì¢²ILvĜ—H®¤Dlt_„¢JJÄämèÔDëþgºƫ™”aʎÌrêYi~ ÎݤNpÀA¾Ĕ¼b…ð÷’Žˆ‡®‚”üs”zMzÖĖQdȨý†v§Tè|ªH’þa¸|šÐ ƒwKĢx¦ivr^ÿ ¸l öæfƟĴ·PJv}n\\h¹¶v†·À|\\ƁĚN´Ĝ€çèÁz]ġ¤²¨QÒŨTIl‡ªťØ}¼˗ƦvÄùØE‹’«Fï˛Iq”ōŒTvāÜŏ‚íÛߜÛV—j³âwGăÂíNOŠˆŠPìyV³ʼnĖýZso§HіiYw[߆\\X¦¥c]ÔƩÜ·«j‡ÐqvÁ¦m^ċ±R™¦΋ƈťĚgÀ»IïĨʗƮŽ°Ɲ˜ĻþÍAƉſ±tÍEÕÞāNU͗¡\\ſčåÒʻĘm ƭÌŹöʥ’ëQ¤µ­ÇcƕªoIýˆ‰Iɐ_mkl³ă‰Ɠ¦j—¡Yz•Ňi–}Msßõ–īʋ —}ƒÁVmŸ_[n}eı­Uĥ¼‘ª•I{ΧDӜƻėoj‘qYhĹT©oūĶ£]ďxĩ‹ǑMĝ‰q`B´ƃ˺Ч—ç~™²ņj@”¥@đ´ί}ĥtPńǾV¬ufӃÉC‹tÓ̻‰…¹£G³€]ƖƾŎĪŪĘ̖¨ʈĢƂlɘ۪üºňUðǜȢƢż̌ȦǼ‚ĤŊɲĖ­Kq´ï¦—ºĒDzņɾªǀÞĈĂD†½ĄĎÌŗĞrôñnŽœN¼â¾ʄľԆ|DŽŽ֦ज़ȗlj̘̭ɺƅêgV̍ʆĠ·ÌĊv|ýĖÕWĊǎÞ´õ¼cÒÒBĢ͢UĜð͒s¨ňƃLĉÕÝ@ɛƯ÷¿Ľ­ĹeȏijëCȚDŲyê×Ŗyò¯ļcÂßY…tÁƤyAã˾J@ǝrý‹‰@¤…rz¸oP¹ɐÚyᐇHŸĀ[Jw…cVeȴϜ»ÈŽĖ}ƒŰŐèȭǢόĀƪÈŶë;Ñ̆ȤМľĮEŔ—ĹŊũ~ËUă{ŸĻƹɁύȩþĽvĽƓÉ@ē„ĽɲßǐƫʾǗĒpäWÐxnsÀ^ƆwW©¦cÅ¡Ji§vúF¶Ž¨c~c¼īŒeXǚ‹\\đ¾JŽwÀďksãA‹fÕ¦L}wa‚o”Z’‹D½†Ml«]eÒÅaɲáo½FõÛ]ĻÒ¡wYR£¢rvÓ®y®LF‹LzĈ„ôe]gx}•|KK}xklL]c¦£fRtív¦†PĤoH{tK"]],"encodeOffsets":[[[108619,36299]],[[108589,36341]]]}},{"type":"Feature","id":"630000","properties":{"id":"630000","cp":[96.778916,35.623178],"name":"青海","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@InJm"],["@@CƒÆ½OŃĦsΰ~Ē³¦@@“Ņiš±è}ؘƄ˹A³r_ĞŠǒNĪŒĐw¤^ŬĵªpĺSZg’rpiƼĘԛ¨C|͖J’©Ħ»®VIJ~f\\m `Un„˜~ʌŸ•ĬàöNt•~ňjy–¢Zi˜Ɣ¥ĄŠk´nl`JʇŠJþ©pdƖ®È£¶ìRʦ‘źõƮËnŸʼėæÑƀĎ[‚˜¢VÎĂMÖÝÎF²sƊƀÎBļýƞ—¯ʘƭðħ¼Jh¿ŦęΌƇš¥²Q]Č¥nuÂÏriˆ¸¬ƪÛ^Ó¦d€¥[Wà…x\\ZŽjҕ¨GtpþYŊĕ´€zUO뇉P‰îMĄÁxH´á˜iÜUà›îÜՁĂÛSuŎ‹r“œJð̬EŒ‘FÁú×uÃÎkr“Ē{V}İ«O_ÌËĬ©ŽÓŧSRѱ§Ģ£^ÂyèçěM³Ƃę{[¸¿u…ºµ[gt£¸OƤĿéYŸõ·kĀŸq]juw¥Dĩƍ€õÇPéĽG‘ž©ã‡¤G…uȧþRcÕĕNy“yût“ˆ­‡ø‘†ï»a½ē¿BMoį£ŸÍj}éZËqbʍš“Ƭh¹ìÿÓAçãnIáI`ƒks£CG­ě˜Uy×Cy•…’Ÿ@¶ʡÊBnāzG„ơMē¼±O÷õJËĚăVŸĪũƆ£Œ¯{ËL½Ìzż“„VR|ĠTbuvJvµhĻĖH”Aëáa…­OÇðñęNw‡…œľ·L›mI±íĠĩPÉ×®ÿs—’cB³±JKßĊ«`…ađ»·QAmO’‘Vţéÿ¤¹SQt]]Çx€±¯A@ĉij¢Óļ©•ƒl¶ÅÛr—ŕspãRk~¦ª]Į­´“FR„åd­ČsCqđéFn¿Åƃm’Éx{W©ºƝºįkÕƂƑ¸wWūЩÈFž£\\tÈ¥ÄRÈýÌJ ƒlGr^×äùyÞ³fj”c†€¨£ÂZ|ǓMĝšÏ@ëÜőR‹›ĝ‰Œ÷¡{aïȷPu°ËXÙ{©TmĠ}Y³’­ÞIňµç½©C¡į÷¯B»|St»›]vƒųƒs»”}MÓ ÿʪƟǭA¡fs˜»PY¼c¡»¦c„ċ­¥£~msĉP•–Siƒ^o©A‰Šec‚™PeǵŽkg‚yUi¿h}aH™šĉ^|ᴟ¡HØûÅ«ĉ®]m€¡qĉ¶³ÈyôōLÁst“BŸ®wn±ă¥HSòėš£˜S’ë@לÊăxÇN©™©T±ª£IJ¡fb®ÞbŽb_Ą¥xu¥B—ž{łĝ³«`d˜Ɛt—¤ťiñžÍUuºí`£˜^tƃIJc—·ÛLO‹½Šsç¥Ts{ă\\_»™kϊ±q©čiìĉ|ÍIƒ¥ć¥›€]ª§D{ŝŖÉR_sÿc³Īō›ƿΑ›§p›[ĉ†›c¯bKm›R¥{³„Z†e^ŽŒwx¹dƽŽôIg §Mĕ ƹĴ¿—ǣÜ̓]‹Ý–]snåA{‹eŒƭ`ǻŊĿ\\ijŬű”YÂÿ¬jĖqŽßbŠ¸•L«¸©@ěĀ©ê¶ìÀEH|´bRľž–Ó¶rÀQþ‹vl®Õ‚E˜TzÜdb ˜hw¤{LR„ƒd“c‹b¯‹ÙVgœ‚ƜßzÃô쮍^jUèXΖ|UäÌ»rKŽ\\ŒªN‘¼pZCü†VY††¤ɃRi^rPҒTÖ}|br°qňbĚ°ªiƶGQ¾²„x¦PœmlŜ‘[Ĥ¡ΞsĦŸÔÏâ\\ªÚŒU\\f…¢N²§x|¤§„xĔsZPòʛ²SÐqF`ª„VƒÞŜĶƨVZŒÌL`ˆ¢dŐIqr\\oäõ–F礻Ŷ×h¹]Clـ\\¦ďÌį¬řtTӺƙgQÇÓHţĒ”´ÃbEÄlbʔC”|CˆŮˆk„Ʈ[ʼ¬ňœ´KŮÈΰÌĪ¶ƶlð”ļA†TUvdTŠG†º̼ŠÔ€ŒsÊDԄveOg"]],"encodeOffsets":[[[105308,37219]],[[95370,40081]]]}},{"type":"Feature","id":"640000","properties":{"id":"640000","cp":[106.278179,37.26637],"name":"宁夏","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@KëÀęĞ«OęȿȕŸı]ʼn¡åįÕÔ«Ǵõƪ™ĚQÐZhv K°›öqÀѐS[ÃÖHƖčË‡nL]ûc…Ùß@‚“ĝ‘¾}w»»‹oģF¹œ»kÌÏ·{zPƒ§B­¢íyÅt@ƒ@áš]Yv_ssģ¼i߁”ĻL¾ġsKD£¡N_…“˜X¸}B~Haiˆ™Åf{«x»ge_bs“KF¯¡Ix™mELcÿZ¤­Ģ‘ƒÝœsuBLù•t†ŒYdˆmVtNmtOPhRw~bd…¾qÐ\\âÙH\\bImlNZŸ»loƒŸqlVm–Gā§~QCw¤™{A\\‘PKŸNY‡¯bF‡kC¥’sk‹Šs_Ã\\ă«¢ħkJi¯r›rAhĹûç£CU‡ĕĊ_ԗBixÅُĄnªÑaM~ħpOu¥sîeQ¥¤^dkKwlL~{L~–hw^‚ófćƒKyEŒ­K­zuÔ¡qQ¤xZÑ¢^ļöܾEpž±âbÊÑÆ^fk¬…NC¾‘Œ“YpxbK~¥Že֎ŒäBlt¿Đx½I[ĒǙŒWž‹f»Ĭ}d§dµùEuj¨‚IÆ¢¥dXªƅx¿]mtÏwßRĶŒX¢͎vÆzƂZò®ǢÌʆCrâºMÞzžÆMҔÊÓŊZľ–r°Î®Ȉmª²ĈUªĚøºˆĮ¦ÌĘk„^FłĬhĚiĀĖ¾iİbjÕ"],["@@mfwěwMrŢªv@G‰"]],"encodeOffsets":[[[109366,40242]],[[108600,36303]]]}},{"type":"Feature","id":"650000","properties":{"id":"650000","cp":[85.617733,40.792818],"name":"新疆","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@QØĔ²X¨”~ǘBºjʐßØvK”ƔX¨vĊOžÃƒ·¢i@~c—‡ĝe_«”Eš“}QxgɪëÏÃ@sÅyXoŖ{ô«ŸuX…ê•Îf`œC‚¹ÂÿÐGĮÕĞXŪōŸMźÈƺQèĽôe|¿ƸJR¤ĘEjcUóº¯Ĩ_ŘÁMª÷Ð¥Oéȇ¿ÖğǤǷÂF҇zÉx[]­Ĥĝ‰œ¦EP}ûƥé¿İƷTėƫœŕƅ™ƱB»Đ±’ēO…¦E–•}‘`cȺrĦáŖuҞª«IJ‡πdƺÏØZƴwʄ¤ĖGЙǂZĶƒèH¶}ÚZצʥĪï|ÇĦMŔ»İĝLj‹ì¥Βœba­¯¥ǕǚkĆŵĦɑĺƯxūД̵nơʃĽá½M»›òmqóŘĝč˾ăC…ćāƿÝɽ©DZŅ¹đ¥˜³ðLrÁ®ɱĕģʼnǻ̋ȥơŻǛȡVï¹Ň۩ûkɗġƁ§ʇė̕ĩũƽō^ƕŠUv£ƁQï“Ƶkŏ½ΉÃŭdzLқʻ«ƭ\\lƒ‡ŭD‡“{ʓDkaFÃÄa“³ŤđÔGRÈƚhSӹŚsİ«ĐË[¥ÚDkº^Øg¼ŵ¸£EÍö•€ůʼnT¡c_‡ËKY‹ƧUśĵ„݃U_©rETÏʜ±OñtYwē¨ƒ{£¨uM³x½şL©Ùá[ÓÐĥ Νtģ¢\\‚ś’nkO›w¥±ƒT»ƷFɯàĩÞáB¹Æ…ÑUw„੍žĽw[“mG½Èå~‡Æ÷QyŠěCFmĭZī—ŵVÁ™ƿQƛ—ûXS²‰b½KϽĉS›©ŷXĕŸ{ŽĕK·¥Ɨcqq©f¿]‡ßDõU³h—­gËÇïģÉɋw“k¯í}I·šœbmœÉ–ř›īJɥĻˁ×xo›ɹī‡l•c…¤³Xù]‘™DžA¿w͉ì¥wÇN·ÂËnƾƍdǧđ®Ɲv•Um©³G\\“}µĿ‡QyŹl㓛µEw‰LJQ½yƋBe¶ŋÀů‡ož¥A—˜Éw@•{Gpm¿Aij†ŽKLhˆ³`ñcËtW‚±»ÕS‰ëüÿďD‡u\\wwwù³—V›LŕƒOMËGh£õP¡™er™Ïd{“‡ġWÁ…č|yšg^ğyÁzÙs`—s|ÉåªÇ}m¢Ń¨`x¥’ù^•}ƒÌ¥H«‰Yªƅ”Aйn~ź¯šf¤áÀz„gŠÇDIԝ´AňĀ҄¶ûEYospõD[{ù°]u›Jq•U•|Soċxţ[õÔĥkŋÞŭZ˺óYËüċrw €ÞkrťË¿XGÉbřaDü·Ē÷Aê[Ää€I®BÕИÞ_¢āĠpŠÛÄȉĖġDKwbm‡ÄNô‡ŠfœƫVÉvi†dz—H‘‹QµâFšù­Âœ³¦{YGžƒd¢ĚÜO „€{Ö¦ÞÍÀPŒ^b–ƾŠlŽ[„vt×ĈÍE˨¡Đ~´î¸ùÎh€uè`¸ŸHÕŔVºwĠââWò‡@{œÙNÝ´ə²ȕn{¿¥{l—÷eé^e’ďˆXj©î\\ªÑò˜Üìc\\üqˆÕ[Č¡xoÂċªbØ­Œø|€¶ȴZdÆšońéŒGš\\”¼C°ÌƁn´nxšÊOĨ’Ūƴĸ¢¸òTxÊǪMīИÖŲÃɎOvˆʦƢ~FŽ‡Rěò—¿ġ~åŊœú‰Nšžš¸qŽ’Ę[Ĕ¶ÂćnÒPĒÜvúĀÊbÖ{Äî¸~Ŕünp¤ÂH¾œĄYÒ©ÊfºmԈĘcDoĬMŬ’˜S¤„s²‚”ʘچžȂVŦ –ŽèW°ªB|IJXŔþÈJĦÆæFĚêŠYĂªĂ]øªŖNÞüA€’fɨJ€˜¯ÎrDDšĤ€`€mz\\„§~D¬{vJÂ˜«lµĂb–¤p€ŌŰNĄ¨ĊXW|ų ¿¾ɄĦƐMT”‡òP˜÷fØĶK¢ȝ˔Sô¹òEð­”`Ɩ½ǒÂň×äı–§ĤƝ§C~¡‚hlå‚ǺŦŞkâ’~}ŽFøàIJaĞ‚fƠ¥Ž„Ŕdž˜®U¸ˆźXœv¢aƆúŪtŠųƠjd•ƺŠƺÅìnrh\\ĺ¯äɝĦ]èpĄ¦´LƞĬŠ´ƤǬ˼Ēɸ¤rºǼ²¨zÌPðŀbþ¹ļD¢¹œ\\ĜÑŚŸ¶ZƄ³àjĨoâŠȴLʉȮŒĐ­ĚăŽÀêZǚŐ¤qȂ\\L¢ŌİfÆs|zºeªÙæ§΢{Ā´ƐÚ¬¨Ĵà²łhʺKÞºÖTŠiƢ¾ªì°`öøu®Ê¾ãØ"],"encodeOffsets":[[88824,50096]]}},{"type":"Feature","id":"110000","properties":{"id":"110000","cp":[116.405285,39.904989],"name":"北京","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@ĽOÁ›ûtŷmiÍt_H»Ĩ±d`Š¹­{bw…Yr“³S]§§o¹€qGtm_Sŧ€“oa›‹FLg‘QN_•dV€@Zom_ć\\ߚc±x¯oœRcfe…£’o§ËgToÛJíĔóu…|wP¤™XnO¢ÉˆŦ¯rNÄā¤zâŖÈRpŢZŠœÚ{GŠrFt¦Òx§ø¹RóäV¤XdˆżâºWbwŚ¨Ud®bêņ¾‘jnŎGŃŶŠnzÚSeîĜZczî¾i]͜™QaúÍÔiþĩȨWĢ‹ü|Ėu[qb[swP@ÅğP¿{\\‡¥A¨Ï‘Ѩj¯ŠX\\¯œMK‘pA³[H…īu}}"],"encodeOffsets":[[120023,41045]]}},{"type":"Feature","id":"120000","properties":{"id":"120000","cp":[117.190182,39.125596],"name":"天津","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@ŬgX§Ü«E…¶Ḟ“¬O_™ïlÁg“z±AXe™µÄĵ{¶]gitgšIj·›¥îakS€‰¨ÐƎk}ĕ{gB—qGf{¿a†U^fI“ư‹³õ{YƒıëNĿžk©ïËZŏ‘R§òoY×Ógc…ĥs¡bġ«@dekąI[nlPqCnp{ˆō³°`{PNdƗqSÄĻNNâyj]äžÒD ĬH°Æ]~¡HO¾ŒX}ÐxŒgp“gWˆrDGˆŒpù‚Š^L‚ˆrzWxˆZ^¨´T\\|~@I‰zƒ–bĤ‹œjeĊªz£®Ĕvě€L†mV¾Ô_ȔNW~zbĬvG†²ZmDM~”~"],"encodeOffsets":[[120237,41215]]}},{"type":"Feature","id":"310000","properties":{"id":"310000","cp":[121.472644,31.231706],"name":"上海","childNum":6},"geometry":{"type":"MultiPolygon","coordinates":[["@@ɧư¬EpƸÁxc‡"],["@@©„ªƒ"],["@@”MA‹‘š"],["@@Qp݁E§ÉC¾"],["@@bŝՕÕEȣÚƥêImɇǦèÜĠŒÚžÃƌÃ͎ó"],["@@ǜûȬɋŠŭ™×^‰sYŒɍDŋ‘ŽąñCG²«ªč@h–_p¯A{‡oloY€¬j@IJ`•gQڛhr|ǀ^MIJvtbe´R¯Ô¬¨YŽô¤r]ì†Ƭį"]],"encodeOffsets":[[[124702,32062]],[[124547,32200]],[[124808,31991]],[[124726,32110]],[[124903,32376]],[[124438,32149]]]}},{"type":"Feature","id":"500000","properties":{"id":"500000","cp":[107.304962,29.533155],"name":"重庆","childNum":2},"geometry":{"type":"MultiPolygon","coordinates":[["@@vjG~nGŘŬĶȂƀƾ¹¸ØÎezĆT¸}êЖqHŸðqĖ䒊¥^CƒIj–²p…\\_ æüY|[YxƊæuž°xb®…Űb@~¢NQt°¶‚S栓Ê~rljĔëĚ¢~šuf`‘‚†fa‚ĔJåĊ„nÖ]„jƎćÊ@Š£¾a®£Ű{ŶĕF‹ègLk{Y|¡ĜWƔtƬJÑxq‹±ĢN´‰òK‰™–LÈüD|s`ŋ’ć]ƒÃ‰`đŒMûƱ½~Y°ħ`ƏíW‰½eI‹½{aŸ‘OIrÏ¡ĕŇa†p†µÜƅġ‘œ^ÖÛbÙŽŏml½S‹êqDu[R‹ãË»†ÿw`»y‘¸_ĺę}÷`M¯ċfCVµqʼn÷Z•gg“Œ`d½pDO‡ÎCnœ^uf²ènh¼WtƏxRGg¦…pV„†FI±ŽG^ŒIc´ec‡’G•ĹÞ½sëĬ„h˜xW‚}Kӈe­Xsbk”F¦›L‘ØgTkïƵNï¶}Gy“w\\oñ¡nmĈzjŸ•@™Óc£»Wă¹Ój“_m»ˆ¹·~MvÛaqœ»­‰êœ’\\ÂoVnŽÓØ͙²«‹bq¿efE „€‹Ĝ^Qž~ Évý‡ş¤²Į‰pEİ}zcĺƒL‹½‡š¿gņ›¡ýE¡ya£³t\\¨\\vú»¼§·Ñr_oÒý¥u‚•_n»_ƒ•At©Þűā§IVeëƒY}{VPÀFA¨ąB}q@|Ou—\\Fm‰QF݅Mw˜å}]•€|FmϋCaƒwŒu_p—¯sfÙgY…DHl`{QEfNysBŠ¦zG¸rHe‚„N\\CvEsÐùÜ_·ÖĉsaQ¯€}_U‡†xÃđŠq›NH¬•Äd^ÝŰR¬ã°wećJEž·vÝ·Hgƒ‚éFXjÉê`|yŒpxkAwœWĐpb¥eOsmzwqChóUQl¥F^laf‹anòsr›EvfQdÁUVf—ÎvÜ^efˆtET¬ôA\\œ¢sJŽnQTjP؈xøK|nBz‰„œĞ»LY‚…FDxӄvr“[ehľš•vN”¢o¾NiÂxGp⬐z›bfZo~hGi’]öF|‰|Nb‡tOMn eA±ŠtPT‡LjpYQ|†SH††YĀxinzDJ€Ìg¢và¥Pg‰_–ÇzII‹€II•„£®S¬„Øs쐣ŒN"],["@@ifjN@s"]],"encodeOffsets":[[[109628,30765]],[[111725,31320]]]}},{"type":"Feature","id":"810000","properties":{"id":"810000","cp":[114.173355,22.320048],"name":"香港","childNum":5},"geometry":{"type":"MultiPolygon","coordinates":[["@@AlBk"],["@@mŽn"],["@@EpFo"],["@@ea¢pl¸Eõ¹‡hj[ƒ]ÔCΖ@lj˜¡uBXŸ…•´‹AI¹…[‹yDUˆ]W`çwZkmc–…M›žp€Åv›}I‹oJlcaƒfёKŽ°ä¬XJmРđhI®æÔtSHn€Eˆ„ÒrÈc"],["@@rMUw‡AS®€e"]],"encodeOffsets":[[[117111,23002]],[[117072,22876]],[[117045,22887]],[[116975,23082]],[[116882,22747]]]}},{"type":"Feature","id":"820000","properties":{"id":"820000","cp":[113.54909,22.198951],"name":"澳门","childNum":1},"geometry":{"type":"Polygon","coordinates":["@@kÊd°å§s"],"encodeOffsets":[[116279,22639]]}}],"UTF8Encoding":true}
\ No newline at end of file
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "id": "710000",
+      "properties": {
+        "id": "710000",
+        "cp": [121.509062, 24.044332],
+        "name": "台湾",
+        "childNum": 6
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@°Ü¯Û"],
+          [
+            "@@ƛĴÕƊÉɼģºðʀ\\ƎsÆNŌÔĚäœnÜƤɊĂǀĆĴžĤNJŨxĚĮǂƺòƌ‚–âÔ®ĮXŦţƸZûЋƕƑGđ¨ĭMó·ęcëƝɉlÝƯֹÅŃ^Ó·śŃNjƏďíåɛGɉ™¿@ăƑŽ¥ĘWǬÏĶŁâ"
+          ],
+          ["@@\\p|WoYG¿¥I†j@¢"],
+          ["@@…¡‰@ˆV^RqˆBbAŒnTXeRz¤Lž«³I"],
+          ["@@ÆEE—„kWqë @œ"],
+          ["@@fced"],
+          ["@@„¯ɜÄèaì¯ØǓIġĽ"],
+          ["@@çûĖ롖hòř "]
+        ],
+        "encodeOffsets": [
+          [[122886, 24033]],
+          [[123335, 22980]],
+          [[122375, 24193]],
+          [[122518, 24117]],
+          [[124427, 22618]],
+          [[124862, 26043]],
+          [[126259, 26318]],
+          [[127671, 26683]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "130000",
+      "properties": {
+        "id": "130000",
+        "cp": [114.502461, 38.045474],
+        "name": "河北",
+        "childNum": 3
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@o~†Z]‚ªr‰ºc_ħ²G¼s`jΟnüsœłNX_“M`ǽÓnUK…Ĝēs¤­©yrý§uģŒc†JŠ›e"],
+          ["@@U`Ts¿m‚"],
+          [
+            "@@oºƋÄd–eVŽDJj£€J|Ådz•Ft~žKŨ¸IÆv|”‡¢r}膎onb˜}`RÎÄn°ÒdÞ²„^®’lnÐèĄlðӜ×]ªÆ}LiĂ±Ö`^°Ç¶p®đDcœŋ`–ZÔ’¶êqvFƚ†N®ĆTH®¦O’¾ŠIbÐã´BĐɢŴÆíȦp–ĐÞXR€·nndOž¤’OÀĈƒ­Qg˜µFo|gȒęSWb©osx|hYh•gŃfmÖĩnº€T̒Sp›¢dYĤ¶UĈjl’ǐpäìë|³kÛfw²Xjz~ÂqbTŠÑ„ěŨ@|oM‡’zv¢ZrÃVw¬ŧĖ¸fŒ°ÐT€ªqŽs{Sž¯r æÝlNd®²Ğ džiGʂJ™¼lr}~K¨ŸƐÌWö€™ÆŠzRš¤lêmĞL΄’@¡|q]SvK€ÑcwpÏρ†ĿćènĪWlĄkT}ˆJ”¤~ƒÈT„d„™pddʾĬŠ”ŽBVt„EÀ¢ôPĎƗè@~‚k–ü\\rÊĔÖæW_§¼F˜†´©òDòj’ˆYÈrbĞāøŀG{ƀ|¦ðrb|ÀH`pʞkv‚GpuARhÞÆǶgʊTǼƹS£¨¡ù³ŘÍ]¿Ây™ôEP xX¶¹܇O¡“gÚ¡IwÃ鑦ÅB‡Ï|Ç°…N«úmH¯‹âŸDùŽyŜžŲIÄuШDž•¸dɂ‡‚FŸƒ•›Oh‡đ©OŸ›iÃ`ww^ƒÌkŸ‘ÑH«ƇǤŗĺtFu…{Z}Ö@U‡´…ʚLg®¯Oı°ÃwŸ ^˜—€VbÉs‡ˆmA…ê]]w„§›RRl£‡ȭµu¯b{ÍDěïÿȧŽuT£ġƒěŗƃĝ“Q¨fV†Ƌ•ƅn­a@‘³@šď„yýIĹÊKšŭfċŰóŒxV@tˆƯŒJ”]eƒR¾fe|rHA˜|h~Ėƍl§ÏŠlTíb ØoˆÅbbx³^zÃĶš¶Sj®A”yÂhðk`š«P€”ˈµEF†Û¬Y¨Ļrõqi¼‰Wi°§’б´°^[ˆÀ|ĠO@ÆxO\\tŽa\\tĕtû{ġŒȧXýĪÓjùÎRb›š^ΛfK[ݏděYfíÙTyŽuUSyŌŏů@Oi½’éŅ­aVcř§ax¹XŻác‡žWU£ôãºQ¨÷Ñws¥qEH‰Ù|‰›šYQoŕÇyáĂ£MðoťÊ‰P¡mšWO¡€v†{ôvîēÜISpÌhp¨ ‘j†deŔQÖj˜X³à™Ĉ[n`Yp@Už–cM`’RKhŒEbœ”pŞlNut®Etq‚nsÁŠgA‹iú‹oH‡qCX‡”hfgu“~ϋWP½¢G^}¯ÅīGCŸÑ^ãziMáļMTÃƘrMc|O_ž¯Ŏ´|‡morDkO\\mĆJfl@cĢ¬¢aĦtRıҙ¾ùƀ^juųœK­ƒUFy™—Ɲ…›īÛ÷ąV×qƥV¿aȉd³B›qPBm›aËđŻģm“Å®VŠ¹d^K‡KoŸnYg“¯Xhqa”Ldu¥•ÍpDž¡KąÅƒkĝęěhq‡}HyÓ]¹ǧ£…Í÷¿qᵧš™g‘¤o^á¾ZE‡¤i`ij{n•ƒOl»ŸWÝĔįhg›F[¿¡—ßkOüš_‰€ū‹i„DZàUtėGylƒ}ŒÓM}€jpEC~¡FtoQi‘šHkk{Ãmï‚"
+          ]
+        ],
+        "encodeOffsets": [[[119712, 40641]], [[121616, 39981]], [[116462, 37237]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "140000",
+      "properties": {
+        "id": "140000",
+        "cp": [111.849248, 36.857014],
+        "name": "山西",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@Þĩ҃S‰ra}Á€yWix±Üe´lè“ßÓǏok‘ćiµVZģ¡coœ‘TS˹ĪmnÕńe–hZg{gtwªpXaĚThȑp{¶Eh—®RćƑP¿£‘Pmc¸mQÝW•ďȥoÅîɡųAďä³aωJ‘½¥PG­ąSM­™…EÅruµé€‘Yӎ•Ō_d›ĒCo­Èµ]¯_²ÕjāŽK~©ÅØ^ԛkïçămϑk]­±ƒcݯÑÃmQÍ~_a—pm…~ç¡q“ˆu{JÅŧ·Ls}–EyÁÆcI{¤IiCfUc•ƌÃp§]웫vD@¡SÀ‘µM‚ÅwuŽYY‡¡DbÑc¡hƒ×]nkoQdaMç~eD•ÛtT‰©±@¥ù@É¡‰ZcW|WqOJmĩl«ħşvOÓ«IqăV—¥ŸD[mI~Ó¢cehiÍ]Ɠ~ĥqXŠ·eƷœn±“}v•[ěďŽŕ]_‘œ•`‰¹ƒ§ÕōI™o©b­s^}Ét±ū«³p£ÿ·Wµ|¡¥ăFÏs׌¥ŅxŸÊdÒ{ºvĴÎêÌɊ²¶€ü¨|ÞƸµȲ‘LLúÉƎ¤ϊęĔV`„_bª‹S^|ŸdŠzY|dz¥p†ZbÆ£¶ÒK}tĦÔņƠ‚PYzn€ÍvX¶Ěn ĠÔ„zý¦ª˜÷žÑĸَUȌ¸‚dòÜJð´’ìúNM¬ŒXZ´‘¤ŊǸ_tldIš{¦ƀðĠȤ¥NehXnYG‚‡R° ƬDj¬¸|CĞ„Kq‚ºfƐiĺ©ª~ĆOQª ¤@ìǦɌ²æBŒÊ”TœŸ˜ʂōĖ’šĴŞ–ȀœÆÿȄlŤĒö„t”νî¼ĨXhŒ‘˜|ªM¤Ðz"
+        ],
+        "encodeOffsets": [[116874, 41716]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "150000",
+      "properties": {
+        "id": "150000",
+        "cp": [111.670801, 41.818311],
+        "name": "内蒙古",
+        "childNum": 2
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            "@@¯PqƒFB…‰|S•³C|kñ•H‹d‘iÄ¥sˆʼnő…PóÑÑE^‘ÅPpy_YtS™hQ·aHwsOnʼnÚs©iqj›‰€USiº]ïWš‰«gW¡A–Rë¥_ŽsgÁnUI«m‰…„‹]j‡vV¼euhwqA„aW˜ƒ_µj…»çjioQR¹ēÃßt@r³[ÛlćË^ÍÉáG“›OUۗOB±•XŸkŇ¹£k|e]ol™ŸkVͼÕqtaÏõjgÁ£§U^Œ”RLˆËnX°Ç’Bz†^~wfvˆypV ¯„ƫĉ˭ȫƗŷɿÿĿƑ˃ĝÿÃǃßËőó©ǐȍŒĖM×ÍEyx‹þp]Évïè‘vƀnÂĴÖ@‚‰†V~Ĉv¦wĖt—ējyÄDXÄxGQuv_›i¦aBçw‘˛wD™©{ŸtāmQ€{EJ§KPśƘƿ¥@‰sCT•É}ɃwˆƇy±ŸgÑ“}T[÷kÐ禫…SÒ¥¸ëBX½‰HáŵÀğtSÝÂa[ƣ°¯¦P]£ġ“–“Òk®G²„èQ°óMq}EŠóƐÇ\\ƒ‡@áügQ͋u¥Fƒ“T՛¿Jû‡]|mvāÎYua^WoÀa·­ząÒot׶CLƗi¯¤mƎHNJ¤îìɾŊìTdåwsRÖgĒųúÍġäÕ}Q¶—ˆ¿A•†‹[¡Œ{d×uQAƒ›M•xV‹vMOmăl«ct[wº_šÇʊŽŸjb£ĦS_é“QZ“_lwgOiýe`YYLq§IÁˆdz£ÙË[ÕªuƏ³ÍT—s·bÁĽäė[›b[ˆŗfãcn¥îC¿÷µ[ŏÀQ­ōšĉm¿Á^£mJVm‡—L[{Ï_£›F¥Ö{ŹA}…×Wu©ÅaųijƳhB{·TQqÙIķˑZđ©Yc|M¡…L•eVUóK_QWk’_ĥ‘¿ãZ•»X\\ĴuUƒè‡lG®ěłTĠğDєOrÍd‚ÆÍz]‹±…ŭ©ŸÅ’]ŒÅÐ}UË¥©Tċ™ïxgckfWgi\\ÏĒ¥HkµE˜ë{»ÏetcG±ahUiñiWsɁˆ·c–C‚Õk]wȑ|ća}w…VaĚ᠞ŒG°ùnM¬¯†{ȈÐÆA’¥ÄêJxÙ¢”hP¢Ûˆº€µwWOŸóFŽšÁz^ÀŗÎú´§¢T¤ǻƺSė‰ǵhÝÅQgvBHouʝl_o¿Ga{ïq{¥|ſĿHĂ÷aĝÇq‡Z‘ñiñC³ª—…»E`¨åXēÕqÉû[l•}ç@čƘóO¿¡ƒFUsA‰“ʽīccšocƒ‚ƒÇS}„“£‡IS~ălkĩXçmĈ…ŀЂoÐdxÒuL^T{r@¢‘žÍƒĝKén£kQ™‰yšÅõËXŷƏL§~}kqš»IHėDžjĝŸ»ÑÞoŸå°qTt|r©ÏS‹¯·eŨĕx«È[eMˆ¿yuˆ‘pN~¹ÏyN£{©’—g‹ħWí»Í¾s“əšDž_ÃĀɗ±ą™ijĉʍŌŷ—S›É“A‹±åǥɋ@럣R©ąP©}ĹªƏj¹erƒLDĝ·{i«ƫC£µsKCš…GS|úþX”gp›{ÁX¿Ÿć{ƱȏñZáĔyoÁhA™}ŅĆfdʼn„_¹„Y°ėǩÑ¡H¯¶oMQqð¡Ë™|‘Ñ`ƭŁX½·óۓxğįÅcQ‡ˆ“ƒs«tȋDžF“Ÿù^i‘t«Č¯[›hAi©á¥ÇĚ×l|¹y¯YȵƓ‹ñǙµï‚ċ™Ļ|Dœ™üȭ¶¡˜›oŽäÕG\\ďT¿Òõr¯œŸLguÏYęRƩšɷŌO\\İТæ^Ŋ IJȶȆbÜGŽĝ¬¿ĚVĎgª^íu½jÿĕęjık@Ľƒ]ėl¥Ë‡ĭûÁ„ƒėéV©±ćn©­ȇžÍq¯½•YÃÔʼn“ÉNѝÅÝy¹NqáʅDǡËñ­ƁYÅy̱os§ȋµʽǘǏƬɱà‘ưN¢ƔÊuľýľώȪƺɂļžxœZĈ}ÌʼnŪ˜ĺœŽĭFЛĽ̅ȣͽÒŵìƩÇϋÿȮǡŏçƑůĕ~Ǎ›¼ȳÐUf†dIxÿ\\G ˆzâɏÙOº·pqy£†@ŒŠqþ@Ǟ˽IBäƣzsÂZ†ÁàĻdñ°ŕzéØűzșCìDȐĴĺf®ŽÀľưø@ɜÖÞKĊŇƄ§‚͑těï͡VAġÑÑ»d³öǍÝXĉĕÖ{þĉu¸ËʅğU̎éhɹƆ̗̮ȘNJ֥ड़ࡰţાíϲäʮW¬®ҌeרūȠkɬɻ̼ãüfƠSצɩςåȈHϚÎKdzͲOðÏȆƘ¼CϚǚ࢚˼ФԂ¤ƌžĞ̪Qʤ´¼mȠJˀŸƲÀɠmǐnǔĎȆÞǠN~€ʢĜ‚¶ƌĆĘźʆȬ˪ĚĒ¸ĞGȖƴƀj`ĢçĶāàŃºēĢƒĖćšYŒÀŎüôQÐÂŎŞdžŞêƖš˜oˆDĤÕºÑǘÛˤ³̀gńƘĔÀ^žªƂ`ªt¾äƚêĦĀ¼Ð€Ĕǎ¨Ȕ»͠^ˮÊȦƤøxRrŜH¤¸ÂxDĝŒ|ø˂˜ƮÐ¬ɚwɲFjĔ²Äw°dždÀɞ_ĸdîàŎjʜêTЪŌ‡ŜWÈ|tqĢUB~´°ÎFC•ŽU¼pĀēƄN¦¾O¶ŠłKĊOj“Ě”j´ĜYp˜{¦„ˆSĚÍ\\Tš×ªV–÷Ší¨ÅDK°ßtŇĔKš¨ǵÂcḷ̌ĚǣȄĽF‡lġUĵœŇ‹ȣFʉɁƒMğįʏƶɷØŭOǽ«ƽū¹Ʊő̝Ȩ§ȞʘĖiɜɶʦ}¨֪ࠜ̀ƇǬ¹ǨE˦ĥªÔêFŽxúQ„Er´W„rh¤Ɛ \\talĈDJ˜Ü|[Pll̚¸ƎGú´Pž¬W¦†^¦–H]prR“n|or¾wLVnÇIujkmon£cX^Bh`¥V”„¦U¤¸}€xRj–[^xN[~ªŠxQ„‚[`ªHÆÂExx^wšN¶Ê˜|¨ì†˜€MrœdYp‚oRzNy˜ÀDs~€bcfÌ`L–¾n‹|¾T‚°c¨È¢a‚r¤–`[|òDŞĔöxElÖdH„ÀI`„Ď\\Àì~ƎR¼tf•¦^¢ķ¶e”ÐÚMŒptgj–„ɡČÅyġLû™ŇV®ŠÄÈƀ†Ď°P|ªVV†ªj–¬ĚÒêp¬–E|ŬÂc|ÀtƐK fˆ{ĘFĒœƌXƲąo½Ę‘\\¥–o}›Ûu£ç­kX‘{uĩ«āíÓUŅßŢq€Ť¥lyň[€oi{¦‹L‡ń‡ðFȪȖ”ĒL„¿Ì‹ˆfŒ£K£ʺ™oqNŸƒwğc`ue—tOj×°KJ±qƒÆġm‰Ěŗos¬…qehqsuœƒH{¸kH¡Š…ÊRǪÇƌbȆ¢´ä܍¢NìÉʖ¦â©Ġu¦öČ^â£Ăh–šĖMÈÄw‚\\fŦ°W ¢¾luŸD„wŠ\\̀ʉÌÛM…Ā[bӞEn}¶Vc…ê“sƒ"
+          ]
+        ],
+        "encodeOffsets": [[[129102, 52189]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "210000",
+      "properties": {
+        "id": "210000",
+        "cp": [123.429096, 41.796767],
+        "name": "辽宁",
+        "childNum": 16
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@L–Ž@@s™a"],
+          ["@@MnNm"],
+          ["@@d‚c"],
+          ["@@eÀ‚C@b‚“‰"],
+          ["@@f‡…Xwkbr–Ä`qg"],
+          ["@@^jtW‘Q"],
+          ["@@~ Y]c"],
+          ["@@G`ĔN^_¿Z‚ÃM"],
+          ["@@iX¶B‹Y"],
+          ["@@„YƒZ"],
+          ["@@L_{Epf"],
+          ["@@^WqCT\\"],
+          ["@@\\[“‹§t|”¤_"],
+          ["@@m`n_"],
+          ["@@Ïxnj{q_×^Giip"],
+          [
+            "@@@œé^B†‡ntˆaÊU—˜Ÿ]x ¯ÄPIJ­°h€ʙK³†VˆÕ@Y~†|EvĹsDŽ¦­L^p²ŸÒG ’Ël]„xxÄ_˜fT¤Ď¤cŽœP„–C¨¸TVjbgH²sdÎdHt`Bˆ—²¬GJję¶[ÐhjeXdlwhšðSȦªVÊπ‹Æ‘Z˜ÆŶ®²†^ŒÎyÅÎcPqń“ĚDMħĜŁH­ˆk„çvV[ij¼W–‚YÀäĦ’‘`XlžR`žôLUVžfK–¢†{NZdĒª’YĸÌÚJRr¸SA|ƴgŴĴÆbvªØX~†źBŽ|¦ÕœEž¤Ð`\\|Kˆ˜UnnI]¤ÀÂĊnŎ™R®Ő¿¶\\ÀøíDm¦ÎbŨab‰œaĘ\\ľã‚¸a˜tÎSƐ´©v\\ÖÚÌǴ¤Â‡¨JKr€Z_Z€fjþhPkx€`Y”’RIŒjJcVf~sCN¤ ˆE‚œhæm‰–sHy¨SðÑÌ\\\\ŸĐRZk°IS§fqŒßýáЍÙÉÖ[^¯ǤŲ„ê´\\¦¬ĆPM¯£Ÿˆ»uïpùzEx€žanµyoluqe¦W^£ÊL}ñrkqWňûP™‰UP¡ôJŠoo·ŒU}£Œ„[·¨@XŒĸŸ“‹‹DXm­Ûݏº‡›GU‹CÁª½{íĂ^cj‡k“¶Ã[q¤“LÉö³cux«zZfƒ²BWÇ®Yß½ve±ÃC•ý£W{Ú^’q^sÑ·¨‹ÍOt“¹·C¥‡GD›rí@wÕKţ݋˜Ÿ«V·i}xËÍ÷‘i©ĝ‡ɝǡ]ƒˆ{c™±OW‹³Ya±Ÿ‰_穂Hžĕoƫ€Ňqƒr³‰Lys[„ñ³¯OS–ďOMisZ†±ÅFC¥Pq{‚Ã[Pg}\\—¿ghćO…•k^ģÁFıĉĥM­oEqqZûěʼn³F‘¦oĵ—hŸÕP{¯~TÍlª‰N‰ßY“Ð{Ps{ÃVU™™eĎwk±ʼnVÓ½ŽJãÇÇ»Jm°dhcÀff‘dF~ˆ€ĀeĖ€d`sx² šƒ®EżĀdQ‹Âd^~ăÔHˆ¦\\›LKpĄVez¤NP ǹӗR™ÆąJSh­a[¦´Âghwm€BÐ¨źhI|žVVŽ—Ž|p] Â¼èNä¶ÜBÖ¼“L`‚¼bØæŒKV”ŸpoœúNZÞÒKxpw|ÊEMnzEQšŽIZ”ŽZ‡NBˆčÚFÜçmĩ‚WĪñt‘ÞĵÇñZ«uD‚±|Əlij¥ãn·±PmÍa‰–da‡ CL‡Ǒkùó¡³Ï«QaċϑOÃ¥ÕđQȥċƭy‹³ÃA"
+          ]
+        ],
+        "encodeOffsets": [
+          [[123686, 41445]],
+          [[126019, 40435]],
+          [[124393, 40128]],
+          [[126117, 39963]],
+          [[125322, 40140]],
+          [[126686, 40700]],
+          [[126041, 40374]],
+          [[125584, 40168]],
+          [[125453, 40165]],
+          [[125362, 40214]],
+          [[125280, 40291]],
+          [[125774, 39997]],
+          [[125976, 40496]],
+          [[125822, 39993]],
+          [[125509, 40217]],
+          [[122731, 40949]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "220000",
+      "properties": { "id": "220000", "cp": [125.3245, 43.886841], "name": "吉林", "childNum": 1 },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@‘p䔳PClƒFbbÍzš€wBG’ĭ€Z„Åi“»ƒlY­ċ²SgŽkÇ£—^S‰“qd¯•‹R…©éŽ£¯S†\\cZ¹iűƏCuƍÓX‡oR}“M^o•£…R}oªU­F…uuXHlEŕ‡€Ï©¤ÛmTŽþ¤D–²ÄufàÀ­XXȱAe„yYw¬dvõ´KÊ£”\\rµÄl”iˆdā]|DÂVŒœH¹ˆÞ®ÜWnŒC”Œķ W‹§@\\¸‹ƒ~¤‹Vp¸‰póIO¢ŠVOšŇürXql~òÉK]¤¥Xrfkvzpm¶bwyFoúvð‡¼¤ N°ąO¥«³[ƒéǡű_°Õ\\ÚÊĝŽþâőàerR¨­JYlďQ[ ÏYëЧTGz•tnŠß¡gFkMŸāGÁ¤ia É‰™È¹`\\xs€¬dĆkNnuNUŠ–užP@‚vRY¾•–\\¢…ŒGªóĄ~RãÖÎĢù‚đŴÕhQŽxtcæëSɽʼníëlj£ƍG£nj°KƘµDsØÑpyƸ®¿bXp‚]vbÍZuĂ{nˆ^IüœÀSք”¦EŒvRÎûh@℈[‚Əȉô~FNr¯ôçR±ƒ­HÑl•’Ģ–^¤¢‚OðŸŒævxsŒ]ÞÁTĠs¶¿âƊGW¾ìA¦·TѬ†è¥€ÏÐJ¨¼ÒÖ¼ƒƦɄxÊ~S–tD@ŠĂ¼Ŵ¡jlºWžvЉˆzƦZЎ²CH— „Axiukd‹ŒGgetqmcžÛ£Ozy¥cE}|…¾cZ…k‚‰¿uŐã[oxGikfeäT@…šSUwpiÚFM©’£è^ڟ‚`@v¶eň†f h˜eP¶žt“äOlÔUgƒÞzŸU`lœ}ÔÆUvØ_Ō¬Öi^ĉi§²ÃŠB~¡Ĉ™ÚEgc|DC_Ȧm²rBx¼MÔ¦ŮdĨÃâYx‘ƘDVÇĺĿg¿cwÅ\\¹˜¥Yĭlœ¤žOv†šLjM_a W`zļMž·\\swqÝSA‡š—q‰Śij¯Š‘°kŠRē°wx^Đkǂғ„œž“œŽ„‹\\]˜nrĂ}²ĊŲÒøãh·M{yMzysěnĒġV·°“G³¼XÀ““™¤¹i´o¤ŃšŸÈ`̃DzÄUĞd\\i֚ŒˆmÈBĤÜɲDEh LG¾ƀľ{WaŒYÍȏĢĘÔRîĐj‹}Ǟ“ccj‡oUb½š{“h§Ǿ{K‹ƖµÎ÷žGĀÖŠåưÎs­l›•yiē«‹`姝H¥Ae^§„GK}iã\\c]v©ģZ“mÃ|“[M}ģTɟĵ‘Â`À–çm‰‘FK¥ÚíÁbXš³ÌQґHof{‰]e€pt·GŋĜYünĎųVY^’˜ydõkÅZW„«WUa~U·Sb•wGçǑ‚“iW^q‹F‚“›uNĝ—·Ew„‹UtW·Ýďæ©PuqEzwAV•—XR‰ãQ`­©GŒM‡ehc›c”ďϝd‡©ÑW_ϗYƅŒ»…é\\ƒɹ~ǙG³mØ©BšuT§Ĥ½¢Ã_ý‘L¡‘ýŸqT^rme™\\Pp•ZZbƒyŸ’uybQ—efµ]UhĿDCmûvašÙNSkCwn‰cćfv~…Y‹„ÇG"
+        ],
+        "encodeOffsets": [[130196, 42528]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "230000",
+      "properties": {
+        "id": "230000",
+        "cp": [128.642464, 46.756967],
+        "name": "黑龙江",
+        "childNum": 2
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            "@@UƒµNÿ¥īè灋•HÍøƕ¶LŒǽ|g¨|”™Ža¾pViˆdd”~ÈiŒíďÓQġėǐZ΋ŽXb½|ſÃH½ŸKFgɱCģÛÇA‡n™‹jÕc[VĝDZÃ˄Ç_™ £ń³pŽj£º”š¿”»WH´¯”U¸đĢmžtĜyzzNN|g¸÷äűѱĉā~mq^—Œ[ƒ”››”ƒǁÑďlw]¯xQĔ‰¯l‰’€°řĴrŠ™˜BˆÞTxr[tŽ¸ĻN_yŸX`biN™Ku…P›£k‚ZĮ—¦[ºxÆÀdhŽĹŀUÈƗCw’áZħÄŭcÓ¥»NAw±qȥnD`{ChdÙFćš}¢‰A±Äj¨]ĊÕjŋ«×`VuÓś~_kŷVÝyh„“VkÄãPs”Oµ—fŸge‚Ň…µf@u_Ù ÙcŸªNªÙEojVx™T@†ãSefjlwH\\pŏäÀvŠŽlY†½d{†F~¦dyz¤PÜndsrhf‹HcŒvlwjFœ£G˜±DύƥY‡yϊu¹XikĿ¦ÏqƗǀOŜ¨LI|FRĂn sª|Cš˜zxAè¥bœfudTrFWÁ¹Am|˜ĔĕsķÆF‡´Nš‰}ć…UŠÕ@Áijſmužç’uð^ÊýowŒFzØÎĕNőžǏȎôªÌŒDŽàĀÄ˄ĞŀƒʀĀƘŸˮȬƬĊ°ƒUŸzou‡xe]}Ž…AyȑW¯ÌmK‡“Q]‹Īºif¸ÄX|sZt|½ÚUΠlkš^p{f¤lˆºlÆW –€A²˜PVܜPH”Êâ]ÎĈÌÜk´\\@qàsĔÄQºpRij¼èi†`¶—„bXƒrBgxfv»ŽuUiˆŒ^v~”J¬mVp´£Œ´VWrnP½ì¢BX‚¬h™ŠðX¹^TjVœŠriªj™tŊÄm€tPGx¸bgRšŽsT`ZozÆO]’ÒFô҆Oƒ‡ŊŒvŞ”p’cGŒêŠsx´DR–Œ{A†„EOr°Œ•žx|íœbˆ³Wm~DVjºéNN†Ëܲɶ­GƒxŷCStŸ}]ûō•SmtuÇÃĕN•™āg»šíT«u}ç½BĵÞʣ¥ëÊ¡Mێ³ãȅ¡ƋaǩÈÉQ‰†G¢·lG|›„tvgrrf«†ptęŘnŠÅĢr„I²¯LiØsPf˜_vĠd„xM prʹšL¤‹¤‡eˌƒÀđK“žïÙVY§]I‡óáĥ]ķ†Kˆ¥Œj|pŇ\\kzţ¦šnņäÔVĂîĪ¬|vW’®l¤èØr‚˜•xm¶ă~lÄƯĄ̈́öȄEÔ¤ØQĄ–Ą»ƢjȦOǺ¨ìSŖÆƬy”Qœv`–cwƒZSÌ®ü±DŽ]ŀç¬B¬©ńzƺŷɄeeOĨS’Œfm Ċ‚ƀP̎ēz©Ċ‚ÄÕÊmgŸÇsJ¥ƔˆŊśæ’΁Ñqv¿íUOµª‰ÂnĦÁ_½ä@ê텣P}Ġ[@gġ}g“ɊדûÏWXá¢užƻÌsNͽƎÁ§č՛AēeL³àydl›¦ĘVçŁpśdžĽĺſʃQíÜçÛġԏsĕ¬—Ǹ¯YßċġHµ ¡eå`ļƒrĉŘóƢFì“ĎWøxÊk†”ƈdƬv|–I|·©NqńRŀƒ¤é”eŊœŀ›ˆàŀU²ŕƀB‚Q£Ď}L¹Îk@©ĈuǰųǨ”Ú§ƈnTËÇéƟÊcfčŤ^Xm‡—HĊĕË«W·ċëx³ǔķÐċJā‚wİ_ĸ˜Ȁ^ôWr­°oú¬Ħ…ŨK~”ȰCĐ´Ƕ£’fNÎèâw¢XnŮeÂÆĶŽ¾¾xäLĴĘlļO¤ÒĨA¢Êɚ¨®‚ØCÔ ŬGƠ”ƦYĜ‡ĘÜƬDJ—g_ͥœ@čŅĻA“¶¯@wÎqC½Ĉ»NŸăëK™ďÍQ“Ùƫ[«Ãí•gßÔÇOÝáW‘ñuZ“¯ĥ€Ÿŕā¡ÑķJu¤E Ÿå¯°WKɱ_d_}}vyŸõu¬ï¹ÓU±½@gÏ¿rýD‰†g…Cd‰µ—°MFYxw¿CG£‹Rƛ½Õ{]L§{qqąš¿BÇƻğëšܭNJË|c²}Fµ}›ÙRsÓpg±ŠQNqǫŋRwŕnéÑÉKŸ†«SeYR…ŋ‹@{¤SJ}šD Ûǖ֍Ÿ]gr¡µŷjqWÛham³~S«“„›Þ]"
+          ]
+        ],
+        "encodeOffsets": [[[134456, 44547]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "320000",
+      "properties": {
+        "id": "320000",
+        "cp": [119.767413, 33.041544],
+        "name": "江苏",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@cþÅPiŠ`ZŸRu¥É\\]~°ŽY`µ†Óƒ^phÁbnÀşúŽòa–ĬºTÖŒb‚˜e¦¦€{¸ZâćNpŒ©žHr|^ˆmjhŠSEb\\afv`sz^lkŽlj‹Ätg‹¤D˜­¾Xš¿À’|ДiZ„ȀåB·î}GL¢õcßjaŸyBFµÏC^ĭ•cÙt¿sğH]j{s©HM¢ƒQnDÀ©DaÜތ·jgàiDbPufjDk`dPOîƒhw¡ĥ‡¥šG˜ŸP²ĐobºrY†„î¶aHŢ´ ]´‚rılw³r_{£DB_Ûdåuk|ˆŨ¯F Cºyr{XFy™e³Þċ‡¿Â™kĭB¿„MvÛpm`rÚã”@Ę¹hågËÖƿxnlč¶Åì½Ot¾dJlŠVJʜǀœŞqvnOŠ^ŸJ”Z‘ż·Q}ê͎ÅmµÒ]Žƍ¦Dq}¬R^èĂ´ŀĻĊIԒtžIJyQŐĠMNtœR®òLh‰›Ěs©»œ}OӌGZz¶A\\jĨFˆäOĤ˜HYš†JvÞHNiÜaϚɖnFQlšNM¤ˆB´ĄNöɂtp–Ŭdf先‹qm¿QûŠùއÚb¤uŃJŴu»¹Ą•lȖħŴw̌ŵ²ǹǠ͛hĭłƕrçü±Y™xci‡tğ®jű¢KOķ•Coy`å®VTa­_Ā]ŐÝɞï²ʯÊ^]afYǸÃĆēĪȣJđ͍ôƋĝÄ͎ī‰çÛɈǥ£­ÛmY`ó£Z«§°Ó³QafusNıDž_k}¢m[ÝóDµ—¡RLčiXy‡ÅNïă¡¸iĔϑNÌŕoēdōîåŤûHcs}~Ûwbù¹£¦ÓCt‹OPrƒE^ÒoŠg™ĉIµžÛÅʹK…¤½phMŠü`o怆ŀ"
+        ],
+        "encodeOffsets": [[121740, 32276]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "330000",
+      "properties": {
+        "id": "330000",
+        "cp": [120.153576, 29.287459],
+        "name": "浙江",
+        "childNum": 45
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@E^dQ]K"],
+          ["@@jX^j‡"],
+          ["@@sfŠbU‡"],
+          ["@@qP\\xz[ck"],
+          ["@@‘Rƒ¢‚FX}°[s_"],
+          ["@@Cbœ\\—}"],
+          ["@@e|v\\la{u"],
+          ["@@v~u}"],
+          ["@@QxÂF¯}"],
+          ["@@¹nŒvÞs¯o"],
+          ["@@rSkUEj"],
+          ["@@bi­ZŒP"],
+          ["@@p[}INf"],
+          ["@@À¿€"],
+          ["@@¹dnbŒ…"],
+          ["@@rSŸBnR"],
+          ["@@g~h}"],
+          ["@@FlEk"],
+          ["@@OdPc"],
+          ["@@v[u\\"],
+          ["@@FjâL~wyoo~›sµL–\\"],
+          ["@@¬e¹aNˆ"],
+          ["@@\\nÔ¡q]L³ë\\ÿ®ŒQ֎"],
+          ["@@ÊA­©[¬"],
+          ["@@KxŒv­"],
+          ["@@@hlIk]"],
+          ["@@pW{o||j"],
+          ["@@Md|_mC"],
+          ["@@¢…X£ÏylD¼XˆtH"],
+          ["@@hlÜ[LykAvyfw^Ež›¤"],
+          ["@@fp¤Mus“R"],
+          ["@@®_ma~•LÁ¬šZ"],
+          ["@@iM„xZ"],
+          ["@@ZcYd"],
+          ["@@Z~dOSo|A¿qZv"],
+          ["@@@`”EN¡v"],
+          ["@@|–TY{"],
+          ["@@@n@m"],
+          ["@@XWkCT\\"],
+          ["@@ºwšZRkĕWO¢"],
+          ["@@™X®±Grƪ\\ÔáXq{‹"],
+          ["@@ůTG°ĄLHm°UC‹"],
+          [
+            "@@¤Ž€aÜx~}dtüGæţŎíĔcŖpMËВjē¢·ðĄÆMzˆjWKĎ¢Q¶˜À_꒔_Bı€i«pZ€gf€¤Nrq]§ĂN®«H±‡yƳí¾×ŸīàLłčŴǝĂíÀBŖÕªˆŠÁŖHŗʼnåqûõi¨hÜ·ƒñt»¹ýv_[«¸m‰YL¯‰Qª…mĉÅdMˆ•gÇjcº«•ęœ¬­K­´ƒB«Âącoċ\\xKd¡gěŧ«®á’[~ıxu·Å”KsËɏc¢Ù\\ĭƛëbf¹­ģSƒĜkáƉÔ­ĈZB{ŠaM‘µ‰fzʼnfåÂŧįƋǝÊĕġć£g³ne­ą»@­¦S®‚\\ßðCšh™iqªĭiAu‡A­µ”_W¥ƣO\\lċĢttC¨£t`ˆ™PZäuXßBs‡Ļyek€OđġĵHuXBšµ]׌‡­­\\›°®¬F¢¾pµ¼kŘó¬Wät’¸|@ž•L¨¸µr“ºù³Ù~§WI‹ŸZWŽ®’±Ð¨ÒÉx€`‰²pĜ•rOògtÁZ}þÙ]„’¡ŒŸFK‚wsPlU[}¦Rvn`hq¬\\”nQ´ĘRWb”‚_ rtČFI֊kŠŠĦPJ¶ÖÀÖJĈĄTĚòžC ²@Pú…Øzœ©PœCÈڜĒ±„hŖ‡l¬â~nm¨f©–iļ«m‡nt–u†ÖZÜÄj“ŠLŽ®E̜Fª²iÊxبžIÈhhst"
+          ],
+          ["@@o\\V’zRZ}y"],
+          ["@@†@°¡mۛGĕ¨§Ianá[ýƤjfæ‡ØL–•äGr™"]
+        ],
+        "encodeOffsets": [
+          [[125592, 31553]],
+          [[125785, 31436]],
+          [[125729, 31431]],
+          [[125513, 31380]],
+          [[125223, 30438]],
+          [[125115, 30114]],
+          [[124815, 29155]],
+          [[124419, 28746]],
+          [[124095, 28635]],
+          [[124005, 28609]],
+          [[125000, 30713]],
+          [[125111, 30698]],
+          [[125078, 30682]],
+          [[125150, 30684]],
+          [[124014, 28103]],
+          [[125008, 31331]],
+          [[125411, 31468]],
+          [[125329, 31479]],
+          [[125626, 30916]],
+          [[125417, 30956]],
+          [[125254, 30976]],
+          [[125199, 30997]],
+          [[125095, 31058]],
+          [[125083, 30915]],
+          [[124885, 31015]],
+          [[125218, 30798]],
+          [[124867, 30838]],
+          [[124755, 30788]],
+          [[124802, 30809]],
+          [[125267, 30657]],
+          [[125218, 30578]],
+          [[125200, 30562]],
+          [[124968, 30474]],
+          [[125167, 30396]],
+          [[124955, 29879]],
+          [[124714, 29781]],
+          [[124762, 29462]],
+          [[124325, 28754]],
+          [[123990, 28459]],
+          [[125366, 31477]],
+          [[125115, 30363]],
+          [[125369, 31139]],
+          [[122495, 31878]],
+          [[125329, 30690]],
+          [[125192, 30787]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "340000",
+      "properties": { "id": "340000", "cp": [117.283042, 31.26119], "name": "安徽", "childNum": 3 },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@^iuLX^"],
+          ["@@‚e©Ehl"],
+          [
+            "@@°ZÆëϵmkǀwÌÕæhºgBĝâqÙĊz›ÖgņtÀÁÊÆá’hEz|WzqD¹€Ÿ°E‡ŧl{ævÜcA`¤C`|´qžxIJkq^³³ŸGšµbƒíZ…¹qpa±ď OH—¦™Ħˆx¢„gPícOl_iCveaOjCh߸i݋bÛªCC¿€m„RV§¢A|t^iĠGÀtÚs–d]ĮÐDE¶zAb àiödK¡~H¸íæAžǿYƒ“j{ď¿‘™À½W—®£ChŒÃsiŒkkly]_teu[bFa‰Tig‡n{]Gqªo‹ĈMYá|·¥f¥—őaSÕė™NµñĞ«ImŒ_m¿Âa]uĜp …Z_§{Cƒäg¤°r[_Yj‰ÆOdý“[ŽI[á·¥“Q_n‡ùgL¾mv™ˊBÜƶĊJhšp“c¹˜O]iŠ]œ¥ jtsggJǧw×jÉ©±›EFˍ­‰Ki”ÛÃÕYv…s•ˆm¬njĻª•§emná}k«ŕˆƒgđ²Ù›DǤ›í¡ªOy›†×Où±@DŸñSęćăÕIÕ¿IµĥO‰‰jNÕËT¡¿tNæŇàåyķrĕq§ÄĩsWÆߎF¶žX®¿‰mŒ™w…RIޓfßoG‘³¾©uyH‘į{Ɓħ¯AFnuP…ÍÔzšŒV—dàôº^Ðæd´€‡oG¤{S‰¬ćxã}›ŧ×Kǥĩ«žÕOEзÖdÖsƘѨ[’Û^Xr¢¼˜§xvěƵ`K”§ tÒ´Cvlo¸fzŨð¾NY´ı~ÉĔē…ßúLÃϖ_ÈÏ|]ÂÏFl”g`bšežž€n¾¢pU‚h~ƴĖ¶_‚r sĄ~cž”ƈ]|r c~`¼{À{ȒiJjz`îÀT¥Û³…]’u}›f…ïQl{skl“oNdŸjŸäËzDvčoQŠďHI¦rb“tHĔ~BmlRš—V_„ħTLnñH±’DžœL‘¼L˜ªl§Ťa¸ŒĚlK²€\\RòvDcÎJbt[¤€D@®hh~kt°ǾzÖ@¾ªdb„YhüóZ ň¶vHrľ\\ʗJuxAT|dmÀO„‹[ÃԋG·ĚąĐlŪÚpSJ¨ĸˆLvÞcPæķŨŽ®mАˆálŸwKhïgA¢ųƩޖ¤OȜm’°ŒK´"
+          ]
+        ],
+        "encodeOffsets": [[[121722, 32278]], [[119475, 30423]], [[119168, 35472]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "350000",
+      "properties": {
+        "id": "350000",
+        "cp": [118.306239, 26.075302],
+        "name": "福建",
+        "childNum": 18
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@“zht´‡]"],
+          ["@@aj^~ĆG—©O"],
+          ["@@ed¨„C}}i"],
+          ["@@@vˆPGsQ"],
+          ["@@‰sBz‚ddW]Q"],
+          ["@@SŽ¨Q“{"],
+          ["@@NŽVucW"],
+          ["@@qptBAq"],
+          ["@@‰’¸[mu"],
+          ["@@Q\\pD]_"],
+          ["@@jSwUadpF"],
+          ["@@eXª~ƒ•"],
+          ["@@AjvFso"],
+          ["@@fT–›_Çí\\Ÿ™—v|ba¦jZÆy€°"],
+          ["@@IjJi"],
+          ["@@wJI€ˆxš«¼AoNe{M­"],
+          ["@@K‰±¡Óˆ”ČäeZ"],
+          [
+            "@@k¡¹Eh~c®wBk‹UplÀ¡I•~Māe£bN¨gZý¡a±Öcp©PhžI”Ÿ¢Qq…ÇGj‹|¥U™ g[Ky¬ŏ–v@OpˆtÉEŸF„\\@ åA¬ˆV{Xģ‰ĐBy…cpě…¼³Ăp·¤ƒ¥o“hqqÚ¡ŅLsƒ^ᗞ§qlŸÀhH¨MCe»åÇGD¥zPO£čÙkJA¼ß–ėu›ĕeûҍiÁŧSW¥˜QŠûŗ½ùěcݧSùĩąSWó«íęACµ›eR—åǃRCÒÇZÍ¢‹ź±^dlsŒtjD¸•‚ZpužÔâÒH¾oLUêÃÔjjēò´ĄW‚ƛ…^Ñ¥‹ĦŸ@Çò–ŠmŒƒOw¡õyJ†yD}¢ďÑÈġfŠZd–a©º²z£šN–ƒjD°Ötj¶¬ZSÎ~¾c°¶Ðm˜x‚O¸¢Pl´žSL|¥žA†ȪĖM’ņIJg®áIJČĒü` ŽQF‡¬h|ÓJ@zµ |ê³È ¸UÖŬŬÀEttĸr‚]€˜ðŽM¤ĶIJHtÏ A’†žĬkvsq‡^aÎbvŒd–™fÊòSD€´Z^’xPsÞrv‹ƞŀ˜jJd×ŘÉ ®A–ΦĤd€xĆqAŒ†ZR”ÀMźŒnĊ»ŒİÐZ— YX–æJŠyĊ²ˆ·¶q§·–K@·{s‘Xãô«lŗ¶»o½E¡­«¢±¨Yˆ®Ø‹¶^A™vWĶGĒĢžPlzfˆļŽtàAvWYãšO_‡¤sD§ssČġ[kƤPX¦Ž`¶“ž®ˆBBvĪjv©šjx[L¥àï[F…¼ÍË»ğV`«•Ip™}ccÅĥZE‹ãoP…´B@ŠD—¸m±“z«Ƴ—¿å³BRضˆœWlâþäą`“]Z£Tc— ĹGµ¶H™m@_©—kŒ‰¾xĨ‡ôȉðX«½đCIbćqK³Á‹Äš¬OAwã»aLʼn‡ËĥW[“ÂGI—ÂNxij¤D¢ŽîĎÎB§°_JœGsƒ¥E@…¤uć…P‘å†cuMuw¢BI¿‡]zG¹guĮck\\_"
+          ]
+        ],
+        "encodeOffsets": [
+          [[123250, 27563]],
+          [[122541, 27268]],
+          [[123020, 27189]],
+          [[122916, 27125]],
+          [[122887, 26845]],
+          [[122808, 26762]],
+          [[122568, 25912]],
+          [[122778, 26197]],
+          [[122515, 26757]],
+          [[122816, 26587]],
+          [[123388, 27005]],
+          [[122450, 26243]],
+          [[122578, 25962]],
+          [[121255, 25103]],
+          [[120987, 24903]],
+          [[122339, 25802]],
+          [[121042, 25093]],
+          [[122439, 26024]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "360000",
+      "properties": {
+        "id": "360000",
+        "cp": [115.592151, 27.676493],
+        "name": "江西",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@ĢĨƐgļˆ¼ÂMD~ņªe^\\^§„ý©j׍cZ†Ø¨zdÒa¶ˆlҍJŒìõ`oz÷@¤u޸´†ôęöY¼‰HČƶajlÞƩ¥éZ[”|h}^U Œ ¥p„ĄžƦO lt¸Æ €Q\\€ŠaÆ|CnÂOjt­ĚĤd’ÈŒF`’¶„@Ð딠¦ōҞ¨Sêv†HĢûXD®…QgėWiØPÞìºr¤dž€NĠ¢l–•ĄtZoœCƞÔºCxrpĠV®Ê{f_Y`_ƒeq’’®Aot`@o‚DXfkp¨|Šs¬\\D‘ÄSfè©Hn¬…^DhÆyøJh“ØxĢĀLʈ„ƠPżċĄwȠ̦G®ǒĤäTŠÆ~ĦwŠ«|TF¡Šn€c³Ïå¹]ĉđxe{ÎӐ†vOEm°BƂĨİ|G’vz½ª´€H’àp”eJ݆Qšxn‹ÀŠW­žEµàXÅĪt¨ÃĖrÄwÀFÎ|ňÓMå¼ibµ¯»åDT±m[“r«_gŽmQu~¥V\\OkxtL E¢‹ƒ‘Ú^~ýê‹Pó–qo슱_Êw§ÑªåƗā¼‹mĉŹ‹¿NQ“…YB‹ąrwģcÍ¥B•Ÿ­ŗÊcØiI—žƝĿuŒqtāwO]‘³YCñTeɕš‹caub͈]trlu€ī…B‘ПGsĵıN£ï—^ķqss¿FūūV՟·´Ç{éĈý‰ÿ›OEˆR_ŸđûIċâJh­ŅıN‘ȩĕB…¦K{Tk³¡OP·wn—µÏd¯}½TÍ«YiµÕsC¯„iM•¤™­•¦¯P|ÿUHv“he¥oFTu‰õ\\ŽOSs‹MòđƇiaºćXŸĊĵà·çhƃ÷ǜ{‘ígu^›đg’m[×zkKN‘¶Õ»lčÓ{XSƉv©_ÈëJbVk„ĔVÀ¤P¾ºÈMÖxlò~ªÚàGĂ¢B„±’ÌŒK˜y’áV‡¼Ã~­…`g›ŸsÙfI›Ƌlę¹e|–~udjˆuTlXµf`¿JdŠ[\\˜„L‚‘²"
+        ],
+        "encodeOffsets": [[116689, 26234]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "370000",
+      "properties": {
+        "id": "370000",
+        "cp": [118.000923, 36.275807],
+        "name": "山东",
+        "childNum": 13
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@Xjd]{K"],
+          ["@@itbFHy"],
+          ["@@HlGk"],
+          ["@@T‚ŒGŸy"],
+          ["@@K¬˜•‹U"],
+          ["@@WdXc"],
+          ["@@PtOs"],
+          ["@@•LnXhc"],
+          ["@@ppVƒu]Or"],
+          ["@@cdzAUa"],
+          ["@@udRhnCI‡"],
+          ["@@ˆoIƒpR„"],
+          [
+            "@@Ľč{fzƤî’Kš–ÎMĮ]†—ZFˆ½Y]â£ph’™š¶¨râøÀ†ÎǨ¤^ºÄ”Gzˆ~grĚĜlĞƄLĆdž¢Îo¦–cv“Kb€gr°Wh”mZp ˆL]LºcU‰Æ­n”żĤÌĒœbAnrOAœ´žȊcÀbƦUØrĆUÜøœĬƞ†š˜Ez„VL®öØBkŖÝĐĖ¹ŧ̄±ÀbÎɜnb²ĦhņBĖ›žįĦåXćì@L¯´ywƕCéõė ƿ¸‘lµ¾Z|†ZWyFYŸ¨Mf~C¿`€à_RÇzwƌfQnny´INoƬˆèôº|sT„JUš›‚L„îVj„ǎ¾Ē؍‚Dz²XPn±ŴPè¸ŔLƔÜƺ_T‘üÃĤBBċȉöA´fa„˜M¨{«M`‡¶d¡ô‰Ö°šmȰBÔjjŒ´PM|”c^d¤u•ƒ¤Û´Œä«ƢfPk¶Môlˆ]Lb„}su^ke{lC‘…M•rDŠÇ­]NÑFsmoõľH‰yGă{{çrnÓE‰‹ƕZGª¹Fj¢ïW…uøCǷ돡ąuhÛ¡^Kx•C`C\\bÅxì²ĝÝ¿_N‰īCȽĿåB¥¢·IŖÕy\\‡¹kx‡Ã£Č×GDyÕ¤ÁçFQ¡„KtŵƋ]CgÏAùSed‡cÚź—ŠuYfƒyMmhUWpSyGwMPqŀ—›Á¼zK›¶†G•­Y§Ëƒ@–´śÇµƕBmœ@Io‚g——Z¯u‹TMx}C‘‰VK‚ï{éƵP—™_K«™pÛÙqċtkkù]gŽ‹Tğwo•ɁsMõ³ă‡AN£™MRkmEʕč™ÛbMjÝGu…IZ™—GPģ‡ãħE[iµBEuŸDPԛ~ª¼ętŠœ]ŒûG§€¡QMsğNPŏįzs£Ug{đJĿļā³]ç«Qr~¥CƎÑ^n¶ÆéÎR~Ż¸Y’I“] P‰umŝrƿ›‰›Iā‹[x‰edz‹L‘¯v¯s¬ÁY…~}…ťuŁŒg›ƋpÝĄ_ņī¶ÏSR´ÁP~ž¿Cyžċßdwk´Ss•X|t‰`Ä Èð€AªìÎT°¦Dd–€a^lĎDĶÚY°Ž`ĪŴǒˆ”àŠv\\ebŒZH„ŖR¬ŢƱùęO•ÑM­³FۃWp[ƒ"
+          ]
+        ],
+        "encodeOffsets": [
+          [[123806, 39303]],
+          [[123821, 39266]],
+          [[123742, 39256]],
+          [[123702, 39203]],
+          [[123649, 39066]],
+          [[123847, 38933]],
+          [[123580, 38839]],
+          [[123894, 37288]],
+          [[123043, 36624]],
+          [[123344, 38676]],
+          [[123522, 38857]],
+          [[123628, 38858]],
+          [[118260, 36742]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "410000",
+      "properties": {
+        "id": "410000",
+        "cp": [113.665412, 33.757975],
+        "name": "河南",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@•ýL™ùµP³swIÓxcŢĞð†´E®žÚPt†ĴXØx¶˜@«ŕŕQGƒ‹Yfa[şu“ßǩ™đš_X³ijÕčC]kbc•¥CS¯ëÍB©÷‹–³­Siˆ_}m˜YTtž³xlàcȂzÀD}ÂOQ³ÐTĨ¯†ƗòËŖ[hœł‹Ŧv~††}ÂZž«¤lPǕ£ªÝŴÅR§ØnhcŒtâk‡nύ­ľŹUÓÝdKuķ‡I§oTũÙďkęĆH¸ÓŒ\\ăŒ¿PcnS{wBIvɘĽ[GqµuŸŇôYgûƒZcaŽ©@½Õǽys¯}lgg@­C\\£as€IdÍuCQñ[L±ęk·‹ţb¨©kK—’»›KC²‘òGKmĨS`ƒ˜UQ™nk}AGē”sqaJ¥ĐGR‰ĎpCuÌy ã iMc”plk|tRk†ðœev~^‘´†¦ÜŽSí¿_iyjI|ȑ|¿_»d}qŸ^{“Ƈdă}Ÿtqµ`Ƴĕg}V¡om½fa™Ço³TTj¥„tĠ—Ry”K{ùÓjuµ{t}uËR‘iŸvGŠçJFjµŠÍyqΘàQÂFewixGw½Yŷpµú³XU›½ġy™łå‰kÚwZXˆ·l„¢Á¢K”zO„Λ΀jc¼htoDHr…|­J“½}JZ_¯iPq{tę½ĕ¦Zpĵø«kQ…Ťƒ]MÛfaQpě±ǽ¾]u­Fu‹÷nƒ™čįADp}AjmcEǒaª³o³ÆÍSƇĈÙDIzˑ赟^ˆKLœ—i—Þñ€[œƒaA²zz‰Ì÷Dœ|[šíijgf‚ÕÞd®|`ƒĆ~„oĠƑô³Ŋ‘D×°¯CsŠøÀ«ì‰UMhTº¨¸ǡîS–Ô„DruÂÇZ•ÖEŽ’vPZ„žW”~؋ÐtĄE¢¦Ðy¸bŠô´oŬ¬Ž²Ês~€€]®tªašpŎJ¨Öº„_ŠŔ–`’Ŗ^Ѝ\\Ĝu–”~m²Ƹ›¸fW‰ĦrƔ}Î^gjdfÔ¡J}\\n C˜¦þWxªJRÔŠu¬ĨĨmF†dM{\\d\\ŠYÊ¢ú@@¦ª²SŠÜsC–}fNècbpRmlØ^g„d¢aÒ¢CZˆZxvÆ¶N¿’¢T@€uCœ¬^ĊðÄn|žlGl’™Rjsp¢ED}€Fio~ÔNŽ‹„~zkĘHVsDzßjƒŬŒŠŢ`Pûàl¢˜\\ÀœEhŽİgÞē X¼Pk–„|m"
+        ],
+        "encodeOffsets": [[118256, 37017]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "420000",
+      "properties": {
+        "id": "420000",
+        "cp": [113.298572, 30.684355],
+        "name": "湖北",
+        "childNum": 3
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@AB‚"],
+          ["@@lskt"],
+          [
+            "@@¾«}{ra®pîÃ\\™›{øCŠËyyB±„b\\›ò˜Ý˜jK›‡L ]ĎĽÌ’JyÚCƈćÎT´Å´pb©È‘dFin~BCo°BĎĚømvŒ®E^vǾ½Ĝ²Ro‚bÜeNŽ„^ĺ£R†¬lĶ÷YoĖ¥Ě¾|sOr°jY`~I”¾®I†{GqpCgyl{‡£œÍƒÍyPL“¡ƒ¡¸kW‡xYlÙ抚ŁĢzœ¾žV´W¶ùŸo¾ZHxjwfx„GNÁ•³Xéæl¶‰EièIH‰ u’jÌQ~v|sv¶Ôi|ú¢Fh˜Qsğ¦ƒSiŠBg™ÐE^ÁÐ{–čnOÂȞUÎóĔ†ÊēIJ}Z³½Mŧïeyp·uk³DsѨŸL“¶_œÅuèw»—€¡WqÜ]\\‘Ò§tƗcÕ¸ÕFÏǝĉăxŻČƟO‡ƒKÉġÿ×wg”÷IÅzCg†]m«ªGeçÃTC’«[‰t§{loWeC@ps_Bp‘­r‘„f_``Z|ei¡—oċMqow€¹DƝӛDYpûs•–‹Ykıǃ}s¥ç³[§ŸcYŠ§HK„«Qy‰]¢“wwö€¸ïx¼ņ¾Xv®ÇÀµRĠЋžHMž±cÏd„ƒǍũȅȷ±DSyúĝ£ŤĀàtÖÿï[îb\\}pĭÉI±Ñy…¿³x¯N‰o‰|¹H™ÏÛm‹júË~Tš•u˜ęjCöAwě¬R’đl¯ Ñb­‰ŇT†Ŀ_[Œ‘IčĄʿnM¦ğ\\É[T·™k¹œ©oĕ@A¾w•ya¥Y\\¥Âaz¯ãÁ¡k¥ne£Ûw†E©Êō¶˓uoj_Uƒ¡cF¹­[Wv“P©w—huÕyBF“ƒ`R‹qJUw\\i¡{jŸŸEPïÿ½fć…QÑÀQ{ž‚°‡fLԁ~wXg—ītêݾ–ĺ‘Hdˆ³fJd]‹HJ²…E€ƒoU¥†HhwQsƐ»Xmg±çve›]Dm͂PˆoCc¾‹_h”–høYrŊU¶eD°Č_N~øĹĚ·`z’]Äþp¼…äÌQŒv\\rCŒé¾TnkžŐڀÜa‡“¼ÝƆĢ¶Ûo…d…ĔňТJq’Pb ¾|JŒ¾fXŠƐîĨ_Z¯À}úƲ‹N_ĒĊ^„‘ĈaŐyp»CÇĕKŠšñL³ŠġMŒ²wrIÒŭxjb[œžn«øœ˜—æˆàƒ ^²­h¯Ú€ŐªÞ¸€Y²ĒVø}Ā^İ™´‚LŠÚm„¥ÀJÞ{JVŒųÞŃx×sxxƈē ģMř–ÚðòIf–Ċ“Œ\\Ʈ±ŒdʧĘD†vČ_Àæ~DŒċ´A®µ†¨ØLV¦êHÒ¤"
+          ]
+        ],
+        "encodeOffsets": [[[113712, 34000]], [[115612, 30507]], [[113649, 34054]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "430000",
+      "properties": { "id": "430000", "cp": [111.782279, 28.09409], "name": "湖南", "childNum": 3 },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@—n„FTs"],
+          ["@@ßÅÆችÔXr—†CO™“…ËR‘ïÿĩ­TooQyšÓ[‹ŅBE¬–ÎÓXa„į§Ã¸G °ITxp‰úxÚij¥Ïš–Ģ¾ŠedžÄ©ĸG…œàGh‚€M¤–Â_U}Ċ}¢pczfŠþg¤€”ÇòAV‘‹M"],
+          [
+            "@@©K—ƒA·³CQ±Á«³BUŠƑ¹AŠtćOw™D]ŒJiØSm¯b£‘ylƒ›X…HËѱH•«–‘C^õľA–Å§¤É¥„ïyuǙuA¢^{ÌC´­¦ŷJ£^[†“ª¿‡ĕ~•Ƈ…•N… skóā‡¹¿€ï]ă~÷O§­@—Vm¡‹Qđ¦¢Ĥ{ºjԏŽŒª¥nf´•~ÕoŸž×Ûą‹MąıuZœmZcÒ IJĪ²SÊDŽŶ¨ƚƒ’CÖŎªQؼrŭŽ­«}NÏürʬŒmjr€@ĘrTW ­SsdHzƓ^ÇÂyUi¯DÅYlŹu{hTœ}mĉ–¹¥ě‰Dÿë©ıÓ[Oº£ž“¥ót€ł¹MՄžƪƒ`Pš…Di–ÛUŠ¾Å‌ìˆU’ñB“È£ýhe‰dy¡oċ€`pfmjP~‚kZa…ZsÐd°wj§ƒ@€Ĵ®w~^‚kÀÅKvNmX\\¨a“”сqvíó¿F„¤¡@ũÑVw}S@j}¾«pĂr–ªg àÀ²NJ¶¶Dô…K‚|^ª†Ž°LX¾ŴäPĪ±œ£EXd›”^¶›IJÞܓ~‘u¸ǔ˜Ž›MRhsR…e†`ÄofIÔ\\Ø  i”ćymnú¨cj ¢»–GČìƊÿШXeĈĀ¾Oð Fi ¢|[jVxrIQŒ„_E”zAN¦zLU`œcªx”OTu RLÄ¢dV„i`p˔vŎµªÉžF~ƒØ€d¢ºgİàw¸Áb[¦Zb¦–z½xBĖ@ªpº›šlS¸Ö\\Ĕ[N¥ˀmĎă’J\\‹ŀ`€…ňSڊĖÁĐiO“Ĝ«BxDõĚiv—ž–S™Ì}iùŒžÜnšÐºGŠ{Šp°M´w†ÀÒzJ²ò¨ oTçüöoÛÿñŽőФ‚ùTz²CȆȸǎŪƒƑÐc°dPÎŸğ˶[Ƚu¯½WM¡­Éž“’B·rížnZŸÒ `‡¨GA¾\\pē˜XhÆRC­üWGġu…T靧Ŏѝ©ò³I±³}_‘‹EÃħg®ęisÁPDmÅ{‰b[Rşs·€kPŸŽƥƒóRo”O‹ŸVŸ~]{g\\“êYƪ¦kÝbiċƵŠGZ»Ěõ…ó·³vŝž£ø@pyö_‹ëŽIkѵ‡bcѧy…×dY؎ªiþž¨ƒ[]f]Ņ©C}ÁN‡»hĻħƏ’ĩ"
+          ]
+        ],
+        "encodeOffsets": [[[115640, 30489]], [[112543, 27312]], [[116690, 26230]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "440000",
+      "properties": {
+        "id": "440000",
+        "cp": [113.280637, 23.125178],
+        "name": "广东",
+        "childNum": 24
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@QdˆAua"],
+          ["@@ƒlxDLo"],
+          ["@@sbhNLo"],
+          ["@@Ă āŸ"],
+          ["@@WltO[["],
+          ["@@Krœ]S"],
+          ["@@e„„I]y"],
+          ["@@I|„Mym"],
+          ["@@ƒÛ³LSŒž¼Y"],
+          ["@@nvºB–ëui©`¾"],
+          ["@@zdšÛ›Jw®"],
+          ["@@†°…¯"],
+          ["@@a yAª¸ËJIx،@€ĀHAmßV¡o•fu•o"],
+          ["@@šs‰ŗÃÔėAƁ›ZšÄ ~°ČP‚‹äh"],
+          ["@@‹¶Ý’Ì‚vmĞh­ı‡Q"],
+          ["@@HœŠdSjĒ¢D}war…“u«ZqadYM"],
+          ["@@elŒ\\LqqU"],
+          ["@@~rMo\\"],
+          ["@@f„^ƒC"],
+          ["@@øPªoj÷ÍÝħXČx”°Q¨ıXNv"],
+          ["@@gÇƳˆŽˆ”oˆŠˆ[~tly"],
+          ["@@E–ÆC¿‘"],
+          ["@@OŽP"],
+          [
+            "@@w‹†đóg‰™ĝ—[³‹¡VÙæÅöM̳¹pÁaËýý©D©Ü“JŹƕģGą¤{Ùū…ǘO²«BƱéA—Ò‰ĥ‡¡«BhlmtÃPµyU¯uc“d·w_bŝcīímGOŽ|KP’ȏ‡ŹãŝIŕŭŕ@Óoo¿ē‹±ß}Ž…ŭ‚ŸIJWÈCőâUâǙI›ğʼn©I›ijEׅÁ”³Aó›wXJþ±ÌŒÜӔĨ£L]ĈÙƺZǾĆĖMĸĤfŒÎĵl•ŨnȈ‘ĐtF”Š–FĤ–‚êk¶œ^k°f¶gŠŽœ}®Fa˜f`vXŲxl˜„¦–ÔÁ²¬ÐŸ¦pqÊ̲ˆi€XŸØRDÎ}†Ä@ZĠ’s„x®AR~®ETtĄZ†–ƈfŠŠHâÒÐA†µ\\S¸„^wĖkRzŠalŽŜ|E¨ÈNĀňZTŒ’pBh£\\ŒĎƀuXĖtKL–¶G|Ž»ĺEļĞ~ÜĢÛĊrˆO˜Ùîvd]nˆ¬VœÊĜ°R֟pM††–‚ƂªFbwžEÀˆ˜©Œž\\…¤]ŸI®¥D³|ˎ]CöAŤ¦…æ’´¥¸Lv¼€•¢ĽBaô–F~—š®²GÌҐEY„„œzk¤’°ahlV՞I^‹šCxĈPŽsB‰ƒºV‰¸@¾ªR²ĨN]´_eavSi‡vc•}p}Đ¼ƌkJœÚe thœ†_¸ ºx±ò_xN›Ë‹²‘@ƒă¡ßH©Ùñ}wkNÕ¹ÇO½¿£ĕ]ly_WìIžÇª`ŠuTÅxYĒÖ¼k֞’µ‚MžjJÚwn\\h‘œĒv]îh|’È›Ƅøègž¸Ķß ĉĈWb¹ƀdéʌNTtP[ŠöSvrCZžžaGuœbo´ŖÒÇА~¡zCI…özx¢„Pn‹•‰Èñ @ŒĥÒ¦†]ƞŠV}³ăĔñiiÄÓVépKG½Ä‘ÓávYo–C·sit‹iaÀy„ŧΡÈYDÑům}‰ý|m[węõĉZÅxUO}÷N¹³ĉo_qtă“qwµŁYلǝŕ¹tïÛUïmRCº…ˆĭ|µ›ÕÊK™½R‘ē ó]‘–GªęAx–»HO£|ām‡¡diď×YïYWªʼnOeÚtĐ«zđ¹T…ā‡úE™á²\\‹ķÍ}jYàÙÆſ¿Çdğ·ùTßÇţʄ¡XgWÀLJğ·¿ÃˆOj YÇ÷Qě‹i"
+          ]
+        ],
+        "encodeOffsets": [
+          [[117381, 22988]],
+          [[116552, 22934]],
+          [[116790, 22617]],
+          [[116973, 22545]],
+          [[116444, 22536]],
+          [[116931, 22515]],
+          [[116496, 22490]],
+          [[116453, 22449]],
+          [[113301, 21439]],
+          [[118726, 21604]],
+          [[118709, 21486]],
+          [[113210, 20816]],
+          [[115482, 22082]],
+          [[113171, 21585]],
+          [[113199, 21590]],
+          [[115232, 22102]],
+          [[115739, 22373]],
+          [[115134, 22184]],
+          [[113056, 21175]],
+          [[119573, 21271]],
+          [[119957, 24020]],
+          [[115859, 22356]],
+          [[116561, 22649]],
+          [[116285, 22746]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "450000",
+      "properties": { "id": "450000", "cp": [108.320004, 22.82402], "name": "广西", "childNum": 2 },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@H– TQ§•A"],
+          [
+            "@@ĨʪƒLƒƊDÎĹĐCǦė¸zÚGn£¾›rªŀÜt¬@֛ڈSx~øOŒ˜ŶÐÂæȠ\\„ÈÜObĖw^oބLf¬°bI lTØB̈F£Ć¹gñĤaY“t¿¤VSñœK¸¤nM†¼‚JE±„½¸šŠño‹ÜCƆæĪ^ŠĚQÖ¦^‡ˆˆf´Q†üÜʝz¯šlzUĺš@쇀p¶n]sxtx¶@„~ÒĂJb©gk‚{°‚~c°`ԙ¬rV\\“la¼¤ôá`¯¹LC†ÆbŒxEræO‚v[H­˜„[~|aB£ÖsºdAĐzNÂðsŽÞƔ…Ĥªbƒ–ab`ho¡³F«èVloŽ¤™ÔRzpp®SŽĪº¨ÖƒºN…ij„d`’a”¦¤F³ºDÎńĀìŠCžĜº¦Ċ•~nS›|gźvZkCÆj°zVÈÁƔ]LÊFZg…čP­kini«‹qǀcz͔Y®¬Ů»qR×ō©DՄ‘§ƙǃŵTÉĩ±ŸıdÑnYY›IJvNĆƌØÜ Öp–}e³¦m‹©iÓ|¹Ÿħņ›|ª¦QF¢Â¬ʖovg¿em‡^ucà÷gՎuŒíÙćĝ}FĻ¼Ĺ{µHK•sLSđƃr‹č¤[Ag‘oS‹ŇYMÿ§Ç{Fśbky‰lQxĕƒ]T·¶[B…ÑÏGáşşƇe€…•ăYSs­FQ}­Bƒw‘tYğÃ@~…C̀Q ×W‡j˱rÉ¥oÏ ±«ÓÂ¥•ƒ€k—ŽwWűŒmcih³K›~‰µh¯e]lµ›él•Eģ‰•E“ďs‡’mǖŧē`ãògK_ÛsUʝ“ćğ¶hŒöŒO¤Ǜn³Žc‘`¡y‹¦C‘ez€YŠwa™–‘[ďĵűMę§]X˜Î_‚훘Û]é’ÛUćİÕBƣ±…dƒy¹T^džûÅÑŦ·‡PĻþÙ`K€¦˜…¢ÍeœĥR¿Œ³£[~Œäu¼dl‰t‚†W¸oRM¢ď\\zœ}Æzdvň–{ÎXF¶°Â_„ÒÂÏL©Ö•TmuŸ¼ãl‰›īkiqéfA„·Êµ\\őDc¥ÝF“y›Ôć˜c€űH_hL܋êĺШc}rn`½„Ì@¸¶ªVLŒŠhŒ‹\\•Ţĺk~ŽĠið°|gŒtTĭĸ^x‘vK˜VGréAé‘bUu›MJ‰VÃO¡…qĂXËS‰ģãlýàŸ_ju‡YÛÒB†œG^˜é֊¶§ŽƒEG”ÅzěƒƯ¤Ek‡N[kdåucé¬dnYpAyČ{`]þ¯T’bÜÈk‚¡Ġ•vŒàh„ÂƄ¢J"
+          ]
+        ],
+        "encodeOffsets": [[[111707, 21520]], [[107619, 25527]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "460000",
+      "properties": { "id": "460000", "cp": [109.83119, 19.031971], "name": "海南", "childNum": 1 },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@š¦Ŝil¢”XƦ‘ƞò–ïè§ŞCêɕrŧůÇąĻõ™·ĉ³œ̅kÇm@ċȧƒŧĥ‰Ľʉ­ƅſ“ȓÒ˦ŝE}ºƑ[ÍĜȋ gÎfǐÏĤ¨êƺ\\Ɔ¸ĠĎvʄȀœÐ¾jNðĀÒRŒšZdž™zÐŘΰH¨Ƣb²_Ġ "
+        ],
+        "encodeOffsets": [[112750, 20508]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "510000",
+      "properties": {
+        "id": "510000",
+        "cp": [104.065735, 30.659462],
+        "name": "四川",
+        "childNum": 2
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@LqKr"],
+          [
+            "@@Š[ĻéV£ž_ţġñpG •réÏ·~ąSfy×͂·ºſƽiÍıƣıĻmHH}siaX@iÇ°ÁÃ×t«ƒ­Tƒ¤J–JJŒyJ•ÈŠ`Ohߦ¡uËhIyCjmÿw…ZG……Ti‹SˆsO‰žB²ŸfNmsPaˆ{M{ŠõE‘^Hj}gYpaeuž¯‘oáwHjÁ½M¡pM“–uå‡mni{fk”\\oƒÎqCw†EZ¼K›ĝŠƒAy{m÷L‡wO×SimRI¯rK™õBS«sFe‡]fµ¢óY_ÆPRcue°Cbo׌bd£ŌIHgtrnyPt¦foaXďx›lBowz‹_{ÊéWiêE„GhܸºuFĈIxf®Ž•Y½ĀǙ]¤EyŸF²ċ’w¸¿@g¢§RGv»–áŸW`ÃĵJwi]t¥wO­½a[׈]`Ãi­üL€¦LabbTÀå’c}Íh™Æhˆ‹®BH€î|Ék­¤S†y£„ia©taį·Ɖ`ō¥Uh“O…ƒĝLk}©Fos‰´›Jm„µlŁu—…ø–nÑJWΪ–YÀïAetTžŅ‚ӍG™Ë«bo‰{ıwodƟ½ƒžOġܑµxàNÖ¾P²§HKv¾–]|•B‡ÆåoZ`¡Ø`ÀmºĠ~ÌЧnDž¿¤]wğ@sƒ‰rğu‰~‘Io”[é±¹ ¿žſđӉ@q‹gˆ¹zƱřaí°KtǤV»Ã[ĩǭƑ^ÇÓ@ỗs›Zϕ‹œÅĭ€Ƌ•ěpwDóÖሯneQˌq·•GCœýS]xŸ·ý‹q³•O՜Œ¶Qzßti{ř‰áÍÇWŝŭñzÇW‹pç¿JŒ™‚Xœĩè½cŒF–ÂLiVjx}\\N†ŇĖ¥Ge–“JA¼ÄHfÈu~¸Æ«dE³ÉMA|b˜Ò…˜ćhG¬CM‚õŠ„ƤąAvƒüV€éŀ‰_V̳ĐwQj´·ZeÈÁ¨X´Æ¡Qu·»Ÿ“˜ÕZ³ġqDo‰y`L¬gdp°şŠp¦ėìÅĮZŽ°Iä”h‚‘ˆzŠĵœf²å ›ĚрKp‹IN|‹„Ñz]ń……·FU×é»R³™MƒÉ»GM«€ki€™ér™}Ã`¹ăÞmȝnÁîRǀ³ĜoİzŔwǶVÚ£À]ɜ»ĆlƂ²Ġ…þTº·àUȞÏʦ¶†I’«dĽĢdĬ¿–»Ĕ׊h\\c¬†ä²GêëĤł¥ÀǿżÃÆMº}BÕĢyFVvw–ˆxBèĻĒ©Ĉ“tCĢɽŠȣ¦āæ·HĽî“ôNԓ~^¤Ɗœu„œ^s¼{TA¼ø°¢İªDè¾Ň¶ÝJ‘®Z´ğ~Sn|ªWÚ©òzPOȸ‚bð¢|‹øĞŠŒœŒQìÛÐ@Ğ™ǎRS¤Á§d…i“´ezÝúØã]Hq„kIŸþËQǦÃsǤ[E¬ÉŪÍxXƒ·ÖƁİlƞ¹ª¹|XÊwn‘ÆƄmÀêErĒtD®ċæcQƒ”E®³^ĭ¥©l}äQto˜ŖÜqƎkµ–„ªÔĻĴ¡@Ċ°B²Èw^^RsºTĀ£ŚæœQP‘JvÄz„^Đ¹Æ¯fLà´GC²‘dt˜­ĀRt¼¤ĦOðğfÔðDŨŁĞƘïžPȆ®âbMüÀXZ ¸£@Ś›»»QÉ­™]d“sÖ×_͖_ÌêŮPrĔĐÕGĂeZÜîĘqBhtO ¤tE[h|Y‹Ô‚ZśÎs´xº±UŒ’ñˆt|O’ĩĠºNbgþŠJy^dÂY Į„]Řz¦gC‚³€R`ĀŠz’¢AjŒ¸CL„¤RÆ»@­Ŏk\\Ç´£YW}z@Z}‰Ã¶“oû¶]´^N‡Ò}èN‚ª–P˜Íy¹`S°´†ATe€VamdUĐwʄvĮÕ\\ƒu‹Æŗ¨Yp¹àZÂm™Wh{á„}WØǍ•Éüw™ga§áCNęÎ[ĀÕĪgÖɪX˜øx¬½Ů¦¦[€—„NΆL€ÜUÖ´òrÙŠxR^–†J˜k„ijnDX{Uƒ~ET{ļº¦PZc”jF²Ė@Žp˜g€ˆ¨“B{ƒu¨ŦyhoÚD®¯¢˜ WòàFΤ¨GDäz¦kŮPœġq˚¥À]€Ÿ˜eŽâÚ´ªKxī„Pˆ—Ö|æ[xäJÞĥ‚s’NÖ½ž€I†¬nĨY´®Ð—ƐŠ€mD™ŝuäđđEb…e’e_™v¡}ìęNJē}q”É埁T¯µRs¡M@}ůa†a­¯wvƉåZwž\\Z{åû^›"
+          ]
+        ],
+        "encodeOffsets": [[[108815, 30935]], [[110617, 31811]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "520000",
+      "properties": {
+        "id": "520000",
+        "cp": [106.713478, 26.578343],
+        "name": "贵州",
+        "childNum": 3
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@†G\\†lY£‘in"],
+          ["@@q‚|ˆ‚mc¯tχVSÎ"],
+          [
+            "@@hÑ£Is‡NgßH†›HªķÃh_¹ƒ¡ĝħń¦uيùŽgS¯JHŸ|sÝÅtÁïyMDč»eÕtA¤{b\\}—ƒG®u\\åPFq‹wÅaD…žK°ºâ_£ùbµ”mÁ‹ÛœĹM[q|hlaªāI}тƒµ@swtwm^oµˆD鼊yV™ky°ÉžûÛR…³‚‡eˆ‡¥]RՋěħ[ƅåÛDpŒ”J„iV™™‰ÂF²I…»mN·£›LbÒYb—WsÀbŽ™pki™TZĄă¶HŒq`……ĥ_JŸ¯ae«ƒKpÝx]aĕÛPƒÇȟ[ÁåŵÏő—÷Pw}‡TœÙ@Õs«ĿÛq©½œm¤ÙH·yǥĘĉBµĨÕnđ]K„©„œá‹ŸG纍§Õßg‡ǗĦTèƤƺ{¶ÉHÎd¾ŚÊ·OÐjXWrãLyzÉAL¾ę¢bĶėy_qMĔąro¼hĊžw¶øV¤w”²Ĉ]ʚKx|`ź¦ÂÈdr„cȁbe¸›`I¼čTF´¼Óýȃr¹ÍJ©k_șl³´_pН`oÒhŽ¶pa‚^ÓĔ}D»^Xyœ`d˜[Kv…JPhèhCrĂĚÂ^Êƌ wˆZL­Ġ£šÁbrzOIl’MM”ĪŐžËr×ÎeŦŽtw|Œ¢mKjSǘňĂStÎŦEtqFT†¾†E쬬ôxÌO¢Ÿ KŠ³ŀºäY†„”PVgŎ¦Ŋm޼VZwVlŒ„z¤…ž£Tl®ctĽÚó{G­A‡ŒÇgeš~Αd¿æaSba¥KKûj®_ć^\\ؾbP®¦x^sxjĶI_Ä X‚⼕Hu¨Qh¡À@Ëô}Ž±žGNìĎlT¸ˆ…`V~R°tbÕĊ`¸úÛtπFDu€[ƒMfqGH·¥yA‰ztMFe|R‚_Gk†ChZeÚ°to˜v`x‹b„ŒDnÐ{E}šZ˜è€x—†NEފREn˜[Pv@{~rĆAB§‚EO¿|UZ~ì„Uf¨J²ĂÝƀ‚sª–B`„s¶œfvö¦ŠÕ~dÔq¨¸º»uù[[§´sb¤¢zþFœ¢Æ…Àhˆ™ÂˆW\\ıŽËI݊o±ĭŠ£þˆÊs}¡R]ŒěƒD‚g´VG¢‚j±®è†ºÃmpU[Á›‘Œëº°r›ÜbNu¸}Žº¼‡`ni”ºÔXĄ¤¼Ôdaµ€Á_À…†ftQQgœR—‘·Ǔ’v”}Ýלĵ]µœ“Wc¤F²›OĩųãW½¯K‚©…]€{†LóµCIµ±Mß¿hŸ•©āq¬o‚½ž~@i~TUxŪÒ¢@ƒ£ÀEîôruń‚”“‚b[§nWuMÆLl¿]x}ij­€½"
+          ]
+        ],
+        "encodeOffsets": [[[112158, 27383]], [[112105, 27474]], [[112095, 27476]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "530000",
+      "properties": {
+        "id": "530000",
+        "cp": [101.512251, 24.740609],
+        "name": "云南",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@[„ùx½}ÑRH‘YīĺûsÍn‘iEoã½Ya²ė{c¬ĝg•ĂsA•ØÅwď‚õzFjw}—«Dx¿}UũlŸê™@•HÅ­F‰¨ÇoJ´Ónũuą¡Ã¢pÒŌ“Ø TF²‚xa²ËX€‚cʋlHîAßËŁkŻƑŷÉ©h™W­æßU‡“Ës¡¦}•teèƶStǀÇ}Fd£j‹ĈZĆÆ‹¤T‚č\\Dƒ}O÷š£Uˆ§~ŃG™‚åŃDĝ¸œTsd¶¶Bªš¤u¢ŌĎo~t¾ÍŶÒtD¦Ú„iôö‰€z›ØX²ghįh½Û±¯€ÿm·zR¦Ɵ`ªŊÃh¢rOԍ´£Ym¼èêf¯ŪĽn„†cÚbŒw\\zlvWžªâˆ ¦g–mĿBş£¢ƹřbĥkǫßeeZkÙIKueT»sVesb‘aĕ  ¶®dNœĄÄpªyŽ¼—„³BE˜®l‡ŽGœŭCœǶwêżĔÂe„pÍÀQƞpC„–¼ŲÈ­AÎô¶R„ä’Q^Øu¬°š_Èôc´¹ò¨P΢hlϦ´Ħ“Æ´sâDŽŲPnÊD^¯°’Upv†}®BP̪–jǬx–Söwlfòªv€qĸ|`H€­viļ€ndĜ­Ćhň•‚em·FyށqóžSį¯‘³X_ĞçêtryvL¤§z„¦c¦¥jnŞk˜ˆlD¤øz½ĜàžĂŧMÅ|áƆàÊcðÂF܎‚áŢ¥\\\\º™İøÒÐJĴ‡„îD¦zK²ǏÎEh~’CD­hMn^ÌöÄ©ČZÀžaü„fɭyœpį´ěFűk]Ôě¢qlÅĆÙa¶~Äqššê€ljN¬¼H„ÊšNQ´ê¼VظE††^ŃÒyŒƒM{ŒJLoÒœęæŸe±Ķ›y‰’‡gã“¯JYÆĭĘëo¥Š‰o¯hcK«z_pŠrC´ĢÖY”—¼ v¸¢RŽÅW³Â§fǸYi³xR´ďUˊ`êĿU„û€uĆBƒƣö‰N€DH«Ĉg†——Ñ‚aB{ÊNF´¬c·Åv}eÇÃGB»”If•¦HňĕM…~[iwjUÁKE•Ž‹¾dĪçW›šI‹èÀŒoÈXòyŞŮÈXâÎŚŠj|àsRy‹µÖ›–Pr´þŒ ¸^wþTDŔ–Hr¸‹žRÌmf‡żÕâCôox–ĜƌÆĮŒ›Ð–œY˜tâŦÔ@]ÈǮƒ\\Ī¼Ä£UsȯLbîƲŚºyh‡rŒŠ@ĒԝƀŸÀ²º\\êp“’JŠ}ĠvŠqt„Ġ@^xÀ£È†¨mËÏğ}n¹_¿¢×Y_æpˆÅ–A^{½•Lu¨GO±Õ½ßM¶w’ÁĢۂP‚›Ƣ¼pcIJxŠ|ap̬HšÐŒŊSfsðBZ¿©“XÏÒK•k†÷Eû¿‰S…rEFsÕūk”óVǥʼniTL‚¡n{‹uxţÏh™ôŝ¬ğōN“‘NJkyPaq™Âğ¤K®‡YŸxÉƋÁ]āęDqçgOg†ILu—\\_gz—]W¼ž~CÔē]bµogpў_oď`´³Țkl`IªºÎȄqÔþž»E³ĎSJ»œ_f·‚adÇqƒÇc¥Á_Źw{™L^ɱćx“U£µ÷xgĉp»ĆqNē`rĘzaĵĚ¡K½ÊBzyäKXqiWPÏɸ½řÍcÊG|µƕƣG˛÷Ÿk°_^ý|_zċBZocmø¯hhcæ\\lˆMFlư£Ĝ„ÆyH“„F¨‰µêÕ]—›HA…àӄ^it `þßäkŠĤÎT~Wlÿ¨„ÔPzUC–NVv [jâôDôď[}ž‰z¿–msSh‹¯{jïğl}šĹ[–őŒ‰gK‹©U·µË@¾ƒm_~q¡f¹…ÅË^»‘f³ø}Q•„¡Ö˳gͱ^ǁ…\\ëÃA_—¿bW›Ï[¶ƛ鏝£F{īZgm@|kHǭƁć¦UĔťƒ×ë}ǝƒeďºȡȘÏíBə£āĘPªij¶“ʼnÿ‡y©n‰ď£G¹¡I›Š±LÉĺÑdĉ܇W¥˜‰}g˜Á†{aqÃ¥aŠıęÏZ—ï`"
+        ],
+        "encodeOffsets": [[104636, 22969]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "540000",
+      "properties": { "id": "540000", "cp": [89.132212, 30.860361], "name": "西藏", "childNum": 1 },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@hžľxŽŖ‰xƒÒVŽ†ºÅâAĪÝȆµę¯Ňa±r_w~uSÕň‘qOj]ɄQ…£Z……UDûoY’»©M[‹L¼qãË{V͕çWViŽ]ë©Ä÷àyƛh›ÚU°ŒŒa”d„cQƒ~Mx¥™cc¡ÙaSyF—ցk­ŒuRýq¿Ôµ•QĽ³aG{¿FµëªéĜÿª@¬·–K‰·àariĕĀ«V»Ŷ™Ĵū˜gèLǴŇƶaf‹tŒèBŚ£^Šâ†ǐÝ®–šM¦ÁǞÿ¬LhŸŽJ¾óƾƺcxw‹f]Y…´ƒ¦|œQLn°aœdĊ…œ\\¨o’œǀÍŎœ´ĩĀd`tÊQŞŕ|‚¨C^©œĈ¦„¦ÎJĊ{ŽëĎjª²rЉšl`¼Ą[t|¦St辉PŒÜK¸€d˜Ƅı]s¤—î_v¹ÎVòŦj˜£Əsc—¬_Ğ´|Ł˜¦AvŽ¦w`ăaÝaa­¢e¤ı²©ªSªšÈMĄwžÉØŔì@T‘¤—Ę™\\õª@”þo´­xA s”ÂtŎKzó´ÇĊµ¢rž^nĊ­Æ¬×üGž¢‚³ {âĊ]š™G‚~bÀgVjzlhǶf€žOšfdŠ‰ªB]pj„•TO–tĊ‚n¤}®¦ƒČ¥d¢¼»ddš”Y¼Žt—¢eȤJ¤}Ǿ¡°§¤AГlc@ĝ”sªćļđAç‡wx•UuzEÖġ~AN¹ÄÅȀŻ¦¿ģŁéì±H…ãd«g[؉¼ēÀ•cīľġ¬cJ‘µ…ÐʥVȝ¸ßS¹†ý±ğkƁ¼ą^ɛ¤Ûÿ‰b[}¬ōõÃ]ËNm®g@•Bg}ÍF±ǐyL¥íCˆƒIij€Ï÷њį[¹¦[⚍EÛïÁÉdƅß{âNÆāŨߝ¾ě÷yC£‡k­´ÓH@¹†TZ¥¢įƒ·ÌAЧ®—Zc…v½ŸZ­¹|ŕWZqgW“|ieZÅYVӁqdq•bc²R@†c‡¥Rã»Ge†ŸeƃīQ•}J[ғK…¬Ə|o’ėjġĠÑN¡ð¯EBčnwôɍėªƒ²•CλŹġǝʅįĭạ̃ūȹ]ΓͧgšsgȽóϧµǛ†ęgſ¶ҍć`ĘąŌJޚä¤rÅň¥ÖÁUětęuůÞiĊÄÀ\\Æs¦ÓRb|Â^řÌkÄŷ¶½÷‡f±iMݑ›‰@ĥ°G¬ÃM¥n£Øą‚ğ¯ß”§aëbéüÑOčœk£{\\‘eµª×M‘šÉfm«Ƒ{Å׃Gŏǩãy³©WÑăû‚··‘Q—òı}¯ã‰I•éÕÂZ¨īès¶ZÈsŽæĔTŘvŽgÌsN@îá¾ó@‰˜ÙwU±ÉT廣TđŸWxq¹Zo‘b‹s[׌¯cĩv‡Œėŧ³BM|¹k‰ªħ—¥TzNYnݍßpęrñĠĉRS~½ŠěVVŠµ‚õ‡«ŒM££µB•ĉ¥áºae~³AuĐh`Ü³ç@BۘïĿa©|z²Ý¼D”£àč²‹ŸƒIƒû›I ā€óK¥}rÝ_Á´éMaň¨€~ªSĈ½Ž½KÙóĿeƃÆBŽ·¬ën×W|Uº}LJrƳ˜lŒµ`bÔ`QˆˆÐÓ@s¬ñIŒÍ@ûws¡åQÑßÁ`ŋĴ{Ī“T•ÚÅTSij‚‹Yo|Ç[ǾµMW¢ĭiÕØ¿@˜šMh…pÕ]j†éò¿OƇĆƇp€êĉâlØw–ěsˆǩ‚ĵ¸c…bU¹ř¨WavquSMzeo_^gsÏ·¥Ó@~¯¿RiīB™Š\\”qTGªÇĜçPoŠÿfñòą¦óQīÈáP•œābß{ƒZŗĸIæńhnszÁCËìñšÏ·ąĚÝUm®ó­L·ăU›Èíoù´Êj°ŁŤ_uµ^‘°Œìǖ@tĶĒ¡Æ‡M³Ģ«˜İĨÅ®ğ†RŽāð“ggheÆ¢z‚Ê©Ô\\°ÝĎz~ź¤Pn–MĪÖB£Ÿk™n鄧żćŠ˜ĆK„Ē°¼L¶è‰âz¨u¦¥LDĘz¬ýÎmĘd¾ß”Fz“hg²™Fy¦ĝ¤ċņbΛ@y‚Ąæm°NĮZRÖíŽJ²öLĸÒ¨Y®ƌÐV‰à˜tt_ڀÂyĠzž]Ţh€zĎ{†ĢX”ˆc|šÐqŽšfO¢¤ög‚ÌHNŽ„PKŖœŽ˜Uú´xx[xˆvĐCûĀŠìÖT¬¸^}Ìsòd´_Ž‡KgžLĴ…ÀBon|H@–Êx˜—¦BpŰˆŌ¿fµƌA¾zLjRxŠ¶F”œkĄźRzŀˆ~¶[”´Hnª–VƞuĒ­È¨ƎcƽÌm¸ÁÈM¦x͊ëÀxdžB’šú^´W†£–d„kɾĬpœw‚˂ØɦļĬIŚœÊ•n›Ŕa¸™~J°î”lɌxĤÊÈðhÌ®‚g˜T´øŽàCˆŽÀ^ªerrƘdž¢İP|Ė ŸWœªĦ^¶´ÂL„aT±üWƜ˜ǀRšŶUńšĖ[QhlLüA†‹Ü\\†qR›Ą©"
+        ],
+        "encodeOffsets": [[90849, 37210]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "610000",
+      "properties": {
+        "id": "610000",
+        "cp": [108.948024, 34.263161],
+        "name": "陕西",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@˜p¢—ȮµšûG™Ħ}Ħšðǚ¶òƄ€jɂz°{ºØkÈęâ¦jª‚Bg‚\\œċ°s¬Ž’]jžú ‚E”Ȍdž¬s„t‡”RˆÆdĠݎwܔ¸ôW¾ƮłÒ_{’Ìšû¼„jº¹¢GǪÒ¯ĘƒZ`ºŊƒecņąš~BÂgzpâēòYǠȰÌTΨÂWœ|fcŸă§uF—Œ@NŸ¢XLƒŠRMº[ğȣſï|¥J™kc`sʼnǷ’Y¹‹W@µ÷K…ãï³ÛIcñ·VȋڍÒķø©—þ¥ƒy‚ÓŸğęmWµÎumZyOŅƟĥÓ~sÑL¤µaŅY¦ocyZ{‰y c]{ŒTa©ƒ`U_Ěē£ωÊƍKù’K¶ȱÝƷ§{û»ÅÁȹÍéuij|¹cÑd‘ŠìUYƒŽO‘uF–ÕÈYvÁCqӃT•Ǣí§·S¹NgŠV¬ë÷Át‡°Dد’C´ʼnƒópģ}„ċcE˅FŸŸéGU¥×K…§­¶³B‹Č}C¿åċ`wġB·¤őcƭ²ő[Å^axwQO…ÿEËߌ•ĤNĔŸwƇˆÄŠńwĪ­Šo[„_KÓª³“ÙnK‰Çƒěœÿ]ď€ă_d©·©Ýŏ°Ù®g]±„Ÿ‡ß˜å›—¬÷m\\›iaǑkěX{¢|ZKlçhLt€Ňîŵ€œè[€É@ƉĄEœ‡tƇÏ˜³­ħZ«mJ…›×¾‘MtÝĦ£IwÄå\\Õ{‡˜ƒOwĬ©LÙ³ÙgBƕŀr̛ĢŭO¥lãyC§HÍ£ßEñŸX¡—­°ÙCgpťz‘ˆb`wI„vA|§”‡—hoĕ@E±“iYd¥OĻ¹S|}F@¾oAO²{tfžÜ—¢Fǂ҈W²°BĤh^Wx{@„¬‚­F¸¡„ķn£P|ŸªĴ@^ĠĈæb–Ôc¶l˜Yi…–^Mi˜cĎ°Â[ä€vï¶gv@À“Ĭ·lJ¸sn|¼u~a]’ÆÈtŌºJp’ƒþ£KKf~Š¦UbyäIšĺãn‡Ô¿^­žŵMT–hĠܤko¼Ŏìąǜh`[tŒRd²IJ_œXPrɲ‰l‘‚XžiL§àƒ–¹ŽH˜°Ȧqº®QC—bA†„ŌJ¸ĕÚ³ĺ§ `d¨YjžiZvRĺ±öVKkjGȊĐePОZmļKÀ€‚[ŠŽ`ösìh†ïÎoĬdtKÞ{¬èÒÒBŒÔpIJÇĬJŊ¦±J«ˆY§‹@·pH€µàåVKe›pW†ftsAÅqC·¬ko«pHÆuK@oŸHĆۄķhx“e‘n›S³àǍrqƶRbzy€¸ËАl›¼EºpĤ¼Œx¼½~Ğ’”à@†ÚüdK^ˆmÌSj"
+        ],
+        "encodeOffsets": [[110234, 38774]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "620000",
+      "properties": {
+        "id": "620000",
+        "cp": [103.823557, 36.058039],
+        "name": "甘肃",
+        "childNum": 2
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@VuUv"],
+          [
+            "@@ũ‹EĠtt~nkh`Q‰¦ÅÄÜdw˜Ab×ĠąJˆ¤DüègĺqBqœj°lI¡ĨÒ¤úSHbš‡ŠjΑBŠ°aZˆ¢KJŽ’O[|A£žDx}Nì•HUnrk„ kp€¼Y kMJn[aG‚áÚÏ[½rc†}aQxOgsPMnUs‡nc‹Z…ž–sKúvA›t„Þġ’£®ĀYKdnFwš¢JE°”Latf`¼h¬we|€Æ‡šbj}GA€·~WŽ”—`†¢MC¤tL©IJ°qdf”O‚“bÞĬ¹ttu`^ZúE`Œ[@„Æsîz®¡’C„ƳƜG²“R‘¢R’m”fŽwĸg܃‚ą G@pzJM½mŠhVy¸uÈÔO±¨{LfæU¶ßGĂq\\ª¬‡²I‚¥IʼnÈīoı‹ÓÑAçÑ|«LÝcspīðÍg…të_õ‰\\ĉñLYnĝg’ŸRǡÁiHLlõUĹ²uQjYi§Z_c¨Ÿ´ĹĖÙ·ŋI…ƒaBD˜­R¹ȥr—¯G•ºß„K¨jWk’ɱŠOq›Wij\\a­‹Q\\sg_ĆǛōëp»£lğۀgS•ŶN®À]ˆÓäm™ĹãJaz¥V}‰Le¤L„ýo‘¹IsŋÅÇ^‘Žbz…³tmEÁ´aŠ¹cčecÇN•ĊãÁ\\č¯—dNj•]j†—ZµkÓda•ćå]ğij@ ©O{¤ĸm¢ƒE·®ƒ«|@Xwg]Aģ±¯‡XǁÑdzªc›wQÚŝñsÕ³ÛV_ýƒ˜¥\\ů¥©¾÷w—Ž©WÕÊĩhÿÖÁRo¸V¬âDb¨šhûx–Ê×nj~Zâƒg|šXÁnßYoº§ZÅŘvŒ[„ĭÖʃuďxcVbnUSf…B¯³_Tzº—ΕO©çMÑ~Mˆ³]µ^püµ”ŠÄY~y@X~¤Z³€[Èōl@®Å¼£QKƒ·Di‹¡By‘ÿ‰Q_´D¥hŗyƒ^ŸĭÁZ]cIzý‰ah¹MĪğP‘s{ò‡‹‘²Vw¹t³Ŝˁ[ŽÑ}X\\gsFŸ£sPAgěp×ëfYHāďÖqēŭOÏë“dLü•\\iŒ”t^c®šRʺ¶—¢H°mˆ‘rYŸ£BŸ¹čIoľu¶uI]vģSQ{ƒUŻ”Å}QÂ|̋°ƅ¤ĩŪU ęĄžÌZҞ\\v˜²PĔ»ƢNHƒĂyAmƂwVmž`”]ȏb•”H`‰Ì¢²ILvĜ—H®¤Dlt_„¢JJÄämèÔDëþgºƫ™”aʎÌrêYi~ ÎݤNpÀA¾Ĕ¼b…ð÷’Žˆ‡®‚”üs”zMzÖĖQdȨý†v§Tè|ªH’þa¸|šÐ ƒwKĢx¦ivr^ÿ ¸l öæfƟĴ·PJv}n\\h¹¶v†·À|\\ƁĚN´Ĝ€çèÁz]ġ¤²¨QÒŨTIl‡ªťØ}¼˗ƦvÄùØE‹’«Fï˛Iq”ōŒTvāÜŏ‚íÛߜÛV—j³âwGăÂíNOŠˆŠPìyV³ʼnĖýZso§HіiYw[߆\\X¦¥c]ÔƩÜ·«j‡ÐqvÁ¦m^ċ±R™¦΋ƈťĚgÀ»IïĨʗƮŽ°Ɲ˜ĻþÍAƉſ±tÍEÕÞāNU͗¡\\ſčåÒʻĘm ƭÌŹöʥ’ëQ¤µ­ÇcƕªoIýˆ‰Iɐ_mkl³ă‰Ɠ¦j—¡Yz•Ňi–}Msßõ–īʋ —}ƒÁVmŸ_[n}eı­Uĥ¼‘ª•I{ΧDӜƻėoj‘qYhĹT©oūĶ£]ďxĩ‹ǑMĝ‰q`B´ƃ˺Ч—ç~™²ņj@”¥@đ´ί}ĥtPńǾV¬ufӃÉC‹tÓ̻‰…¹£G³€]ƖƾŎĪŪĘ̖¨ʈĢƂlɘ۪üºňUðǜȢƢż̌ȦǼ‚ĤŊɲĖ­Kq´ï¦—ºĒDzņɾªǀÞĈĂD†½ĄĎÌŗĞrôñnŽœN¼â¾ʄľԆ|DŽŽ֦ज़ȗlj̘̭ɺƅêgV̍ʆĠ·ÌĊv|ýĖÕWĊǎÞ´õ¼cÒÒBĢ͢UĜð͒s¨ňƃLĉÕÝ@ɛƯ÷¿Ľ­ĹeȏijëCȚDŲyê×Ŗyò¯ļcÂßY…tÁƤyAã˾J@ǝrý‹‰@¤…rz¸oP¹ɐÚyᐇHŸĀ[Jw…cVeȴϜ»ÈŽĖ}ƒŰŐèȭǢόĀƪÈŶë;Ñ̆ȤМľĮEŔ—ĹŊũ~ËUă{ŸĻƹɁύȩþĽvĽƓÉ@ē„ĽɲßǐƫʾǗĒpäWÐxnsÀ^ƆwW©¦cÅ¡Ji§vúF¶Ž¨c~c¼īŒeXǚ‹\\đ¾JŽwÀďksãA‹fÕ¦L}wa‚o”Z’‹D½†Ml«]eÒÅaɲáo½FõÛ]ĻÒ¡wYR£¢rvÓ®y®LF‹LzĈ„ôe]gx}•|KK}xklL]c¦£fRtív¦†PĤoH{tK"
+          ]
+        ],
+        "encodeOffsets": [[[108619, 36299]], [[108589, 36341]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "630000",
+      "properties": { "id": "630000", "cp": [96.778916, 35.623178], "name": "青海", "childNum": 2 },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@InJm"],
+          [
+            "@@CƒÆ½OŃĦsΰ~Ē³¦@@“Ņiš±è}ؘƄ˹A³r_ĞŠǒNĪŒĐw¤^ŬĵªpĺSZg’rpiƼĘԛ¨C|͖J’©Ħ»®VIJ~f\\m `Un„˜~ʌŸ•ĬàöNt•~ňjy–¢Zi˜Ɣ¥ĄŠk´nl`JʇŠJþ©pdƖ®È£¶ìRʦ‘źõƮËnŸʼėæÑƀĎ[‚˜¢VÎĂMÖÝÎF²sƊƀÎBļýƞ—¯ʘƭðħ¼Jh¿ŦęΌƇš¥²Q]Č¥nuÂÏriˆ¸¬ƪÛ^Ó¦d€¥[Wà…x\\ZŽjҕ¨GtpþYŊĕ´€zUO뇉P‰îMĄÁxH´á˜iÜUà›îÜՁĂÛSuŎ‹r“œJð̬EŒ‘FÁú×uÃÎkr“Ē{V}İ«O_ÌËĬ©ŽÓŧSRѱ§Ģ£^ÂyèçěM³Ƃę{[¸¿u…ºµ[gt£¸OƤĿéYŸõ·kĀŸq]juw¥Dĩƍ€õÇPéĽG‘ž©ã‡¤G…uȧþRcÕĕNy“yût“ˆ­‡ø‘†ï»a½ē¿BMoį£ŸÍj}éZËqbʍš“Ƭh¹ìÿÓAçãnIáI`ƒks£CG­ě˜Uy×Cy•…’Ÿ@¶ʡÊBnāzG„ơMē¼±O÷õJËĚăVŸĪũƆ£Œ¯{ËL½Ìzż“„VR|ĠTbuvJvµhĻĖH”Aëáa…­OÇðñęNw‡…œľ·L›mI±íĠĩPÉ×®ÿs—’cB³±JKßĊ«`…ađ»·QAmO’‘Vţéÿ¤¹SQt]]Çx€±¯A@ĉij¢Óļ©•ƒl¶ÅÛr—ŕspãRk~¦ª]Į­´“FR„åd­ČsCqđéFn¿Åƃm’Éx{W©ºƝºįkÕƂƑ¸wWūЩÈFž£\\tÈ¥ÄRÈýÌJ ƒlGr^×äùyÞ³fj”c†€¨£ÂZ|ǓMĝšÏ@ëÜőR‹›ĝ‰Œ÷¡{aïȷPu°ËXÙ{©TmĠ}Y³’­ÞIňµç½©C¡į÷¯B»|St»›]vƒųƒs»”}MÓ ÿʪƟǭA¡fs˜»PY¼c¡»¦c„ċ­¥£~msĉP•–Siƒ^o©A‰Šec‚™PeǵŽkg‚yUi¿h}aH™šĉ^|ᴟ¡HØûÅ«ĉ®]m€¡qĉ¶³ÈyôōLÁst“BŸ®wn±ă¥HSòėš£˜S’ë@לÊăxÇN©™©T±ª£IJ¡fb®ÞbŽb_Ą¥xu¥B—ž{łĝ³«`d˜Ɛt—¤ťiñžÍUuºí`£˜^tƃIJc—·ÛLO‹½Šsç¥Ts{ă\\_»™kϊ±q©čiìĉ|ÍIƒ¥ć¥›€]ª§D{ŝŖÉR_sÿc³Īō›ƿΑ›§p›[ĉ†›c¯bKm›R¥{³„Z†e^ŽŒwx¹dƽŽôIg §Mĕ ƹĴ¿—ǣÜ̓]‹Ý–]snåA{‹eŒƭ`ǻŊĿ\\ijŬű”YÂÿ¬jĖqŽßbŠ¸•L«¸©@ěĀ©ê¶ìÀEH|´bRľž–Ó¶rÀQþ‹vl®Õ‚E˜TzÜdb ˜hw¤{LR„ƒd“c‹b¯‹ÙVgœ‚ƜßzÃô쮍^jUèXΖ|UäÌ»rKŽ\\ŒªN‘¼pZCü†VY††¤ɃRi^rPҒTÖ}|br°qňbĚ°ªiƶGQ¾²„x¦PœmlŜ‘[Ĥ¡ΞsĦŸÔÏâ\\ªÚŒU\\f…¢N²§x|¤§„xĔsZPòʛ²SÐqF`ª„VƒÞŜĶƨVZŒÌL`ˆ¢dŐIqr\\oäõ–F礻Ŷ×h¹]Clـ\\¦ďÌį¬řtTӺƙgQÇÓHţĒ”´ÃbEÄlbʔC”|CˆŮˆk„Ʈ[ʼ¬ňœ´KŮÈΰÌĪ¶ƶlð”ļA†TUvdTŠG†º̼ŠÔ€ŒsÊDԄveOg"
+          ]
+        ],
+        "encodeOffsets": [[[105308, 37219]], [[95370, 40081]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "640000",
+      "properties": { "id": "640000", "cp": [106.278179, 37.26637], "name": "宁夏", "childNum": 2 },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            "@@KëÀęĞ«OęȿȕŸı]ʼn¡åįÕÔ«Ǵõƪ™ĚQÐZhv K°›öqÀѐS[ÃÖHƖčË‡nL]ûc…Ùß@‚“ĝ‘¾}w»»‹oģF¹œ»kÌÏ·{zPƒ§B­¢íyÅt@ƒ@áš]Yv_ssģ¼i߁”ĻL¾ġsKD£¡N_…“˜X¸}B~Haiˆ™Åf{«x»ge_bs“KF¯¡Ix™mELcÿZ¤­Ģ‘ƒÝœsuBLù•t†ŒYdˆmVtNmtOPhRw~bd…¾qÐ\\âÙH\\bImlNZŸ»loƒŸqlVm–Gā§~QCw¤™{A\\‘PKŸNY‡¯bF‡kC¥’sk‹Šs_Ã\\ă«¢ħkJi¯r›rAhĹûç£CU‡ĕĊ_ԗBixÅُĄnªÑaM~ħpOu¥sîeQ¥¤^dkKwlL~{L~–hw^‚ófćƒKyEŒ­K­zuÔ¡qQ¤xZÑ¢^ļöܾEpž±âbÊÑÆ^fk¬…NC¾‘Œ“YpxbK~¥Že֎ŒäBlt¿Đx½I[ĒǙŒWž‹f»Ĭ}d§dµùEuj¨‚IÆ¢¥dXªƅx¿]mtÏwßRĶŒX¢͎vÆzƂZò®ǢÌʆCrâºMÞzžÆMҔÊÓŊZľ–r°Î®Ȉmª²ĈUªĚøºˆĮ¦ÌĘk„^FłĬhĚiĀĖ¾iİbjÕ"
+          ],
+          ["@@mfwěwMrŢªv@G‰"]
+        ],
+        "encodeOffsets": [[[109366, 40242]], [[108600, 36303]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "650000",
+      "properties": { "id": "650000", "cp": [85.617733, 40.792818], "name": "新疆", "childNum": 1 },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@QØĔ²X¨”~ǘBºjʐßØvK”ƔX¨vĊOžÃƒ·¢i@~c—‡ĝe_«”Eš“}QxgɪëÏÃ@sÅyXoŖ{ô«ŸuX…ê•Îf`œC‚¹ÂÿÐGĮÕĞXŪōŸMźÈƺQèĽôe|¿ƸJR¤ĘEjcUóº¯Ĩ_ŘÁMª÷Ð¥Oéȇ¿ÖğǤǷÂF҇zÉx[]­Ĥĝ‰œ¦EP}ûƥé¿İƷTėƫœŕƅ™ƱB»Đ±’ēO…¦E–•}‘`cȺrĦáŖuҞª«IJ‡πdƺÏØZƴwʄ¤ĖGЙǂZĶƒèH¶}ÚZצʥĪï|ÇĦMŔ»İĝLj‹ì¥Βœba­¯¥ǕǚkĆŵĦɑĺƯxūД̵nơʃĽá½M»›òmqóŘĝč˾ăC…ćāƿÝɽ©DZŅ¹đ¥˜³ðLrÁ®ɱĕģʼnǻ̋ȥơŻǛȡVï¹Ň۩ûkɗġƁ§ʇė̕ĩũƽō^ƕŠUv£ƁQï“Ƶkŏ½ΉÃŭdzLқʻ«ƭ\\lƒ‡ŭD‡“{ʓDkaFÃÄa“³ŤđÔGRÈƚhSӹŚsİ«ĐË[¥ÚDkº^Øg¼ŵ¸£EÍö•€ůʼnT¡c_‡ËKY‹ƧUśĵ„݃U_©rETÏʜ±OñtYwē¨ƒ{£¨uM³x½şL©Ùá[ÓÐĥ Νtģ¢\\‚ś’nkO›w¥±ƒT»ƷFɯàĩÞáB¹Æ…ÑUw„੍žĽw[“mG½Èå~‡Æ÷QyŠěCFmĭZī—ŵVÁ™ƿQƛ—ûXS²‰b½KϽĉS›©ŷXĕŸ{ŽĕK·¥Ɨcqq©f¿]‡ßDõU³h—­gËÇïģÉɋw“k¯í}I·šœbmœÉ–ř›īJɥĻˁ×xo›ɹī‡l•c…¤³Xù]‘™DžA¿w͉ì¥wÇN·ÂËnƾƍdǧđ®Ɲv•Um©³G\\“}µĿ‡QyŹl㓛µEw‰LJQ½yƋBe¶ŋÀů‡ož¥A—˜Éw@•{Gpm¿Aij†ŽKLhˆ³`ñcËtW‚±»ÕS‰ëüÿďD‡u\\wwwù³—V›LŕƒOMËGh£õP¡™er™Ïd{“‡ġWÁ…č|yšg^ğyÁzÙs`—s|ÉåªÇ}m¢Ń¨`x¥’ù^•}ƒÌ¥H«‰Yªƅ”Aйn~ź¯šf¤áÀz„gŠÇDIԝ´AňĀ҄¶ûEYospõD[{ù°]u›Jq•U•|Soċxţ[õÔĥkŋÞŭZ˺óYËüċrw €ÞkrťË¿XGÉbřaDü·Ē÷Aê[Ää€I®BÕИÞ_¢āĠpŠÛÄȉĖġDKwbm‡ÄNô‡ŠfœƫVÉvi†dz—H‘‹QµâFšù­Âœ³¦{YGžƒd¢ĚÜO „€{Ö¦ÞÍÀPŒ^b–ƾŠlŽ[„vt×ĈÍE˨¡Đ~´î¸ùÎh€uè`¸ŸHÕŔVºwĠââWò‡@{œÙNÝ´ə²ȕn{¿¥{l—÷eé^e’ďˆXj©î\\ªÑò˜Üìc\\üqˆÕ[Č¡xoÂċªbØ­Œø|€¶ȴZdÆšońéŒGš\\”¼C°ÌƁn´nxšÊOĨ’Ūƴĸ¢¸òTxÊǪMīИÖŲÃɎOvˆʦƢ~FŽ‡Rěò—¿ġ~åŊœú‰Nšžš¸qŽ’Ę[Ĕ¶ÂćnÒPĒÜvúĀÊbÖ{Äî¸~Ŕünp¤ÂH¾œĄYÒ©ÊfºmԈĘcDoĬMŬ’˜S¤„s²‚”ʘچžȂVŦ –ŽèW°ªB|IJXŔþÈJĦÆæFĚêŠYĂªĂ]øªŖNÞüA€’fɨJ€˜¯ÎrDDšĤ€`€mz\\„§~D¬{vJÂ˜«lµĂb–¤p€ŌŰNĄ¨ĊXW|ų ¿¾ɄĦƐMT”‡òP˜÷fØĶK¢ȝ˔Sô¹òEð­”`Ɩ½ǒÂň×äı–§ĤƝ§C~¡‚hlå‚ǺŦŞkâ’~}ŽFøàIJaĞ‚fƠ¥Ž„Ŕdž˜®U¸ˆźXœv¢aƆúŪtŠųƠjd•ƺŠƺÅìnrh\\ĺ¯äɝĦ]èpĄ¦´LƞĬŠ´ƤǬ˼Ēɸ¤rºǼ²¨zÌPðŀbþ¹ļD¢¹œ\\ĜÑŚŸ¶ZƄ³àjĨoâŠȴLʉȮŒĐ­ĚăŽÀêZǚŐ¤qȂ\\L¢ŌİfÆs|zºeªÙæ§΢{Ā´ƐÚ¬¨Ĵà²łhʺKÞºÖTŠiƢ¾ªì°`öøu®Ê¾ãØ"
+        ],
+        "encodeOffsets": [[88824, 50096]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "110000",
+      "properties": {
+        "id": "110000",
+        "cp": [116.405285, 39.904989],
+        "name": "北京",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@ĽOÁ›ûtŷmiÍt_H»Ĩ±d`Š¹­{bw…Yr“³S]§§o¹€qGtm_Sŧ€“oa›‹FLg‘QN_•dV€@Zom_ć\\ߚc±x¯oœRcfe…£’o§ËgToÛJíĔóu…|wP¤™XnO¢ÉˆŦ¯rNÄā¤zâŖÈRpŢZŠœÚ{GŠrFt¦Òx§ø¹RóäV¤XdˆżâºWbwŚ¨Ud®bêņ¾‘jnŎGŃŶŠnzÚSeîĜZczî¾i]͜™QaúÍÔiþĩȨWĢ‹ü|Ėu[qb[swP@ÅğP¿{\\‡¥A¨Ï‘Ѩj¯ŠX\\¯œMK‘pA³[H…īu}}"
+        ],
+        "encodeOffsets": [[120023, 41045]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "120000",
+      "properties": {
+        "id": "120000",
+        "cp": [117.190182, 39.125596],
+        "name": "天津",
+        "childNum": 1
+      },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": [
+          "@@ŬgX§Ü«E…¶Ḟ“¬O_™ïlÁg“z±AXe™µÄĵ{¶]gitgšIj·›¥îakS€‰¨ÐƎk}ĕ{gB—qGf{¿a†U^fI“ư‹³õ{YƒıëNĿžk©ïËZŏ‘R§òoY×Ógc…ĥs¡bġ«@dekąI[nlPqCnp{ˆō³°`{PNdƗqSÄĻNNâyj]äžÒD ĬH°Æ]~¡HO¾ŒX}ÐxŒgp“gWˆrDGˆŒpù‚Š^L‚ˆrzWxˆZ^¨´T\\|~@I‰zƒ–bĤ‹œjeĊªz£®Ĕvě€L†mV¾Ô_ȔNW~zbĬvG†²ZmDM~”~"
+        ],
+        "encodeOffsets": [[120237, 41215]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "310000",
+      "properties": {
+        "id": "310000",
+        "cp": [121.472644, 31.231706],
+        "name": "上海",
+        "childNum": 6
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@ɧư¬EpƸÁxc‡"],
+          ["@@©„ªƒ"],
+          ["@@”MA‹‘š"],
+          ["@@Qp݁E§ÉC¾"],
+          ["@@bŝՕÕEȣÚƥêImɇǦèÜĠŒÚžÃƌÃ͎ó"],
+          ["@@ǜûȬɋŠŭ™×^‰sYŒɍDŋ‘ŽąñCG²«ªč@h–_p¯A{‡oloY€¬j@IJ`•gQڛhr|ǀ^MIJvtbe´R¯Ô¬¨YŽô¤r]ì†Ƭį"]
+        ],
+        "encodeOffsets": [
+          [[124702, 32062]],
+          [[124547, 32200]],
+          [[124808, 31991]],
+          [[124726, 32110]],
+          [[124903, 32376]],
+          [[124438, 32149]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "500000",
+      "properties": {
+        "id": "500000",
+        "cp": [107.304962, 29.533155],
+        "name": "重庆",
+        "childNum": 2
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          [
+            "@@vjG~nGŘŬĶȂƀƾ¹¸ØÎezĆT¸}êЖqHŸðqĖ䒊¥^CƒIj–²p…\\_ æüY|[YxƊæuž°xb®…Űb@~¢NQt°¶‚S栓Ê~rljĔëĚ¢~šuf`‘‚†fa‚ĔJåĊ„nÖ]„jƎćÊ@Š£¾a®£Ű{ŶĕF‹ègLk{Y|¡ĜWƔtƬJÑxq‹±ĢN´‰òK‰™–LÈüD|s`ŋ’ć]ƒÃ‰`đŒMûƱ½~Y°ħ`ƏíW‰½eI‹½{aŸ‘OIrÏ¡ĕŇa†p†µÜƅġ‘œ^ÖÛbÙŽŏml½S‹êqDu[R‹ãË»†ÿw`»y‘¸_ĺę}÷`M¯ċfCVµqʼn÷Z•gg“Œ`d½pDO‡ÎCnœ^uf²ènh¼WtƏxRGg¦…pV„†FI±ŽG^ŒIc´ec‡’G•ĹÞ½sëĬ„h˜xW‚}Kӈe­Xsbk”F¦›L‘ØgTkïƵNï¶}Gy“w\\oñ¡nmĈzjŸ•@™Óc£»Wă¹Ój“_m»ˆ¹·~MvÛaqœ»­‰êœ’\\ÂoVnŽÓØ͙²«‹bq¿efE „€‹Ĝ^Qž~ Évý‡ş¤²Į‰pEİ}zcĺƒL‹½‡š¿gņ›¡ýE¡ya£³t\\¨\\vú»¼§·Ñr_oÒý¥u‚•_n»_ƒ•At©Þűā§IVeëƒY}{VPÀFA¨ąB}q@|Ou—\\Fm‰QF݅Mw˜å}]•€|FmϋCaƒwŒu_p—¯sfÙgY…DHl`{QEfNysBŠ¦zG¸rHe‚„N\\CvEsÐùÜ_·ÖĉsaQ¯€}_U‡†xÃđŠq›NH¬•Äd^ÝŰR¬ã°wećJEž·vÝ·Hgƒ‚éFXjÉê`|yŒpxkAwœWĐpb¥eOsmzwqChóUQl¥F^laf‹anòsr›EvfQdÁUVf—ÎvÜ^efˆtET¬ôA\\œ¢sJŽnQTjP؈xøK|nBz‰„œĞ»LY‚…FDxӄvr“[ehľš•vN”¢o¾NiÂxGp⬐z›bfZo~hGi’]öF|‰|Nb‡tOMn eA±ŠtPT‡LjpYQ|†SH††YĀxinzDJ€Ìg¢và¥Pg‰_–ÇzII‹€II•„£®S¬„Øs쐣ŒN"
+          ],
+          ["@@ifjN@s"]
+        ],
+        "encodeOffsets": [[[109628, 30765]], [[111725, 31320]]]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "810000",
+      "properties": {
+        "id": "810000",
+        "cp": [114.173355, 22.320048],
+        "name": "香港",
+        "childNum": 5
+      },
+      "geometry": {
+        "type": "MultiPolygon",
+        "coordinates": [
+          ["@@AlBk"],
+          ["@@mŽn"],
+          ["@@EpFo"],
+          ["@@ea¢pl¸Eõ¹‡hj[ƒ]ÔCΖ@lj˜¡uBXŸ…•´‹AI¹…[‹yDUˆ]W`çwZkmc–…M›žp€Åv›}I‹oJlcaƒfёKŽ°ä¬XJmРđhI®æÔtSHn€Eˆ„ÒrÈc"],
+          ["@@rMUw‡AS®€e"]
+        ],
+        "encodeOffsets": [
+          [[117111, 23002]],
+          [[117072, 22876]],
+          [[117045, 22887]],
+          [[116975, 23082]],
+          [[116882, 22747]]
+        ]
+      }
+    },
+    {
+      "type": "Feature",
+      "id": "820000",
+      "properties": { "id": "820000", "cp": [113.54909, 22.198951], "name": "澳门", "childNum": 1 },
+      "geometry": {
+        "type": "Polygon",
+        "coordinates": ["@@kÊd°å§s"],
+        "encodeOffsets": [[116279, 22639]]
+      }
+    }
+  ],
+  "UTF8Encoding": true
+}
diff --git a/src/components/DiyEditor/components/mobile/Carousel/index.vue b/src/components/DiyEditor/components/mobile/Carousel/index.vue
index 940a9a56..360b4a49 100644
--- a/src/components/DiyEditor/components/mobile/Carousel/index.vue
+++ b/src/components/DiyEditor/components/mobile/Carousel/index.vue
@@ -21,7 +21,7 @@
     </el-carousel>
     <div
       v-if="property.indicator === 'number'"
-      class="absolute p-y-2px bottom-10px right-10px rounded-xl bg-black p-x-8px text-10px text-white opacity-40"
+      class="absolute bottom-10px right-10px rounded-xl bg-black p-x-8px p-y-2px text-10px text-white opacity-40"
       >{{ currentIndex }} / {{ property.items.length }}</div
     >
   </div>
diff --git a/src/views/infra/codegen/PreviewCode.vue b/src/views/infra/codegen/PreviewCode.vue
index b04775ec..b6a307d2 100644
--- a/src/views/infra/codegen/PreviewCode.vue
+++ b/src/views/infra/codegen/PreviewCode.vue
@@ -20,8 +20,8 @@
             ref="treeRef"
             :data="preview.fileTree"
             :expand-on-click-node="false"
-            highlight-current
             default-expand-all
+            highlight-current
             node-key="id"
             @node-click="handleNodeClick"
           />

From 821c804189ffc81b8d8f8444076ab8948dcd3615 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Tue, 14 Nov 2023 21:56:54 +0800
Subject: [PATCH 63/77] fix: stylelint

---
 .../components/ComponentContainer.vue         | 63 +++++++++++--------
 .../components/ComponentContainerProperty.vue |  1 +
 .../DiyEditor/components/ComponentLibrary.vue | 36 ++++++-----
 .../components/mobile/ImageBar/index.vue      |  2 +-
 .../components/mobile/NavigationBar/index.vue | 11 ++--
 .../components/mobile/SearchBar/index.vue     | 10 +--
 .../components/mobile/TabBar/index.vue        |  7 ++-
 .../components/mobile/TitleBar/index.vue      | 12 ++--
 .../components/mobile/VideoPlayer/index.vue   |  2 +-
 src/components/DiyEditor/index.vue            | 54 ++++++++++------
 src/components/VerticalButtonGroup/index.vue  | 18 +++---
 src/layout/components/Message/src/Message.vue |  2 +-
 .../member/components/MemberFunnelCard.vue    |  2 +
 .../mall/trade/delivery/pickUpOrder/index.vue |  1 +
 14 files changed, 135 insertions(+), 86 deletions(-)

diff --git a/src/components/DiyEditor/components/ComponentContainer.vue b/src/components/DiyEditor/components/ComponentContainer.vue
index c013362f..e6f1beb3 100644
--- a/src/components/DiyEditor/components/ComponentContainer.vue
+++ b/src/components/DiyEditor/components/ComponentContainer.vue
@@ -126,93 +126,106 @@ $active-border-width: 2px;
 $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
+
 /* 组件 */
 .component {
   position: relative;
   cursor: move;
+
   .component-wrap {
-    display: block;
     position: absolute;
-    left: -$active-border-width;
     top: 0;
+    left: -$active-border-width;
+    display: block;
     width: 100%;
     height: 100%;
+
     /* 鼠标放到组件上时 */
     &:hover {
       border: $hover-border-width dashed var(--el-color-primary);
-      box-shadow: 0 0 5px 0 rgba(24, 144, 255, 0.3);
+      box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
+
       .component-name {
+        top: $hover-border-width;
+
         /* 防止加了边框之后，位置移动 */
         left: $name-position - $hover-border-width;
-        top: $hover-border-width;
       }
     }
+
     /* 左侧：组件名称 */
     .component-name {
-      display: block;
       position: absolute;
-      width: 80px;
-      text-align: center;
-      line-height: 25px;
-      height: 25px;
-      background: #fff;
-      font-size: 12px;
-      left: $name-position;
       top: $active-border-width;
+      left: $name-position;
+      display: block;
+      width: 80px;
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      text-align: center;
+      background: #fff;
       box-shadow:
         0 0 4px #00000014,
         0 2px 6px #0000000f,
         0 4px 8px 2px #0000000a;
+
       /* 右侧小三角 */
-      &:after {
+      &::after {
         position: absolute;
         top: 7.5px;
         right: -10px;
-        content: ' ';
-        height: 0;
         width: 0;
+        height: 0;
         border: 5px solid transparent;
         border-left-color: #fff;
+        content: ' ';
       }
     }
+
     /* 右侧：组件操作工具栏 */
     .component-toolbar {
-      display: none;
       position: absolute;
       top: 0;
       right: $toolbar-position;
+      display: none;
+
       /* 左侧小三角 */
-      &:before {
+      &::before {
         position: absolute;
         top: 10px;
         left: -10px;
-        content: ' ';
-        height: 0;
         width: 0;
+        height: 0;
         border: 5px solid transparent;
         border-right-color: #2d8cf0;
+        content: ' ';
       }
     }
   }
+
   /* 组件选中时 */
   &.active {
     margin-bottom: 4px;
 
     .component-wrap {
-      border: $active-border-width solid var(--el-color-primary) !important;
-      box-shadow: 0 0 10px 0 rgba(24, 144, 255, 0.3);
       margin-bottom: $active-border-width + $active-border-width;
+      border: $active-border-width solid var(--el-color-primary) !important;
+      box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
 
       .component-name {
-        background: var(--el-color-primary);
-        color: #fff;
+        top: 0 !important;
+
         /* 防止加了边框之后，位置移动 */
         left: $name-position - $active-border-width !important;
-        top: 0 !important;
-        &:after {
+        color: #fff;
+        background: var(--el-color-primary);
+
+        &::after {
           border-left-color: var(--el-color-primary);
         }
       }
+
       .component-toolbar {
         display: block;
       }
diff --git a/src/components/DiyEditor/components/ComponentContainerProperty.vue b/src/components/DiyEditor/components/ComponentContainerProperty.vue
index 5c5ed9a0..d6540354 100644
--- a/src/components/DiyEditor/components/ComponentContainerProperty.vue
+++ b/src/components/DiyEditor/components/ComponentContainerProperty.vue
@@ -157,6 +157,7 @@ const handleSliderChange = (prop: string) => {
 :deep(.el-slider__runway) {
   margin-right: 16px;
 }
+
 :deep(.el-input-number) {
   width: 50px;
 }
diff --git a/src/components/DiyEditor/components/ComponentLibrary.vue b/src/components/DiyEditor/components/ComponentLibrary.vue
index 2bcd81fd..e319a5c2 100644
--- a/src/components/DiyEditor/components/ComponentLibrary.vue
+++ b/src/components/DiyEditor/components/ComponentLibrary.vue
@@ -90,23 +90,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 .editor-left {
   z-index: 1;
   flex-shrink: 0;
-  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.12);
+  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
 
   :deep(.el-collapse) {
     border-top: none;
   }
+
   :deep(.el-collapse-item__wrap) {
     border-bottom: none;
   }
+
   :deep(.el-collapse-item__content) {
     padding-bottom: 0;
   }
+
   :deep(.el-collapse-item__header) {
-    border-bottom: none;
-    background-color: var(--el-bg-color-page);
-    padding: 0 24px;
     height: 32px;
+    padding: 0 24px;
     line-height: 32px;
+    background-color: var(--el-bg-color-page);
+    border-bottom: none;
   }
 
   .component-container {
@@ -116,25 +119,26 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
   }
 
   .component {
+    display: flex;
     width: 86px;
     height: 86px;
-    display: flex;
+    cursor: move;
+    border-right: 1px solid var(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-right: 1px solid var(--el-border-color-lighter);
-    border-bottom: 1px solid var(--el-border-color-lighter);
-    cursor: move;
 
     .el-icon {
       margin-bottom: 4px;
       color: gray;
     }
   }
+
   .component.active,
   .component:hover {
-    background: var(--el-color-primary);
     color: var(--el-color-white);
+    background: var(--el-color-primary);
 
     .el-icon {
       color: var(--el-color-white);
@@ -155,11 +159,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 .drag-area {
   /* 拖拽到手机区域时的样式 */
   .draggable-ghost {
+    display: flex;
     width: 100%;
     height: 40px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
     /* 条纹背景 */
     background: linear-gradient(
       45deg,
@@ -174,20 +177,25 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     );
     background-size: 1rem 1rem;
     transition: all 0.5s;
+    justify-content: center;
+    align-items: center;
+
     span {
-      color: #fff;
       display: inline-block;
       width: 140px;
       height: 25px;
       font-size: 12px;
-      text-align: center;
       line-height: 25px;
+      color: #fff;
+      text-align: center;
       background: #5487df;
     }
+
     /* 拖拽时隐藏组件 */
     .component {
       display: none;
     }
+
     /* 拖拽时显示占位提示 */
     .drag-placement {
       display: block;
diff --git a/src/components/DiyEditor/components/mobile/ImageBar/index.vue b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
index 6f70c52d..d9685b50 100644
--- a/src/components/DiyEditor/components/mobile/ImageBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/ImageBar/index.vue
@@ -17,8 +17,8 @@ defineProps<{ property: ImageBarProperty }>()
 <style scoped lang="scss">
 /* 图片 */
 img {
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
 }
 </style>
diff --git a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
index 345b6681..f5cfff8c 100644
--- a/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/NavigationBar/index.vue
@@ -35,22 +35,25 @@ defineProps<{ property: NavigationBarProperty }>()
 </script>
 <style lang="scss" scoped>
 .navigation-bar {
+  display: flex;
   height: 35px;
   background: #fff;
-  display: flex;
   justify-content: space-between;
   align-items: center;
+
   /* 左边 */
   .left {
     margin-left: 8px;
   }
+
   .center {
-    flex: 1;
-    text-align: center;
     font-size: 14px;
     line-height: 35px;
-    color: #333333;
+    color: #333;
+    text-align: center;
+    flex: 1;
   }
+
   /* 右边 */
   .right {
     margin-right: 8px;
diff --git a/src/components/DiyEditor/components/mobile/SearchBar/index.vue b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
index 618c918b..9de261ad 100644
--- a/src/components/DiyEditor/components/mobile/SearchBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/SearchBar/index.vue
@@ -45,21 +45,21 @@ defineProps<{ property: SearchProperty }>()
   /* 搜索框 */
   .inner {
     position: relative;
-    min-height: 28px;
     display: flex;
-    align-items: center;
+    min-height: 28px;
     font-size: 14px;
+    align-items: center;
 
     .placeholder {
       display: flex;
-      align-items: center;
       width: 100%;
       padding: 0 8px;
-      gap: 2px;
-      text-overflow: ellipsis;
       overflow: hidden;
+      text-overflow: ellipsis;
       word-break: break-all;
       white-space: nowrap;
+      align-items: center;
+      gap: 2px;
     }
 
     .right {
diff --git a/src/components/DiyEditor/components/mobile/TabBar/index.vue b/src/components/DiyEditor/components/mobile/TabBar/index.vue
index 647e3369..4325d1e3 100644
--- a/src/components/DiyEditor/components/mobile/TabBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/TabBar/index.vue
@@ -30,8 +30,9 @@ defineProps<{ property: TabBarProperty }>()
 </script>
 <style lang="scss" scoped>
 .tab-bar {
-  width: 100%;
   z-index: 2;
+  width: 100%;
+
   .tab-bar-bg {
     display: flex;
     flex-direction: row;
@@ -41,11 +42,11 @@ defineProps<{ property: TabBarProperty }>()
 
     .tab-bar-item {
       display: flex;
+      width: 100%;
+      font-size: 12px;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      font-size: 12px;
-      width: 100%;
 
       img {
         width: 26px;
diff --git a/src/components/DiyEditor/components/mobile/TitleBar/index.vue b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
index aab65779..047a6c06 100644
--- a/src/components/DiyEditor/components/mobile/TitleBar/index.vue
+++ b/src/components/DiyEditor/components/mobile/TitleBar/index.vue
@@ -56,23 +56,23 @@ defineProps<{ property: TitleBarProperty }>()
 </script>
 <style scoped lang="scss">
 .title-bar {
+  position: relative;
+  width: 100%;
+  min-height: 20px;
+  padding: 8px 16px;
   border: 2px solid #fff;
   box-sizing: border-box;
-  width: 100%;
-  padding: 8px 16px;
-  min-height: 20px;
-  position: relative;
 
   /* 更多 */
   .more {
     position: absolute;
-    right: 8px;
     top: 0;
+    right: 8px;
     bottom: 0;
+    display: flex;
     margin: auto;
     font-size: 10px;
     color: #969799;
-    display: flex;
     align-items: center;
     justify-content: center;
   }
diff --git a/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue b/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
index a62dea08..fa9a914f 100644
--- a/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
+++ b/src/components/DiyEditor/components/mobile/VideoPlayer/index.vue
@@ -23,8 +23,8 @@ defineProps<{ property: VideoPlayerProperty }>()
 <style scoped lang="scss">
 /* 图片 */
 img {
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
 }
 </style>
diff --git a/src/components/DiyEditor/index.vue b/src/components/DiyEditor/index.vue
index fbb7e103..44cb10a7 100644
--- a/src/components/DiyEditor/index.vue
+++ b/src/components/DiyEditor/index.vue
@@ -337,28 +337,33 @@ onMounted(() => setDefaultSelectedComponent())
 /* 手机宽度 */
 $phone-width: 375px;
 $toolbar-height: 42px;
+
 /* 根节点样式 */
 .editor {
+  display: flex;
   height: 100%;
   margin: calc(0px - var(--app-content-padding));
-  display: flex;
   flex-direction: column;
+
   /* 顶部：工具栏 */
   .editor-header {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
     height: $toolbar-height;
     padding: 0;
-    border-bottom: solid 1px var(--el-border-color);
     background-color: var(--el-bg-color);
+    border-bottom: solid 1px var(--el-border-color);
+    align-items: center;
+    justify-content: space-between;
+
     /* 工具栏：右侧按钮 */
     .header-right {
       height: 100%;
+
       .el-button {
         height: 100%;
       }
     }
+
     /* 隐藏工具栏按钮的边框 */
     :deep(.el-radio-button__inner),
     :deep(.el-button) {
@@ -367,33 +372,40 @@ $toolbar-height: 42px;
       border-radius: 0 !important;
     }
   }
+
   /* 中心操作区 */
   .editor-container {
     height: calc(
       100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) -
         $toolbar-height
     );
+
     /* 右侧属性面板 */
     .editor-right {
-      flex-shrink: 0;
-      box-shadow: -8px 0 8px -8px rgba(0, 0, 0, 0.12);
       overflow: hidden;
+      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
+      flex-shrink: 0;
+
       /* 属性面板顶部：减少内边距 */
       :deep(.el-card__header) {
         padding: 8px 16px;
       }
+
       /* 属性面板分组 */
       :deep(.property-group) {
         margin: 0 -20px;
+
         &.el-card {
           border: none;
         }
+
         /* 属性分组名称 */
         .el-card__header {
-          border: none;
-          background: var(--el-bg-color-page);
           padding: 8px 32px;
+          background: var(--el-bg-color-page);
+          border: none;
         }
+
         .el-card__body {
           border: none;
         }
@@ -403,33 +415,36 @@ $toolbar-height: 42px;
     /* 中心区域 */
     .editor-center {
       position: relative;
-      flex: 1 1 0;
-      background-color: var(--app-content-bg-color);
       display: flex;
+      width: 100%;
+      margin: 16px 0 0;
+      overflow: hidden;
+      background-color: var(--app-content-bg-color);
+      flex: 1 1 0;
       flex-direction: column;
       justify-content: center;
-      margin: 16px 0 0 0;
-      overflow: hidden;
-      width: 100%;
 
       /* 手机顶部 */
       .editor-design-top {
+        display: flex;
         width: $phone-width;
         margin: 0 auto;
-        display: flex;
         flex-direction: column;
+
         /* 手机顶部状态栏 */
         .status-bar {
-          height: 20px;
           width: $phone-width;
+          height: 20px;
           background-color: #fff;
         }
       }
+
       /* 手机底部导航 */
       .editor-design-bottom {
         width: $phone-width;
         margin: 0 auto;
       }
+
       /* 手机页面编辑区域 */
       :deep(.editor-design-center) {
         width: 100%;
@@ -437,14 +452,15 @@ $toolbar-height: 42px;
         /* 主体内容 */
         .phone-container {
           position: relative;
+          width: $phone-width;
+          height: 100%;
+          margin: 0 auto;
           background-repeat: no-repeat;
           background-size: 100% 100%;
-          height: 100%;
-          width: $phone-width;
-          margin: 0 auto;
+
           .drag-area {
-            height: 100%;
             width: 100%;
+            height: 100%;
           }
         }
       }
diff --git a/src/components/VerticalButtonGroup/index.vue b/src/components/VerticalButtonGroup/index.vue
index 479ed559..9c78ea27 100644
--- a/src/components/VerticalButtonGroup/index.vue
+++ b/src/components/VerticalButtonGroup/index.vue
@@ -17,24 +17,28 @@ defineOptions({ name: 'VerticalButtonGroup' })
   display: inline-flex;
   flex-direction: column;
 }
+
 .el-button-group > :deep(.el-button:first-child) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: var(--el-border-radius-base);
   border-bottom-color: var(--el-button-divide-border-color);
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
+
 .el-button-group > :deep(.el-button:last-child) {
-  border-top-left-radius: 0;
+  border-top-color: var(--el-button-divide-border-color);
   border-top-right-radius: 0;
   border-bottom-left-radius: var(--el-border-radius-base);
-  border-top-color: var(--el-button-divide-border-color);
+  border-top-left-radius: 0;
 }
-.el-button-group :deep(.el-button--primary:not(:first-child):not(:last-child)) {
+
+.el-button-group :deep(.el-button--primary:not(:first-child, :last-child)) {
   border-top-color: var(--el-button-divide-border-color);
   border-bottom-color: var(--el-button-divide-border-color);
 }
+
 .el-button-group > :deep(.el-button:not(:last-child)) {
-  margin-bottom: -1px;
   margin-right: 0;
+  margin-bottom: -1px;
 }
 </style>
diff --git a/src/layout/components/Message/src/Message.vue b/src/layout/components/Message/src/Message.vue
index 3019df29..6bd7724a 100644
--- a/src/layout/components/Message/src/Message.vue
+++ b/src/layout/components/Message/src/Message.vue
@@ -88,8 +88,8 @@ onMounted(() => {
 }
 
 .message-list {
-  height: 400px;
   display: flex;
+  height: 400px;
   flex-direction: column;
 
   .message-item {
diff --git a/src/views/mall/statistics/member/components/MemberFunnelCard.vue b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
index fc847ef3..609c679f 100644
--- a/src/views/mall/statistics/member/components/MemberFunnelCard.vue
+++ b/src/views/mall/statistics/member/components/MemberFunnelCard.vue
@@ -110,9 +110,11 @@ const handleTimeRangeChange = async (times: [dayjs.ConfigType, dayjs.ConfigType]
 .trapezoid1 {
   transform: perspective(5em) rotateX(-11deg);
 }
+
 .trapezoid2 {
   transform: perspective(7em) rotateX(-20deg);
 }
+
 .trapezoid3 {
   transform: perspective(3em) rotateX(-13deg);
 }
diff --git a/src/views/mall/trade/delivery/pickUpOrder/index.vue b/src/views/mall/trade/delivery/pickUpOrder/index.vue
index 8eb80072..fdcb7c81 100644
--- a/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -316,6 +316,7 @@ onMounted(() => {
 :deep(.order-table-col > .cell) {
   padding: 0;
 }
+
 .summary {
   .el-col {
     margin-bottom: 1rem;

From 22206b25e1357e6f69a4d027d130544affcc3b04 Mon Sep 17 00:00:00 2001
From: Wanwan <913752709@qq.com>
Date: Wed, 15 Nov 2023 21:55:44 +0800
Subject: [PATCH 64/77] =?UTF-8?q?feat:=20CRM=20=E5=AE=A2=E6=88=B7=E9=99=90?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../crm/customerLimitConfig/CustomerLimitConfDetails.vue      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue b/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
index dd31961e..01b7fbbb 100644
--- a/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
+++ b/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
@@ -89,6 +89,8 @@ defineOptions({ name: 'CustomerLimitConfDetails' })
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
+const { confType } = defineProps<{ confType: LimitConfType }>()
+
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
@@ -131,8 +133,6 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
-const { confType } = defineProps<{ confType: LimitConfType }>()
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1

From 40b1522ed0da116f361a17f9ba5d6ee5df021b16 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 15 Nov 2023 23:48:00 +0800
Subject: [PATCH 65/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=20crud=20=E5=8D=95=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo/demo01/index.ts            | 40 +++++++++
 src/api/infra/demo01/index.ts                 | 43 ----------
 .../demo01/Demo01ContactForm.vue}             | 84 +++++++------------
 src/views/infra/{ => demo}/demo01/index.vue   | 78 +++++------------
 4 files changed, 92 insertions(+), 153 deletions(-)
 create mode 100644 src/api/infra/demo/demo01/index.ts
 delete mode 100644 src/api/infra/demo01/index.ts
 rename src/views/infra/{demo01/Demo01StudentForm.vue => demo/demo01/Demo01ContactForm.vue} (62%)
 rename src/views/infra/{ => demo}/demo01/index.vue (72%)

diff --git a/src/api/infra/demo/demo01/index.ts b/src/api/infra/demo/demo01/index.ts
new file mode 100644
index 00000000..1a4b01ca
--- /dev/null
+++ b/src/api/infra/demo/demo01/index.ts
@@ -0,0 +1,40 @@
+import request from '@/config/axios'
+
+export interface Demo01ContactVO {
+  id: number
+  name: string
+  sex: number
+  birthday: Date
+  description: string
+  avatar: string
+}
+
+// 查询示例联系人分页
+export const getDemo01ContactPage = async (params) => {
+  return await request.get({ url: `/infra/demo01-contact/page`, params })
+}
+
+// 查询示例联系人详情
+export const getDemo01Contact = async (id: number) => {
+  return await request.get({ url: `/infra/demo01-contact/get?id=` + id })
+}
+
+// 新增示例联系人
+export const createDemo01Contact = async (data: Demo01ContactVO) => {
+  return await request.post({ url: `/infra/demo01-contact/create`, data })
+}
+
+// 修改示例联系人
+export const updateDemo01Contact = async (data: Demo01ContactVO) => {
+  return await request.put({ url: `/infra/demo01-contact/update`, data })
+}
+
+// 删除示例联系人
+export const deleteDemo01Contact = async (id: number) => {
+  return await request.delete({ url: `/infra/demo01-contact/delete?id=` + id })
+}
+
+// 导出示例联系人 Excel
+export const exportDemo01Contact = async (params) => {
+  return await request.download({ url: `/infra/demo01-contact/export-excel`, params })
+}
\ No newline at end of file
diff --git a/src/api/infra/demo01/index.ts b/src/api/infra/demo01/index.ts
deleted file mode 100644
index 0154bc29..00000000
--- a/src/api/infra/demo01/index.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import request from '@/config/axios'
-
-export interface Demo01StudentVO {
-  id: number
-  name: string
-  description: string
-  birthday: Date
-  sex: number
-  enabled: boolean
-  avatar: string
-  video: string
-  memo: string
-}
-
-// 查询学生列表
-export const getDemo01StudentPage = async (params) => {
-  return await request.get({ url: `/infra/demo01-student/page`, params })
-}
-
-// 查询学生详情
-export const getDemo01Student = async (id: number) => {
-  return await request.get({ url: `/infra/demo01-student/get?id=` + id })
-}
-
-// 新增学生
-export const createDemo01Student = async (data: Demo01StudentVO) => {
-  return await request.post({ url: `/infra/demo01-student/create`, data })
-}
-
-// 修改学生
-export const updateDemo01Student = async (data: Demo01StudentVO) => {
-  return await request.put({ url: `/infra/demo01-student/update`, data })
-}
-
-// 删除学生
-export const deleteDemo01Student = async (id: number) => {
-  return await request.delete({ url: `/infra/demo01-student/delete?id=` + id })
-}
-
-// 导出学生 Excel
-export const exportDemo01Student = async (params) => {
-  return await request.download({ url: `/infra/demo01-student/export-excel`, params })
-}
\ No newline at end of file
diff --git a/src/views/infra/demo01/Demo01StudentForm.vue b/src/views/infra/demo/demo01/Demo01ContactForm.vue
similarity index 62%
rename from src/views/infra/demo01/Demo01StudentForm.vue
rename to src/views/infra/demo/demo01/Demo01ContactForm.vue
index dfc9823d..0452a3c0 100644
--- a/src/views/infra/demo01/Demo01StudentForm.vue
+++ b/src/views/infra/demo/demo01/Demo01ContactForm.vue
@@ -10,31 +10,10 @@
       <el-form-item label="名字" prop="name">
         <el-input v-model="formData.name" placeholder="请输入名字" />
       </el-form-item>
-      <el-form-item label="简介" prop="description">
-        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
-      </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker
-          v-model="formData.birthday"
-          type="date"
-          value-format="x"
-          placeholder="选择出生日期"
-        />
-      </el-form-item>
       <el-form-item label="性别" prop="sex">
-        <el-select v-model="formData.sex" placeholder="请选择性别">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-radio-group v-model="formData.enabled">
+        <el-radio-group v-model="formData.sex">
           <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
             :label="dict.value"
           >
@@ -42,15 +21,20 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="头像">
+      <el-form-item label="出生年" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生年"
+        />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <Editor v-model="formData.description" height="150px" />
+      </el-form-item>
+      <el-form-item label="头像" prop="avatar">
         <UploadImg v-model="formData.avatar" />
       </el-form-item>
-      <el-form-item label="附件" prop="video">
-        <UploadFile v-model="formData.video" />
-      </el-form-item>
-      <el-form-item label="备注" prop="memo">
-        <Editor v-model="formData.memo" height="150px" />
-      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -59,8 +43,8 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as Demo01StudentApi from '@/api/infra/demo01'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo01ContactApi from '@/api/infra/demo/demo01'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -72,21 +56,16 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   name: undefined,
-  description: undefined,
-  birthday: undefined,
   sex: undefined,
-  enabled: undefined,
-  avatar: undefined,
-  video: undefined,
-  memo: undefined
+  birthday: undefined,
+  description: undefined,
+  avatar: undefined
 })
 const formRules = reactive({
   name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
-  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生年不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
@@ -100,7 +79,7 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await Demo01StudentApi.getDemo01Student(id)
+      formData.value = await Demo01ContactApi.getDemo01Contact(id)
     } finally {
       formLoading.value = false
     }
@@ -116,12 +95,12 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as Demo01StudentApi.Demo01StudentVO
+    const data = formData.value as unknown as Demo01ContactApi.Demo01ContactVO
     if (formType.value === 'create') {
-      await Demo01StudentApi.createDemo01Student(data)
+      await Demo01ContactApi.createDemo01Contact(data)
       message.success(t('common.createSuccess'))
     } else {
-      await Demo01StudentApi.updateDemo01Student(data)
+      await Demo01ContactApi.updateDemo01Contact(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -137,14 +116,11 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     name: undefined,
-    description: undefined,
-    birthday: undefined,
     sex: undefined,
-    enabled: undefined,
-    avatar: undefined,
-    video: undefined,
-    memo: undefined
+    birthday: undefined,
+    description: undefined,
+    avatar: undefined
   }
   formRef.value?.resetFields()
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo01/index.vue b/src/views/infra/demo/demo01/index.vue
similarity index 72%
rename from src/views/infra/demo01/index.vue
rename to src/views/infra/demo/demo01/index.vue
index fb35b561..55751e1b 100644
--- a/src/views/infra/demo01/index.vue
+++ b/src/views/infra/demo/demo01/index.vue
@@ -17,16 +17,6 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker
-          v-model="queryParams.birthday"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择出生日期"
-          clearable
-          class="!w-240px"
-        />
-      </el-form-item>
       <el-form-item label="性别" prop="sex">
         <el-select
           v-model="queryParams.sex"
@@ -42,21 +32,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-select
-          v-model="queryParams.enabled"
-          placeholder="请选择是否有效"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
@@ -75,7 +50,7 @@
           type="primary"
           plain
           @click="openForm('create')"
-          v-hasPermi="['infra:demo01-student:create']"
+          v-hasPermi="['infra:demo01-contact:create']"
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
@@ -84,7 +59,7 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['infra:demo01-student:export']"
+          v-hasPermi="['infra:demo01-contact:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -97,26 +72,20 @@
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column
-        label="出生日期"
-        align="center"
-        prop="birthday"
-        :formatter="dateFormatter"
-        width="180px"
-      />
       <el-table-column label="性别" align="center" prop="sex">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
         </template>
       </el-table-column>
-      <el-table-column label="是否有效" align="center" prop="enabled">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
-        </template>
-      </el-table-column>
+      <el-table-column
+        label="出生年"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="简介" align="center" prop="description" />
       <el-table-column label="头像" align="center" prop="avatar" />
-      <el-table-column label="附件" align="center" prop="video" />
-      <el-table-column label="备注" align="center" prop="memo" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -130,7 +99,7 @@
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo01-student:update']"
+            v-hasPermi="['infra:demo01-contact:update']"
           >
             编辑
           </el-button>
@@ -138,7 +107,7 @@
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo01-student:delete']"
+            v-hasPermi="['infra:demo01-contact:delete']"
           >
             删除
           </el-button>
@@ -155,32 +124,29 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <Demo01StudentForm ref="formRef" @success="getList" />
+  <Demo01ContactForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
-import * as Demo01StudentApi from '@/api/infra/demo01'
-import Demo01StudentForm from './Demo01StudentForm.vue'
+import * as Demo01ContactApi from '@/api/infra/demo/demo01'
+import Demo01ContactForm from './Demo01ContactForm.vue'
 
-defineOptions({ name: 'InfraDemo01Student' })
+defineOptions({ name: 'Demo01Contact' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: null,
-  birthday: null,
-  birthday: [],
   sex: null,
-  enabled: null,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
@@ -190,7 +156,7 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
   loading.value = true
   try {
-    const data = await Demo01StudentApi.getDemo01StudentPage(queryParams)
+    const data = await Demo01ContactApi.getDemo01ContactPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -222,7 +188,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await Demo01StudentApi.deleteDemo01Student(id)
+    await Demo01ContactApi.deleteDemo01Contact(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -236,8 +202,8 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await Demo01StudentApi.exportDemo01Student(queryParams)
-    download.excel(data, '学生.xls')
+    const data = await Demo01ContactApi.exportDemo01Contact(queryParams)
+    download.excel(data, '示例联系人.xls')
   } catch {
   } finally {
     exportLoading.value = false

From 3d0c4f442210e89062f0cf407a31f27e47984e06 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 16 Nov 2023 00:11:23 +0800
Subject: [PATCH 66/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E6=94=AF=E6=8C=81=E6=A0=91=E5=BD=A2=E8=A1=A8=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E7=9A=84=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../codegen/components/GenerateInfoForm.vue   | 58 +++++++------------
 1 file changed, 20 insertions(+), 38 deletions(-)

diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
index 178b4e0f..a4f5ad97 100644
--- a/src/views/infra/codegen/components/GenerateInfoForm.vue
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -182,50 +182,33 @@
       </el-col>
     </el-row>
 
-    <el-row v-show="formData.tplCategory === 'tree'">
-      <h4 class="form-header">其他信息</h4>
-      <el-col :span="12">
-        <el-form-item>
-          <template #label>
-            <span>
-              树编码字段
-              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
-                <Icon icon="ep:question-filled" />
-              </el-tooltip>
-            </span>
-          </template>
-          <el-select v-model="formData.treeCode" placeholder="请选择">
-            <el-option
-              v-for="(column, index) in formData.columns"
-              :key="index"
-              :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
-            />
-          </el-select>
-        </el-form-item>
+    <!-- 树表信息 -->
+    <el-row v-show="formData.templateType == 2">
+      <el-col :span="24">
+        <h4 class="form-header">树表信息</h4>
       </el-col>
       <el-col :span="12">
-        <el-form-item>
+        <el-form-item prop="treeParentColumnId">
           <template #label>
             <span>
-              树父编码字段
+              父编号字段
               <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
                 <Icon icon="ep:question-filled" />
               </el-tooltip>
             </span>
           </template>
-          <el-select v-model="formData.treeParentCode" placeholder="请选择">
+          <el-select v-model="formData.treeParentColumnId" placeholder="请选择">
             <el-option
-              v-for="(column, index) in formData.columns"
+              v-for="(column, index) in props.columns"
               :key="index"
               :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
+              :value="column.id"
             />
           </el-select>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item>
+        <el-form-item prop="treeNameColumnId">
           <template #label>
             <span>
               树名称字段
@@ -234,13 +217,12 @@
               </el-tooltip>
             </span>
           </template>
-
-          <el-select v-model="formData.treeName" placeholder="请选择">
+          <el-select v-model="formData.treeNameColumnId" placeholder="请选择">
             <el-option
-              v-for="(column, index) in formData.columns"
+              v-for="(column, index) in props.columns"
               :key="index"
               :label="column.columnName + '：' + column.columnComment"
-              :value="column.columnName"
+              :value="column.id"
             />
           </el-select>
         </el-form-item>
@@ -248,7 +230,7 @@
     </el-row>
 
     <!-- 主表信息 -->
-    <el-row v-if="formData.templateType === 15">
+    <el-row v-if="formData.templateType == 15">
       <el-col :span="24">
         <h4 class="form-header">主表信息</h4>
       </el-col>
@@ -343,14 +325,12 @@ const formData = ref({
   classComment: '',
   parentMenuId: null,
   genPath: '',
-  treeCode: '',
-  treeParentCode: '',
-  treeName: '',
-  tplCategory: '',
   genType: '',
   masterTableId: undefined,
   subJoinColumnId: undefined,
-  subJoinMany: undefined
+  subJoinMany: undefined,
+  treeParentColumnId: undefined,
+  treeNameColumnId: undefined
 })
 
 const rules = reactive({
@@ -364,7 +344,9 @@ const rules = reactive({
   classComment: [required],
   masterTableId: [required],
   subJoinColumnId: [required],
-  subJoinMany: [required]
+  subJoinMany: [required],
+  treeParentColumnId: [required],
+  treeNameColumnId: [required]
 })
 
 const tables = ref([]) // 表定义列表

From bbc37613b6c1aa236752926d09c997b046f117e8 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 16 Nov 2023 20:39:12 +0800
Subject: [PATCH 67/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=20tree=20=E6=A0=91=E5=BD=A2?=
 =?UTF-8?q?=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo/demo02/index.ts            |  37 ++++
 src/api/infra/demo02/index.ts                 |  49 -----
 .../demo02/Demo02CategoryForm.vue}            |  85 ++++-----
 src/views/infra/{ => demo}/demo02/index.vue   | 105 ++++++++---
 .../infra/demo02/DemoStudentAddressForm.vue   | 126 -------------
 .../infra/demo02/DemoStudentContactForm.vue   | 177 ------------------
 .../demo02/bak/DemoStudentAddressForm.vue     |  58 ------
 7 files changed, 159 insertions(+), 478 deletions(-)
 create mode 100644 src/api/infra/demo/demo02/index.ts
 delete mode 100644 src/api/infra/demo02/index.ts
 rename src/views/infra/{demo02/DemoStudentForm.vue => demo/demo02/Demo02CategoryForm.vue} (55%)
 rename src/views/infra/{ => demo}/demo02/index.vue (51%)
 delete mode 100644 src/views/infra/demo02/DemoStudentAddressForm.vue
 delete mode 100644 src/views/infra/demo02/DemoStudentContactForm.vue
 delete mode 100644 src/views/infra/demo02/bak/DemoStudentAddressForm.vue

diff --git a/src/api/infra/demo/demo02/index.ts b/src/api/infra/demo/demo02/index.ts
new file mode 100644
index 00000000..21e45c90
--- /dev/null
+++ b/src/api/infra/demo/demo02/index.ts
@@ -0,0 +1,37 @@
+import request from '@/config/axios'
+
+export interface Demo02CategoryVO {
+  id: number
+  name: string
+  parentId: number
+}
+
+// 查询示例分类列表
+export const getDemo02CategoryList = async (params) => {
+  return await request.get({ url: `/infra/demo02-category/list`, params })
+}
+
+// 查询示例分类详情
+export const getDemo02Category = async (id: number) => {
+  return await request.get({ url: `/infra/demo02-category/get?id=` + id })
+}
+
+// 新增示例分类
+export const createDemo02Category = async (data: Demo02CategoryVO) => {
+  return await request.post({ url: `/infra/demo02-category/create`, data })
+}
+
+// 修改示例分类
+export const updateDemo02Category = async (data: Demo02CategoryVO) => {
+  return await request.put({ url: `/infra/demo02-category/update`, data })
+}
+
+// 删除示例分类
+export const deleteDemo02Category = async (id: number) => {
+  return await request.delete({ url: `/infra/demo02-category/delete?id=` + id })
+}
+
+// 导出示例分类 Excel
+export const exportDemo02Category = async (params) => {
+  return await request.download({ url: `/infra/demo02-category/export-excel`, params })
+}
\ No newline at end of file
diff --git a/src/api/infra/demo02/index.ts b/src/api/infra/demo02/index.ts
deleted file mode 100644
index 500adde5..00000000
--- a/src/api/infra/demo02/index.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import request from '@/config/axios'
-
-export interface DemoStudentVO {
-  id: number
-}
-
-// 查询学生列表
-export const getDemoStudentPage = async (params) => {
-  return await request.get({ url: `/infra/demo-student/page`, params })
-}
-
-// 查询学生详情
-export const getDemoStudent = async (id: number) => {
-  return await request.get({ url: `/infra/demo-student/get?id=` + id })
-}
-
-// 新增学生
-export const createDemoStudent = async (data: DemoStudentVO) => {
-  return await request.post({ url: `/infra/demo-student/create`, data })
-}
-
-// 修改学生
-export const updateDemoStudent = async (data: DemoStudentVO) => {
-  return await request.put({ url: `/infra/demo-student/update`, data })
-}
-
-// 删除学生
-export const deleteDemoStudent = async (id: number) => {
-  return await request.delete({ url: `/infra/demo-student/delete?id=` + id })
-}
-
-// 导出学生 Excel
-export const exportDemoStudent = async (params) => {
-  return await request.download({ url: `/infra/demo-student/export-excel`, params })
-}
-
-// 获得学生联系人列表
-export const getDemoStudentContactListByStudentId = async (studentId) => {
-  return await request.get({
-    url: `/infra/demo-student/demo-student/list-by-student-id?studentId=` + studentId
-  })
-}
-
-// 获得学生地址
-export const getDemoStudentAddressByStudentId = async (studentId) => {
-  return await request.get({
-    url: `/infra/demo-student/demo-student/get-by-student-id?studentId=` + studentId
-  })
-}
diff --git a/src/views/infra/demo02/DemoStudentForm.vue b/src/views/infra/demo/demo02/Demo02CategoryForm.vue
similarity index 55%
rename from src/views/infra/demo02/DemoStudentForm.vue
rename to src/views/infra/demo/demo02/Demo02CategoryForm.vue
index e9454c0f..9002d5ee 100644
--- a/src/views/infra/demo02/DemoStudentForm.vue
+++ b/src/views/infra/demo/demo02/Demo02CategoryForm.vue
@@ -6,16 +6,21 @@
       :rules="formRules"
       label-width="100px"
       v-loading="formLoading"
-    />
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane label="学生联系人" name="demoStudentContact">
-        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-      <el-tab-pane label="学生地址" name="demoStudentAddress">
-        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="父级编号" prop="parentId">
+        <el-tree-select
+          v-model="formData.parentId"
+          :data="demo02CategoryTree"
+          :props="defaultProps"
+          check-strictly
+          default-expand-all
+          placeholder="请选择父级编号"
+        />
+      </el-form-item>
+    </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -23,9 +28,8 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentContactForm from './DemoStudentContactForm.vue'
-import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
+import * as Demo02CategoryApi from '@/api/infra/demo/demo02'
+import { defaultProps, handleTree } from '@/utils/tree'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -35,15 +39,16 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  id: undefined
+  id: undefined,
+  name: undefined,
+  parentId: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  parentId: [{ required: true, message: '父级编号不能为空', trigger: 'blur' }]
 })
-const formRules = reactive({})
 const formRef = ref() // 表单 Ref
-
-/** 子表的表单 */
-const subTabsName = ref('demoStudentContact')
-const demoStudentContactFormRef = ref()
-const demoStudentAddressFormRef = ref()
+const demo02CategoryTree = ref() // 树形结构
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -55,11 +60,12 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await DemoStudentApi.getDemoStudent(id)
+      formData.value = await Demo02CategoryApi.getDemo02Category(id)
     } finally {
       formLoading.value = false
     }
   }
+  await getDemo02CategoryTree()
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -68,31 +74,15 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
-  // 校验子表单
-  try {
-    await demoStudentContactFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demoStudentContact'
-    return
-  }
-  try {
-    await demoStudentAddressFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demoStudentAddress'
-    return
-  }
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
-    // 拼接子表的数据
-    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
-    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
+    const data = formData.value as unknown as Demo02CategoryApi.Demo02CategoryVO
     if (formType.value === 'create') {
-      await DemoStudentApi.createDemoStudent(data)
+      await Demo02CategoryApi.createDemo02Category(data)
       message.success(t('common.createSuccess'))
     } else {
-      await DemoStudentApi.updateDemoStudent(data)
+      await Demo02CategoryApi.updateDemo02Category(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -106,8 +96,19 @@ const submitForm = async () => {
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
-    id: undefined
+    id: undefined,
+    name: undefined,
+    parentId: undefined
   }
   formRef.value?.resetFields()
 }
-</script>
+
+/** 获得示例分类树 */
+const getDemo02CategoryTree = async () => {
+  demo02CategoryTree.value = []
+  const data = await Demo02CategoryApi.getDemo02CategoryList()
+  const root: Tree = { id: 0, name: '顶级示例分类', children: [] }
+  root.children = handleTree(data, 'id', 'parentId')
+  demo02CategoryTree.value.push(root)
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo02/index.vue b/src/views/infra/demo/demo02/index.vue
similarity index 51%
rename from src/views/infra/demo02/index.vue
rename to src/views/infra/demo/demo02/index.vue
index 89fd656b..e46c77dc 100644
--- a/src/views/infra/demo02/index.vue
+++ b/src/views/infra/demo/demo02/index.vue
@@ -8,10 +8,35 @@
       :inline="true"
       label-width="68px"
     >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" plain @click="openForm('create')">
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:demo02-category:create']"
+        >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
         <el-button
@@ -19,28 +44,52 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['infra:demo-student:export']"
+          v-hasPermi="['infra:demo02-category:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
+        <el-button type="danger" plain @click="toggleExpandAll">
+          <Icon icon="ep:sort" class="mr-5px" /> 展开/折叠
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      row-key="id"
+      :default-expand-all="isExpandAll"
+      v-if="refreshTable"
+    >
       <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button link type="primary" @click="openForm('update', scope.row.id)">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo02-category:update']"
+          >
             编辑
           </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo-student:delete']"
+            v-hasPermi="['infra:demo02-category:delete']"
           >
             删除
           </el-button>
@@ -57,25 +106,27 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <DemoStudentForm ref="formRef" @success="getList" />
+  <Demo02CategoryForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import { handleTree } from '@/utils/tree'
 import download from '@/utils/download'
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentForm from './DemoStudentForm.vue'
+import * as Demo02CategoryApi from '@/api/infra/demo/demo02'
+import Demo02CategoryForm from './Demo02CategoryForm.vue'
 
-defineOptions({ name: 'InfraDemoStudent' })
+defineOptions({ name: 'Demo02Category' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10
+  name: null,
+  parentId: null,
+  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -84,13 +135,8 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
   loading.value = true
   try {
-    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = [
-      {
-        id: 1
-      }
-    ]
-    total.value = 10
+    const data = await Demo02CategoryApi.getDemo02CategoryList(queryParams)
+    list.value = handleTree(data, 'id', 'parentId')
   } finally {
     loading.value = false
   }
@@ -110,10 +156,7 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-// const demoStudentContactFormRef = ref()
 const openForm = (type: string, id?: number) => {
-  // console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
-  // demoStudentContactFormRef.value.validate()
   formRef.value.open(type, id)
 }
 
@@ -123,7 +166,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await DemoStudentApi.deleteDemoStudent(id)
+    await Demo02CategoryApi.deleteDemo02Category(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -137,16 +180,26 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await DemoStudentApi.exportDemoStudent(queryParams)
-    download.excel(data, '学生.xls')
+    const data = await Demo02CategoryApi.exportDemo02Category(queryParams)
+    download.excel(data, '示例分类.xls')
   } catch {
   } finally {
     exportLoading.value = false
   }
 }
 
+/** 展开/折叠操作 */
+const isExpandAll = ref(true) // 是否展开，默认全部展开
+const refreshTable = ref(true) // 重新渲染表格状态
+const toggleExpandAll = async () => {
+  refreshTable.value = false
+  isExpandAll.value = !isExpandAll.value
+  await nextTick()
+  refreshTable.value = true
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo02/DemoStudentAddressForm.vue b/src/views/infra/demo02/DemoStudentAddressForm.vue
deleted file mode 100644
index 6d031406..00000000
--- a/src/views/infra/demo02/DemoStudentAddressForm.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    label-width="100px"
-    v-loading="formLoading"
-  >
-    <el-form-item label="名字" prop="name">
-      <el-input v-model="formData.name" placeholder="请输入名字" />
-    </el-form-item>
-    <el-form-item label="个人简介">
-      <Editor v-model="formData.description" height="150px" />
-    </el-form-item>
-    <el-form-item label="性别 1" prop="sex1">
-      <el-select v-model="formData.sex1" placeholder="请选择性别 1">
-        <el-option
-          v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_SEX1)"
-          :key="dict.value"
-          :label="dict.label"
-          :value="dict.value"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="性别 2" prop="sex2">
-      <el-checkbox-group v-model="formData.sex2">
-        <el-checkbox
-          v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SEX2)"
-          :key="dict.value"
-          :label="dict.value"
-        >
-          {{ dict.label }}
-        </el-checkbox>
-      </el-checkbox-group>
-    </el-form-item>
-    <el-form-item label="性别 3" prop="sex3">
-      <el-radio-group v-model="formData.sex3">
-        <el-radio
-          v-for="dict in getBoolDictOptions(DICT_TYPE.SYSTEM_SEX3)"
-          :key="dict.value"
-          :label="dict.value"
-        >
-          {{ dict.label }}
-        </el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="出生日期" prop="birthday">
-      <el-date-picker
-        v-model="formData.birthday"
-        type="date"
-        value-format="x"
-        placeholder="选择出生日期"
-      />
-    </el-form-item>
-    <el-form-item label="备注" prop="memo">
-      <el-input v-model="formData.memo" type="textarea" placeholder="请输入备注" />
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as DemoStudentApi from '@/api/infra/demo02'
-
-const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
-}>()
-const formLoading = ref(false) // 表单的加载中
-const formData = ref([])
-const formRules = reactive({
-  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  video: [{ required: true, message: '视频不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
-  sex1: [{ required: true, message: '性别 1不能为空', trigger: 'change' }],
-  sex2: [{ required: true, message: '性别 2不能为空', trigger: 'blur' }],
-  sex3: [{ required: true, message: '性别 3不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  async (val) => {
-    // 情况一：val 为空，说明是新增，则置空
-    if (!val) {
-      formData.value = {
-        id: undefined,
-        studentId: undefined,
-        name: undefined,
-        avatar: undefined,
-        video: undefined,
-        description: undefined,
-        sex1: undefined,
-        sex2: [],
-        sex3: undefined,
-        birthday: undefined,
-        memo: undefined
-      }
-      return
-    }
-    // 情况二：val 非空，说明是修改，则加载数据
-    try {
-      formLoading.value = true
-      formData.value = await DemoStudentApi.getDemoStudentAddressByStudentId(val)
-    } finally {
-      formLoading.value = false
-    }
-  },
-  { immediate: true }
-)
-
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
-
-/** 表单值 */
-const getData = () => {
-  return formData.value
-}
-
-defineExpose({ validate, getData })
-</script>
diff --git a/src/views/infra/demo02/DemoStudentContactForm.vue b/src/views/infra/demo02/DemoStudentContactForm.vue
deleted file mode 100644
index 5f173f14..00000000
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    v-loading="formLoading"
-    label-width="0px"
-    :inline-message="true"
-  >
-    <el-table :data="formData" class="-mt-10px">
-      <el-table-column label="序号" type="index" width="100" />
-      <el-table-column label="名字" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
-            <el-input v-model="row.name" placeholder="请输入名字" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="个人简介" width="400">
-        <template #default="{ row, $index }">
-          <el-form-item
-            :prop="`${$index}.description`"
-            :rules="formRules.description"
-            class="mb-0px!"
-          >
-            <Editor v-model="row.description" height="150px" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="性别 1" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.sex1`" :rules="formRules.sex1" class="mb-0px!">
-            <el-select v-model="row.sex1" placeholder="请选择性别 1">
-              <el-option
-                v-for="dict in getStrDictOptions(DICT_TYPE.SYSTEM_SEX1)"
-                :key="dict.value"
-                :label="dict.label"
-                :value="dict.value"
-              />
-            </el-select>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="性别 2" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.sex2`" :rules="formRules.sex2" class="mb-0px!">
-            <el-checkbox-group v-model="row.sex2">
-              <el-checkbox
-                v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SEX2)"
-                :key="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-checkbox>
-            </el-checkbox-group>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="性别 3" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.sex3`" :rules="formRules.sex3" class="mb-0px!">
-            <el-radio-group v-model="row.sex3">
-              <el-radio
-                v-for="dict in getBoolDictOptions(DICT_TYPE.SYSTEM_SEX3)"
-                :key="dict.value"
-                :label="dict.value"
-              >
-                {{ dict.label }}
-              </el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="出生日期" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.birthday`" :rules="formRules.birthday" class="mb-0px!">
-            <el-date-picker
-              v-model="row.birthday"
-              type="date"
-              value-format="x"
-              placeholder="选择出生日期"
-            />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" width="200">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.memo`" :rules="formRules.memo" class="mb-0px!">
-            <el-input v-model="row.memo" type="textarea" placeholder="请输入备注" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-form>
-  <el-row justify="center" class="mt-3">
-    <el-button @click="handleAdd" round>+ 添加联系人</el-button>
-  </el-row>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as DemoStudentApi from '@/api/infra/demo02'
-
-const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
-}>()
-const formLoading = ref(false) // 表单的加载中
-const formData = ref([])
-const formRules = reactive({
-  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  video: [{ required: true, message: '视频不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '个人简介不能为空', trigger: 'blur' }],
-  sex1: [{ required: true, message: '性别 1不能为空', trigger: 'change' }],
-  sex2: [{ required: true, message: '性别 2不能为空', trigger: 'blur' }],
-  sex3: [{ required: true, message: '性别 3不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  async (val) => {
-    // 情况一：val 为空，说明是新增，则置空
-    if (!val) {
-      formData.value = []
-      return
-    }
-    // 情况二：val 非空，说明是修改，则加载数据
-    try {
-      formLoading.value = true
-      formData.value = await DemoStudentApi.getDemoStudentContactListByStudentId(val)
-    } finally {
-      formLoading.value = false
-    }
-  },
-  { immediate: true }
-)
-
-/** 新增按钮操作 */
-const handleAdd = () => {
-  const row = {
-    id: undefined,
-    studentId: undefined,
-    name: undefined,
-    avatar: undefined,
-    video: undefined,
-    description: undefined,
-    sex1: undefined,
-    sex2: [],
-    sex3: undefined,
-    birthday: undefined,
-    memo: undefined
-  }
-  row.studentId = props.studentId
-  formData.value.push(row)
-}
-
-/** 删除按钮操作 */
-const handleDelete = (index) => {
-  formData.value.splice(index, 1)
-}
-
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
-
-/** 表单值 */
-const getData = () => {
-  return formData.value
-}
-
-defineExpose({ validate, getData })
-</script>
diff --git a/src/views/infra/demo02/bak/DemoStudentAddressForm.vue b/src/views/infra/demo02/bak/DemoStudentAddressForm.vue
deleted file mode 100644
index af4cd8f1..00000000
--- a/src/views/infra/demo02/bak/DemoStudentAddressForm.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    label-width="100px"
-    v-loading="formLoading"
-  >
-    <el-form-item label="子字段 1" prop="field1">
-      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
-    </el-form-item>
-    <el-form-item label="子字段 2" prop="field2">
-      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
-    </el-form-item>
-    <el-form-item label="子字段 3" prop="field3">
-      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts">
-const props = defineProps<{
-  studentId: undefined // 学生编号
-}>()
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({})
-const formRules = reactive({
-  field1: [required]
-})
-const formRef = ref() // 表单 Ref
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  (val) => {
-    if (val) {
-      formData.value = {
-        field2: '番茄',
-        field3: '西瓜'
-      }
-    } else {
-      formData.value = {}
-    }
-  },
-  { immediate: true }
-)
-
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
-
-/** 表单值 **/
-const getData = () => {
-  return formData.value
-}
-
-defineExpose({ validate, getData })
-</script>

From 9aca49c1ffb1344f5416d793e6c9edc56179ffab Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 16 Nov 2023 23:24:03 +0800
Subject: [PATCH 68/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E4=B8=BB=E5=AD=90=E8=A1=A8=20normal?=
 =?UTF-8?q?=20=E6=A8=A1=E5=BC=8F=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo/demo03/normal/index.ts     |  53 ++++++
 .../codegen/components/GenerateInfoForm.vue   |   2 +-
 .../demo/demo03/normal/Demo03StudentForm.vue  | 153 ++++++++++++++++++
 .../normal/components/Demo03CourseForm.vue}   |  61 ++++---
 .../normal/components/Demo03GradeForm.vue     |  72 +++++++++
 .../{demo03 => demo/demo03/normal}/index.vue  | 133 +++++++++------
 .../infra/demo03/DemoStudentAddressForm.vue   |  58 -------
 .../infra/demo03/DemoStudentAddressList.vue   |  38 -----
 .../infra/demo03/DemoStudentContactList.vue   |  38 -----
 src/views/infra/demo03/DemoStudentForm.vue    | 132 ---------------
 10 files changed, 402 insertions(+), 338 deletions(-)
 create mode 100644 src/api/infra/demo/demo03/normal/index.ts
 create mode 100644 src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
 rename src/views/infra/{demo03/DemoStudentContactForm.vue => demo/demo03/normal/components/Demo03CourseForm.vue} (52%)
 create mode 100644 src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
 rename src/views/infra/{demo03 => demo/demo03/normal}/index.vue (50%)
 delete mode 100644 src/views/infra/demo03/DemoStudentAddressForm.vue
 delete mode 100644 src/views/infra/demo03/DemoStudentAddressList.vue
 delete mode 100644 src/views/infra/demo03/DemoStudentContactList.vue
 delete mode 100644 src/views/infra/demo03/DemoStudentForm.vue

diff --git a/src/api/infra/demo/demo03/normal/index.ts b/src/api/infra/demo/demo03/normal/index.ts
new file mode 100644
index 00000000..f15ee1dc
--- /dev/null
+++ b/src/api/infra/demo/demo03/normal/index.ts
@@ -0,0 +1,53 @@
+import request from '@/config/axios'
+
+export interface Demo03StudentVO {
+  id: number
+  name: string
+  sex: number
+  birthday: Date
+  description: string
+}
+
+// 查询学生分页
+export const getDemo03StudentPage = async (params) => {
+  return await request.get({ url: `/infra/demo03-student/page`, params })
+}
+
+// 查询学生详情
+export const getDemo03Student = async (id: number) => {
+  return await request.get({ url: `/infra/demo03-student/get?id=` + id })
+}
+
+// 新增学生
+export const createDemo03Student = async (data: Demo03StudentVO) => {
+  return await request.post({ url: `/infra/demo03-student/create`, data })
+}
+
+// 修改学生
+export const updateDemo03Student = async (data: Demo03StudentVO) => {
+  return await request.put({ url: `/infra/demo03-student/update`, data })
+}
+
+// 删除学生
+export const deleteDemo03Student = async (id: number) => {
+  return await request.delete({ url: `/infra/demo03-student/delete?id=` + id })
+}
+
+// 导出学生 Excel
+export const exportDemo03Student = async (params) => {
+  return await request.download({ url: `/infra/demo03-student/export-excel`, params })
+}
+
+// ==================== 子表（学生课程） ====================
+
+// 获得学生课程列表
+export const getDemo03CourseListByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId })
+}
+
+// ==================== 子表（学生班级） ====================
+
+// 获得学生班级
+export const getDemo03GradeByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId })
+}
\ No newline at end of file
diff --git a/src/views/infra/codegen/components/GenerateInfoForm.vue b/src/views/infra/codegen/components/GenerateInfoForm.vue
index a4f5ad97..d2a01cc0 100644
--- a/src/views/infra/codegen/components/GenerateInfoForm.vue
+++ b/src/views/infra/codegen/components/GenerateInfoForm.vue
@@ -183,7 +183,7 @@
     </el-row>
 
     <!-- 树表信息 -->
-    <el-row v-show="formData.templateType == 2">
+    <el-row v-if="formData.templateType == 2">
       <el-col :span="24">
         <h4 class="form-header">树表信息</h4>
       </el-col>
diff --git a/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
new file mode 100644
index 00000000..00508228
--- /dev/null
+++ b/src/views/infra/demo/demo03/normal/Demo03StudentForm.vue
@@ -0,0 +1,153 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="formData.sex">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <Editor v-model="formData.description" height="150px" />
+      </el-form-item>
+    </el-form>
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="学生课程" name="demo03Course">
+        <Demo03CourseForm ref="demo03CourseFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="学生班级" name="demo03Grade">
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+    </el-tabs>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/normal'
+import Demo03CourseForm from './components/Demo03CourseForm.vue'
+import Demo03GradeForm from './components/Demo03GradeForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course')
+const demo03CourseFormRef = ref()
+const demo03GradeFormRef = ref()
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo03StudentApi.getDemo03Student(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demo03CourseFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo03Course'
+    return
+  }
+  try {
+    await demo03GradeFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo03Grade'
+    return
+  }
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as Demo03StudentApi.Demo03StudentVO
+    // 拼接子表的数据
+    data.demo03Courses = demo03CourseFormRef.value.getData()
+    data.demo03Grade = demo03GradeFormRef.value.getData()
+    if (formType.value === 'create') {
+      await Demo03StudentApi.createDemo03Student(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo03StudentApi.updateDemo03Student(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo03/DemoStudentContactForm.vue b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
similarity index 52%
rename from src/views/infra/demo03/DemoStudentContactForm.vue
rename to src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
index 50c44263..b6f58572 100644
--- a/src/views/infra/demo03/DemoStudentContactForm.vue
+++ b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
@@ -3,23 +3,23 @@
     ref="formRef"
     :model="formData"
     :rules="formRules"
-    label-width="0px"
     v-loading="formLoading"
+    label-width="0px"
     :inline-message="true"
   >
     <el-table :data="formData" class="-mt-10px">
       <el-table-column label="序号" type="index" width="100" />
-      <el-table-column label="名字" prop="name" width="300">
-        <template #default="row">
-          <el-form-item class="mb-0px!">
+       <el-table-column label="名字" min-width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
             <el-input v-model="row.name" placeholder="请输入名字" />
           </el-form-item>
         </template>
       </el-table-column>
-      <el-table-column label="手机号码">
+      <el-table-column label="分数" min-width="150">
         <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
-            <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
+          <el-form-item :prop="`${$index}.score`" :rules="formRules.score" class="mb-0px!">
+            <el-input v-model="row.score" placeholder="请输入分数" />
           </el-form-item>
         </template>
       </el-table-column>
@@ -31,33 +31,39 @@
     </el-table>
   </el-form>
   <el-row justify="center" class="mt-3">
-    <el-button @click="handleAdd" round>+ 添加联系人</el-button>
+    <el-button @click="handleAdd" round>+ 添加学生课程</el-button>
   </el-row>
 </template>
 <script setup lang="ts">
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/normal'
+
 const props = defineProps<{
-  studentId: undefined // 学生编号
+  studentId: undefined // 学生编号（主表的关联字段）
 }>()
 const formLoading = ref(false) // 表单的加载中
 const formData = ref([])
 const formRules = reactive({
-  mobile: [required]
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  score: [{ required: true, message: '分数不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
 /** 监听主表的关联字段的变化，加载对应的子表数据 */
 watch(
   () => props.studentId,
-  (val) => {
-    if (val) {
-      formData.value = [
-        {
-          name: '芋艿',
-          mobile: '15601691300'
-        }
-      ]
-    } else {
-      formData.value = []
+  async (val) => {
+    // 1. 重置表单
+    formData.value = []
+    // 2. val 非空，则加载数据
+    if (!val) {
+      return;
+    }
+    try {
+      formLoading.value = true
+      formData.value = await Demo03StudentApi.getDemo03CourseListByStudentId(val)
+    } finally {
+      formLoading.value = false
     }
   },
   { immediate: true }
@@ -65,9 +71,14 @@ watch(
 
 /** 新增按钮操作 */
 const handleAdd = () => {
-  formData.value.push({
-    name: '土豆'
-  })
+  const row = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    score: undefined
+  }
+  row.studentId = props.studentId
+  formData.value.push(row)
 }
 
 /** 删除按钮操作 */
@@ -80,10 +91,10 @@ const validate = () => {
   return formRef.value.validate()
 }
 
-/** 表单值 **/
+/** 表单值 */
 const getData = () => {
   return formData.value
 }
 
 defineExpose({ validate, getData })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
new file mode 100644
index 00000000..12653b6c
--- /dev/null
+++ b/src/views/infra/demo/demo03/normal/components/Demo03GradeForm.vue
@@ -0,0 +1,72 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+     <el-form-item label="名字" prop="name">
+      <el-input v-model="formData.name" placeholder="请输入名字" />
+    </el-form-item>
+    <el-form-item label="班主任" prop="teacher">
+      <el-input v-model="formData.teacher" placeholder="请输入班主任" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/normal'
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    // 1. 重置表单
+    formData.value = {
+      id: undefined,
+      studentId: undefined,
+      name: undefined,
+      teacher: undefined,
+    }
+    // 2. val 非空，则加载数据
+    if (!val) {
+      return;
+    }
+    try {
+      formLoading.value = true
+      const data = await Demo03StudentApi.getDemo03GradeByStudentId(val)
+      if (!data) {
+        return
+      }
+      formData.value = data
+    } finally {
+      formLoading.value = false
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 */
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo03/index.vue b/src/views/infra/demo/demo03/normal/index.vue
similarity index 50%
rename from src/views/infra/demo03/index.vue
rename to src/views/infra/demo/demo03/normal/index.vue
index afd5cbfc..52029107 100644
--- a/src/views/infra/demo03/index.vue
+++ b/src/views/infra/demo/demo03/normal/index.vue
@@ -8,10 +8,50 @@
       :inline="true"
       label-width="68px"
     >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select
+          v-model="queryParams.sex"
+          placeholder="请选择性别"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" plain @click="openForm('create')">
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:demo03-student:create']"
+        >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
         <el-button
@@ -19,7 +59,7 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['infra:demo-student:export']"
+          v-hasPermi="['infra:demo03-student:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -29,37 +69,44 @@
 
   <!-- 列表 -->
   <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      row-key="id"
-    >
-      <el-table-column type="expand">
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="性别" align="center" prop="sex">
         <template #default="scope">
-          <!-- 子表的表单 -->
-          <el-tabs model-value="DemoStudentContact">
-            <el-tab-pane label="联系人信息" name="DemoStudentContact">
-              <DemoStudentContactList :student-id="scope.row.id" />
-            </el-tab-pane>
-            <el-tab-pane label="地址信息" name="DemoStudentAddress">
-              <DemoStudentAddressList :student-id="scope.row.id" />
-            </el-tab-pane>
-          </el-tabs>
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
         </template>
       </el-table-column>
-      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button link type="primary" @click="openForm('update', scope.row.id)">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo03-student:update']"
+          >
             编辑
           </el-button>
           <el-button
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo-student:delete']"
+            v-hasPermi="['infra:demo03-student:delete']"
           >
             删除
           </el-button>
@@ -76,27 +123,31 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <DemoStudentForm ref="formRef" @success="getList" />
+  <Demo03StudentForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentForm from './DemoStudentForm.vue'
-import DemoStudentContactList from './DemoStudentContactList.vue'
-import DemoStudentAddressList from './DemoStudentAddressList.vue'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/normal'
+import Demo03StudentForm from './Demo03StudentForm.vue'
 
-defineOptions({ name: 'InfraDemoStudent' })
+defineOptions({ name: 'Demo03Student' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
-  pageSize: 10
+  pageSize: 10,
+  name: null,
+  sex: null,
+  description: null,
+  createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
@@ -105,16 +156,9 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
   loading.value = true
   try {
-    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = [
-      {
-        id: 1
-      },
-      {
-        id: 10
-      }
-    ]
-    total.value = 10
+    const data = await Demo03StudentApi.getDemo03StudentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
@@ -134,10 +178,7 @@ const resetQuery = () => {
 
 /** 添加/修改操作 */
 const formRef = ref()
-// const demoStudentContactFormRef = ref()
 const openForm = (type: string, id?: number) => {
-  // console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
-  // demoStudentContactFormRef.value.validate()
   formRef.value.open(type, id)
 }
 
@@ -147,7 +188,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await DemoStudentApi.deleteDemoStudent(id)
+    await Demo03StudentApi.deleteDemo03Student(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -161,7 +202,7 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await DemoStudentApi.exportDemoStudent(queryParams)
+    const data = await Demo03StudentApi.exportDemo03Student(queryParams)
     download.excel(data, '学生.xls')
   } catch {
   } finally {
@@ -173,4 +214,4 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo03/DemoStudentAddressForm.vue b/src/views/infra/demo03/DemoStudentAddressForm.vue
deleted file mode 100644
index af4cd8f1..00000000
--- a/src/views/infra/demo03/DemoStudentAddressForm.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    label-width="100px"
-    v-loading="formLoading"
-  >
-    <el-form-item label="子字段 1" prop="field1">
-      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
-    </el-form-item>
-    <el-form-item label="子字段 2" prop="field2">
-      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
-    </el-form-item>
-    <el-form-item label="子字段 3" prop="field3">
-      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts">
-const props = defineProps<{
-  studentId: undefined // 学生编号
-}>()
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({})
-const formRules = reactive({
-  field1: [required]
-})
-const formRef = ref() // 表单 Ref
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  (val) => {
-    if (val) {
-      formData.value = {
-        field2: '番茄',
-        field3: '西瓜'
-      }
-    } else {
-      formData.value = {}
-    }
-  },
-  { immediate: true }
-)
-
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
-
-/** 表单值 **/
-const getData = () => {
-  return formData.value
-}
-
-defineExpose({ validate, getData })
-</script>
diff --git a/src/views/infra/demo03/DemoStudentAddressList.vue b/src/views/infra/demo03/DemoStudentAddressList.vue
deleted file mode 100644
index 2354db56..00000000
--- a/src/views/infra/demo03/DemoStudentAddressList.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="手机" align="center" prop="mobile" />
-    </el-table>
-  </ContentWrap>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  studentId: undefined // 学生编号
-}>()
-const loading = ref(true) // 列表的加载中
-const list = ref([]) // 列表的数据
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = [
-      {
-        id: props.studentId,
-        mobile: '88888'
-      }
-    ]
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
-</script>
diff --git a/src/views/infra/demo03/DemoStudentContactList.vue b/src/views/infra/demo03/DemoStudentContactList.vue
deleted file mode 100644
index 76d46116..00000000
--- a/src/views/infra/demo03/DemoStudentContactList.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="手机" align="center" prop="mobile" />
-    </el-table>
-  </ContentWrap>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  studentId: undefined // 学生编号
-}>()
-const loading = ref(true) // 列表的加载中
-const list = ref([]) // 列表的数据
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = [
-      {
-        id: props.studentId,
-        mobile: '15601691300'
-      }
-    ]
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
-</script>
diff --git a/src/views/infra/demo03/DemoStudentForm.vue b/src/views/infra/demo03/DemoStudentForm.vue
deleted file mode 100644
index fe0788c4..00000000
--- a/src/views/infra/demo03/DemoStudentForm.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="字段 1" prop="field1">
-        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
-      </el-form-item>
-      <el-form-item label="字段 2" prop="field2">
-        <el-input v-model="formData.field2" placeholder="请输入字段 2" />
-      </el-form-item>
-      <el-form-item label="字段 3" prop="field3">
-        <el-input v-model="formData.field3" placeholder="请输入字段 3" />
-      </el-form-item>
-    </el-form>
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane label="联系人信息" name="DemoStudentContact">
-        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-      <el-tab-pane label="地址信息" name="DemoStudentAddress">
-        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentContactForm from './DemoStudentContactForm.vue'
-import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined
-})
-const formRules = reactive({
-  field2: [required]
-})
-const formRef = ref() // 表单 Ref
-
-/** 子表的表单 */
-const demoStudentContactFormRef = ref()
-const demoStudentAddressFormRef = ref()
-const subTabsName = ref('DemoStudentContact')
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    // debugger
-    formLoading.value = true
-    try {
-      // formData.value = await DemoStudentApi.getDemoStudent(id)
-      formData.value = {
-        id: id,
-        field1: '1',
-        field2: '22',
-        field3: '333'
-      }
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 校验子表单
-  try {
-    await demoStudentContactFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'DemoStudentContact'
-    return
-  }
-  try {
-    await demoStudentAddressFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'DemoStudentAddress'
-    return
-  }
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
-    // 拼接子表的数据
-    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
-    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
-    if (formType.value === 'create') {
-      await DemoStudentApi.createDemoStudent(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await DemoStudentApi.updateDemoStudent(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined
-  }
-  formRef.value?.resetFields()
-}
-</script>

From 6c405ba42039fd849a387e53df0799419d7a6000 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 16 Nov 2023 23:48:20 +0800
Subject: [PATCH 69/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E4=B8=BB=E5=AD=90=E8=A1=A8=20inner?=
 =?UTF-8?q?=20=E6=A8=A1=E5=BC=8F=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo/demo03/inner/index.ts      |  53 ++++
 src/api/infra/demo11/index.ts                 |  57 ----
 src/api/infra/demo12/index.ts                 |  95 ------
 .../demo03/inner/Demo03StudentForm.vue}       | 116 ++++----
 .../inner/components/Demo03CourseForm.vue     | 100 +++++++
 .../inner/components/Demo03CourseList.vue     |  51 ++++
 .../inner/components/Demo03GradeForm.vue      |  72 +++++
 .../inner/components/Demo03GradeList.vue      |  55 ++++
 .../{demo11 => demo/demo03/inner}/index.vue   |  90 +++---
 .../infra/demo04/DemoStudentAddressForm.vue   |  58 ----
 .../infra/demo04/DemoStudentAddressList.vue   |  39 ---
 .../infra/demo04/DemoStudentContactForm.vue   |  96 ------
 .../infra/demo04/DemoStudentContactList.vue   |  70 -----
 src/views/infra/demo04/DemoStudentForm.vue    | 132 ---------
 src/views/infra/demo04/index.vue              | 184 ------------
 src/views/infra/demo11/Demo11StudentForm.vue  | 183 ------------
 .../components/Demo11StudentContactForm.vue   | 174 -----------
 .../components/Demo11StudentTeacherForm.vue   | 122 --------
 src/views/infra/demo12/Demo12StudentForm.vue  | 183 ------------
 .../components/Demo12StudentContactList.vue   | 148 ----------
 .../components/Demo12StudentTeacherForm.vue   | 155 ----------
 .../components/Demo12StudentTeacherList.vue   | 148 ----------
 src/views/infra/demo12/index.vue              | 278 ------------------
 src/views/infra/testDemo/index.vue            |   4 -
 24 files changed, 423 insertions(+), 2240 deletions(-)
 create mode 100644 src/api/infra/demo/demo03/inner/index.ts
 delete mode 100644 src/api/infra/demo11/index.ts
 delete mode 100644 src/api/infra/demo12/index.ts
 rename src/views/infra/{demo12/components/Demo12StudentContactForm.vue => demo/demo03/inner/Demo03StudentForm.vue} (61%)
 create mode 100644 src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
 create mode 100644 src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
 create mode 100644 src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
 create mode 100644 src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
 rename src/views/infra/{demo11 => demo/demo03/inner}/index.vue (73%)
 delete mode 100644 src/views/infra/demo04/DemoStudentAddressForm.vue
 delete mode 100644 src/views/infra/demo04/DemoStudentAddressList.vue
 delete mode 100644 src/views/infra/demo04/DemoStudentContactForm.vue
 delete mode 100644 src/views/infra/demo04/DemoStudentContactList.vue
 delete mode 100644 src/views/infra/demo04/DemoStudentForm.vue
 delete mode 100644 src/views/infra/demo04/index.vue
 delete mode 100644 src/views/infra/demo11/Demo11StudentForm.vue
 delete mode 100644 src/views/infra/demo11/components/Demo11StudentContactForm.vue
 delete mode 100644 src/views/infra/demo11/components/Demo11StudentTeacherForm.vue
 delete mode 100644 src/views/infra/demo12/Demo12StudentForm.vue
 delete mode 100644 src/views/infra/demo12/components/Demo12StudentContactList.vue
 delete mode 100644 src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
 delete mode 100644 src/views/infra/demo12/components/Demo12StudentTeacherList.vue
 delete mode 100644 src/views/infra/demo12/index.vue
 delete mode 100644 src/views/infra/testDemo/index.vue

diff --git a/src/api/infra/demo/demo03/inner/index.ts b/src/api/infra/demo/demo03/inner/index.ts
new file mode 100644
index 00000000..f15ee1dc
--- /dev/null
+++ b/src/api/infra/demo/demo03/inner/index.ts
@@ -0,0 +1,53 @@
+import request from '@/config/axios'
+
+export interface Demo03StudentVO {
+  id: number
+  name: string
+  sex: number
+  birthday: Date
+  description: string
+}
+
+// 查询学生分页
+export const getDemo03StudentPage = async (params) => {
+  return await request.get({ url: `/infra/demo03-student/page`, params })
+}
+
+// 查询学生详情
+export const getDemo03Student = async (id: number) => {
+  return await request.get({ url: `/infra/demo03-student/get?id=` + id })
+}
+
+// 新增学生
+export const createDemo03Student = async (data: Demo03StudentVO) => {
+  return await request.post({ url: `/infra/demo03-student/create`, data })
+}
+
+// 修改学生
+export const updateDemo03Student = async (data: Demo03StudentVO) => {
+  return await request.put({ url: `/infra/demo03-student/update`, data })
+}
+
+// 删除学生
+export const deleteDemo03Student = async (id: number) => {
+  return await request.delete({ url: `/infra/demo03-student/delete?id=` + id })
+}
+
+// 导出学生 Excel
+export const exportDemo03Student = async (params) => {
+  return await request.download({ url: `/infra/demo03-student/export-excel`, params })
+}
+
+// ==================== 子表（学生课程） ====================
+
+// 获得学生课程列表
+export const getDemo03CourseListByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-course/list-by-student-id?studentId=` + studentId })
+}
+
+// ==================== 子表（学生班级） ====================
+
+// 获得学生班级
+export const getDemo03GradeByStudentId = async (studentId) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-grade/get-by-student-id?studentId=` + studentId })
+}
\ No newline at end of file
diff --git a/src/api/infra/demo11/index.ts b/src/api/infra/demo11/index.ts
deleted file mode 100644
index 4c4c7b4e..00000000
--- a/src/api/infra/demo11/index.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import request from '@/config/axios'
-
-export interface Demo11StudentVO {
-  id: number
-  name: string
-  description: string
-  birthday: Date
-  sex: number
-  enabled: boolean
-  avatar: string
-  video: string
-  memo: string
-}
-
-// 查询学生列表
-export const getDemo11StudentPage = async (params) => {
-  return await request.get({ url: `/infra/demo11-student/page`, params })
-}
-
-// 查询学生详情
-export const getDemo11Student = async (id: number) => {
-  return await request.get({ url: `/infra/demo11-student/get?id=` + id })
-}
-
-// 新增学生
-export const createDemo11Student = async (data: Demo11StudentVO) => {
-  return await request.post({ url: `/infra/demo11-student/create`, data })
-}
-
-// 修改学生
-export const updateDemo11Student = async (data: Demo11StudentVO) => {
-  return await request.put({ url: `/infra/demo11-student/update`, data })
-}
-
-// 删除学生
-export const deleteDemo11Student = async (id: number) => {
-  return await request.delete({ url: `/infra/demo11-student/delete?id=` + id })
-}
-
-// 导出学生 Excel
-export const exportDemo11Student = async (params) => {
-  return await request.download({ url: `/infra/demo11-student/export-excel`, params })
-}
-
-// ==================== 子表（学生联系人） ====================
-
-// 获得学生联系人列表
-export const getDemo11StudentContactListByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo11-student/demo11-student/list-by-student-id?studentId=` + studentId })
-}
-
-// ==================== 子表（学生班主任） ====================
-
-// 获得学生班主任
-export const getDemo11StudentTeacherByStudentId = async (studentId) => {
-  return await request.get({ url: `/infra/demo11-student/demo11-student/get-by-student-id?studentId=` + studentId })
-}
\ No newline at end of file
diff --git a/src/api/infra/demo12/index.ts b/src/api/infra/demo12/index.ts
deleted file mode 100644
index 3f2be47e..00000000
--- a/src/api/infra/demo12/index.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import request from '@/config/axios'
-
-export interface Demo12StudentVO {
-  id: number
-  name: string
-  description: string
-  birthday: Date
-  sex: number
-  enabled: boolean
-  avatar: string
-  video: string
-  memo: string
-}
-
-// 查询学生列表
-export const getDemo12StudentPage = async (params) => {
-  return await request.get({ url: `/infra/demo12-student/page`, params })
-}
-
-// 查询学生详情
-export const getDemo12Student = async (id: number) => {
-  return await request.get({ url: `/infra/demo12-student/get?id=` + id })
-}
-
-// 新增学生
-export const createDemo12Student = async (data: Demo12StudentVO) => {
-  return await request.post({ url: `/infra/demo12-student/create`, data })
-}
-
-// 修改学生
-export const updateDemo12Student = async (data: Demo12StudentVO) => {
-  return await request.put({ url: `/infra/demo12-student/update`, data })
-}
-
-// 删除学生
-export const deleteDemo12Student = async (id: number) => {
-  return await request.delete({ url: `/infra/demo12-student/delete?id=` + id })
-}
-
-// 导出学生 Excel
-export const exportDemo12Student = async (params) => {
-  return await request.download({ url: `/infra/demo12-student/export-excel`, params })
-}
-
-// ==================== 子表（学生联系人） ====================
-
-// 获得学生联系人分页
-export const getDemo12StudentContactPage = async (params) => {
-  return await request.get({ url: `/infra/demo12-student/demo12-student-contact/page`, params })
-}
-// 新增学生联系人
-export const createDemo12StudentContact = async (data) => {
-  return await request.post({ url: `/infra/demo12-student/demo12-student-contact/create`, data })
-}
-
-// 修改学生联系人
-export const updateDemo12StudentContact = async (data) => {
-  return await request.put({ url: `/infra/demo12-student/demo12-student-contact/update`, data })
-}
-
-// 删除学生联系人
-export const deleteDemo12StudentContact = async (id: number) => {
-  return await request.delete({ url: `/infra/demo12-student/demo12-student-contact/delete?id=` + id })
-}
-
-// 获得学生联系人
-export const getDemo12StudentContact = async (id: number) => {
-  return await request.get({ url: `/infra/demo12-student/demo12-student-contact/get?id=` + id })
-}
-
-// ==================== 子表（学生班主任） ====================
-
-// 获得学生班主任分页
-export const getDemo12StudentTeacherPage = async (params) => {
-  return await request.get({ url: `/infra/demo12-student/demo12-student-teacher/page`, params })
-}
-// 新增学生班主任
-export const createDemo12StudentTeacher = async (data) => {
-  return await request.post({ url: `/infra/demo12-student/demo12-student-teacher/create`, data })
-}
-
-// 修改学生班主任
-export const updateDemo12StudentTeacher = async (data) => {
-  return await request.put({ url: `/infra/demo12-student/demo12-student-teacher/update`, data })
-}
-
-// 删除学生班主任
-export const deleteDemo12StudentTeacher = async (id: number) => {
-  return await request.delete({ url: `/infra/demo12-student/demo12-student-teacher/delete?id=` + id })
-}
-
-// 获得学生班主任
-export const getDemo12StudentTeacher = async (id: number) => {
-  return await request.get({ url: `/infra/demo12-student/demo12-student-teacher/get?id=` + id })
-}
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentContactForm.vue b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
similarity index 61%
rename from src/views/infra/demo12/components/Demo12StudentContactForm.vue
rename to src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
index e246678b..fe9327b9 100644
--- a/src/views/infra/demo12/components/Demo12StudentContactForm.vue
+++ b/src/views/infra/demo/demo03/inner/Demo03StudentForm.vue
@@ -10,8 +10,16 @@
       <el-form-item label="名字" prop="name">
         <el-input v-model="formData.name" placeholder="请输入名字" />
       </el-form-item>
-      <el-form-item label="简介" prop="description">
-        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="formData.sex">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
       </el-form-item>
       <el-form-item label="出生日期" prop="birthday">
         <el-date-picker
@@ -21,37 +29,19 @@
           placeholder="选择出生日期"
         />
       </el-form-item>
-      <el-form-item label="性别" prop="sex">
-        <el-select v-model="formData.sex" placeholder="请选择性别">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-radio-group v-model="formData.enabled">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="头像" prop="avatar">
-        <UploadImg v-model="formData.avatar" />
-      </el-form-item>
-      <el-form-item label="附件" prop="video">
-        <UploadFile v-model="formData.video" />
-      </el-form-item>
-      <el-form-item label="备注" prop="memo">
-        <Editor v-model="formData.memo" height="150px" />
+      <el-form-item label="简介" prop="description">
+        <Editor v-model="formData.description" height="150px" />
       </el-form-item>
     </el-form>
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="学生课程" name="demo03Course">
+        <Demo03CourseForm ref="demo03CourseFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="学生班级" name="demo03Grade">
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+    </el-tabs>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -59,8 +49,10 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as Demo12StudentApi from '@/api/infra/demo12'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/inner'
+import Demo03CourseForm from './components/Demo03CourseForm.vue'
+import Demo03GradeForm from './components/Demo03GradeForm.vue'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -71,40 +63,35 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
-  studentId: undefined,
   name: undefined,
-  description: undefined,
-  birthday: undefined,
   sex: undefined,
-  enabled: undefined,
-  avatar: undefined,
-  video: undefined,
-  memo: undefined
+  birthday: undefined,
+  description: undefined
 })
 const formRules = reactive({
-  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
   birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
-  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
+/** 子表的表单 */
+const subTabsName = ref('demo03Course')
+const demo03CourseFormRef = ref()
+const demo03GradeFormRef = ref()
+
 /** 打开弹窗 */
-const open = async (type: string, id?: number, studentId: number) => {
+const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
-  formData.value.studentId = studentId
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await Demo12StudentApi.getDemo12StudentContact(id)
+      formData.value = await Demo03StudentApi.getDemo03Student(id)
     } finally {
       formLoading.value = false
     }
@@ -117,15 +104,31 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demo03CourseFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo03Course'
+    return
+  }
+  try {
+    await demo03GradeFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'demo03Grade'
+    return
+  }
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value
+    const data = formData.value as unknown as Demo03StudentApi.Demo03StudentVO
+    // 拼接子表的数据
+    data.demo03Courses = demo03CourseFormRef.value.getData()
+    data.demo03Grade = demo03GradeFormRef.value.getData()
     if (formType.value === 'create') {
-      await Demo12StudentApi.createDemo12StudentContact(data)
+      await Demo03StudentApi.createDemo03Student(data)
       message.success(t('common.createSuccess'))
     } else {
-      await Demo12StudentApi.updateDemo12StudentContact(data)
+      await Demo03StudentApi.updateDemo03Student(data)
       message.success(t('common.updateSuccess'))
     }
     dialogVisible.value = false
@@ -140,15 +143,10 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    studentId: undefined,
     name: undefined,
-    description: undefined,
-    birthday: undefined,
     sex: undefined,
-    enabled: undefined,
-    avatar: undefined,
-    video: undefined,
-    memo: undefined
+    birthday: undefined,
+    description: undefined
   }
   formRef.value?.resetFields()
 }
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
new file mode 100644
index 00000000..87057513
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03CourseForm.vue
@@ -0,0 +1,100 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    v-loading="formLoading"
+    label-width="0px"
+    :inline-message="true"
+  >
+    <el-table :data="formData" class="-mt-10px">
+      <el-table-column label="序号" type="index" width="100" />
+       <el-table-column label="名字" min-width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
+            <el-input v-model="row.name" placeholder="请输入名字" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="分数" min-width="150">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.score`" :rules="formRules.score" class="mb-0px!">
+            <el-input v-model="row.score" placeholder="请输入分数" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="60">
+        <template #default="{ $index }">
+          <el-button @click="handleDelete($index)" link>—</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </el-form>
+  <el-row justify="center" class="mt-3">
+    <el-button @click="handleAdd" round>+ 添加学生课程</el-button>
+  </el-row>
+</template>
+<script setup lang="ts">
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/inner'
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  score: [{ required: true, message: '分数不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    // 1. 重置表单
+    formData.value = []
+    // 2. val 非空，则加载数据
+    if (!val) {
+      return;
+    }
+    try {
+      formLoading.value = true
+      formData.value = await Demo03StudentApi.getDemo03CourseListByStudentId(val)
+    } finally {
+      formLoading.value = false
+    }
+  },
+  { immediate: true }
+)
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  const row = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    score: undefined
+  }
+  row.studentId = props.studentId
+  formData.value.push(row)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (index) => {
+  formData.value.splice(index, 1)
+}
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 */
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue b/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
new file mode 100644
index 00000000..d912fc5d
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03CourseList.vue
@@ -0,0 +1,51 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="分数" align="center" prop="score" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+    </el-table>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/inner'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    list.value = await Demo03StudentApi.getDemo03CourseListByStudentId(props.studentId)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
new file mode 100644
index 00000000..e0eeb192
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03GradeForm.vue
@@ -0,0 +1,72 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+     <el-form-item label="名字" prop="name">
+      <el-input v-model="formData.name" placeholder="请输入名字" />
+    </el-form-item>
+    <el-form-item label="班主任" prop="teacher">
+      <el-input v-model="formData.teacher" placeholder="请输入班主任" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/inner'
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    // 1. 重置表单
+    formData.value = {
+      id: undefined,
+      studentId: undefined,
+      name: undefined,
+      teacher: undefined,
+    }
+    // 2. val 非空，则加载数据
+    if (!val) {
+      return;
+    }
+    try {
+      formLoading.value = true
+      const data = await Demo03StudentApi.getDemo03GradeByStudentId(val)
+      if (!data) {
+        return
+      }
+      formData.value = data
+    } finally {
+      formLoading.value = false
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 */
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue b/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
new file mode 100644
index 00000000..96905414
--- /dev/null
+++ b/src/views/infra/demo/demo03/inner/components/Demo03GradeList.vue
@@ -0,0 +1,55 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="班主任" align="center" prop="teacher" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+    </el-table>
+  </ContentWrap>
+</template>
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/inner'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo03StudentApi.getDemo03GradeByStudentId(props.studentId)
+    if (!data) {
+      return
+    }
+    list.value.push(data)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo11/index.vue b/src/views/infra/demo/demo03/inner/index.vue
similarity index 73%
rename from src/views/infra/demo11/index.vue
rename to src/views/infra/demo/demo03/inner/index.vue
index 36529eb9..4ce6037d 100644
--- a/src/views/infra/demo11/index.vue
+++ b/src/views/infra/demo/demo03/inner/index.vue
@@ -17,16 +17,6 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker
-          v-model="queryParams.birthday"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择出生日期"
-          clearable
-          class="!w-240px"
-        />
-      </el-form-item>
       <el-form-item label="性别" prop="sex">
         <el-select
           v-model="queryParams.sex"
@@ -42,21 +32,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-select
-          v-model="queryParams.enabled"
-          placeholder="请选择是否有效"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="创建时间" prop="createTime">
         <el-date-picker
           v-model="queryParams.createTime"
@@ -75,7 +50,7 @@
           type="primary"
           plain
           @click="openForm('create')"
-          v-hasPermi="['infra:demo11-student:create']"
+          v-hasPermi="['infra:demo03-student:create']"
         >
           <Icon icon="ep:plus" class="mr-5px" /> 新增
         </el-button>
@@ -84,7 +59,7 @@
           plain
           @click="handleExport"
           :loading="exportLoading"
-          v-hasPermi="['infra:demo11-student:export']"
+          v-hasPermi="['infra:demo03-student:export']"
         >
           <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
@@ -95,9 +70,26 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <!-- 子表的列表 -->
+      <el-table-column type="expand">
+        <template #default="scope">
+          <el-tabs model-value="demo03Course">
+            <el-tab-pane label="学生课程" name="demo03Course">
+              <Demo03CourseList :student-id="scope.row.id" />
+            </el-tab-pane>
+            <el-tab-pane label="学生班级" name="demo03Grade">
+              <Demo03GradeList :student-id="scope.row.id" />
+            </el-tab-pane>
+          </el-tabs>
+        </template>
+      </el-table-column>
       <el-table-column label="编号" align="center" prop="id" />
       <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
       <el-table-column
         label="出生日期"
         align="center"
@@ -105,19 +97,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="性别" align="center" prop="sex">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
-        </template>
-      </el-table-column>
-      <el-table-column label="是否有效" align="center" prop="enabled">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
-        </template>
-      </el-table-column>
-      <el-table-column label="头像" align="center" prop="avatar" />
-      <el-table-column label="附件" align="center" prop="video" />
-      <el-table-column label="备注" align="center" prop="memo" />
+      <el-table-column label="简介" align="center" prop="description" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -131,7 +111,7 @@
             link
             type="primary"
             @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo11-student:update']"
+            v-hasPermi="['infra:demo03-student:update']"
           >
             编辑
           </el-button>
@@ -139,7 +119,7 @@
             link
             type="danger"
             @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo11-student:delete']"
+            v-hasPermi="['infra:demo03-student:delete']"
           >
             删除
           </el-button>
@@ -156,32 +136,32 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改 -->
-  <Demo11StudentForm ref="formRef" @success="getList" />
+  <Demo03StudentForm ref="formRef" @success="getList" />
 </template>
 
 <script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
-import * as Demo11StudentApi from '@/api/infra/demo11'
-import Demo11StudentForm from './Demo11StudentForm.vue'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/inner'
+import Demo03StudentForm from './Demo03StudentForm.vue'
+import Demo03CourseList from './components/Demo03CourseList.vue'
+import Demo03GradeList from './components/Demo03GradeList.vue'
 
-defineOptions({ name: 'InfraDemo11Student' })
+defineOptions({ name: 'Demo03Student' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   name: null,
-  birthday: null,
-  birthday: [],
   sex: null,
-  enabled: null,
+  description: null,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
@@ -191,7 +171,7 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
   loading.value = true
   try {
-    const data = await Demo11StudentApi.getDemo11StudentPage(queryParams)
+    const data = await Demo03StudentApi.getDemo03StudentPage(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {
@@ -223,7 +203,7 @@ const handleDelete = async (id: number) => {
     // 删除的二次确认
     await message.delConfirm()
     // 发起删除
-    await Demo11StudentApi.deleteDemo11Student(id)
+    await Demo03StudentApi.deleteDemo03Student(id)
     message.success(t('common.delSuccess'))
     // 刷新列表
     await getList()
@@ -237,7 +217,7 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await Demo11StudentApi.exportDemo11Student(queryParams)
+    const data = await Demo03StudentApi.exportDemo03Student(queryParams)
     download.excel(data, '学生.xls')
   } catch {
   } finally {
diff --git a/src/views/infra/demo04/DemoStudentAddressForm.vue b/src/views/infra/demo04/DemoStudentAddressForm.vue
deleted file mode 100644
index af4cd8f1..00000000
--- a/src/views/infra/demo04/DemoStudentAddressForm.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    label-width="100px"
-    v-loading="formLoading"
-  >
-    <el-form-item label="子字段 1" prop="field1">
-      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
-    </el-form-item>
-    <el-form-item label="子字段 2" prop="field2">
-      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
-    </el-form-item>
-    <el-form-item label="子字段 3" prop="field3">
-      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts">
-const props = defineProps<{
-  studentId: undefined // 学生编号
-}>()
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({})
-const formRules = reactive({
-  field1: [required]
-})
-const formRef = ref() // 表单 Ref
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  (val) => {
-    if (val) {
-      formData.value = {
-        field2: '番茄',
-        field3: '西瓜'
-      }
-    } else {
-      formData.value = {}
-    }
-  },
-  { immediate: true }
-)
-
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
-
-/** 表单值 **/
-const getData = () => {
-  return formData.value
-}
-
-defineExpose({ validate, getData })
-</script>
diff --git a/src/views/infra/demo04/DemoStudentAddressList.vue b/src/views/infra/demo04/DemoStudentAddressList.vue
deleted file mode 100644
index 92143456..00000000
--- a/src/views/infra/demo04/DemoStudentAddressList.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="手机" align="center" prop="mobile" />
-    </el-table>
-  </ContentWrap>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  studentId: undefined // 学生编号
-}>()
-const loading = ref(true) // 列表的加载中
-const list = ref([]) // 列表的数据
-
-// TODO 芋艿：暂时没改
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = [
-      {
-        id: props.studentId,
-        mobile: '88888'
-      }
-    ]
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
-</script>
diff --git a/src/views/infra/demo04/DemoStudentContactForm.vue b/src/views/infra/demo04/DemoStudentContactForm.vue
deleted file mode 100644
index c8744eb0..00000000
--- a/src/views/infra/demo04/DemoStudentContactForm.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="字段 1" prop="field1">
-        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentContactForm from './DemoStudentContactForm.vue'
-import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined
-})
-const formRules = reactive({
-  field2: [required]
-})
-const formRef = ref() // 表单 Ref
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    // debugger
-    formLoading.value = true
-    try {
-      // formData.value = await DemoStudentApi.getDemoStudent(id)
-      formData.value = {
-        id: id,
-        field1: '1',
-        field2: '22',
-        field3: '333'
-      }
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
-    if (formType.value === 'create') {
-      // await DemoStudentApi.createDemoStudent(data) // TODO 芋艿：临时去掉
-      message.success(t('common.createSuccess'))
-    } else {
-      await DemoStudentApi.updateDemoStudent(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/infra/demo04/DemoStudentContactList.vue b/src/views/infra/demo04/DemoStudentContactList.vue
deleted file mode 100644
index b944c407..00000000
--- a/src/views/infra/demo04/DemoStudentContactList.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-button type="primary" plain @click="openForm('create')">
-      <Icon icon="ep:plus" class="mr-5px" /> 新增
-    </el-button>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="手机" align="center" prop="mobile" />
-    </el-table>
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <DemoStudentContactForm ref="formRef" @success="getList" />
-</template>
-
-<script setup lang="ts">
-import DemoStudentContactForm from './DemoStudentContactForm.vue'
-
-const props = defineProps<{
-  studentId: undefined // 学生编号
-}>()
-const loading = ref(false) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  studentId: undefined
-})
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  (val) => {
-    queryParams.studentId = val
-    handleQuery()
-  },
-  { immediate: false }
-)
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = [
-      {
-        id: props.studentId,
-        mobile: '15601691300'
-      }
-    ]
-    total.value = 10
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-</script>
diff --git a/src/views/infra/demo04/DemoStudentForm.vue b/src/views/infra/demo04/DemoStudentForm.vue
deleted file mode 100644
index fe0788c4..00000000
--- a/src/views/infra/demo04/DemoStudentForm.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="字段 1" prop="field1">
-        <el-input v-model="formData.field1" placeholder="请输入字段 1" />
-      </el-form-item>
-      <el-form-item label="字段 2" prop="field2">
-        <el-input v-model="formData.field2" placeholder="请输入字段 2" />
-      </el-form-item>
-      <el-form-item label="字段 3" prop="field3">
-        <el-input v-model="formData.field3" placeholder="请输入字段 3" />
-      </el-form-item>
-    </el-form>
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane label="联系人信息" name="DemoStudentContact">
-        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-      <el-tab-pane label="地址信息" name="DemoStudentAddress">
-        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentContactForm from './DemoStudentContactForm.vue'
-import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined
-})
-const formRules = reactive({
-  field2: [required]
-})
-const formRef = ref() // 表单 Ref
-
-/** 子表的表单 */
-const demoStudentContactFormRef = ref()
-const demoStudentAddressFormRef = ref()
-const subTabsName = ref('DemoStudentContact')
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    // debugger
-    formLoading.value = true
-    try {
-      // formData.value = await DemoStudentApi.getDemoStudent(id)
-      formData.value = {
-        id: id,
-        field1: '1',
-        field2: '22',
-        field3: '333'
-      }
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 校验子表单
-  try {
-    await demoStudentContactFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'DemoStudentContact'
-    return
-  }
-  try {
-    await demoStudentAddressFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'DemoStudentAddress'
-    return
-  }
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
-    // 拼接子表的数据
-    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
-    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
-    if (formType.value === 'create') {
-      await DemoStudentApi.createDemoStudent(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await DemoStudentApi.updateDemoStudent(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/infra/demo04/index.vue b/src/views/infra/demo04/index.vue
deleted file mode 100644
index 9a6b8bfe..00000000
--- a/src/views/infra/demo04/index.vue
+++ /dev/null
@@ -1,184 +0,0 @@
-<template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button type="primary" plain @click="openForm('create')">
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['infra:demo-student:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      highlight-current-row
-      @current-change="handleCurrentChange"
-    >
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button link type="primary" @click="openForm('update', scope.row.id)">
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo-student:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 子列表 -->
-  <ContentWrap>
-    <el-tabs model-value="DemoStudentContact">
-      <el-tab-pane label="联系人信息" name="DemoStudentContact">
-        <DemoStudentContactList :student-id="currentRow.id" />
-      </el-tab-pane>
-      <el-tab-pane label="地址信息" name="DemoStudentAddress">
-        <DemoStudentAddressList :student-id="currentRow.id" />
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <DemoStudentForm ref="formRef" @success="getList" />
-</template>
-
-<script setup lang="ts">
-import download from '@/utils/download'
-import * as DemoStudentApi from '@/api/infra/demo02'
-import DemoStudentForm from './DemoStudentForm.vue'
-import DemoStudentContactList from './DemoStudentContactList.vue'
-import DemoStudentAddressList from './DemoStudentAddressList.vue'
-
-defineOptions({ name: 'InfraDemoStudent' })
-
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-
-const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10
-})
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-const currentRow = ref({}) // 选中行
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = [
-      {
-        id: 1
-      },
-      {
-        id: 10
-      }
-    ]
-    total.value = 10
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-// const demoStudentContactFormRef = ref()
-const openForm = (type: string, id?: number) => {
-  // console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
-  // demoStudentContactFormRef.value.validate()
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await DemoStudentApi.deleteDemoStudent(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await DemoStudentApi.exportDemoStudent(queryParams)
-    download.excel(data, '学生.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
-/** 选中行操作 */
-const handleCurrentChange = (row) => {
-  console.log(currentRow.value, '==== currentRow.value ====')
-  console.log(row, '==== row ====')
-  currentRow.value = row
-}
-
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
-</script>
diff --git a/src/views/infra/demo11/Demo11StudentForm.vue b/src/views/infra/demo11/Demo11StudentForm.vue
deleted file mode 100644
index 39c21a2b..00000000
--- a/src/views/infra/demo11/Demo11StudentForm.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="名字" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名字" />
-      </el-form-item>
-      <el-form-item label="简介" prop="description">
-        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
-      </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker
-          v-model="formData.birthday"
-          type="date"
-          value-format="x"
-          placeholder="选择出生日期"
-        />
-      </el-form-item>
-      <el-form-item label="性别" prop="sex">
-        <el-select v-model="formData.sex" placeholder="请选择性别">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-radio-group v-model="formData.enabled">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="头像">
-        <UploadImg v-model="formData.avatar" />
-      </el-form-item>
-      <el-form-item label="附件" prop="video">
-        <UploadFile v-model="formData.video" />
-      </el-form-item>
-      <el-form-item label="备注" prop="memo">
-        <Editor v-model="formData.memo" height="150px" />
-      </el-form-item>
-    </el-form>
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane label="学生联系人" name="demo11StudentContact">
-        <Demo11StudentContactForm ref="demo11StudentContactFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-      <el-tab-pane label="学生班主任" name="demo11StudentTeacher">
-        <Demo11StudentTeacherForm ref="demo11StudentTeacherFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as Demo11StudentApi from '@/api/infra/demo11'
-import Demo11StudentContactForm from './components/Demo11StudentContactForm.vue'
-import Demo11StudentTeacherForm from './components/Demo11StudentTeacherForm.vue'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  name: undefined,
-  description: undefined,
-  birthday: undefined,
-  sex: undefined,
-  enabled: undefined,
-  avatar: undefined,
-  video: undefined,
-  memo: undefined
-})
-const formRules = reactive({
-  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
-  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 子表的表单 */
-const subTabsName = ref('demo11StudentContact')
-const demo11StudentContactFormRef = ref()
-const demo11StudentTeacherFormRef = ref()
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await Demo11StudentApi.getDemo11Student(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 校验子表单
-  try {
-    await demo11StudentContactFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demo11StudentContact'
-    return
-  }
-  try {
-    await demo11StudentTeacherFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demo11StudentTeacher'
-    return
-  }
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as Demo11StudentApi.Demo11StudentVO
-    // 拼接子表的数据
-    data.demo11StudentContacts = demo11StudentContactFormRef.value.getData()
-    data.demo11StudentTeacher = demo11StudentTeacherFormRef.value.getData()
-    if (formType.value === 'create') {
-      await Demo11StudentApi.createDemo11Student(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await Demo11StudentApi.updateDemo11Student(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: undefined,
-    description: undefined,
-    birthday: undefined,
-    sex: undefined,
-    enabled: undefined,
-    avatar: undefined,
-    video: undefined,
-    memo: undefined
-  }
-  formRef.value?.resetFields()
-}
-</script>
\ No newline at end of file
diff --git a/src/views/infra/demo11/components/Demo11StudentContactForm.vue b/src/views/infra/demo11/components/Demo11StudentContactForm.vue
deleted file mode 100644
index ba900017..00000000
--- a/src/views/infra/demo11/components/Demo11StudentContactForm.vue
+++ /dev/null
@@ -1,174 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    v-loading="formLoading"
-    label-width="0px"
-    :inline-message="true"
-  >
-    <el-table :data="formData" class="-mt-10px">
-      <el-table-column label="序号" type="index" width="100" />
-      <el-table-column label="名字" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
-            <el-input v-model="row.name" placeholder="请输入名字" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="简介" width="200">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.description`" :rules="formRules.description" class="mb-0px!">
-            <el-input v-model="row.description" type="textarea" placeholder="请输入简介" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="出生日期" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.birthday`" :rules="formRules.birthday" class="mb-0px!">
-            <el-date-picker
-              v-model="row.birthday"
-              type="date"
-              value-format="x"
-              placeholder="选择出生日期"
-            />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="性别" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.sex`" :rules="formRules.sex" class="mb-0px!">
-            <el-select v-model="row.sex" placeholder="请选择性别">
-                <el-option
-                  v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-                  :key="dict.value"
-                  :label="dict.label"
-                  :value="dict.value"
-                />
-            </el-select>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="是否有效" width="150">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.enabled`" :rules="formRules.enabled" class="mb-0px!">
-            <el-radio-group v-model="row.enabled">
-                <el-radio
-                  v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-                  :key="dict.value"
-                  :label="dict.value"
-                >
-                  {{ dict.label }}
-                </el-radio>
-            </el-radio-group>
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="头像" width="200">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.avatar`" :rules="formRules.avatar" class="mb-0px!">
-            <UploadImg v-model="row.avatar" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="附件" width="200">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.video`" :rules="formRules.video" class="mb-0px!">
-            <UploadFile v-model="row.video" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column label="备注" width="400">
-        <template #default="{ row, $index }">
-          <el-form-item :prop="`${$index}.memo`" :rules="formRules.memo" class="mb-0px!">
-            <Editor v-model="row.memo" height="150px" />
-          </el-form-item>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" fixed="right" label="操作" width="60">
-        <template #default="{ $index }">
-          <el-button @click="handleDelete($index)" link>—</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-form>
-  <el-row justify="center" class="mt-3">
-    <el-button @click="handleAdd" round>+ 添加学生联系人</el-button>
-  </el-row>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as Demo11StudentApi from '@/api/infra/demo11'
-
-const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
-}>()
-const formLoading = ref(false) // 表单的加载中
-const formData = ref([])
-const formRules = reactive({
-  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
-  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  async (val) => {
-    // 情况一：val 为空，说明是新增，则置空
-    if (!val) {
-      formData.value = []
-      return;
-    }
-    // 情况二：val 非空，说明是修改，则加载数据
-    try {
-      formLoading.value = true
-      formData.value = await Demo11StudentApi.getDemo11StudentContactListByStudentId(val)
-    } finally {
-      formLoading.value = false
-    }
-  },
-  { immediate: true }
-)
-
-/** 新增按钮操作 */
-const handleAdd = () => {
-  const row = {
-    id: undefined,
-    studentId: undefined,
-    name: undefined,
-    description: undefined,
-    birthday: undefined,
-    sex: undefined,
-    enabled: undefined,
-    avatar: undefined,
-    video: undefined,
-    memo: undefined
-  }
-  row.studentId = props.studentId
-  formData.value.push(row)
-}
-
-/** 删除按钮操作 */
-const handleDelete = (index) => {
-  formData.value.splice(index, 1)
-}
-
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
-
-/** 表单值 */
-const getData = () => {
-  return formData.value
-}
-
-defineExpose({ validate, getData })
-</script>
\ No newline at end of file
diff --git a/src/views/infra/demo11/components/Demo11StudentTeacherForm.vue b/src/views/infra/demo11/components/Demo11StudentTeacherForm.vue
deleted file mode 100644
index a8697be1..00000000
--- a/src/views/infra/demo11/components/Demo11StudentTeacherForm.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <el-form
-    ref="formRef"
-    :model="formData"
-    :rules="formRules"
-    label-width="100px"
-    v-loading="formLoading"
-  >
-    <el-form-item label="名字" prop="name">
-      <el-input v-model="formData.name" placeholder="请输入名字" />
-    </el-form-item>
-    <el-form-item label="简介" prop="description">
-      <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
-    </el-form-item>
-    <el-form-item label="出生日期" prop="birthday">
-      <el-date-picker
-        v-model="formData.birthday"
-        type="date"
-        value-format="x"
-        placeholder="选择出生日期"
-      />
-    </el-form-item>
-    <el-form-item label="性别" prop="sex">
-      <el-select v-model="formData.sex" placeholder="请选择性别">
-        <el-option
-          v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-          :key="dict.value"
-          :label="dict.label"
-          :value="dict.value"
-        />
-      </el-select>
-    </el-form-item>
-    <el-form-item label="是否有效" prop="enabled">
-      <el-radio-group v-model="formData.enabled">
-        <el-radio
-          v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-          :key="dict.value"
-          :label="dict.value"
-          >
-          {{ dict.label }}
-        </el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="头像" prop="avatar">
-      <UploadImg v-model="formData.avatar" />
-    </el-form-item>
-    <el-form-item label="附件" prop="video">
-      <UploadFile v-model="formData.video" />
-    </el-form-item>
-    <el-form-item label="备注" prop="memo">
-      <Editor v-model="formData.memo" height="150px" />
-    </el-form-item>
-  </el-form>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as Demo11StudentApi from '@/api/infra/demo11'
-
-const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
-}>()
-const formLoading = ref(false) // 表单的加载中
-const formData = ref([])
-const formRules = reactive({
-  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
-  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  async (val) => {
-    // 1. 重置表单
-    formData.value = {
-      id: undefined,
-      studentId: undefined,
-      name: undefined,
-      description: undefined,
-      birthday: undefined,
-      sex: undefined,
-      enabled: undefined,
-      avatar: undefined,
-      video: undefined,
-      memo: undefined,
-    }
-    // 2. val 非空，则加载数据
-    if (!val) {
-      return;
-    }
-    try {
-      formLoading.value = true
-      const data = await Demo11StudentApi.getDemo11StudentTeacherByStudentId(val)
-      if (!data) {
-        return
-      }
-      formData.value = data
-    } finally {
-      formLoading.value = false
-    }
-  },
-  { immediate: true }
-)
-
-/** 表单校验 */
-const validate = () => {
-  return formRef.value.validate()
-}
-
-/** 表单值 */
-const getData = () => {
-  return formData.value
-}
-
-defineExpose({ validate, getData })
-</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/Demo12StudentForm.vue b/src/views/infra/demo12/Demo12StudentForm.vue
deleted file mode 100644
index af4e2733..00000000
--- a/src/views/infra/demo12/Demo12StudentForm.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="名字" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名字" />
-      </el-form-item>
-      <el-form-item label="简介" prop="description">
-        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
-      </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker
-          v-model="formData.birthday"
-          type="date"
-          value-format="x"
-          placeholder="选择出生日期"
-        />
-      </el-form-item>
-      <el-form-item label="性别" prop="sex">
-        <el-select v-model="formData.sex" placeholder="请选择性别">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-radio-group v-model="formData.enabled">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="头像" prop="avatar">
-        <UploadImg v-model="formData.avatar" />
-      </el-form-item>
-      <el-form-item label="附件" prop="video">
-        <UploadFile v-model="formData.video" />
-      </el-form-item>
-      <el-form-item label="备注" prop="memo">
-        <Editor v-model="formData.memo" height="150px" />
-      </el-form-item>
-    </el-form>
-    <!-- 子表的表单 -->
-    <el-tabs v-model="subTabsName">
-      <el-tab-pane label="学生联系人" name="demo12StudentContact">
-        <Demo12StudentContactForm ref="demo12StudentContactFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-      <el-tab-pane label="学生班主任" name="demo12StudentTeacher">
-        <Demo12StudentTeacherForm ref="demo12StudentTeacherFormRef" :student-id="formData.id" />
-      </el-tab-pane>
-    </el-tabs>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as Demo12StudentApi from '@/api/infra/demo12'
-import Demo12StudentContactForm from './components/Demo12StudentContactForm.vue'
-import Demo12StudentTeacherForm from './components/Demo12StudentTeacherForm.vue'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  name: undefined,
-  description: undefined,
-  birthday: undefined,
-  sex: undefined,
-  enabled: undefined,
-  avatar: undefined,
-  video: undefined,
-  memo: undefined
-})
-const formRules = reactive({
-  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
-  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 子表的表单 */
-const subTabsName = ref('demo12StudentContact')
-const demo12StudentContactFormRef = ref()
-const demo12StudentTeacherFormRef = ref()
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await Demo12StudentApi.getDemo12Student(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 校验子表单
-  try {
-    await demo12StudentContactFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demo12StudentContact'
-    return
-  }
-  try {
-    await demo12StudentTeacherFormRef.value.validate()
-  } catch (e) {
-    subTabsName.value = 'demo12StudentTeacher'
-    return
-  }
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value as unknown as Demo12StudentApi.Demo12StudentVO
-    // 拼接子表的数据
-    data.demo12StudentContacts = demo12StudentContactFormRef.value.getData()
-    data.demo12StudentTeacher = demo12StudentTeacherFormRef.value.getData()
-    if (formType.value === 'create') {
-      await Demo12StudentApi.createDemo12Student(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await Demo12StudentApi.updateDemo12Student(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: undefined,
-    description: undefined,
-    birthday: undefined,
-    sex: undefined,
-    enabled: undefined,
-    avatar: undefined,
-    video: undefined,
-    memo: undefined
-  }
-  formRef.value?.resetFields()
-}
-</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentContactList.vue b/src/views/infra/demo12/components/Demo12StudentContactList.vue
deleted file mode 100644
index b9b1e717..00000000
--- a/src/views/infra/demo12/components/Demo12StudentContactList.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-button
-      type="primary"
-      plain
-      @click="openForm('create')"
-      v-hasPermi="['infra:demo12-student:create']"
-    >
-      <Icon icon="ep:plus" class="mr-5px" /> 新增
-    </el-button>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="学生编号" align="center" prop="studentId" />
-      <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="简介" align="center" prop="description" />
-      <el-table-column
-        label="出生日期"
-        align="center"
-        prop="birthday"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="性别" align="center" prop="sex">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
-        </template>
-      </el-table-column>
-      <el-table-column label="是否有效" align="center" prop="enabled">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
-        </template>
-      </el-table-column>
-      <el-table-column label="头像" align="center" prop="avatar" />
-      <el-table-column label="附件" align="center" prop="video" />
-      <el-table-column label="备注" align="center" prop="memo" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo12-student:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo12-student:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-    <!-- 表单弹窗：添加/修改 -->
-    <Demo12StudentContactForm ref="formRef" @success="getList" />
-</template>
-
-<script setup lang="ts">
-import { DICT_TYPE } from '@/utils/dict'
-import * as Demo12StudentApi from '@/api/infra/demo12'
-import Demo12StudentContactForm from './Demo12StudentContactForm.vue'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
-}>()
-const loading = ref(false) // 列表的加载中
-const list = ref([]) // 列表的数据
-const total = ref(0) // 列表的总页数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  studentId: undefined
-})
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  (val) => {
-    queryParams.studentId = val
-    handleQuery()
-  },
-  { immediate: false }
-)
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await Demo12StudentApi.getDemo12StudentContactPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  if (!props.studentId) {
-    message.error('请选择一个学生')
-    return
-  }
-  formRef.value.open(type, id, props.studentId)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await Demo12StudentApi.deleteDemo12StudentContact(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue b/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
deleted file mode 100644
index 92e2b373..00000000
--- a/src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="100px"
-      v-loading="formLoading"
-    >
-      <el-form-item label="名字" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名字" />
-      </el-form-item>
-      <el-form-item label="简介" prop="description">
-        <el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
-      </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker
-          v-model="formData.birthday"
-          type="date"
-          value-format="x"
-          placeholder="选择出生日期"
-        />
-      </el-form-item>
-      <el-form-item label="性别" prop="sex">
-        <el-select v-model="formData.sex" placeholder="请选择性别">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-radio-group v-model="formData.enabled">
-          <el-radio
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.value"
-          >
-            {{ dict.label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="头像" prop="avatar">
-        <UploadImg v-model="formData.avatar" />
-      </el-form-item>
-      <el-form-item label="附件" prop="video">
-        <UploadFile v-model="formData.video" />
-      </el-form-item>
-      <el-form-item label="备注" prop="memo">
-        <Editor v-model="formData.memo" height="150px" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import * as Demo12StudentApi from '@/api/infra/demo12'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref({
-  id: undefined,
-  studentId: undefined,
-  name: undefined,
-  description: undefined,
-  birthday: undefined,
-  sex: undefined,
-  enabled: undefined,
-  avatar: undefined,
-  video: undefined,
-  memo: undefined
-})
-const formRules = reactive({
-  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
-  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
-  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
-  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
-  sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
-  enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
-  avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
-  memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
-})
-const formRef = ref() // 表单 Ref
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number, studentId: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  formData.value.studentId = studentId
-  // 修改时，设置数据
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await Demo12StudentApi.getDemo12StudentTeacher(id)
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  await formRef.value.validate()
-  // 提交请求
-  formLoading.value = true
-  try {
-    const data = formData.value
-    if (formType.value === 'create') {
-      await Demo12StudentApi.createDemo12StudentTeacher(data)
-      message.success(t('common.createSuccess'))
-    } else {
-      await Demo12StudentApi.updateDemo12StudentTeacher(data)
-      message.success(t('common.updateSuccess'))
-    }
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    studentId: undefined,
-    name: undefined,
-    description: undefined,
-    birthday: undefined,
-    sex: undefined,
-    enabled: undefined,
-    avatar: undefined,
-    video: undefined,
-    memo: undefined
-  }
-  formRef.value?.resetFields()
-}
-</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/components/Demo12StudentTeacherList.vue b/src/views/infra/demo12/components/Demo12StudentTeacherList.vue
deleted file mode 100644
index d0594534..00000000
--- a/src/views/infra/demo12/components/Demo12StudentTeacherList.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-button
-      type="primary"
-      plain
-      @click="openForm('create')"
-      v-hasPermi="['infra:demo12-student:create']"
-    >
-      <Icon icon="ep:plus" class="mr-5px" /> 新增
-    </el-button>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="学生编号" align="center" prop="studentId" />
-      <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="简介" align="center" prop="description" />
-      <el-table-column
-        label="出生日期"
-        align="center"
-        prop="birthday"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="性别" align="center" prop="sex">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
-        </template>
-      </el-table-column>
-      <el-table-column label="是否有效" align="center" prop="enabled">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
-        </template>
-      </el-table-column>
-      <el-table-column label="头像" align="center" prop="avatar" />
-      <el-table-column label="附件" align="center" prop="video" />
-      <el-table-column label="备注" align="center" prop="memo" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo12-student:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo12-student:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-    <!-- 表单弹窗：添加/修改 -->
-    <Demo12StudentTeacherForm ref="formRef" @success="getList" />
-</template>
-
-<script setup lang="ts">
-import { DICT_TYPE } from '@/utils/dict'
-import * as Demo12StudentApi from '@/api/infra/demo12'
-import Demo12StudentTeacherForm from './Demo12StudentTeacherForm.vue'
-
-const { t } = useI18n() // 国际化
-const message = useMessage() // 消息弹窗
-
-const props = defineProps<{
-  studentId: undefined // 学生编号（主表的关联字段）
-}>()
-const loading = ref(false) // 列表的加载中
-const list = ref([]) // 列表的数据
-const total = ref(0) // 列表的总页数
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  studentId: undefined
-})
-
-/** 监听主表的关联字段的变化，加载对应的子表数据 */
-watch(
-  () => props.studentId,
-  (val) => {
-    queryParams.studentId = val
-    handleQuery()
-  },
-  { immediate: false }
-)
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await Demo12StudentApi.getDemo12StudentTeacherPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  if (!props.studentId) {
-    message.error('请选择一个学生')
-    return
-  }
-  formRef.value.open(type, id, props.studentId)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await Demo12StudentApi.deleteDemo12StudentTeacher(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-</script>
\ No newline at end of file
diff --git a/src/views/infra/demo12/index.vue b/src/views/infra/demo12/index.vue
deleted file mode 100644
index 47ec7f21..00000000
--- a/src/views/infra/demo12/index.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="名字" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入名字"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="出生日期" prop="birthday">
-        <el-date-picker
-          v-model="queryParams.birthday"
-          value-format="YYYY-MM-DD"
-          type="date"
-          placeholder="选择出生日期"
-          clearable
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="性别" prop="sex">
-        <el-select
-          v-model="queryParams.sex"
-          placeholder="请选择性别"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="是否有效" prop="enabled">
-        <el-select
-          v-model="queryParams.enabled"
-          placeholder="请选择是否有效"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['infra:demo12-student:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['infra:demo12-student:export']"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      highlight-current-row
-      @current-change="handleCurrentChange"
-    >
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名字" align="center" prop="name" />
-      <el-table-column label="简介" align="center" prop="description" />
-      <el-table-column
-        label="出生日期"
-        align="center"
-        prop="birthday"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="性别" align="center" prop="sex">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
-        </template>
-      </el-table-column>
-      <el-table-column label="是否有效" align="center" prop="enabled">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.enabled" />
-        </template>
-      </el-table-column>
-      <el-table-column label="头像" align="center" prop="avatar" />
-      <el-table-column label="附件" align="center" prop="video" />
-      <el-table-column label="备注" align="center" prop="memo" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo12-student:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['infra:demo12-student:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改 -->
-  <Demo12StudentForm ref="formRef" @success="getList" />
-  <!-- 子表的列表 -->
-  <ContentWrap>
-    <el-tabs model-value="demo12StudentContact">
-      <el-tab-pane label="学生联系人" name="demo12StudentContact">
-        <Demo12StudentContactList :student-id="currentRow.id" />
-      </el-tab-pane>
-      <el-tab-pane label="学生班主任" name="demo12StudentTeacher">
-        <Demo12StudentTeacherList :student-id="currentRow.id" />
-      </el-tab-pane>
-    </el-tabs>
-  </ContentWrap>
-</template>
-
-<script setup lang="ts">
-import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
-import * as Demo12StudentApi from '@/api/infra/demo12'
-import Demo12StudentForm from './Demo12StudentForm.vue'
-import Demo12StudentContactList from './components/Demo12StudentContactList.vue'
-import Demo12StudentTeacherList from './components/Demo12StudentTeacherList.vue'
-
-defineOptions({ name: 'InfraDemo12Student' })
-
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-
-const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  name: null,
-  birthday: null,
-  birthday: [],
-  sex: null,
-  enabled: null,
-  createTime: []
-})
-const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await Demo12StudentApi.getDemo12StudentPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await Demo12StudentApi.deleteDemo12Student(id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 导出按钮操作 */
-const handleExport = async () => {
-  try {
-    // 导出的二次确认
-    await message.exportConfirm()
-    // 发起导出
-    exportLoading.value = true
-    const data = await Demo12StudentApi.exportDemo12Student(queryParams)
-    download.excel(data, '学生.xls')
-  } catch {
-  } finally {
-    exportLoading.value = false
-  }
-}
-
-/** 选中行操作 */
-const currentRow = ref({}) // 选中行
-const handleCurrentChange = (row) => {
-  currentRow.value = row
-}
-
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
-</script>
\ No newline at end of file
diff --git a/src/views/infra/testDemo/index.vue b/src/views/infra/testDemo/index.vue
deleted file mode 100644
index ca6a5b07..00000000
--- a/src/views/infra/testDemo/index.vue
+++ /dev/null
@@ -1,4 +0,0 @@
-<template>
-  <div>index</div>
-</template>
-<script lang="ts" setup></script>

From b4a177258467e3a08c33524e50c80b46eaca5215 Mon Sep 17 00:00:00 2001
From: owen <owen@evolsun.com>
Date: Fri, 17 Nov 2023 10:14:26 +0800
Subject: [PATCH 70/77] =?UTF-8?q?=E8=90=A5=E9=94=80=EF=BC=9A=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=E5=95=86=E5=9F=8E=E8=A3=85=E4=BF=AE=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=90=E5=95=86=E5=93=81=E5=8D=A1=E7=89=87=E3=80=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/MagicCube/config.ts     |   2 +-
 .../components/mobile/ProductCard/config.ts   |  97 ++++++++++
 .../components/mobile/ProductCard/index.vue   | 165 ++++++++++++++++++
 .../mobile/ProductCard/property.vue           | 149 ++++++++++++++++
 .../product/spu/components/SpuShowcase.vue    | 126 +++++++++++++
 5 files changed, 538 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DiyEditor/components/mobile/ProductCard/config.ts
 create mode 100644 src/components/DiyEditor/components/mobile/ProductCard/index.vue
 create mode 100644 src/components/DiyEditor/components/mobile/ProductCard/property.vue
 create mode 100644 src/views/mall/product/spu/components/SpuShowcase.vue

diff --git a/src/components/DiyEditor/components/mobile/MagicCube/config.ts b/src/components/DiyEditor/components/mobile/MagicCube/config.ts
index ce5d21a3..bd3120bb 100644
--- a/src/components/DiyEditor/components/mobile/MagicCube/config.ts
+++ b/src/components/DiyEditor/components/mobile/MagicCube/config.ts
@@ -33,7 +33,7 @@ export interface MagicCubeItemProperty {
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',
-  icon: 'fluent:puzzle-cube-piece-20-filled',
+  icon: 'bi:columns',
   property: {
     borderRadiusTop: 0,
     borderRadiusBottom: 0,
diff --git a/src/components/DiyEditor/components/mobile/ProductCard/config.ts b/src/components/DiyEditor/components/mobile/ProductCard/config.ts
new file mode 100644
index 00000000..49dd30d0
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ProductCard/config.ts
@@ -0,0 +1,97 @@
+import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
+
+/** 商品卡片属性 */
+export interface ProductCardProperty {
+  // 布局类型：单列大图 | 单列小图 | 双列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: ProductCardFieldProperty
+    // 商品简介
+    introduction: ProductCardFieldProperty
+    // 商品价格
+    price: ProductCardFieldProperty
+    // 商品市场价
+    marketPrice: ProductCardFieldProperty
+    // 商品销量
+    salesCount: ProductCardFieldProperty
+    // 商品库存
+    stock: ProductCardFieldProperty
+  }
+  // 角标
+  badge: {
+    // 是否显示
+    show: boolean
+    // 角标图片
+    imgUrl: string
+  }
+  // 按钮
+  btnBuy: {
+    // 类型：文字 | 图片
+    type: 'text' | 'img'
+    // 文字
+    text: string
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string
+    // 图片按钮：图片地址
+    imgUrl: string
+  }
+  // 上圆角
+  borderRadiusTop: number
+  // 下圆角
+  borderRadiusBottom: number
+  // 间距
+  space: number
+  // 商品编号列表
+  spuIds: number[]
+  // 组件样式
+  style: ComponentStyle
+}
+// 商品字段
+export interface ProductCardFieldProperty {
+  // 是否显示
+  show: boolean
+  // 颜色
+  color: string
+}
+
+// 定义组件
+export const component = {
+  id: 'ProductCard',
+  name: '商品卡片',
+  icon: 'system-uicons:carousel',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' }
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即购买',
+      // todo: @owen 根据主题色配置
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: ''
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    spuIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8
+    } as ComponentStyle
+  }
+} as DiyComponent<ProductCardProperty>
diff --git a/src/components/DiyEditor/components/mobile/ProductCard/index.vue b/src/components/DiyEditor/components/mobile/ProductCard/index.vue
new file mode 100644
index 00000000..a6894ed9
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ProductCard/index.vue
@@ -0,0 +1,165 @@
+<template>
+  <div :class="`box-content min-h-30px w-full flex flex-row flex-wrap`" ref="containerRef">
+    <div
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`
+      }"
+      v-for="(spu, index) in spuList"
+      :key="index"
+    >
+      <!-- 角标 -->
+      <div v-if="property.badge.show" class="absolute left-0 top-0 z-1 items-center justify-center">
+        <el-image fit="cover" :src="property.badge.imgUrl" class="h-26px w-38px" />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        :class="[
+          'h-140px',
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-140px': property.layoutType === 'oneColSmallImg'
+          }
+        ]"
+      >
+        <el-image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+      </div>
+      <div
+        :class="[
+          ' flex flex-col gap-8px p-8px box-border',
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]': property.layoutType === 'oneColSmallImg'
+          }
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          :class="[
+            'text-14px ',
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'overflow-ellipsis line-clamp-2': property.layoutType === 'oneColSmallImg'
+            }
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          class="truncate text-12px"
+          :style="{ color: property.fields.introduction.color }"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 价格 -->
+          <span
+            v-if="property.fields.price.show"
+            class="text-16px"
+            :style="{ color: property.fields.price.color }"
+          >
+            ￥{{ spu.price }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-4px text-10px line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+            >￥{{ spu.marketPrice }}</span
+          >
+        </div>
+        <div class="text-12px">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span v-if="property.fields.stock.show" :style="{ color: property.fields.stock.color }">
+            库存{{ spu.stock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-8px right-8px">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          class="rounded-full p-x-12px p-y-4px text-12px text-white"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`
+          }"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <el-image
+          v-else
+          class="h-28px w-28px rounded-full"
+          fit="cover"
+          :src="property.btnBuy.imgUrl"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ProductCardProperty } from './config'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+
+/** 商品卡片 */
+defineOptions({ name: 'ProductCard' })
+// 定义属性
+const props = defineProps<{ property: ProductCardProperty }>()
+// 商品列表
+const spuList = ref<ProductSpuApi.Spu[]>([])
+watch(
+  () => props.property.spuIds,
+  async () => {
+    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+/**
+ * 计算商品的间距
+ * @param index 商品索引
+ */
+const calculateSpace = (index: number) => {
+  // 商品的列数
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1
+  // 第一列没有左边距
+  const marginLeft = index % columns === 0 ? '0' : props.property.space + 'px'
+  // 第一行没有上边距
+  const marginTop = index < columns ? '0' : props.property.space + 'px'
+
+  return { marginLeft, marginTop }
+}
+
+// 容器
+const containerRef = ref()
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%'
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`
+  }
+  return { width }
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/components/DiyEditor/components/mobile/ProductCard/property.vue b/src/components/DiyEditor/components/mobile/ProductCard/property.vue
new file mode 100644
index 00000000..cfa5008b
--- /dev/null
+++ b/src/components/DiyEditor/components/mobile/ProductCard/property.vue
@@ -0,0 +1,149 @@
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <el-form label-width="80px" :model="formData">
+      <el-card header="商品列表" class="property-group" shadow="never">
+        <SpuShowcase v-model="formData.spuIds" />
+      </el-card>
+      <el-card header="商品样式" class="property-group" shadow="never">
+        <el-form-item label="布局" prop="type">
+          <el-radio-group v-model="formData.layoutType">
+            <el-tooltip class="item" content="单列大图" placement="bottom">
+              <el-radio-button label="oneColBigImg">
+                <Icon icon="fluent:text-column-one-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="单列小图" placement="bottom">
+              <el-radio-button label="oneColSmallImg">
+                <Icon icon="fluent:text-column-two-left-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+            <el-tooltip class="item" content="双列" placement="bottom">
+              <el-radio-button label="twoCol">
+                <Icon icon="fluent:text-column-two-24-filled" />
+              </el-radio-button>
+            </el-tooltip>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="商品名称" prop="fields.name.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.name.color" />
+            <el-checkbox v-model="formData.fields.name.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品简介" prop="fields.introduction.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <el-checkbox v-model="formData.fields.introduction.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品价格" prop="fields.price.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.price.color" />
+            <el-checkbox v-model="formData.fields.price.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="市场价" prop="fields.marketPrice.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <el-checkbox v-model="formData.fields.marketPrice.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品销量" prop="fields.salesCount.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <el-checkbox v-model="formData.fields.salesCount.show" />
+          </div>
+        </el-form-item>
+        <el-form-item label="商品库存" prop="fields.stock.show">
+          <div class="flex gap-8px">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <el-checkbox v-model="formData.fields.stock.show" />
+          </div>
+        </el-form-item>
+      </el-card>
+      <el-card header="角标" class="property-group" shadow="never">
+        <el-form-item label="角标" prop="badge.show">
+          <el-switch v-model="formData.badge.show" />
+        </el-form-item>
+        <el-form-item label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <template #tip> 建议尺寸：36 * 22 </template>
+          </UploadImg>
+        </el-form-item>
+      </el-card>
+      <el-card header="按钮" class="property-group" shadow="never">
+        <el-form-item label="按钮类型" prop="btnBuy.type">
+          <el-radio-group v-model="formData.btnBuy.type">
+            <el-radio-button label="text">文字</el-radio-button>
+            <el-radio-button label="img">图片</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <el-form-item label="按钮文字" prop="btnBuy.text">
+            <el-input v-model="formData.btnBuy.text" />
+          </el-form-item>
+          <el-form-item label="左侧背景" prop="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </el-form-item>
+          <el-form-item label="右侧背景" prop="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </el-form-item>
+        </template>
+        <template v-else>
+          <el-form-item label="图片" prop="btnBuy.imgUrl">
+            <UploadImg v-model="formData.btnBuy.imgUrl" height="56px" width="56px">
+              <template #tip> 建议尺寸：56 * 56 </template>
+            </UploadImg>
+          </el-form-item>
+        </template>
+      </el-card>
+      <el-card header="商品样式" class="property-group" shadow="never">
+        <el-form-item label="上圆角" prop="borderRadiusTop">
+          <el-slider
+            v-model="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </el-form-item>
+        <el-form-item label="下圆角" prop="borderRadiusBottom">
+          <el-slider
+            v-model="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </el-form-item>
+        <el-form-item label="间隔" prop="space">
+          <el-slider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </el-form-item>
+      </el-card>
+    </el-form>
+  </ComponentContainerProperty>
+</template>
+
+<script setup lang="ts">
+import { ProductCardProperty } from './config'
+import { usePropertyForm } from '@/components/DiyEditor/util'
+import SpuShowcase from '@/views/mall/product/spu/components/SpuShowcase.vue'
+
+// 商品卡片属性面板
+defineOptions({ name: 'ProductCardProperty' })
+
+const props = defineProps<{ modelValue: ProductCardProperty }>()
+const emit = defineEmits(['update:modelValue'])
+const { formData } = usePropertyForm(props.modelValue, emit)
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/mall/product/spu/components/SpuShowcase.vue b/src/views/mall/product/spu/components/SpuShowcase.vue
new file mode 100644
index 00000000..a3f16fba
--- /dev/null
+++ b/src/views/mall/product/spu/components/SpuShowcase.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="flex flex-wrap items-center gap-8px">
+    <div v-for="(spu, index) in productSpus" :key="spu.id" class="select-box spu-pic">
+      <el-tooltip :content="spu.name">
+        <div class="relative h-full w-full">
+          <el-image :src="spu.picUrl" class="h-full w-full" />
+          <Icon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveSpu(index)"
+          />
+        </div>
+      </el-tooltip>
+    </div>
+    <el-tooltip content="选择商品">
+      <div
+        v-show="!disabled"
+        v-if="!limit || limit <= productSpus.length"
+        class="select-box"
+        @click="openSpuTableSelect"
+      >
+        <Icon icon="ep:plus" />
+      </div>
+    </el-tooltip>
+  </div>
+  <!-- 商品选择对话框（表格形式） -->
+  <SpuTableSelect ref="spuTableSelectRef" multiple @change="handleSpuSelected" />
+</template>
+<script lang="ts" setup>
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import SpuTableSelect from '@/views/mall/product/spu/components/SpuTableSelect.vue'
+import { propTypes } from '@/utils/propTypes'
+import { array } from 'vue-types'
+
+// 商品橱窗，一般用于与商品建立关系时使用
+// 提供功能：展示商品列表、添加商品、移除商品
+defineOptions({ name: 'SpuShowcase' })
+
+const props = defineProps({
+  modelValue: array<number>().def([]).isRequired,
+  // 限制数量：默认不限制
+  limit: propTypes.number.def(0),
+  disabled: propTypes.bool.def(false)
+})
+
+// 商品列表
+const productSpus = ref<ProductSpuApi.Spu[]>([])
+
+watch(
+  () => props.modelValue,
+  async () => {
+    if (props.modelValue.length === 0) {
+      productSpus.value = []
+      return
+    }
+    // 只有商品发生变化之后，才去查询商品
+    if (
+      productSpus.value.length === 0 ||
+      productSpus.value.some((spu) => !props.modelValue.includes(spu.id))
+    ) {
+      debugger
+      productSpus.value = await ProductSpuApi.getSpuDetailList(props.modelValue)
+    }
+  },
+  { immediate: true }
+)
+
+/** 商品表格选择对话框 */
+const spuTableSelectRef = ref()
+// 打开对话框
+const openSpuTableSelect = () => {
+  spuTableSelectRef.value.open(productSpus.value)
+}
+
+/**
+ * 选择商品后触发
+ * @param spus 选中的商品列表
+ */
+const handleSpuSelected = (spus: ProductSpuApi.Spu[]) => {
+  productSpus.value = spus
+  emitSpuChange()
+}
+
+/**
+ * 删除商品
+ * @param index 商品索引
+ */
+const handleRemoveSpu = (index: number) => {
+  productSpus.value.splice(index, 1)
+  emitSpuChange()
+}
+const emit = defineEmits(['update:modelValue', 'change'])
+const emitSpuChange = () => {
+  emit(
+    'update:modelValue',
+    productSpus.value.map((spu) => spu.id)
+  )
+  emit('change', productSpus.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>

From 68f6683e52f586f3e0ba166025c47ae68de83f7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=A3=E5=8F=A3=E5=8F=A3?= <17975121@qq.com>
Date: Fri, 17 Nov 2023 05:17:17 +0000
Subject: [PATCH 71/77] =?UTF-8?q?update=20src/views/Profile/components/Use?=
 =?UTF-8?q?rSocial.vue.=20=E5=9C=A8=E8=BF=99=E9=87=8C=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=EF=BC=8C=E7=BB=91=E5=AE=9A=E6=88=90=E5=8A=9F=E5=90=8E=EF=BC=8C?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E9=87=8D=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 口口口 <17975121@qq.com>
---
 src/views/Profile/components/UserSocial.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/Profile/components/UserSocial.vue b/src/views/Profile/components/UserSocial.vue
index 7746f510..b7f955be 100644
--- a/src/views/Profile/components/UserSocial.vue
+++ b/src/views/Profile/components/UserSocial.vue
@@ -66,7 +66,6 @@ const bindSocial = () => {
   socialBind(type, code, state).then(() => {
     message.success('绑定成功')
     emit('update:activeName', 'userSocial')
-    initSocial()
   })
 }
 

From a42d0695fec0e2831c5b3b09593c93059ce67703 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 17 Nov 2023 13:21:17 +0800
Subject: [PATCH 72/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E4=B8=BB=E5=AD=90=E8=A1=A8=20erp=20?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/infra/demo/demo03/erp/index.ts        |  91 +++++++
 .../demo/demo03/erp/Demo03StudentForm.vue     | 121 +++++++++
 .../erp/components/Demo03CourseForm.vue       |  99 +++++++
 .../erp/components/Demo03CourseList.vue       | 126 +++++++++
 .../demo03/erp/components/Demo03GradeForm.vue |  99 +++++++
 .../demo03/erp/components/Demo03GradeList.vue | 126 +++++++++
 src/views/infra/demo/demo03/erp/index.vue     | 243 ++++++++++++++++++
 7 files changed, 905 insertions(+)
 create mode 100644 src/api/infra/demo/demo03/erp/index.ts
 create mode 100644 src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
 create mode 100644 src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
 create mode 100644 src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
 create mode 100644 src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
 create mode 100644 src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
 create mode 100644 src/views/infra/demo/demo03/erp/index.vue

diff --git a/src/api/infra/demo/demo03/erp/index.ts b/src/api/infra/demo/demo03/erp/index.ts
new file mode 100644
index 00000000..d408b630
--- /dev/null
+++ b/src/api/infra/demo/demo03/erp/index.ts
@@ -0,0 +1,91 @@
+import request from '@/config/axios'
+
+export interface Demo03StudentVO {
+  id: number
+  name: string
+  sex: number
+  birthday: Date
+  description: string
+}
+
+// 查询学生分页
+export const getDemo03StudentPage = async (params) => {
+  return await request.get({ url: `/infra/demo03-student/page`, params })
+}
+
+// 查询学生详情
+export const getDemo03Student = async (id: number) => {
+  return await request.get({ url: `/infra/demo03-student/get?id=` + id })
+}
+
+// 新增学生
+export const createDemo03Student = async (data: Demo03StudentVO) => {
+  return await request.post({ url: `/infra/demo03-student/create`, data })
+}
+
+// 修改学生
+export const updateDemo03Student = async (data: Demo03StudentVO) => {
+  return await request.put({ url: `/infra/demo03-student/update`, data })
+}
+
+// 删除学生
+export const deleteDemo03Student = async (id: number) => {
+  return await request.delete({ url: `/infra/demo03-student/delete?id=` + id })
+}
+
+// 导出学生 Excel
+export const exportDemo03Student = async (params) => {
+  return await request.download({ url: `/infra/demo03-student/export-excel`, params })
+}
+
+// ==================== 子表（学生课程） ====================
+
+// 获得学生课程分页
+export const getDemo03CoursePage = async (params) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-course/page`, params })
+}
+// 新增学生课程
+export const createDemo03Course = async (data) => {
+  return await request.post({ url: `/infra/demo03-student/demo03-course/create`, data })
+}
+
+// 修改学生课程
+export const updateDemo03Course = async (data) => {
+  return await request.put({ url: `/infra/demo03-student/demo03-course/update`, data })
+}
+
+// 删除学生课程
+export const deleteDemo03Course = async (id: number) => {
+  return await request.delete({ url: `/infra/demo03-student/demo03-course/delete?id=` + id })
+}
+
+// 获得学生课程
+export const getDemo03Course = async (id: number) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-course/get?id=` + id })
+}
+
+// ==================== 子表（学生班级） ====================
+
+// 获得学生班级分页
+export const getDemo03GradePage = async (params) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-grade/page`, params })
+}
+// 新增学生班级
+export const createDemo03Grade = async (data) => {
+  return await request.post({ url: `/infra/demo03-student/demo03-grade/create`, data })
+}
+
+// 修改学生班级
+export const updateDemo03Grade = async (data) => {
+  return await request.put({ url: `/infra/demo03-student/demo03-grade/update`, data })
+}
+
+// 删除学生班级
+export const deleteDemo03Grade = async (id: number) => {
+  return await request.delete({ url: `/infra/demo03-student/demo03-grade/delete?id=` + id })
+}
+
+// 获得学生班级
+export const getDemo03Grade = async (id: number) => {
+  return await request.get({ url: `/infra/demo03-student/demo03-grade/get?id=` + id })
+}
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
new file mode 100644
index 00000000..29f1370d
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/Demo03StudentForm.vue
@@ -0,0 +1,121 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-radio-group v-model="formData.sex">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="出生日期" prop="birthday">
+        <el-date-picker
+          v-model="formData.birthday"
+          type="date"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </el-form-item>
+      <el-form-item label="简介" prop="description">
+        <Editor v-model="formData.description" height="150px" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo03StudentApi.getDemo03Student(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as Demo03StudentApi.Demo03StudentVO
+    if (formType.value === 'create') {
+      await Demo03StudentApi.createDemo03Student(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo03StudentApi.updateDemo03Student(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
new file mode 100644
index 00000000..de1c06de
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseForm.vue
@@ -0,0 +1,99 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="分数" prop="score">
+        <el-input v-model="formData.score" placeholder="请输入分数" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  score: undefined
+})
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  score: [{ required: true, message: '分数不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, studentId: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  formData.value.studentId = studentId
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo03StudentApi.getDemo03Course(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value === 'create') {
+      await Demo03StudentApi.createDemo03Course(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo03StudentApi.updateDemo03Course(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    score: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
new file mode 100644
index 00000000..7e06ee64
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03CourseList.vue
@@ -0,0 +1,126 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-button
+      type="primary"
+      plain
+      @click="openForm('create')"
+      v-hasPermi="['infra:demo03-student:create']"
+    >
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+       <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="分数" align="center" prop="score" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo03-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo03-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+    <!-- 表单弹窗：添加/修改 -->
+    <Demo03CourseForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
+import Demo03CourseForm from './Demo03CourseForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    queryParams.studentId = val
+    handleQuery()
+  },
+  { immediate: false }
+)
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo03StudentApi.getDemo03CoursePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  if (!props.studentId) {
+    message.error('请选择一个学生')
+    return
+  }
+  formRef.value.open(type, id, props.studentId)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo03StudentApi.deleteDemo03Course(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
new file mode 100644
index 00000000..abba0032
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeForm.vue
@@ -0,0 +1,99 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名字" />
+      </el-form-item>
+      <el-form-item label="班主任" prop="teacher">
+        <el-input v-model="formData.teacher" placeholder="请输入班主任" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined
+})
+const formRules = reactive({
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number, studentId: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  formData.value.studentId = studentId
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await Demo03StudentApi.getDemo03Grade(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    if (formType.value === 'create') {
+      await Demo03StudentApi.createDemo03Grade(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await Demo03StudentApi.updateDemo03Grade(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    teacher: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
new file mode 100644
index 00000000..b12f1889
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/components/Demo03GradeList.vue
@@ -0,0 +1,126 @@
+<template>
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-button
+      type="primary"
+      plain
+      @click="openForm('create')"
+      v-hasPermi="['infra:demo03-student:create']"
+    >
+      <Icon icon="ep:plus" class="mr-5px" /> 新增
+    </el-button>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+       <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="班主任" align="center" prop="teacher" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo03-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo03-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+    <!-- 表单弹窗：添加/修改 -->
+    <Demo03GradeForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { dateFormatter } from '@/utils/formatTime'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
+import Demo03GradeForm from './Demo03GradeForm.vue'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const props = defineProps<{
+  studentId: undefined // 学生编号（主表的关联字段）
+}>()
+const loading = ref(false) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined
+})
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    queryParams.studentId = val
+    handleQuery()
+  },
+  { immediate: false }
+)
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo03StudentApi.getDemo03GradePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  if (!props.studentId) {
+    message.error('请选择一个学生')
+    return
+  }
+  formRef.value.open(type, id, props.studentId)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo03StudentApi.deleteDemo03Grade(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+</script>
\ No newline at end of file
diff --git a/src/views/infra/demo/demo03/erp/index.vue b/src/views/infra/demo/demo03/erp/index.vue
new file mode 100644
index 00000000..8fdc7b42
--- /dev/null
+++ b/src/views/infra/demo/demo03/erp/index.vue
@@ -0,0 +1,243 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="名字" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名字"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select
+          v-model="queryParams.sex"
+          placeholder="请选择性别"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['infra:demo03-student:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['infra:demo03-student:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      highlight-current-row
+      @current-change="handleCurrentChange"
+    >
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="名字" align="center" prop="name" />
+      <el-table-column label="性别" align="center" prop="sex">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="出生日期"
+        align="center"
+        prop="birthday"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="简介" align="center" prop="description" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['infra:demo03-student:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['infra:demo03-student:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <Demo03StudentForm ref="formRef" @success="getList" />
+  <!-- 子表的列表 -->
+  <ContentWrap>
+    <el-tabs model-value="demo03Course">
+      <el-tab-pane label="学生课程" name="demo03Course">
+        <Demo03CourseList :student-id="currentRow.id" />
+      </el-tab-pane>
+      <el-tab-pane label="学生班级" name="demo03Grade">
+        <Demo03GradeList :student-id="currentRow.id" />
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import * as Demo03StudentApi from '@/api/infra/demo/demo03/erp'
+import Demo03StudentForm from './Demo03StudentForm.vue'
+import Demo03CourseList from './components/Demo03CourseList.vue'
+import Demo03GradeList from './components/Demo03GradeList.vue'
+
+defineOptions({ name: 'Demo03Student' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  sex: null,
+  description: null,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await Demo03StudentApi.getDemo03StudentPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await Demo03StudentApi.deleteDemo03Student(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await Demo03StudentApi.exportDemo03Student(queryParams)
+    download.excel(data, '学生.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 选中行操作 */
+const currentRow = ref({}) // 选中行
+const handleCurrentChange = (row) => {
+  currentRow.value = row
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file

From 652698b871304ae9673f4573cf00654043d6ee16 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 18 Nov 2023 18:00:19 +0800
Subject: [PATCH 73/77] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=94=9F=E6=88=90?=
 =?UTF-8?q?=EF=BC=9A=E5=A2=9E=E5=8A=A0=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/infra/codegen/index.vue            |  4 +++-
 src/views/infra/demo/demo01/index.vue        | 11 ++++-------
 src/views/infra/demo/demo02/index.vue        |  4 +++-
 src/views/infra/demo/demo03/erp/index.vue    | 11 ++++-------
 src/views/infra/demo/demo03/inner/index.vue  | 11 ++++-------
 src/views/infra/demo/demo03/normal/index.vue | 11 ++++-------
 6 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/views/infra/codegen/index.vue b/src/views/infra/codegen/index.vue
index e06281c7..69c3d125 100644
--- a/src/views/infra/codegen/index.vue
+++ b/src/views/infra/codegen/index.vue
@@ -1,5 +1,7 @@
 <template>
-  <doc-alert title="代码生成" url="https://doc.iocoder.cn/new-feature/" />
+  <doc-alert title="代码生成（单表）" url="https://doc.iocoder.cn/new-feature/" />
+  <doc-alert title="代码生成（树表）" url="https://doc.iocoder.cn/new-feature/tree/" />
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
   <doc-alert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
 
   <!-- 搜索 -->
diff --git a/src/views/infra/demo/demo01/index.vue b/src/views/infra/demo/demo01/index.vue
index 55751e1b..e111ab63 100644
--- a/src/views/infra/demo/demo01/index.vue
+++ b/src/views/infra/demo/demo01/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="代码生成（单表）" url="https://doc.iocoder.cn/new-feature/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -18,12 +20,7 @@
         />
       </el-form-item>
       <el-form-item label="性别" prop="sex">
-        <el-select
-          v-model="queryParams.sex"
-          placeholder="请选择性别"
-          clearable
-          class="!w-240px"
-        >
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable class="!w-240px">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
@@ -214,4 +211,4 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo02/index.vue b/src/views/infra/demo/demo02/index.vue
index e46c77dc..9faa8c96 100644
--- a/src/views/infra/demo/demo02/index.vue
+++ b/src/views/infra/demo/demo02/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="代码生成（树表）" url="https://doc.iocoder.cn/new-feature/tree/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -202,4 +204,4 @@ const toggleExpandAll = async () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/erp/index.vue b/src/views/infra/demo/demo03/erp/index.vue
index 8fdc7b42..a4a4e621 100644
--- a/src/views/infra/demo/demo03/erp/index.vue
+++ b/src/views/infra/demo/demo03/erp/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -18,12 +20,7 @@
         />
       </el-form-item>
       <el-form-item label="性别" prop="sex">
-        <el-select
-          v-model="queryParams.sex"
-          placeholder="请选择性别"
-          clearable
-          class="!w-240px"
-        >
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable class="!w-240px">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
@@ -240,4 +237,4 @@ const handleCurrentChange = (row) => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/inner/index.vue b/src/views/infra/demo/demo03/inner/index.vue
index 4ce6037d..9b32460a 100644
--- a/src/views/infra/demo/demo03/inner/index.vue
+++ b/src/views/infra/demo/demo03/inner/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -18,12 +20,7 @@
         />
       </el-form-item>
       <el-form-item label="性别" prop="sex">
-        <el-select
-          v-model="queryParams.sex"
-          placeholder="请选择性别"
-          clearable
-          class="!w-240px"
-        >
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable class="!w-240px">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
@@ -229,4 +226,4 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/src/views/infra/demo/demo03/normal/index.vue b/src/views/infra/demo/demo03/normal/index.vue
index 52029107..8a5dc1a9 100644
--- a/src/views/infra/demo/demo03/normal/index.vue
+++ b/src/views/infra/demo/demo03/normal/index.vue
@@ -1,4 +1,6 @@
 <template>
+  <doc-alert title="代码生成（主子表）" url="https://doc.iocoder.cn/new-feature/master-sub/" />
+
   <ContentWrap>
     <!-- 搜索工作栏 -->
     <el-form
@@ -18,12 +20,7 @@
         />
       </el-form-item>
       <el-form-item label="性别" prop="sex">
-        <el-select
-          v-model="queryParams.sex"
-          placeholder="请选择性别"
-          clearable
-          class="!w-240px"
-        >
+        <el-select v-model="queryParams.sex" placeholder="请选择性别" clearable class="!w-240px">
           <el-option
             v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
             :key="dict.value"
@@ -214,4 +211,4 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>

From 85e953b920891cd25c1dc886586bd6bcae47af7e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 18 Nov 2023 21:08:00 +0800
Subject: [PATCH 74/77] =?UTF-8?q?crm=EF=BC=9Acode=20review=20=E8=81=94?=
 =?UTF-8?q?=E7=B3=BB=E4=BA=BA=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/contact/ContactForm.vue             | 15 ++++++++++-----
 src/views/crm/contact/OwerSelect.vue              |  1 +
 src/views/crm/contact/detail/ContactBasicInfo.vue |  3 ++-
 src/views/crm/contact/detail/ContactDetails.vue   |  1 +
 src/views/crm/contact/detail/index.vue            |  2 ++
 src/views/crm/contact/index.vue                   |  8 +++++++-
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/views/crm/contact/ContactForm.vue b/src/views/crm/contact/ContactForm.vue
index 94d50299..68d0030b 100644
--- a/src/views/crm/contact/ContactForm.vue
+++ b/src/views/crm/contact/ContactForm.vue
@@ -28,6 +28,7 @@
           />
         </el-select>
       </el-form-item>
+      <!-- TODO 芋艿：封装成一个组件 -->
       <el-form-item label="客户名称" prop="customerName">
         <el-popover
           placement="bottom"
@@ -89,7 +90,6 @@
           />
         </el-select>
       </el-form-item>
-
       <el-form-item label="手机号" prop="mobile">
         <el-input v-model="formData.mobile" placeholder="请输入手机号" />
       </el-form-item>
@@ -212,6 +212,7 @@ const formRules = reactive({
 const formRef = ref() // 表单 Ref
 const ownerUserList = ref<any[]>([])
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
@@ -231,6 +232,8 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -242,7 +245,7 @@ const getList = async () => {
     loading.value = false
   }
 }
-defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
 const gotOwnerUser = (owerUserId: any) => {
   if (owerUserId !== null) {
     owerUserId.split(',').forEach((item: string) => {
@@ -254,6 +257,7 @@ const gotOwnerUser = (owerUserId: any) => {
     })
   }
 }
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -305,12 +309,13 @@ const resetForm = () => {
   formRef.value?.resetFields()
   ownerUserList.value = []
 }
+
 /** 添加/修改操作 */
+// TODO @zyna：owner？拼写要注意哈；
 const owerRef = ref()
 const openOwerForm = (type: string) => {
   owerRef.value.open(type, ownerUserList.value)
 }
-
 const owerSelectValue = (value) => {
   ownerUserList.value = value.value
   formData.value.ownerUserId = undefined
@@ -322,7 +327,7 @@ const owerSelectValue = (value) => {
     }
   })
 }
-//选择客户
+// 选择客户
 const showCustomer = ref(false)
 const openCustomerSelect = () => {
   showCustomer.value = !showCustomer.value
@@ -341,7 +346,7 @@ const selectCustomer = () => {
   formData.value.customerName = multipleSelection.value.name
   showCustomer.value = !showCustomer.value
 }
-const allContactList = ref([]) //所有联系人列表
+const allContactList = ref([]) // 所有联系人列表
 onMounted(async () => {
   allContactList.value = await ContactApi.simpleAlllist()
 })
diff --git a/src/views/crm/contact/OwerSelect.vue b/src/views/crm/contact/OwerSelect.vue
index 83dd143b..5ed0fe50 100644
--- a/src/views/crm/contact/OwerSelect.vue
+++ b/src/views/crm/contact/OwerSelect.vue
@@ -18,6 +18,7 @@
   </Dialog>
 </template>
 <script setup lang="ts">
+// TODO 芋艿：统一选择框。
 import * as UserApi from '@/api/system/user'
 import { parseBigInt } from 'jsencrypt/lib/lib/jsbn/jsbn'
 const dialogVisible = ref(false) // 弹窗的是否展示
diff --git a/src/views/crm/contact/detail/ContactBasicInfo.vue b/src/views/crm/contact/detail/ContactBasicInfo.vue
index 68e37d28..e61c747b 100644
--- a/src/views/crm/contact/detail/ContactBasicInfo.vue
+++ b/src/views/crm/contact/detail/ContactBasicInfo.vue
@@ -3,7 +3,7 @@
  * @Date: 2023-11-11 14:50:11
  * @LastEditTime: 2023-11-11 14:52:47
  * @FilePath: \yudao-ui-admin-vue3\src\views\crm\contact\detail\ContactBasicInfo.vue
- * @Description: 
+ * @Description:
 -->
 <template>
   <el-col>
@@ -17,6 +17,7 @@
   </el-col>
 </template>
 <script setup lang="ts">
+// TODO 芋艿：后面在 review 么？
 import * as ContactApi from '@/api/crm/contact'
 
 const { contact } = defineProps<{ contact: ContactApi.ContactVO }>()
diff --git a/src/views/crm/contact/detail/ContactDetails.vue b/src/views/crm/contact/detail/ContactDetails.vue
index 5091b691..9cf586b2 100644
--- a/src/views/crm/contact/detail/ContactDetails.vue
+++ b/src/views/crm/contact/detail/ContactDetails.vue
@@ -62,6 +62,7 @@
   </el-collapse>
 </template>
 <script setup lang="ts">
+// TODO 芋艿：后面在 review 么？
 import * as ContactApi from '@/api/crm/contact'
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
diff --git a/src/views/crm/contact/detail/index.vue b/src/views/crm/contact/detail/index.vue
index 3ab5778b..03bbb4e6 100644
--- a/src/views/crm/contact/detail/index.vue
+++ b/src/views/crm/contact/detail/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO 芋艿：要不要把 3 到 62 合并成一个组件 -->
   <div v-loading="loading">
     <div class="flex items-start justify-between">
       <div>
@@ -105,6 +106,7 @@ import ContactDetails from '@/views/crm/contact/detail/ContactDetails.vue'
 import ContactForm from '@/views/crm/contact/ContactForm.vue'
 import { formatDate } from '@/utils/formatTime'
 import * as CustomerApi from '@/api/crm/customer'
+// TODO 芋艿：后面在 review 么？
 
 defineOptions({ name: 'ContactDetail' })
 const { delView } = useTagsViewStore() // 视图操作
diff --git a/src/views/crm/contact/index.vue b/src/views/crm/contact/index.vue
index 3e0b3526..d81b0449 100644
--- a/src/views/crm/contact/index.vue
+++ b/src/views/crm/contact/index.vue
@@ -1,6 +1,7 @@
 <template>
   <ContentWrap>
     <!-- 搜索工作栏 -->
+    <!-- TODO zyna：筛选项，按照需求简化下 -->
     <el-form
       class="-mb-15px"
       :model="queryParams"
@@ -214,6 +215,7 @@ import * as UserApi from '@/api/system/user'
 import * as CustomerApi from '@/api/crm/customer'
 
 defineOptions({ name: 'CrmContact' })
+
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
@@ -244,6 +246,7 @@ const queryParams = reactive({
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const userList = ref<UserApi.UserVO[]>([]) // 用户列表
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -301,6 +304,8 @@ const handleExport = async () => {
     exportLoading.value = false
   }
 }
+
+// TODO @zyna：这个负责人的读取，放在后端好点
 const gotOwnerUser = (owerUserId: string) => {
   let ownerName = ''
   if (owerUserId !== null) {
@@ -315,13 +320,14 @@ const gotOwnerUser = (owerUserId: string) => {
   }
   return ownerName
 }
-/** 详情页面 */
+
 /** 打开客户详情 */
 const { push } = useRouter()
 const openDetail = (id: number) => {
   push({ name: 'CrmContactDetail', params: { id } })
 }
 
+// TODO @zyna：这个上级的读取，放在后端读取，更合适；因为可能数据量比较大
 const allContactList = ref([]) //所有联系人列表
 const allCustomerList = ref([]) //客户列表
 /** 初始化 **/

From 526172af605e97453066c6d5b970010707b72430 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 18 Nov 2023 22:11:42 +0800
Subject: [PATCH 75/77] =?UTF-8?q?crm=EF=BC=9Acode=20review=20=E5=AE=A2?=
 =?UTF-8?q?=E6=88=B7=E9=85=8D=E7=BD=AE=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crm/customer/detail/index.vue       | 13 +++++-----
 .../CustomerLimitConfDetails.vue              |  1 -
 .../CustomerLimitConfigForm.vue               |  2 ++
 .../customerLimitConfig/customerLimitConf.ts  |  1 +
 src/views/crm/customerLimitConfig/index.vue   |  4 ++--
 src/views/crm/customerPoolConf/index.vue      | 24 ++++++++-----------
 6 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/views/crm/customer/detail/index.vue b/src/views/crm/customer/detail/index.vue
index dffc49dd..392a5d35 100644
--- a/src/views/crm/customer/detail/index.vue
+++ b/src/views/crm/customer/detail/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO @wanwan：要不要把上面这一整块，搞成一个组件，就是把 下面 + Details + BasitcInfo 合并成一个 -->
   <div v-loading="loading">
     <div class="flex items-start justify-between">
       <div>
@@ -74,20 +75,20 @@
       <el-tab-pane label="客户关系" lazy> 客户关系</el-tab-pane>
       <!-- TODO wanwan 以下标签上的数量需要接口统计返回 -->
       <el-tab-pane label="联系人" lazy>
-        <template #label> 联系人<el-badge :value="12" class="item" type="primary" /> </template>
+        <template #label> 联系人<el-badge class="item" type="primary" /> </template>
         联系人
       </el-tab-pane>
       <el-tab-pane label="团队成员" lazy>
-        <template #label> 团队成员<el-badge :value="2" class="item" type="primary" /> </template>
+        <template #label> 团队成员<el-badge class="item" type="primary" /> </template>
         团队成员
       </el-tab-pane>
       <el-tab-pane label="商机" lazy> 商机</el-tab-pane>
       <el-tab-pane label="合同" lazy>
-        <template #label> 合同<el-badge :value="3" class="item" type="primary" /> </template>
+        <template #label> 合同<el-badge class="item" type="primary" /> </template>
         合同
       </el-tab-pane>
       <el-tab-pane label="回款" lazy>
-        <template #label> 回款<el-badge :value="4" class="item" type="primary" /> </template>
+        <template #label> 回款<el-badge class="item" type="primary" /> </template>
         回款
       </el-tab-pane>
       <el-tab-pane label="回访" lazy> 回访</el-tab-pane>
@@ -116,14 +117,12 @@ const { currentRoute } = useRouter() // 路由
 const id = Number(route.params.id)
 const loading = ref(true) // 加载中
 
-// 客户详情
-const customer = ref<CustomerApi.CustomerVO>({} as CustomerApi.CustomerVO)
-
 /**
  * 获取详情
  *
  * @param id
  */
+const customer = ref<CustomerApi.CustomerVO>({} as CustomerApi.CustomerVO) // 客户详情
 const getCustomerData = async (id: number) => {
   loading.value = true
   try {
diff --git a/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue b/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
index 01b7fbbb..611bdadf 100644
--- a/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
+++ b/src/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue
@@ -144,4 +144,3 @@ onMounted(() => {
   getList()
 })
 </script>
-<style scoped lang="scss"></style>
diff --git a/src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue b/src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue
index 006c1349..880106f0 100644
--- a/src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue
+++ b/src/views/crm/customerLimitConfig/CustomerLimitConfigForm.vue
@@ -83,6 +83,7 @@ const formRules = reactive({
   maxCount: [{ required: true, message: '数量上限不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+// TODO @芋艿：看看怎么搞个部门选择组件
 const deptTree = ref() // 部门树形结构
 const userTree = ref() // 用户树形结构
 
@@ -179,6 +180,7 @@ const getUserTree = async () => {
   handleUserData(userTree.value, deptUserMap)
 }
 
+// TODO @芋艿：看看怎么搞个用户选择的组件
 /**
  * 处理用户树
  *
diff --git a/src/views/crm/customerLimitConfig/customerLimitConf.ts b/src/views/crm/customerLimitConfig/customerLimitConf.ts
index 188e6ef4..1336e137 100644
--- a/src/views/crm/customerLimitConfig/customerLimitConf.ts
+++ b/src/views/crm/customerLimitConfig/customerLimitConf.ts
@@ -1,3 +1,4 @@
+// TODO 可以挪到它对应的 api.ts 文件里哈
 /**
  * 客户限制配置类型
  */
diff --git a/src/views/crm/customerLimitConfig/index.vue b/src/views/crm/customerLimitConfig/index.vue
index 48f2eac2..1bccf4d3 100644
--- a/src/views/crm/customerLimitConfig/index.vue
+++ b/src/views/crm/customerLimitConfig/index.vue
@@ -1,8 +1,9 @@
 <template>
   <!-- 列表 -->
   <ContentWrap>
-    <el-tabs tab-position="left">
+    <el-tabs>
       <el-tab-pane label="拥有客户数限制">
+        <!-- TODO @wanwan：CustomerLimitConfigList，因为它是列表哈 -->
         <CustomerLimitConfDetails :confType="LimitConfType.CUSTOMER_QUANTITY_LIMIT" />
       </el-tab-pane>
       <el-tab-pane label="锁定客户数限制">
@@ -11,7 +12,6 @@
     </el-tabs>
   </ContentWrap>
 </template>
-
 <script setup lang="ts">
 import CustomerLimitConfDetails from '@/views/crm/customerLimitConfig/CustomerLimitConfDetails.vue'
 import { LimitConfType } from '@/views/crm/customerLimitConfig/customerLimitConf'
diff --git a/src/views/crm/customerPoolConf/index.vue b/src/views/crm/customerPoolConf/index.vue
index 92467fee..5fa98711 100644
--- a/src/views/crm/customerPoolConf/index.vue
+++ b/src/views/crm/customerPoolConf/index.vue
@@ -8,6 +8,7 @@
       v-loading="formLoading"
     >
       <el-card shadow="never">
+        <!-- 操作 -->
         <template #header>
           <div class="flex items-center justify-between">
             <CardTitle title="客户公海规则设置" />
@@ -15,11 +16,12 @@
               type="primary"
               @click="onSubmit"
               v-hasPermi="['crm:customer-pool-config:update']"
-              >保存</el-button
             >
+              保存
+            </el-button>
           </div>
         </template>
-
+        <!-- 表单 -->
         <el-form-item label="客户公海规则设置" prop="enabled">
           <el-radio-group v-model="formData.enabled" class="ml-4">
             <el-radio :label="false" size="large">不启用</el-radio>
@@ -41,9 +43,7 @@
           </el-form-item>
           <div v-if="formData.notifyEnabled">
             <el-form-item>
-              提前
-              <el-input-number class="mx-2" v-model="formData.notifyDays" />
-              天提醒
+              提前 <el-input-number class="mx-2" v-model="formData.notifyDays" /> 天提醒
             </el-form-item>
           </div>
         </div>
@@ -51,12 +51,11 @@
     </el-form>
   </ContentWrap>
 </template>
-
 <script setup lang="ts">
 import * as CustomerPoolConfApi from '@/api/crm/customerPoolConf'
 import { CardTitle } from '@/components/Card'
-import { CustomerPoolConfigVO } from '@/api/crm/customerPoolConf'
 
+// TODO @wanwan：CustomerPoolConf =》 CustomerPoolConfig；另外，我们在 crm 目录下，新建一个 config 目录，然后把 customerPoolConfig 和 customerLimitConfig 都挪进
 defineOptions({ name: 'CustomerPoolConf' })
 
 const message = useMessage() // 消息弹窗
@@ -70,15 +69,12 @@ const formData = ref({
   notifyEnabled: false,
   notifyDays: 0
 })
-
 const formRules = reactive({
   enabled: [{ required: true, message: '是否启用客户公海不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
-/**
- * 获取配置
- */
+/** 获取配置 */
 const getConfig = async () => {
   try {
     formLoading.value = true
@@ -92,9 +88,7 @@ const getConfig = async () => {
   }
 }
 
-/**
- * 提交配置
- */
+/** 提交配置 */
 const onSubmit = async () => {
   // 校验表单
   if (!formRef) return
@@ -113,6 +107,7 @@ const onSubmit = async () => {
   }
 }
 
+// TODO @wanwan：el-radio-group 选择后，触发会不会更好哈；
 watch(
   () => formData.value.enabled,
   (val: boolean) => {
@@ -124,6 +119,7 @@ watch(
     }
   }
 )
+// TODO @wanwan：el-radio-group 选择后，触发会不会更好哈；
 watch(
   () => formData.value.notifyEnabled,
   (val: boolean) => {

From b1f5ad55b8f894560ea27c7ffdbe84a45fb35b5c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 19 Nov 2023 00:28:22 +0800
Subject: [PATCH 76/77] =?UTF-8?q?crm=EF=BC=9Acode=20review=20=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/crm/permission/index.ts                |  4 ++--
 src/views/crm/components/CrmPermissionForm.vue |  3 +++
 src/views/crm/components/CrmTeamList.vue       | 15 ++++++++++++---
 src/views/crm/customer/index.vue               |  4 ++--
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/api/crm/permission/index.ts b/src/api/crm/permission/index.ts
index e790c334..1292f29a 100644
--- a/src/api/crm/permission/index.ts
+++ b/src/api/crm/permission/index.ts
@@ -6,9 +6,9 @@ export interface PermissionVO {
   bizType: number | undefined // Crm 类型
   bizId: number | undefined // Crm 类型数据编号
   level: number | undefined // 权限级别
-  deptName?: string // 部门名称
+  deptName?: string // 部门名称 // 岗位名称数组 TODO @puhui999：数组？
   nickname?: string // 用户昵称
-  postNames?: string // 岗位名称数组
+  postNames?: string // 岗位名称数组 TODO @puhui999：数组？
   createTime?: Date
 }
 
diff --git a/src/views/crm/components/CrmPermissionForm.vue b/src/views/crm/components/CrmPermissionForm.vue
index 9754637b..838aa68d 100644
--- a/src/views/crm/components/CrmPermissionForm.vue
+++ b/src/views/crm/components/CrmPermissionForm.vue
@@ -19,6 +19,7 @@
       </el-form-item>
       <el-form-item label="权限级别" prop="level">
         <el-radio-group v-model="formData.level">
+          <!-- TODO @puhui999：搞个字典配置？然后这里 remove 掉负责人 -->
           <el-radio :label="CrmPermissionLevelEnum.READ">只读</el-radio>
           <el-radio :label="CrmPermissionLevelEnum.WRITE">读写</el-radio>
         </el-radio-group>
@@ -36,6 +37,7 @@ import * as PermissionApi from '@/api/crm/permission'
 import { CrmPermissionLevelEnum } from './index'
 
 defineOptions({ name: 'CrmPermissionForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 
@@ -107,6 +109,7 @@ const resetForm = (bizType: number, bizId: number) => {
 }
 onMounted(async () => {
   // 获得用户列表
+  // TODO 芋艿：用户列表的选择组件
   userOptions.value = await UserApi.getSimpleUserList()
 })
 </script>
diff --git a/src/views/crm/components/CrmTeamList.vue b/src/views/crm/components/CrmTeamList.vue
index f7591f6a..568777f6 100644
--- a/src/views/crm/components/CrmTeamList.vue
+++ b/src/views/crm/components/CrmTeamList.vue
@@ -38,6 +38,7 @@
   <CrmPermissionForm ref="crmPermissionFormRef" />
 </template>
 <script lang="ts" setup>
+// TODO @puhui999：改成 CrmPermissionList
 import { dateFormatter } from '@/utils/formatTime'
 import { ElTable } from 'element-plus'
 import * as PermissionApi from '@/api/crm/permission'
@@ -46,6 +47,9 @@ import CrmPermissionForm from './CrmPermissionForm.vue'
 import { CrmPermissionLevelEnum } from './index'
 
 defineOptions({ name: 'CrmTeam' })
+
+const message = useMessage() // 消息
+
 const props = defineProps<{
   bizType: number
   bizId: number
@@ -65,18 +69,22 @@ const list = ref<PermissionApi.PermissionVO[]>([
     createTime: new Date()
   }
 ]) // 列表的数据
+
+/** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    const res = await PermissionApi.getPermissionList({
+    const data = await PermissionApi.getPermissionList({
       bizType: props.bizType,
       bizId: props.bizId
     })
-    list.value = res
+    list.value = data
   } finally {
     loading.value = false
   }
 }
+
+// TODO @puhui999：字典格式化
 /**
  * 获得权限级别名称
  * @param level 权限级别
@@ -93,11 +101,12 @@ const getLevelName = computed(() => (level: number) => {
       break
   }
 })
+// TODO @puhui999：空行稍微注意下哈；一些注释补齐下；
 const multipleSelection = ref<PermissionApi.PermissionVO[]>([])
 const handleSelectionChange = (val: PermissionApi.PermissionVO[]) => {
   multipleSelection.value = val
 }
-const message = useMessage()
+// TODO @puhui999：一些变量命名，看看有没可能跟列表界面的 index.vue 保持他统一的风格；
 const crmPermissionFormRef = ref<InstanceType<typeof CrmPermissionForm>>()
 const handleEdit = () => {
   if (multipleSelection.value?.length === 0) {
diff --git a/src/views/crm/customer/index.vue b/src/views/crm/customer/index.vue
index b214d7c1..dea7e617 100644
--- a/src/views/crm/customer/index.vue
+++ b/src/views/crm/customer/index.vue
@@ -185,8 +185,8 @@
       @pagination="getList"
     />
   </ContentWrap>
-  <!-- TODO 方便查看效果 -->
-  <CrmTeam :biz-id="1" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />
+  <!-- TODO 方便查看效果 TODO 芋艿：先注释了，避免演示环境报错 -->
+  <!--  <CrmTeam :biz-id="1" :biz-type="CrmBizTypeEnum.CRM_CUSTOMER" />-->
 
   <!-- 表单弹窗：添加/修改 -->
   <CustomerForm ref="formRef" @success="getList" />

From f74ddf46ae518c02ebcb1900ca39e39f97b524af Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 21 Nov 2023 22:53:49 +0800
Subject: [PATCH 77/77] =?UTF-8?q?sms=EF=BC=9A=E7=A7=BB=E9=99=A4=20sendCode?=
 =?UTF-8?q?=E3=80=81sendMsg=20=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/sms/smsLog/index.ts        | 2 --
 src/views/system/sms/log/SmsLogDetail.vue | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/src/api/system/sms/smsLog/index.ts b/src/api/system/sms/smsLog/index.ts
index 3d54fac1..f9891716 100644
--- a/src/api/system/sms/smsLog/index.ts
+++ b/src/api/system/sms/smsLog/index.ts
@@ -15,8 +15,6 @@ export interface SmsLogVO {
   userType: number | null
   sendStatus: number | null
   sendTime: Date | null
-  sendCode: number | null
-  sendMsg: string
   apiSendCode: string
   apiSendMsg: string
   apiRequestId: string
diff --git a/src/views/system/sms/log/SmsLogDetail.vue b/src/views/system/sms/log/SmsLogDetail.vue
index 34c5e58e..b0d22c2d 100644
--- a/src/views/system/sms/log/SmsLogDetail.vue
+++ b/src/views/system/sms/log/SmsLogDetail.vue
@@ -37,9 +37,6 @@
       <el-descriptions-item label="发送时间">
         {{ formatDate(detailData.sendTime) }}
       </el-descriptions-item>
-      <el-descriptions-item label="发送结果">
-        {{ detailData.sendCode }} | {{ detailData.sendMsg }}
-      </el-descriptions-item>
       <el-descriptions-item label="API 发送结果">
         {{ detailData.apiSendCode }} | {{ detailData.apiSendMsg }}
       </el-descriptions-item>